Why Choose Us Section

Complete section wrapper that combines Badge Element, Typography Element, and Experience Card pattern to showcase key features and benefits. Follows composition-first design system principles—no custom element styling.

Composition Wrapper Section Padding Centered Header 4-Column Grid

Live Preview

Full "Why Choose Us" section with badge label, centered header with intro text, and four feature cards in responsive grid.

Why Choose Us

Experience the Difference

We're not just offering accommodation – we're providing unforgettable nature experiences.

Prime Location

All properties in the heart of Kampinos National Park, surrounded by pristine nature.

Family Friendly

Safe, spacious properties with amenities designed for families with children of all ages.

BBQ & Outdoor

Every property features dedicated BBQ areas and outdoor spaces for memorable gatherings.

Secure Booking

Easy online booking with secure payments and flexible cancellation policies.

HTML Structure

Complete section markup ready to copy. Composes Badge, Typography, and Experience Card patterns. 

<section class="why-choose-us-section">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <!-- Header Section -->
    <div class="text-center mb-12 lg:mb-16">
      <span class="badge badge--primary mb-4">Why Choose Us</span>
      <h2 class="t-h2 mb-4">Experience the Difference</h2>
      <p class="t-lead t-muted max-w-2xl mx-auto" style="line-height: 1.4;">
        We're not just offering accommodation – we're providing unforgettable nature experiences.
      </p>
    </div>

    <!-- Feature Cards Grid -->
    <div class="experience-cards-grid">
      <article class="experience-card">
        <div class="experience-card__icon" aria-hidden="true">🌲</div>
        <h3 class="t-h5" style="margin-bottom: var(--spacing-2);">Prime Location</h3>
        <p class="t-body t-muted">
          All properties in the heart of Kampinos National Park, surrounded by pristine nature.
        </p>
      </article>

      <article class="experience-card">
        <div class="experience-card__icon" aria-hidden="true">👨‍👩‍👧‍👦</div>
        <h3 class="t-h5" style="margin-bottom: var(--spacing-2);">Family Friendly</h3>
        <p class="t-body t-muted">
          Safe, spacious properties with amenities designed for families with children of all ages.
        </p>
      </article>

      <article class="experience-card">
        <div class="experience-card__icon" aria-hidden="true">🔥</div>
        <h3 class="t-h5" style="margin-bottom: var(--spacing-2);">BBQ & Outdoor</h3>
        <p class="t-body t-muted">
          Every property features dedicated BBQ areas and outdoor spaces for memorable gatherings.
        </p>
      </article>

      <article class="experience-card">
        <div class="experience-card__icon" aria-hidden="true">🛡️</div>
        <h3 class="t-h5" style="margin-bottom: var(--spacing-2);">Secure Booking</h3>
        <p class="t-body t-muted">
          Easy online booking with secure payments and flexible cancellation policies.
        </p>
      </article>
    </div>
  </div>
</section>

Usage Guidelines

✅ Do

  • Use existing Badge Element (.badge .badge--primary) for section label
  • Use Typography Element classes (.t-h2, .t-lead) for heading and intro
  • Use Experience Card pattern (.experience-card) for feature cards
  • Keep intro text centered with max-w-2xl mx-auto
  • Include 4 feature cards for balanced grid layout (1→2→4 columns)
  • Add aria-hidden="true" to decorative emoji icons
  • Use semantic <section> with proper heading hierarchy
  • Adjust card content to match specific business features/benefits

❌ Don't

  • Create custom badge styles—use Badge Element
  • Add custom typography—use Typography Element classes
  • Override Experience Card styling—use pattern as-is
  • Hardcode colors—section wrapper uses design tokens only
  • Use more than 4-6 cards (disrupts grid balance)
  • Nest this section inside other sections—use as top-level block
  • Remove responsive grid behavior from .experience-cards-grid
  • Skip dark mode testing—wrapper includes theme support

Composition Details

This section wrapper composes three existing Design System patterns with minimal structural styling.

Badge Element

Section label using .badge .badge--primary from Badge Element module.

View Badge Docs →

Typography Element

Heading (.t-h2) and intro text (.t-lead) using Typography Element classes.

View Typography Docs →

Experience Card

Four feature cards using .experience-card pattern in .experience-cards-grid wrapper.

View Experience Card Docs →

Section Wrapper

Minimal .why-choose-us-section class provides vertical padding and background color only.

Styling: 5rem vertical padding (7rem on large screens), white background (light mode), darker gray (dark mode).

Related Patterns

Badge Element Typography Element Experience Card Reviews Section Color Tokens Spacing Tokens