<div class="discovery-hero discovery-hero--has-tear" data-module="discoveryHero" data-has-tear="true" data-preload="true" data-image-large-preload="https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" data-image-small-preload="https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80">
<div class="discovery-hero__heading">
<div class="grid-container">
<div class="grid-x">
<div class="cell medium-5">
<h1 class="discovery-hero__title">Things to do</h1>
</div>
<div class="cell medium-7">
<p class="discovery-hero__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim quis</p>
<div class="discovery-hero__tags">
<div class="hashtags" 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>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="surfing" onclick="window.location='#surfing'" role="button">#Surfing</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="dublin" onclick="window.location='#dublin'" role="button">#Dublin</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-controls hero-controls--left">
<div class="hero-controls__timer js-hero-timer active">
<svg class="hero-controls__timer-circle">
<circle r="27" cx="33" cy="33"></circle>
</svg>
<div class="hero-controls__button hero-controls__button--pause js-hero-pause"></div>
<div class="hero-controls__button hero-controls__button--play js-hero-play disabled"></div>
</div>
</div>
<div class="carousel">
<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=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:1319px)" 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: 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>
<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="carousel__slider">
<div class="carousel__slide cell hero-slide hero-slide--has-tear">
<div class="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="https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&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-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80" alt="Alt Text">
</picture>
</figure>
</div>
<div class="hero-slide__overlay"></div>
<div class="hero-slide__inner">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-5 medium-offset-1 large-offset-0">
<div class="hero-slide__content">
<p class="hero-slide__eyebrow">Collection</p>
<h2 class="hero-slide__title">Paddle boarding in Ireland</h2>
<div class="hero-slide__tags">
<div class="hashtags hashtags--has-background" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" role="button">#Citybreak</span></li>
<li><span class="hashtags__link js-hashtag-link" role="button">#Adventure</span></li>
</ul>
</div>
</div>
<a href="#" class="button-p1 button-p1--with-icon hero-slide__button " role="button">View collection</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel__slide cell hero-slide hero-slide--has-tear">
<div class="hero-slide__background">
<div class="video" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true">
<template class="js-small-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline muted loop class="video__player js-video-player">
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
</video>
</div>
</template>
<template class="js-medium-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline muted loop class="video__player js-video-player">
<source src="https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278" type="video/webm" />
<source src="https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278" type="video/mp4" />
</video>
</div>
</template>
<div class="js-video-container video__container"></div>
</div>
</div>
<div class="hero-slide__overlay"></div>
<div class="hero-slide__inner">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-5 medium-offset-1 large-offset-0">
<div class="hero-slide__content">
<p class="hero-slide__eyebrow">Cycle</p>
<h2 class="hero-slide__title">Lorem Ipsum</h2>
<a href="#" class="button-p1 button-p1--with-icon hero-slide__button " role="button">Time to cycle</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel__slide cell hero-slide hero-slide--has-tear">
<div class="hero-slide__background">
<div class="video" data-autoplay="false" data-hide-controls="true" data-loop="true" data-muted="true">
<template class="js-small-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline muted loop class="video__player js-video-player">
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
<source src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4" />
</video>
</div>
</template>
<template class="js-medium-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline muted loop class="video__player js-video-player">
<source src="https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278" type="video/webm" />
<source src="https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278" type="video/mp4" />
</video>
</div>
</template>
<div class="js-video-container video__container"></div>
</div>
</div>
<div class="hero-slide__overlay"></div>
<div class="hero-slide__inner">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-5 medium-offset-1 large-offset-0">
<div class="hero-slide__content">
<p class="hero-slide__eyebrow">Walk</p>
<h2 class="hero-slide__title">Trails near Dublin: Glendalough</h2>
<a href="#" class="button-p1 button-p1--with-icon hero-slide__button " role="button">Time to explore</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="carousel__slide cell hero-slide hero-slide--has-tear">
<div class="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="https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&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-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80" alt="Alt Text">
</picture>
</figure>
</div>
<div class="hero-slide__overlay"></div>
<div class="hero-slide__inner">
<div class="grid-container">
<div class="grid-x grid-padding-x">
<div class="cell medium-5 medium-offset-1 large-offset-0">
<div class="hero-slide__content">
<p class="hero-slide__eyebrow">Discover</p>
<h2 class="hero-slide__title">There's only seven types of rain in Belfast</h2>
<a href="#" class="button-p1 button-p1--with-icon hero-slide__button " role="button">Time to discover</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="hero-controls hero-controls--right">
<div class="hero-controls__button hero-controls__button--prev js-hero-prev"></div>
<div class="hero-controls__button hero-controls__button--next js-hero-next"></div>
</div>
</div>
{{> @cp-discovery-hero isTearVariant=true}}
{
"preload": true,
"title": "Things to do",
"subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim quis",
"tags": {
"hashtags": [
{
"text": "#Citybreak",
"url": "#citybreak",
"tagName": "citybreak",
"openOnClick": true
},
{
"text": "#Adventure",
"url": "#adventure",
"tagName": "adventure",
"openOnClick": true
},
{
"text": "#Surfing",
"url": "#surfing",
"tagName": "surfing",
"openOnClick": true
},
{
"text": "#Dublin",
"url": "#dublin",
"tagName": "dublin",
"openOnClick": true
}
]
},
"slides": [
{
"eyebrow": "Collection",
"title": "Paddle boarding in Ireland",
"tags": {
"hasBackground": true,
"hashtags": [
{
"text": "#Citybreak",
"url": "#citybreak"
},
{
"text": "#Adventure",
"url": "#adventure"
}
]
},
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1545131134-9554f91b390a?ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80"
}
]
},
"button": {
"url": "#",
"text": "View collection"
}
},
{
"eyebrow": "Cycle",
"title": "Lorem Ipsum",
"backgroundResponsiveImage": null,
"fullVideo": {
"isYouTube": false,
"video": {
"videoUrls": [
{
"type": "video/webm",
"url": "https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278"
},
{
"type": "video/mp4",
"url": "https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278"
}
],
"mobileVideoUrls": [
{
"type": "video/mp4",
"url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
},
{
"type": "video/mp4",
"url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
}
],
"posterUrl": "https://via.placeholder.com/1600x900.png"
}
},
"button": {
"url": "#",
"text": "Time to cycle"
}
},
{
"eyebrow": "Walk",
"title": "Trails near Dublin: Glendalough",
"backgroundResponsiveImage": null,
"fullVideo": {
"isYouTube": false,
"video": {
"videoUrls": [
{
"type": "video/webm",
"url": "https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278"
},
{
"type": "video/mp4",
"url": "https://media.istockphoto.com/videos/aerial-of-a-lonely-beach-at-the-coastline-of-ireland-county-donegal-video-id636724278"
}
],
"mobileVideoUrls": [
{
"type": "video/mp4",
"url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
},
{
"type": "video/mp4",
"url": "https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_480_1_5MG.mp4"
}
],
"posterUrl": "https://via.placeholder.com/1600x900.png"
}
},
"button": {
"url": "#",
"text": "Time to explore"
}
},
{
"eyebrow": "Discover",
"title": "There's only seven types of rain in Belfast",
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=100&q=10",
"fallbackImageUrl": "https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1580928046254-e255588b9c42?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
}
]
},
"button": {
"url": "#",
"text": "Time to discover"
}
}
],
"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"
}
]
}
}
}
}
There are no notes for this item.