<div class="trip-ideas-hero" data-module="tripIdeasHero">
    <div class="trip-ideas-hero__image">
        <div class="trip-ideas-hero__gradient"></div>
    </div>
    <div class="trip-ideas-hero__info">
        <div class="grid-container">
            <div class="grid-x">
                <div class="cell medium-10 large-8">
                    <div class="trip-ideas-hero__trip-detail trip-ideas-hero__trip-detail--">
                        <span class="trip-ideas-hero__trip-duration"></span>
                        <span class="trip-ideas-hero__trip-distance"></span>
                    </div>
                    <h1 class="trip-ideas-hero__title"></h1>
                    <div class="trip-ideas-hero__from-to"></div>
                    <div class="trip-ideas-hero__nearest-airport"><span class="trip-ideas-hero__nearest-airport-title"></span>
                    </div>
                    <div class="trip-ideas-hero__attractions">
                        <span class="trip-ideas-hero__attractions-title"></span>
                        <span class="trip-ideas-hero__attractions-list"></span>
                    </div>
                </div>
            </div>
            <div class="grid-x collage-elements">
                <div class="cell large-8 collage-elements__lead">
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="" alt="">
                        <picture class="image__container">
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="">
                        </picture>
                    </figure>
                </div>
                <div class="cell large-4">
                    <div class="grid-x">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{{{customeditframe.editframeStart}}}
<div class="trip-ideas-hero" data-module="tripIdeasHero" {{#if backgroundResponsiveImage.dominantColour}}style="background-color: {{backgroundResponsiveImage.dominantColour}}"
            {{/if}}>
    <div class="trip-ideas-hero__image">
        {{#if backgroundResponsiveImage}}
        {{> @cp-medium-image backgroundResponsiveImage}}
        {{/if}}
        <div class="trip-ideas-hero__gradient" {{#if backgroundResponsiveImage.dominantColour}}style="background: linear-gradient(180deg, rgba(0,0,0,0) 65%, {{backgroundResponsiveImage.dominantColour}})"
    {{/if}}></div>
    </div>
    <div class="trip-ideas-hero__info">
        <div class="grid-container">
            <div class="grid-x">
                <div class="cell medium-10 large-8">
                    <div class="trip-ideas-hero__trip-detail trip-ideas-hero__trip-detail--{{travelMethod}}">
                        <span class="trip-ideas-hero__trip-duration">{{tripDuration}}</span>
                        <span class="trip-ideas-hero__trip-distance">{{tripDistance}}</span>
                    </div>
                    <h1 class="trip-ideas-hero__title">{{{title}}}</h1>
                    <div class="trip-ideas-hero__from-to">{{{fromToText}}}</div>
                    <div class="trip-ideas-hero__nearest-airport"><span class="trip-ideas-hero__nearest-airport-title">{{nearestAirportTitle}}</span>
                        {{{nearestAirport}}}
                    </div>
                    <div class="trip-ideas-hero__attractions">
                        <span class="trip-ideas-hero__attractions-title">{{attractionsTitle}}</span>
                        <span class="trip-ideas-hero__attractions-list">{{attractions}}</span>
                    </div>
                </div>
            </div>
            {{> @cp-collage-elements}}
        </div>
    </div>
</div>
{{{customeditframe.editframeStop}}}
/* No context defined for this component. */

There are no notes for this item.