→ Marcus Hendricks
→ Holiday Package Card with Travel Details

Holiday Package Card with Travel Details

A responsive holiday package card displaying destination details, pricing, and booking options for travel websites.

This Example is contributed by Marcus Hendricks, on 30-Mar-2025. It is responsive. similar terms for this example are Card Design,Cards

Card E-commerce Travel Tourism

Author Marcus Hendricks

Fork Fullscreen

<div class="holiday-card">
  <div class="holiday-card-image">
    <img src="https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Beach Resort">
    <span class="holiday-card-badge">POPULAR</span>
  </div>
  <div class="holiday-card-content">
    <h2 class="holiday-card-title">Tropical Beach Getaway</h2>
    <div class="holiday-card-location">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
        <path d="M8 16s6-5.686 6-10A6 6 0 0 0 2 6c0 4.314 6 10 6 10zm0-7a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"/>
      </svg>
      <span>Bali, Indonesia</span>
    </div>
    <div class="holiday-card-features">
      <div class="feature">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71V3.5z"/>
          <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z"/>
        </svg>
        <span>7 Days</span>
      </div>
      <div class="feature">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M2 6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V6a1 1 0 0 0-1-1H4zm13 2.383-4.708 2.825L15 11.105V7.383zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741zM1 11.105l4.708-2.897L1 5.383v5.722z"/>
        </svg>
        <span>All Inclusive</span>
      </div>
      <div class="feature">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
          <path d="M6 .278a.768.768 0 0 1 .08.858 7.208 7.208 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277.527 0 1.04-.055 1.533-.16a.787.787 0 0 1 .81.316.733.733 0 0 1-.031.893A8.349 8.349 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.752.752 0 0 1 6 .278z"/>
        </svg>
        <span>4.8 Rating</span>
      </div>
    </div>
    <p class="holiday-card-description">Experience paradise with pristine beaches, luxury accommodations, and unforgettable sunsets. Package includes flights, transfers, and daily activities.</p>
    <div class="holiday-card-price-row">
      <div class="holiday-card-price">
        <span class="price-value">$1,299</span>
        <span class="price-person">per person</span>
      </div>
      <button class="holiday-card-button">Book Now</button>
    </div>
  </div>
</div>

Related Examples

Interactive Hotel Room Overview Grid
A clean and responsive hotel room overview displaying various room types with key features, pricing, and booking options for travelers.

Author:
Sofia Martinez

9 months ago
Elegant Pricing Cards for Premium Service Plans

Author:
Alexandra Sinclair

9 months ago
Feature Cards with Hover Effects

Author:
Sammy Rodriguez

9 months ago
Responsive Feature Grid Cards for Modern Websites
Showcase your product's key features with these responsive grid layout cards. Perfect for highlighting services, benefits, or product specifications on landing pages.

Author:
Morgan

10 months ago
Clean Tiered Pricing Table with Monthly and Annual Options
A clean, responsive pricing table that showcases tiered plans with toggle between monthly and annual billing options.

Author:
Alexandra Sinclair

9 months ago
Feature Showcase Grid with Icons
A responsive grid layout showcasing key features with accompanying icons to enhance visual appeal and improve user engagement.

Author:
Anonymous

9 months ago
Featured Tour Package Card
Showcase your best tour packages with this visually appealing and informative card. Highlight key details, pricing, and destinations to attract potential travelers.

Author:
Prajwal Hallale

10 months ago
Product Showcase Card

Author:
Jordan McKenzie

9 months ago
Feature Card Grid Layout
A clean, responsive grid layout showcasing product or service features with icon illustrations and descriptive text.

Author:
MD. Tayyub

9 months ago
CTA Card
Stunning gradient service cards with smooth hover animations and interactive elements, perfect for showcasing features or services.

Author:
Prajwal Hallale

10 months ago
Three-Tier Pricing Cards
Clear and attractive pricing cards that showcase your product tiers with a modern design, perfect for SaaS and subscription-based businesses.

Author:
Jordan McKenzie

10 months ago
Tiered Pricing Cards for Subscription Plans

Author:
Anonymous

9 months ago

Didn't find component you were looking for?

Search from 500+ components