Review Card

Testimonial card component for displaying guest reviews and feedback. Includes 5-star rating, quote text, author name with avatar, and date. Based on the canonical mockup design.

Star Rating Author Avatar Date Metadata Responsive Grid

Live Preview: Single Card

Default review card with all sections.

★ ★ ★ ★ ★
"An absolutely magical experience! The cabin was spotless, the forest surroundings were breathtaking, and the kids had the time of their lives."
👩
Anna K.

Live Preview: Reviews Grid

Multiple review cards in a responsive grid (3 columns on desktop, 2 on tablet, 1 on mobile).

★ ★ ★ ★ ★
"An absolutely magical experience! The cabin was spotless, the forest surroundings were breathtaking, and the kids had the time of their lives."
👩
Anna K.
★ ★ ★ ★ ★
"Perfect getaway from the city. The BBQ area was fantastic, and we spent every evening grilling and watching the sunset. Highly recommend!"
👨
Marek T.
★ ★ ★ ★ ★
"We've stayed at many vacation rentals, but this was exceptional. The attention to detail, the peaceful atmosphere – simply perfect."
👩
Ewa & Piotr M.

HTML Structure

Single review card markup ready to copy and customize. 

<figure class="review-card">
  <div class="review-card__rating" aria-label="5 out of 5 stars">
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
    <span>★</span>
  </div>
  <blockquote class="review-card__quote t-body t-muted" style="line-height: var(--line-height-relaxed);">
    "Your guest's quote goes here. Keep it authentic and highlight positive aspects of their stay."
  </blockquote>
  <figcaption class="review-card__author-section">
    <div class="review-card__avatar">👩</div>
    <div class="review-card__author-info">
      <div class="t-body t-semibold">Guest Name</div>
      <time datetime="YYYY-MM" class="t-small t-muted">Month Year</time>
    </div>
  </figcaption>
</figure>

Grid Wrapper

Wrap multiple review cards in a responsive grid container. 

<div class="review-cards-grid">
  <figure class="review-card">
    <!-- First review card -->
  </figure>

  <figure class="review-card">
    <!-- Second review card -->
  </figure>

  <figure class="review-card">
    <!-- Third review card -->
  </figure>
</div>

Usage Guidelines

✅ Do
  • Use semantic HTML: <figure>, <blockquote>, <figcaption>
  • Include proper star ratings (1-5 stars as needed)
  • Add aria-label to rating div for accessibility
  • Use emoji avatars that match the guest (👩 for female, 👨 for male, 👨‍👩‍👧 for family, etc.)
  • Include the month/year the review was submitted
  • Use <time datetime="YYYY-MM"> for semantic date markup
  • Keep quotes authentic and varied in length
  • Test visibility in both light and dark modes
  • Display 3 cards per row on desktop for visual balance
❌ Don't
  • Use generic placeholder quotes - reviews should be genuine feedback
  • Override card styling with inline styles
  • Use fake or inconsistent star ratings
  • Include negative or unclear reviews without context
  • Make cards wider or add custom spacing - use the grid container
  • Remove the avatar section - it adds personal touch and visual interest
  • Use non-semantic HTML like <div> for ratings
  • Display too many review cards without pagination (consider 3-6 cards)
  • Forget to escape special characters in quotes

Responsive Behavior

CSS Location

All styling for this component is defined in: /assets/css/ui/views/review-card.css

This file is imported by /assets/css/ui-system.css 

@import url('./ui/views/review-card.css');

Related

Colors Typography Offer Cards Guest Layout