Experience Card

Feature or benefit card component for highlighting key experiences, amenities, or selling points. Includes centered icon, title, and descriptive text. Based on the canonical mockup design.

Centered Layout Icon Display Flexible Height Responsive Grid

Live Preview: Single Card

Default experience card with icon, title, and text.

Prime Location

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

Live Preview: Experience Cards Grid

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

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

Single experience card markup ready to copy and customize. 

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

Grid Wrapper

Wrap multiple experience cards in a responsive grid container (4 cols desktop, 2 cols tablet, 1 col mobile). 

<div class="experience-cards-grid">
  <article class="experience-card">
    <!-- First experience card -->
  </article>

  <article class="experience-card">
    <!-- Second experience card -->
  </article>

  <article class="experience-card">
    <!-- Third experience card -->
  </article>

  <article class="experience-card">
    <!-- Fourth experience card -->
  </article>
</div>

Usage Guidelines

✅ Do
  • Use semantic HTML: wrap each card in <article>
  • Mark decorative icons with aria-hidden="true"
  • Use meaningful emoji or SVG icons that represent the feature
  • Use Typography Element classes (.t-h5 for titles, .t-body .t-muted for descriptions)
  • Keep titles concise (2–3 words when possible)
  • Keep descriptions clear and benefit-focused (2–3 sentences max)
  • Use the grid wrapper class for automatic responsive layout
  • Test visibility in both light and dark modes
❌ Don't
  • Use non-semantic HTML like <div> for the card container
  • Forget aria-hidden="true" on decorative icons
  • Add links or buttons directly inside cards (if needed, make card interactive separately)
  • Override card styling with inline styles
  • Use overly long titles or descriptions
  • Change the icon size or background color with custom CSS
  • Add borders or shadows beyond the default styling
  • Mix left-aligned and center-aligned cards in the same grid

Responsive Behavior

CSS Location

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

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

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

Related

Colors Typography Offer Cards Guest Layout