<div class="thematic-callout" data-module="thematicCallout">
<div class="callout-sidebar">
<div class="callout-sidebar__inner">
<p class="callout-sidebar__text">Next component title</p>
<div class="callout-sidebar__icon"></div>
</div>
</div>
<div class="thematic-callout__layered-image thematic-callout__layered-image--top" style="background-image: url(/media/thematic-callout/Soft_Adventure_Top_Right.png);"></div>
<div class="thematic-callout__layered-image thematic-callout__layered-image--bottom js-bottom-image" style="background-image: url(/media/thematic-callout/Soft_Adventure_Bottom_Left.png);"></div>
<div class="grid-container">
<div class="thematic-callout__grid grid-x grid-padding-x">
<div class="cell medium-4">
<div class="thematic-callout__intro js-thematic-callout-intro">
<span class="thematic-callout__eyebrow">Eyebrow text</span>
<h2 class="thematic-callout__title">Soft adventure</h2>
<p class="thematic-callout__subtitle thematic-callout__subtitle--with-margin-bottom">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo sit amet elit at posuere. Aenean in vulputate libero. Proin semper justo odio, nec rutrum leo mollis non.</p>
</div>
</div>
<div class="cell medium-8 large-7 thematic-callout__card-grid-cell">
<div class="thematic-callout__card-grid js-card-grid grid-x grid-margin-x">
<div class="thematic-callout__card cell medium-6">
<div data-module="card" class="card-standard card-standard--editorial card-standard--editorial-video js-editorial-card js-card-standard js-card-generic has-location has-tags" data-card-id=1234 data-longitude="53.31969" data-latitude="-7.70727">
<div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="53.31969" data-latitude="-7.70727">
<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>
<div class="card-standard__media-atom-container">
<div class="rich-media-atom" data-module="richMediaAtom" data-isYouTube="false" data-isInsideTransform="true">
<div class="rich-media-atom__inner js-atom-inner">
<div class="rich-media-atom__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-1543748624-61a84917186f?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-1543748624-61a84917186f?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-1543748624-61a84917186f?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-1543748624-61a84917186f?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="" alt="Alt Text">
</picture>
</figure>
</div>
<div class="rich-media-atom__image-overlay js-image-overlay"></div>
<div class="rich-media-atom__content">
<p class="rich-media-atom__title js-title">A guide to Galway</p>
<p class="rich-media-atom__subtitle js-subtitle">Georgia, Galway tour guide</p>
</div>
<div class="rich-media-atom__button js-button">
<div class="rich-media-atom__icon rich-media-atom__icon--play"></div>
</div>
</div>
<div class="rich-media-atom__modal js-modal">
<div class="rich-media-atom__modal-inner">
<a href="#" class="rich-media-atom__modal-close js-modal-close "></a>
<div class="video" data-autoplay="false" data-hide-controls="false" data-loop="false" data-muted="false">
<template class="js-small-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video controls playsinline 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 controls playsinline class="video__player js-video-player">
<source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm" />
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4" />
</video>
</div>
</template>
<div class="js-video-container video__container"></div>
<div class="hashtags" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<p class="card-standard__location js-location-name">Dublin</p>
<div class="hashtags" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="thematic-callout__card cell medium-6">
<div data-module="card" class="card-standard card-standard--editorial card-standard--editorial-video js-editorial-card js-card-standard js-card-generic has-location has-tags" data-card-id=1234 data-longitude="53.31969" data-latitude="-7.70727">
<div class="location-marker js-location-marker" data-module="locationMarker" data-longitude="53.31969" data-latitude="-7.70727">
<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>
<div class="card-standard__media-atom-container">
<div class="rich-media-atom" data-module="richMediaAtom" data-isYouTube="false" data-isInsideTransform="true">
<div class="rich-media-atom__inner js-atom-inner">
<div class="rich-media-atom__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-1543748624-61a84917186f?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-1543748624-61a84917186f?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-1543748624-61a84917186f?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-1543748624-61a84917186f?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="" alt="Alt Text">
</picture>
</figure>
</div>
<div class="rich-media-atom__image-overlay js-image-overlay"></div>
<div class="rich-media-atom__content">
<p class="rich-media-atom__title js-title">A guide to Galway</p>
<p class="rich-media-atom__subtitle js-subtitle">Georgia, Galway tour guide</p>
</div>
<div class="rich-media-atom__button js-button">
<div class="rich-media-atom__icon rich-media-atom__icon--play"></div>
</div>
</div>
<div class="rich-media-atom__modal js-modal">
<div class="rich-media-atom__modal-inner">
<a href="#" class="rich-media-atom__modal-close js-modal-close "></a>
<div class="video" data-autoplay="false" data-hide-controls="false" data-loop="false" data-muted="false">
<template class="js-small-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video controls playsinline class="video__player js-video-player">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.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 controls playsinline class="video__player js-video-player">
<source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4" type="video/mp4" />
</video>
</div>
</template>
<div class="js-video-container video__container"></div>
<div class="hashtags" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
</ul>
</div>
</div>
</div>
</div>
</div>
<p class="card-standard__location js-location-name">Dublin</p>
<div class="hashtags" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="thematic-callout__card cell medium-6">
<div class="card-featured card-featured--campaign js-card-generic" data-module="card">
<a href="#" target="_blank" rel="noopener" alt="Visit The West Coast" class="card-featured__anchor js-link">
<button class="like-button js-like-button" role="button">
<span class="like-button__text">Like</span>
<span class="like-button__wave"></span>
</button>
<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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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="" alt="Alt Text">
</picture>
</figure>
<div class="video" data-module="video" data-autoplay="true" data-hide-controls="true" data-loop="true" data-muted="">
<template class="js-small-video-template">
<div class="js-video-container video__container" data-poster-url="https://via.placeholder.com/1600x900.png">
<video playsinline autoplay muted loop class="video__player js-video-player">
<source src="/media/campaign-card/GreenButtonCard.mp4" type="video/mp4" />
<source src="/media/campaign-card/GreenButtonCard.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 autoplay muted loop class="video__player js-video-player">
<source src="/media/campaign-card/GreenButtonCard.mp4" type="video/mp4" />
</video>
</div>
</template>
<div class="js-video-container video__container"></div>
</div>
<p class="card-featured__campaign-tag js-page-type">Push The Green Button</p>
<div class="card-featured__overlay">
<h2 class="card-featured__title js-title">Explore the Wild Atlantic Way</h2>
<p class="card-featured__location js-location-name">Dublin</p>
<div class="hashtags hashtags--has-background" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="wildAtlandticWay" onclick="window.location='#wildAtlanticWay'" role="button">#WildAtlanticWay</span></li>
</ul>
</div>
</div>
</a>
</div>
</div>
<div class="thematic-callout__card cell medium-6">
<div class="card-featured bg-inverted js-card-generic has-tags" data-module="card">
<a href="#" target="_blank" rel="noopener" class="card-featured__anchor js-link">
<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="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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-1549918864-48ac978761a4?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="" alt="Alt Text">
</picture>
</figure>
<p class="card-featured__page-type js-page-type">Event</p>
<div class="card-featured__overlay">
<time class="card-featured__read-time" datetime="">14 - 18 March</time>
<h2 class="card-featured__title js-title">Generic headline for character limits</h2>
<p class="card-featured__location js-location-name">Dublin</p>
<div class="hashtags" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
</ul>
</div>
</div>
</a>
</div>
</div>
<div class="thematic-callout__card cell medium-6">
<div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic has-location has-tags">
<div class="card-standard__image-container">
<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="">
<img class="image__lowres js-image-lazyload" data-object-fit data-src="https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10" alt="">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1502700807168-484a3e7889d0?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-1502700807168-484a3e7889d0?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-1502700807168-484a3e7889d0?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="" alt="">
</picture>
</figure>
</div>
<p class="card-standard__page-type js-page-type">Attraction</p>
<div class="card-standard__inner">
<h3 class="card-standard__title js-title">Generic headline for character limits</h3>
<a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Attraction">Visit attraction website</a>
<p class="card-standard__location js-location-name">Dublin</p>
<a href="#" class="card-standard__link card-standard__details-link card-standard__link--bold js-details-link">View details</a>
<div class="hashtags" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
</ul>
</div>
</div>
</div>
</div>
<div class="thematic-callout__card cell medium-6">
<div data-module="card" class="card-standard js-card-standard js-card-generic has-location has-tags">
<button class="like-button js-like-button" role="button">
<span class="like-button__text"></span>
<span class="like-button__wave"></span>
</button>
<template class="js-small-image-template">
<div class="card-standard__small-image-container js-small-image-container">
<figure class="image js-image js-small-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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10" alt="">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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="" alt="">
</picture>
</figure>
</div>
</template>
<a href="#" class="card-standard__anchor js-link">
<div class="card-standard__image-container js-image-container">
<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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10" alt="">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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="" alt="">
</picture>
</figure>
</div>
<p class="card-standard__page-type js-page-type">Article</p>
<div class="card-standard__inner">
<div class="card-standard__details">
<time class="card-standard__read-time js-readtime" datetime="">6 min read</time>
<h3 class="card-standard__title js-title">Gardens in Ireland have a magic edge</h3>
<p class="card-standard__subtitle js-subtitle"></p>
</div>
<p class="card-standard__location js-location-name">Waterford</p>
<div class="hashtags" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
</ul>
</div>
</div>
</a>
</div>
</div>
<div class="thematic-callout__card cell medium-6">
<div data-module="card" class="card-standard js-card-standard js-card-generic has-location has-tags">
<button class="like-button js-like-button" role="button">
<span class="like-button__text"></span>
<span class="like-button__wave"></span>
</button>
<template class="js-small-image-template">
<div class="card-standard__small-image-container js-small-image-container">
<figure class="image js-image js-small-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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10" alt="">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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="" alt="">
</picture>
</figure>
</div>
</template>
<a href="#" class="card-standard__anchor js-link">
<div class="card-standard__image-container js-image-container">
<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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10" alt="">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?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="" alt="">
</picture>
</figure>
</div>
<p class="card-standard__page-type js-page-type">Article</p>
<div class="card-standard__inner">
<div class="card-standard__details">
<time class="card-standard__read-time js-readtime" datetime="">6 min read</time>
<h3 class="card-standard__title js-title">Gardens in Ireland have a magic edge</h3>
<p class="card-standard__subtitle js-subtitle"></p>
</div>
<p class="card-standard__location js-location-name">Waterford</p>
<div class="hashtags" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="gardens" onclick="window.location='#gardens'" role="button">#Gardens</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="outdoors" onclick="window.location='#outdoors'" role="button">#Outdoors</span></li>
</ul>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="thematic-callout__background js-thematic-callout-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="/media/thematic-callout/Soft_Adventure_Background.jpg" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/thematic-callout/Soft_Adventure_Background.jpg" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/thematic-callout/Soft_Adventure_Background.jpg" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/thematic-callout/Soft_Adventure_Background.jpg" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="/media/thematic-callout/Soft_Adventure_Background.jpg" alt="Alt Text">
</picture>
</figure>
<div class="thematic-callout__hashtags grid-container">
<div class="grid-x grid-padding-x thematic-callout__hashtags-grid">
<div class="cell">
<div class="hashtags hashtags--with-nudge-image" 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>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="romance" onclick="window.location='#romance'" role="button">#Romance</span></li>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="sport" onclick="window.location='#sport'" role="button">#Sport</span></li>
</ul>
<div class="hashtags__nudge-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="/media/nudges/more-what-you-love-bottom-right.svg" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/svg+xml" data-srcset="/media/nudges/more-what-you-love-bottom-right.svg" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/svg+xml" data-srcset="/media/nudges/more-what-you-love-bottom-right.svg" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/svg+xml" data-srcset="/media/nudges/more-what-you-love-bottom-right.svg" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="/media/nudges/more-what-you-love-bottom-right.svg" alt="Alt Text">
</picture>
</figure>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="thematic-callout{{#if isRightAligned}} thematic-callout--right-aligned{{/if}}"
data-module="thematicCallout">
{{#if nextThematicCallout}}
{{> @cp-callout-sidebar nextThematicCallout}}
{{/if}}
{{#if topSimpleImage}}
<div class="thematic-callout__layered-image thematic-callout__layered-image--top"
style="background-image: url({{topSimpleImage.src}});"></div>
{{/if}}
{{#if bottomSimpleImage}}
<div class="thematic-callout__layered-image thematic-callout__layered-image--bottom js-bottom-image"
style="background-image: url({{bottomSimpleImage.src}});"></div>
{{/if}}
<div class="grid-container">
<div class="thematic-callout__grid grid-x grid-padding-x">
<div class="cell medium-4{{#if isRightAligned}} large-offset-1{{/if}}">
<div class="thematic-callout__intro js-thematic-callout-intro">
{{#if eyebrow}}
<span class="thematic-callout__eyebrow">{{eyebrow}}</span>
{{/if}}
<h2 class="thematic-callout__title">{{title}}</h2>
<p class="thematic-callout__subtitle{{#if topTags.nudgeResponsiveImage}} thematic-callout__subtitle--with-margin-bottom{{/if}}">{{subtitle}}</p>
</div>
</div>
<div class="cell medium-8 large-7 thematic-callout__card-grid-cell">
<div class="thematic-callout__card-grid js-card-grid grid-x grid-margin-x">
{{#each cards}}
<div class="thematic-callout__card cell medium-6">
{{#ifEquals cardType "Collection"}}
{{> @cp-collection-card cssClasses="collection-card__item--featured"}}
{{/ifEquals}}
{{#ifNotEquals cardType "Collection"}}
{{> @card-standard-or-featured}}
{{/ifNotEquals}}
</div>
{{/each}}
</div>
</div>
</div>
</div>
{{#if backgroundResponsiveImage}}
<div class="thematic-callout__background js-thematic-callout-background">
{{> @cp-medium-image backgroundResponsiveImage}}
{{#if tags }}
<div class="thematic-callout__hashtags grid-container">
<div class="grid-x grid-padding-x thematic-callout__hashtags-grid">
<div class="cell">
{{> @cp-hashtags tags }}
</div>
</div>
</div>
{{/if}}
</div>
{{/if}}
</div>
{
"isRightAligned": false,
"nextThematicCallout": "Next component title",
"eyebrow": "Eyebrow text",
"title": "Soft adventure",
"subtitle": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur commodo sit amet elit at posuere. Aenean in vulputate libero. Proin semper justo odio, nec rutrum leo mollis non.",
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "/media/thematic-callout/Soft_Adventure_Background.jpg",
"fallbackImageUrl": "/media/thematic-callout/Soft_Adventure_Background.jpg",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "/media/thematic-callout/Soft_Adventure_Background.jpg",
"smallUrl": "/media/thematic-callout/Soft_Adventure_Background.jpg"
}
]
},
"topSimpleImage": {
"src": "/media/thematic-callout/Soft_Adventure_Top_Right.png"
},
"bottomSimpleImage": {
"src": "/media/thematic-callout/Soft_Adventure_Bottom_Left.png"
},
"cards": [
{
"webAppMode": true,
"presentationMode": "video",
"cardType": "EditorialCard",
"cardId": 1234,
"is360Video": false,
"title": "A guide to Galway",
"subtitle": "Georgia, Galway tour guide",
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?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-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
}
]
},
"fullVideo": {
"isYouTube": false,
"video": {
"videoUrls": [
{
"type": "video/webm",
"url": "http://techslides.com/demos/sample-videos/small.webm"
},
{
"type": "video/mp4",
"url": "http://techslides.com/demos/sample-videos/small.mp4"
}
],
"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"
}
},
"location": {
"latitude": -7.70727,
"longitude": 53.31969
},
"locationName": "Dublin",
"tags": {
"isLarge": false,
"hashtags": [
{
"text": "#Gardens",
"url": "#gardens",
"openOnClick": true,
"tagName": "gardens"
},
{
"text": "#Outdoors",
"url": "#outdoors",
"openOnClick": true,
"tagName": "outdoors"
}
]
}
},
{
"webAppMode": true,
"presentationMode": "video",
"cardType": "EditorialCard",
"cardId": 1234,
"is360Video": false,
"title": "A guide to Galway",
"subtitle": "Georgia, Galway tour guide",
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?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-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80",
"smallUrl": "https://images.unsplash.com/photo-1543748624-61a84917186f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=640&q=80"
}
]
},
"fullVideo": {
"isYouTube": false,
"video": {
"videoUrls": [
{
"type": "video/mp4",
"url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
}
],
"mobileVideoUrls": [
{
"type": "video/mp4",
"url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
},
{
"type": "video/mp4",
"url": "http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
}
],
"posterUrl": "https://via.placeholder.com/1600x900.png"
}
},
"location": {
"latitude": -7.70727,
"longitude": 53.31969
},
"locationName": "Dublin",
"tags": {
"isLarge": false,
"hashtags": [
{
"text": "#Gardens",
"url": "#gardens",
"openOnClick": true,
"tagName": "gardens"
},
{
"text": "#Outdoors",
"url": "#outdoors",
"openOnClick": true,
"tagName": "outdoors"
}
]
}
},
{
"cardType": "Campaign",
"webAppMode": true,
"likeText": "Like",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?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-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
"smallUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"fullVideo": {
"isYouTube": false,
"video": {
"videoUrls": [
{
"type": "video/mp4",
"url": "/media/campaign-card/GreenButtonCard.mp4"
}
],
"mobileVideoUrls": [
{
"type": "video/mp4",
"url": "/media/campaign-card/GreenButtonCard.mp4"
},
{
"type": "video/mp4",
"url": "/media/campaign-card/GreenButtonCard.mp4"
}
],
"posterUrl": "https://via.placeholder.com/1600x900.png"
}
},
"campaignTag": "Push The Green Button",
"title": "Explore the Wild Atlantic Way",
"locationName": "Dublin",
"link": {
"text": "Visit The West Coast",
"url": "#",
"target": "_blank"
},
"tags": {
"isLarge": false,
"hasBackground": true,
"hashtags": [
{
"text": "#WildAtlanticWay",
"url": "#wildAtlanticWay",
"openOnClick": true,
"tagName": "wildAtlandticWay"
}
]
}
},
{
"webAppMode": true,
"likeText": "Like",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?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-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
"smallUrl": "https://images.unsplash.com/photo-1549918864-48ac978761a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"cardType": "ShortForm",
"pageType": "Event",
"title": "Generic headline for character limits",
"locationName": "Dublin",
"timeSpan": {
"text": "14 - 18 March"
},
"link": {
"text": "Visit event website",
"url": "#",
"isExternal": true,
"target": "_blank"
},
"detailsLink": {
"text": "View details",
"url": "#"
},
"isFeatured": true,
"tags": {
"isLarge": false,
"hashtags": [
{
"text": "#Gardens",
"url": "#gardens",
"openOnClick": true,
"tagName": "gardens"
},
{
"text": "#Outdoors",
"url": "#outdoors",
"openOnClick": true,
"tagName": "outdoors"
}
]
}
},
{
"webAppMode": true,
"likeText": "Like",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1502700807168-484a3e7889d0?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-1502700807168-484a3e7889d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
"smallUrl": "https://images.unsplash.com/photo-1502700807168-484a3e7889d0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"cardType": "ShortForm",
"pageType": "Attraction",
"title": "Generic headline for character limits",
"locationName": "Dublin",
"link": {
"text": "Visit attraction website",
"url": "#",
"isExternal": true,
"target": "_blank"
},
"detailsLink": {
"text": "View details",
"url": "#"
},
"tags": {
"isLarge": false,
"hashtags": [
{
"text": "#Gardens",
"url": "#gardens",
"openOnClick": true,
"tagName": "gardens"
},
{
"text": "#Outdoors",
"url": "#outdoors",
"openOnClick": true,
"tagName": "outdoors"
}
]
}
},
{
"webAppMode": true,
"likeText": "Like",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
"smallUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"cardType": "Generic",
"pageType": "Article",
"title": "Gardens in Ireland have a magic edge",
"locationName": "Waterford",
"timeSpan": {
"text": "6 min read"
},
"link": {
"text": "",
"url": "#"
},
"tags": {
"isLarge": false,
"hashtags": [
{
"text": "#Gardens",
"url": "#gardens",
"openOnClick": true,
"tagName": "gardens"
},
{
"text": "#Outdoors",
"url": "#outdoors",
"openOnClick": true,
"tagName": "outdoors"
}
]
}
},
{
"webAppMode": true,
"likeText": "Like",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?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-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
"smallUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"cardType": "Generic",
"pageType": "Article",
"title": "Gardens in Ireland have a magic edge",
"locationName": "Waterford",
"timeSpan": {
"text": "6 min read"
},
"link": {
"text": "",
"url": "#"
},
"tags": {
"isLarge": false,
"hashtags": [
{
"text": "#Gardens",
"url": "#gardens",
"openOnClick": true,
"tagName": "gardens"
},
{
"text": "#Outdoors",
"url": "#outdoors",
"openOnClick": true,
"tagName": "outdoors"
}
]
}
}
],
"tags": {
"isLarge": false,
"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
},
{
"text": "#Romance",
"url": "#romance",
"tagName": "romance",
"openOnClick": true
},
{
"text": "#Sport",
"url": "#sport",
"tagName": "sport",
"openOnClick": true
}
],
"nudgeResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "/media/nudges/more-what-you-love-bottom-right.svg",
"fallbackImageUrl": "/media/nudges/more-what-you-love-bottom-right.svg",
"sources": [
{
"type": "image/svg+xml",
"largeUrl": "/media/nudges/more-what-you-love-bottom-right.svg",
"smallUrl": "/media/nudges/more-what-you-love-bottom-right.svg"
}
]
}
},
"topTags": {
"isLarge": false,
"nudgeResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "/media/nudges/love-great-flavours.svg",
"fallbackImageUrl": "/media/nudges/love-great-flavours.svg",
"sources": [
{
"type": "image/svg+xml",
"largeUrl": "/media/nudges/love-great-flavours.svg",
"smallUrl": "/media/nudges/love-great-flavours.svg"
}
]
}
}
}
There are no notes for this item.