Tour Package Highlight Hero Template

Showcase your signature tour package with a hero that blends beautiful imagery with essential details.

This template is ideal for tour operators, presenting the most important information in a clean design next to an inspiring photo.

Screenshot of a hero section advertising a specific travel tour package.

Get Source Code Preview

About the Tour Package Highlight Hero

When selling a tour, customers need key information at a glance to make a decision. This hero section is structured to provide that clarity. It uses a clean, two-column layout to highlight a specific travel package, giving equal importance to a beautiful, representative photograph and the practical details of the trip. It's a highly effective way to convert interest into bookings.

Features

Detail-Oriented: Presents important tour information like duration, location, and price in a scannable format.
Image Showcase: A large image area to display a compelling photo from the tour.
Responsive Two-Column Layout: A balanced layout on desktops that gracefully stacks on mobile devices.
Semantic Details List: Uses a description list (dl) for tour stats, which is semantically correct.

Code Breakdown

This component is split into CSS for your site's head and HTML for the body.

The layout of the .tour-package-container is controlled by CSS Grid, with display: grid and a responsive column setup. On wide screens, grid-template-columns: repeat(2, 1fr) creates the two columns. For mobile, it defaults to a single-column stack. An img element holds the tour photo, and we use object-fit: cover to ensure it fills the space without distortion.

The tour statistics are structured with a dl element. We make this a flex container (display: flex) so that the individual detail items can be arranged neatly in a row. Each of these items is a div containing a dt (term) and dd (description).

Code

<style>
    :root {
        --tph-padding: 3rem 1.5rem;
        --tph-bg-color: #f0fdfa; /* A light mint-cream */
        --tph-content-bg: #ffffff;
        --tph-text-color: #3f3f46;
        --tph-headline-color: #0c4a6e;
        --tph-price-color: #0c4a6e;
        --tph-cta-bg: #0e7490;
        --tph-cta-hover-bg: #155e75;
        --tph-cta-text-color: #ffffff;
        --tph-max-width: 1024px;
    }
    .tour-package-hero {
        box-sizing: border-box;
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        background-color: var(--tph-bg-color);
        padding: var(--tph-padding);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .tour-package-hero * {
         box-sizing: border-box;
    }
    .tour-package-container {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        max-width: var(--tph-max-width);
        width: 100%;
        box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        border-radius: 12px;
        overflow: hidden;
    }
    .tph-image-wrapper .image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block; /* Removes bottom space */
    }
    .tph-content {
        padding: 2rem 2.5rem;
        background-color: var(--tph-content-bg);
    }
    .tph-content .title {
        color: var(--tph-headline-color);
        font-size: clamp(1.8rem, 5vw, 2.5rem);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 1rem;
    }
    .tph-content .description {
        color: var(--tph-text-color);
        margin: 0 0 1.5rem;
        line-height: 1.6;
    }
    .tph-details {
        margin: 0 0 2rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem 2rem;
        padding-top: 1.5rem;
        border-top: 1px solid #e5e7eb;
    }
    .tph-detail-item {
        color: var(--tph-text-color);
    }
    .tph-detail-item dt {
        font-size: 0.85rem;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .tph-detail-item dd {
        margin: 0.25rem 0 0 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--tph-price-color);
    }
    .tph-cta {
        display: inline-block;
        background-color: var(--tph-cta-bg);
        color: var(--tph-cta-text-color);
        padding: 0.9rem 2rem;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        width: 100%;
        transition: background-color 0.3s ease;
    }
    .tph-cta:hover {
        background-color: var(--tph-cta-hover-bg);
    }

@media(min-width: 768px) {
        .tour-package-container {
            grid-template-columns: repeat(2, 1fr);
        }
        .tph-image-wrapper {
            order: 2; /* Image on the right */
        }
    }
</style>

<section class="tour-package-hero">
    <div class="tour-package-container">

<div class="tph-content">
            <h1 class="title">The Azure Coast Expedition</h1>
            <p class="description">Embark on a scenic journey through historic coastal villages, sampling local cuisine and soaking in breathtaking ocean vistas.</p>
            <dl class="tph-details">
                <div class="tph-detail-item">
                    <dt>Duration</dt>
                    <dd>7 Days</dd>
                </div>
                <div class="tph-detail-item">
                    <dt>Group Size</dt>
                    <dd>Max 12</dd>
                </div>
                 <div class="tph-detail-item">
                    <dt>Price</dt>
                    <dd>$2,499</dd>
                </div>
            </dl>
            <a href="#" role="button" class="tph-cta">View Full Itinerary</a>
        </div>
        
    </div>
</section>

View Output