Reviews Section

Full-width testimonials section wrapper composing Badge element (section label), Typography system (heading), and Review Card pattern (3-card grid). Based on the canonical mockup design. This is a page section pattern, not a standalone component.

Badge Label Typography Heading 3-Column Grid Responsive

Live Preview

Complete reviews section with badge label, heading, and 3 review cards in responsive grid.

Live Preview
Reviews

What Our Guests Say

★ ★ ★ ★ ★
"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

Complete section markup ready to copy. Uses Badge element, Typography system, and Review Card pattern.

Full Section 
<section class="reviews-section">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Section Header -->
    <div class="text-center mb-12 lg:mb-16">
      <span class="badge badge--primary mb-4">
        Reviews
      </span>
      <h2 class="t-h2">
        What Our Guests Say
      </h2>
    </div>

    <!-- Reviews Grid -->
    <div class="review-cards-grid">
      <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);">
          "An absolutely magical experience! The cabin was spotless, the forest surroundings were breathtaking, and the kids had the time of their lives."
        </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">Anna K.</div>
            <time datetime="2024-11" class="t-small t-muted">November 2024</time>
          </div>
        </figcaption>
      </figure>

      <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);">
          "Perfect getaway from the city. The BBQ area was fantastic, and we spent every evening grilling and watching the sunset. Highly recommend!"
        </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">Marek T.</div>
            <time datetime="2024-10" class="t-small t-muted">October 2024</time>
          </div>
        </figcaption>
      </figure>

      <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);">
          "We've stayed at many vacation rentals, but this was exceptional. The attention to detail, the peaceful atmosphere – simply perfect."
        </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">Ewa & Piotr M.</div>
            <time datetime="2024-09" class="t-small t-muted">September 2024</time>
          </div>
        </figcaption>
      </figure>
    </div>
  </div>
</section>

Usage Guidelines

✓ Do: Use .badge .badge--primary for the section label
✓ Do: Use .t-h2 for the section heading ("What Our Guests Say")
✓ Do: Use .review-cards-grid wrapper with .review-card children (Review Card pattern)
✓ Do: Keep grid responsive: 1 column mobile → 2 tablet → 3 desktop
✓ Do: Use .reviews-section wrapper for section-level padding and background
✓ Do: Center-align the section header (badge + heading)
✓ Do: Include aria-label on star rating for accessibility
✗ Don't: Create custom card styling - always use Review Card pattern classes
✗ Don't: Create custom badge styling - use Badge element classes
✗ Don't: Hardcode typography - use Typography system classes
✗ Don't: Use fixed widths on grid items - let CSS grid handle sizing

CSS Location

Reviews Section wrapper styles are defined in a modular CSS file.

File Path 
/assets/css/ui/views/reviews-section.css

/* Imported by ui-system.css */
@import url('./ui/views/reviews-section.css');

/* Architecture Layer: Views (Patterns - Section Wrapper) */
/* Composes: Badge Element, Typography Element, Review Card Pattern */
/* Uses: tokens.css variables for all colors, spacing, backgrounds */

Component Composition

This section pattern composes 3 existing Design System parts:

Dependencies 
1. Badge Element
   - Class: .badge .badge--primary
   - Location: /assets/css/ui/elements/badge.css
   - Usage: Section label "Reviews"

2. Typography Element
   - Class: .t-h2
   - Location: /assets/css/ui/elements/typography.css
   - Usage: Section heading "What Our Guests Say"

3. Review Card Pattern
   - Classes: .review-card, .review-card__rating, .review-card__quote, etc.
   - Location: /assets/css/ui/views/review-card.css
   - Usage: 3 testimonial cards in grid

4. Review Cards Grid
   - Class: .review-cards-grid (from review-card.css)
   - Responsive grid: 1 col → 2 cols (md) → 3 cols (lg)

Related Documentation

→ Badge Element → Typography → Review Card → Colors