<div class="product-hero-header" data-module="productHeroHeader" data-preload="true">
<div class="product-hero-header__top-section">
<div class="grid-container product-hero-header__grid-container product-hero-header__title-container">
<div class="product-hero-header__content grid-x">
<div class="cell small-11">
<h1 class="product-hero-header__title">Cliffs of Moher</h1>
</div>
<div class="cell small-1">
<div class="hero-like" data-module="heroLike">
<button class="hero-like__button js-module-like-button" data-card-id="1338" aria-label=" - Save this article">
<span class="like-button js-heart like-button-default "><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" aria-label="Accom example">
<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 like-button--default" role="button" aria-label="Save this article">
<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=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=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=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80" />
<source media="(min-width: 768px) and (max-width:1023px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" />
<source media="(min-width: 1024px) and (max-width:1319px)" class="js-semilarge-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1528108058346-0457fb78ab00?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80" alt="Alt Text">
</picture>
</figure>
<div class="card-featured__overlay">
<p class="card-featured__page-type js-page-type">Accommodation</p>
<h2 class="card-featured__title js-title">Accom example</h2>
<time class="card-featured__read-time" datetime="">14 - 18 March</time>
<div class="card-featured__rating">
<div class="star-rating star-rating--5-max star-rating--4-rating"></div>
<p class="card-featured__rating-text">4/5</p>
</div>
<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" aria-label="#Citybreak" role="button" tabindex="0">#Citybreak</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="adventure" aria-label="#Adventure" role="button" tabindex="0">#Adventure</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="surfing" aria-label="#Surfing" role="button" tabindex="0">#Surfing</span></li>
</ul>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-container product-hero-header__grid-container product-hero-header__image-carousel-container js-image-carousel-container" data-slides-length="4">
<div class="grid-x">
<div class="cell">
<div class="image-carousel-hero " data-module="ImageCarouselHero" data-preload="true" data-image-large-preload="/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg" data-image-small-preload="/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg">
<div class="carousel" role="region" aria-label="">
<div class="carousel__slider">
<div class="carousel__slide cell hero-slide">
<div class="image-carousel-hero-slide__background">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg" />
<source media="(min-width: 768px) and (max-width:1023px)" class="js-medium-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg" />
<source media="(min-width: 1024px) and (max-width:1319px)" class="js-semilarge-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
</picture>
</figure>
</div>
<div class="image-carousel-hero-slide__inner js-item-inner">
<div class="grid-container">
<div class="grid-x grid-padding-x image-carousel-hero-slide__grid">
<div class="image-carousel-hero__info-container js-info-container">
<div class="image-carousel-hero__info-text js-info-text">
<p class="image-carousel-hero__location">Giant's Causeway, County Antrim</p>
<p class="image-carousel-hero__photo-credit">© Gareth McCormack</p>
</div>
<button class="image-carousel-hero__information-icon js-information-icon" aria-label="More information"></button>
</div>
</div>
</div>
</div>
</div>
<div class="carousel__slide cell hero-slide">
<div class="image-carousel-hero-slide__background">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="/img/image-carousel-hero/test-image.jpg" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/img/image-carousel-hero/test-image.jpg" />
<source media="(min-width: 768px) and (max-width:1023px)" class="js-medium-image" type="image/jpeg" data-srcset="/img/image-carousel-hero/test-image.jpg" />
<source media="(min-width: 1024px) and (max-width:1319px)" class="js-semilarge-image" type="image/jpeg" data-srcset="/img/image-carousel-hero/test-image.jpg" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/img/image-carousel-hero/test-image.jpg" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
</picture>
</figure>
</div>
<div class="image-carousel-hero-slide__inner js-item-inner">
<div class="grid-container">
<div class="grid-x grid-padding-x image-carousel-hero-slide__grid">
<div class="image-carousel-hero__info-container js-info-container">
<div class="image-carousel-hero__info-text js-info-text">
<p class="image-carousel-hero__location">Giant's Causeway, County Antrim</p>
<p class="image-carousel-hero__photo-credit">© Gareth McCormack</p>
</div>
<button class="image-carousel-hero__information-icon js-information-icon" aria-label="More information"></button>
</div>
</div>
</div>
</div>
</div>
<div class="carousel__slide cell hero-slide">
<div class="image-carousel-hero-slide__background">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="/img/discovery-hero/Parallax_3_Main_Donegal.jpg" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_3_Main_Donegal.jpg" />
<source media="(min-width: 768px) and (max-width:1023px)" class="js-medium-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_3_Main_Donegal.jpg" />
<source media="(min-width: 1024px) and (max-width:1319px)" class="js-semilarge-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_3_Main_Donegal.jpg" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_3_Main_Donegal.jpg" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
</picture>
</figure>
</div>
<div class="image-carousel-hero-slide__inner js-item-inner">
<div class="grid-container">
<div class="grid-x grid-padding-x image-carousel-hero-slide__grid">
<div class="image-carousel-hero__info-container image-carousel-hero__info-container--empty-photo-credit js-info-container">
<div class="image-carousel-hero__info-text js-info-text">
<p class="image-carousel-hero__location">Giant's Causeway, County Antrim</p>
</div>
<button class="image-carousel-hero__information-icon js-information-icon" aria-label="More information"></button>
</div>
</div>
</div>
</div>
</div>
<div class="carousel__slide cell hero-slide">
<div class="image-carousel-hero-slide__background">
<figure class="image js-image " data-module="imagelazy" data-is-small-image="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="/img/discovery-hero/Parallax_4_Main_Whelans.jpg" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_4_Main_Whelans.jpg" />
<source media="(min-width: 768px) and (max-width:1023px)" class="js-medium-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_4_Main_Whelans.jpg" />
<source media="(min-width: 1024px) and (max-width:1319px)" class="js-semilarge-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_4_Main_Whelans.jpg" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/img/discovery-hero/Parallax_4_Main_Whelans.jpg" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
</picture>
</figure>
</div>
<div class="image-carousel-hero-slide__inner js-item-inner">
<div class="grid-container">
<div class="grid-x grid-padding-x image-carousel-hero-slide__grid">
<div class="image-carousel-hero__info-container image-carousel-hero__info-container--empty-photo-credit js-info-container">
<div class="image-carousel-hero__info-text js-info-text">
</div>
<button class="image-carousel-hero__information-icon js-information-icon" aria-label="More information"></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="image-carousel-hero__details-container">
<div class="image-carousel-hero-controls">
<div class="image-carousel-hero-controls__button image-carousel-hero-controls__button--prev js-hero-prev"></div>
<div class="image-carousel-hero-controls__button image-carousel-hero-controls__button--next js-hero-next"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="product-hero-header" data-module="productHeroHeader" data-preload="true">
<div class="product-hero-header__top-section">
<div class="grid-container product-hero-header__grid-container product-hero-header__title-container">
<div class="product-hero-header__content grid-x">
<div class="cell small-11">
<h1 class="product-hero-header__title">{{title}}</h1>
</div>
<div class="cell small-1">
{{#if likeButton}}
{{> @cp-hero-like-button likeButton}}
{{/if}}
</div>
</div>
</div>
<div class="grid-container product-hero-header__grid-container product-hero-header__image-carousel-container js-image-carousel-container"
data-slides-length="{{imageCarouselHero.slides.length}}">
<div class="grid-x">
<div class="cell">
{{> @cp-image-carousel-hero imageCarouselHero }}
</div>
</div>
</div>
</div>
</div>
{
"title": "Cliffs of Moher",
"imageCarouselHero": {
"slides": [
{
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg",
"smallUrl": "/img/discovery-hero/Parallax_1_Main_Ballynahinch.jpg"
}
],
"location": "Giant's Causeway, County Antrim",
"photoCredit": "Gareth McCormack"
},
"button": {
"url": "#",
"text": "Time to explore"
}
},
{
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "/img/image-carousel-hero/test-image.jpg",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "/img/image-carousel-hero/test-image.jpg",
"smallUrl": "/img/image-carousel-hero/test-image.jpg"
}
],
"location": "Giant's Causeway, County Antrim",
"photoCredit": "Gareth McCormack"
},
"button": {
"url": "#",
"text": "Time to explore"
}
},
{
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "/img/discovery-hero/Parallax_3_Main_Donegal.jpg",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "/img/discovery-hero/Parallax_3_Main_Donegal.jpg",
"smallUrl": "/img/discovery-hero/Parallax_3_Main_Donegal.jpg"
}
],
"location": "Giant's Causeway, County Antrim"
},
"button": {
"url": "#",
"text": "Time to explore"
}
},
{
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "/img/discovery-hero/Parallax_4_Main_Whelans.jpg",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "/img/discovery-hero/Parallax_4_Main_Whelans.jpg",
"smallUrl": "/img/discovery-hero/Parallax_4_Main_Whelans.jpg"
}
]
},
"button": {
"url": "#",
"text": "Time to discover"
}
}
]
},
"likeButton": {
"buttonText": "",
"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",
"ariaLabel": "Aria Label"
},
{
"text": "#Adventure",
"url": "#adventure",
"tagName": "adventure",
"ariaLabel": "Aria Label"
},
{
"text": "#Surfing",
"url": "#surfing",
"tagName": "surfing",
"ariaLabel": "Aria Label"
}
]
}
}
}
}
There are no notes for this item.