<div class="trip-ideas-hero" data-module="tripIdeasHero" style="background-color: #0c6144">
    <div class="hero-like" data-module="heroLike">
        <button class="hero-like__button js-module-like-button" data-card-id="1338">
            Save to my board
            <span class="like-button js-heart"><span class="like-button__wave"></span></span>
        </button>
        <div class="hero-like__card-container js-card-container">
            <div class="card-featured bg-inverted js-card-generic has-tags" data-module="card" data-card-id=1338 data-longitude="-5.95577" data-latitude="54.59623">
                <a href="#" class="card-featured__anchor js-link">
                    <div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="-5.95577" data-latitude="54.59623">
                        <div class="location-marker__text">
                            <span class="location-marker__text-description js-marker-description"></span>
                            <span class="location-marker__distance js-marker-distance"></span>
                        </div>
                    </div>
                    <button class="like-button js-like-button" role="button">
                        <span class="like-button__text"></span>
                        <span class="like-button__wave"></span>
                    </button>
                    <figure class="image js-image  " data-module="imagelazy" data-is-small-image="" data-force-load="true">
                        <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;50&amp;q&#x3D;10" alt="Alt Text">
                        <picture class="image__container">
                            <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                            <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                            <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" />
                            <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1600&amp;q&#x3D;80" alt="Alt Text">
                        </picture>
                    </figure>
                    <p class="card-featured__page-type js-page-type">Accommodation</p>
                    <div class="card-featured__overlay">
                        <time class="card-featured__read-time" datetime="">14 - 18 March</time>
                        <h2 class="card-featured__title js-title">Accom example</h2>
                        <p class="card-featured__location js-location-name">Belfast</p>
                        <div class="hashtags" data-module="hashtags">
                            <ul>
                                <li><span class="hashtags__link js-hashtag-link" data-tag-name="citybreak" role="button">#Citybreak</span></li>
                                <li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" role="button">#Adventure</span></li>
                                <li><span class="hashtags__link js-hashtag-link" data-tag-name="surfing" role="button">#Surfing</span></li>
                            </ul>
                        </div>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <div class="trip-ideas-hero__image">
        <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
            <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1535479804851-93f60320e644?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;100&amp;q&#x3D;10" alt="Alt Text">
            <picture class="image__container">
                <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1535479804851-93f60320e644?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;640&amp;q&#x3D;80" />
                <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1535479804851-93f60320e644?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1535479804851-93f60320e644?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" />
                <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1516395268396-710c728531c9?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2100&amp;q&#x3D;80" alt="Alt Text">
            </picture>
        </figure>
        <div class="trip-ideas-hero__gradient" style="background: linear-gradient(180deg, rgba(0,0,0,0) 65%, #0c6144)"></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--car">
                        <span class="trip-ideas-hero__trip-duration">8 Days</span>
                        <span class="trip-ideas-hero__trip-distance">998 miles</span>
                    </div>
                    <h1 class="trip-ideas-hero__title">Belfast to Connemara</h1>
                    <div class="trip-ideas-hero__tags">
                        <div class="hashtags hashtags--has-background" data-module="hashtags">
                            <ul>
                                <li><span class="hashtags__link js-hashtag-link" data-tag-name="citybreak" onclick="window.location='#citybreak'" role="button">#Citybreak</span></li>
                                <li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" onclick="window.location='#adventure'" role="button">#Adventure</span></li>
                            </ul>
                        </div>
                    </div>
                    <div class="trip-ideas-hero__from-to">From <strong>Belfast</strong> to <strong>Cushendun</strong></div>
                    <div class="trip-ideas-hero__nearest-airport"><span class="trip-ideas-hero__nearest-airport-title">Nearest Airport</span>
                        Connemara
                    </div>
                    <div class="trip-ideas-hero__attractions">
                        <span class="trip-ideas-hero__attractions-title">Attractions</span>
                        <span class="trip-ideas-hero__attractions-list">Croagh Patrcik, Trinity College</span>
                    </div>
                </div>
            </div>
            <div class="grid-x collage-elements">
                <div class="cell large-8 collage-elements__lead">
                    <div class="video" data-module="video" data-youtube-video="true" data-autoplay="" data-hide-controls="" data-loop="" data-muted="" data-ratio="">
                        <template class="js-youtube-template">
                            <iframe src="https://www.youtube-nocookie.com/embed/398IVitaZoY?playsinline=1&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1" allowfullscreen allowtransparency allow="autoplay"></iframe>
                        </template>
                        <div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
                            <div class="video__player js-video-player"></div>
                        </div>
                    </div>
                </div>
                <div class="cell large-4">
                    <div class="grid-x">
                        <div class="cell medium-6 large-12 collage-elements__image">
                            <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/flagged/photo-1577822844639-b2a86f0f7161?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;540&amp;q&#x3D;10" alt="Alt Text">
                                <picture class="image__container">
                                    <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/flagged/photo-1577822844639-b2a86f0f7161?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                    <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/flagged/photo-1577822844639-b2a86f0f7161?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                    <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/flagged/photo-1577822844639-b2a86f0f7161?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                    <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                </picture>
                            </figure>
                        </div>
                        <div class="cell medium-6 large-12 collage-elements__image">
                            <figure class="image js-image  " data-module="imagelazy" data-is-small-image="">
                                <img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1501177205451-70e35058c1a7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;540&amp;q&#x3D;10" alt="Alt Text">
                                <picture class="image__container">
                                    <source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1501177205451-70e35058c1a7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                    <source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1501177205451-70e35058c1a7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                    <source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1501177205451-70e35058c1a7?ixlib&#x3D;rb-1.2.1&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;800&amp;q&#x3D;80" />
                                    <img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
                                </picture>
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="trip-ideas-hero" data-module="tripIdeasHero" {{#if backgroundResponsiveImage.dominantColour}}style="background-color: {{backgroundResponsiveImage.dominantColour}}"
            {{/if}}>
    {{#if likeButton}}
    {{> @cp-hero-like-button likeButton}}
    {{/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>
                    {{#if tags }}
                        <div class="trip-ideas-hero__tags">
                            {{> @cp-hashtags tags }}
                        </div>
                    {{/if}}
                    <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>
{
  "travelMethod": "car",
  "tripDuration": "8 Days",
  "tripDistance": "998 miles",
  "fromToText": "From <strong>Belfast</strong> to <strong>Cushendun</strong>",
  "nearestAirportTitle": "Nearest Airport",
  "nearestAirport": "Connemara",
  "attractionsTitle": "Attractions",
  "attractions": "Croagh Patrcik, Trinity College",
  "title": "Belfast to Connemara",
  "tags": {
    "hasBackground": true,
    "hashtags": [
      {
        "text": "#Citybreak",
        "url": "#citybreak",
        "tagName": "citybreak",
        "openOnClick": true
      },
      {
        "text": "#Adventure",
        "url": "#adventure",
        "tagName": "adventure",
        "openOnClick": true
      }
    ]
  },
  "backgroundResponsiveImage": {
    "altText": "Alt Text",
    "dominantColour": "#0c6144",
    "lowResolutionUrl": "https://images.unsplash.com/photo-1535479804851-93f60320e644?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "https://images.unsplash.com/photo-1535479804851-93f60320e644?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
        "smallUrl": "https://images.unsplash.com/photo-1535479804851-93f60320e644?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
      }
    ],
    "fallbackImageUrl": "https://images.unsplash.com/photo-1516395268396-710c728531c9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"
  },
  "responsiveImages": [
    {
      "altText": "Alt Text",
      "lowResolutionUrl": "https://images.unsplash.com/flagged/photo-1577822844639-b2a86f0f7161?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
      "sources": [
        {
          "type": "image/jpeg",
          "largeUrl": "https://images.unsplash.com/flagged/photo-1577822844639-b2a86f0f7161?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
          "smallUrl": "https://images.unsplash.com/flagged/photo-1577822844639-b2a86f0f7161?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        }
      ]
    },
    {
      "altText": "Alt Text",
      "lowResolutionUrl": "https://images.unsplash.com/photo-1501177205451-70e35058c1a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=540&q=10",
      "sources": [
        {
          "type": "image/jpeg",
          "largeUrl": "https://images.unsplash.com/photo-1501177205451-70e35058c1a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80",
          "smallUrl": "https://images.unsplash.com/photo-1501177205451-70e35058c1a7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
        }
      ]
    }
  ],
  "likeButton": {
    "buttonText": "Save to my board",
    "card": {
      "isFeatured": true,
      "cardType": "Generic",
      "responsiveImage": {
        "forceLoad": true,
        "dominantColour": "#938C7D",
        "altText": "Alt Text",
        "lowResolutionUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
        "sources": [
          {
            "type": "image/jpeg",
            "largeUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
            "smallUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
          }
        ],
        "fallbackImageUrl": "https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
      },
      "webAppMode": true,
      "likeText": "Like",
      "cardId": 1338,
      "pageType": "Accommodation",
      "title": "Accom example",
      "subtitle": "",
      "locationName": "Belfast",
      "location": {
        "longitude": -5.95577,
        "latitude": 54.59623
      },
      "timeSpan": {
        "text": "14 - 18 March"
      },
      "starRating": {
        "rating": 4,
        "total": 5
      },
      "tags": {
        "isLarge": false,
        "hashtags": [
          {
            "text": "#Citybreak",
            "url": "#citybreak",
            "tagName": "citybreak"
          },
          {
            "text": "#Adventure",
            "url": "#adventure",
            "tagName": "adventure"
          },
          {
            "text": "#Surfing",
            "url": "#surfing",
            "tagName": "surfing"
          }
        ]
      }
    }
  },
  "fullVideo": {
    "isYouTube": true,
    "video": {
      "videoId": "398IVitaZoY",
      "posterUrl": "https://via.placeholder.com/1600x900.png"
    }
  }
}

There are no notes for this item.