Offer Card

Primary component for displaying property listings. Used throughout the application for offer discovery and browsing. Supports image, rating, features, and pricing.

Default Featured Loading

Default Offer Card

Standard offer card showing property image, title, location, key features, and pricing.

Live Preview
Mountain Cottage ✓ Available 🔥 Featured
May 1-4 · 3 nights min.

Mountain Cottage Retreat

Cozy cottage with stunning mountain views, perfect for families and pet-friendly stays. BBQ area and fire pit included for unforgettable evenings.

🏠 House A or B 👥 up to 6 guests 🔥 BBQ included
from 1 650 PLN
per stay
HTML Structure 
<div class="offer-card">
  <!-- Image with left and right badges -->
  <div class="offer-card-image">
    <img src="image.jpg" alt="Property">
    <span class="badge badge--overlay badge--absolute-tl">
      ✓ Available
    </span>
    <span class="badge badge--accent badge--absolute-tr">
      🔥 Featured
    </span>
  </div>

  <!-- Content -->
  <div class="offer-card-content">
    <!-- Meta (Date/Availability) -->
    <div class="offer-card-meta t-small t-medium">
      <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">...</svg>
      <span>May 1-4 · 3 nights min.</span>
    </div>

    <!-- Title -->
    <h3 class="offer-card-title t-card-title">Mountain Cottage Retreat</h3>

    <!-- Description -->
    <p class="offer-card-description t-body t-muted">Cozy cottage with mountain views, perfect for families and pet-friendly stays.</p>

    <!-- Tags -->
    <div class="badge-group">
      <span class="badge badge--muted t-small">🏠 House A or B</span>
      <span class="badge badge--muted t-small">👥 up to 6 guests</span>
      <span class="badge badge--muted t-small">🔥 BBQ included</span>
    </div>

    <!-- Footer: Price & Action -->
    <div class="offer-card-footer">
      <div>
        <div class="flex items-baseline gap-1">
          <span class="t-small t-muted">from</span>
          <span class="t-lead t-bold">1 650 PLN</span>
        </div>
        <span class="t-xs t-muted block">per stay</span>
      </div>
      <button class="btn btn--primary">Check Availability</button>
    </div>
  </div>
</div>

Grid Layout

Offer cards are typically displayed in a responsive grid. Adjust columns based on viewport.

Live Preview
Cottage Retreat ✓ Available
May-Aug 2026

Cottage Retreat

Cozy cottage with mountain views, perfect for families and peaceful getaways.

🏠 House A 👥 up to 6
from 1 200 PLN
per stay
Garden Manor 🔥 Popular
Jun-Sep 2026

Garden Manor

Beautiful estate with manicured gardens, perfect for summer family celebrations.

🏠 Both houses 👥 up to 12
from 2 800 PLN
per stay
Forest Lodge
Year-round

Forest Lodge

Tranquil forest retreat with modern amenities and nature activities nearby.

🏠 House B 📶 WiFi
from 900 PLN
per stay
Grid Wrapper 
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
  <!-- Repeat offer-card for each property -->
</div>

/* Breakpoints: */
/* - 1 column on mobile (default) */
/* - 2 columns on medium screens (768px+) */
/* - 3 columns on large screens (1024px+) */

Usage Guidelines

✓ Do: Use 4:3 aspect ratio for card images (responsive)
✓ Do: Use Typography Element classes (.t-card-title, .t-small .t-muted, .t-lead .t-bold for prices, .t-xs .t-muted for "per stay")
✓ Do: Use .t-small .t-medium for meta information (dates, availability)
✓ Do: Include price, title, and key features for context
✓ Do: Highlight featured properties with badges
✓ Do: Use real Unsplash images with proper optimization
✓ Do: Use .btn .btn--primary for card action buttons (default size)
✗ Don't: Create custom typography classes for cards - use Typography Element classes
✗ Don't: Use placeholder or low-quality images
✗ Don't: Truncate titles without line-clamping
✗ Don't: Forget dark mode variants on all elements
✗ Don't: Create custom button classes (e.g., .offer-card-cta) - always reuse Button Element
✗ Don't: Mix button styles - card buttons follow primary button design

CSS Location

Offer Card styles are defined in a modular CSS file for reuse across the app.

File Path 
/assets/css/ui/views/offer-card.css

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

/* Architecture Layer: Views (Patterns) */
/* Composes: Badge Element, Button Element */
/* Uses: tokens.css variables for all colors, spacing, typography */

Related Documentation

→ Colors → Buttons → Offers Page