<div class="card-collection-with-image-background" data-module="cardCollectionWithImageBackground">
<div class="card-collection-with-image-background__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/card-collection-with-image-background/image1.png" alt="Alt Text">
<picture class="image__container">
<source media="(max-width: 767px)" class="js-small-image" type="image/jpeg" data-srcset="/media/card-collection-with-image-background/image-mobile.png" />
<source media="(min-width: 768px) and (max-width:1319px)" class="js-medium-image" type="image/jpeg" data-srcset="/media/card-collection-with-image-background/image1.png" />
<source media="(min-width: 1320px)" class="js-large-image" type="image/jpeg" data-srcset="/media/card-collection-with-image-background/image1.png" />
<img class="js-image-lazyload js-fallback-image" data-object-fit data-src="" alt="Alt Text">
</picture>
</figure>
</div>
<div class="card-collection-with-image-background__fade"></div>
<div class="card-collection-with-image-background__content">
<div class="grid-container">
<div class="card-collection-with-image-background__eyebrow">
<div class="card-collection-with-image-background__eyebrow-title">
Sponsored by
</div>
<div class="card-collection-with-image-background__eyebrow-image">
<img src="/media/card-collection-with-image-background/ryanair-logo.svg" alt="sponsored by">
</div>
</div>
<div class="card-collection-with-image-background__cards-wrapper">
<div class="grid-x grid-margin-x card-collection-with-image-background__grid">
<div class="cell small-6 large-3 card-collection-with-image-background__cell">
<div data-module="card" class="card-standard js-card-standard js-card-generic 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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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"></p>
<div class="card-standard__inner">
<div class="card-standard__details">
<time class="card-standard__read-time js-readtime" datetime="">4 min read</time>
<h3 class="card-standard__title js-title">Bay Coast</h3>
<p class="card-standard__subtitle js-subtitle">A picturesque stretch of the Wild Atlantic Way where land and water meet.</p>
</div>
<p class="card-standard__location js-location-name"></p>
<div class="hashtags" data-module="hashtags">
<ul>
<li><span class="hashtags__link js-hashtag-link" data-tag-name="coast" onclick="window.location='#coast'" role="button">#Coast</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="cell small-6 large-3 card-collection-with-image-background__cell">
<div data-module="card" class="card-standard js-card-standard js-card-generic ">
<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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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-1551819561-c69621886139?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"></p>
<div class="card-standard__inner">
<div class="card-standard__details">
<time class="card-standard__read-time js-readtime" datetime="">4 min read</time>
<h3 class="card-standard__title js-title">Bay Coast</h3>
<p class="card-standard__subtitle js-subtitle">A picturesque stretch of the Wild Atlantic Way where land and water meet.</p>
</div>
<p class="card-standard__location js-location-name"></p>
</div>
</a>
</div>
</div>
<div class="cell small-6 large-3 card-collection-with-image-background__cell">
<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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?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">Accomodation</p>
<div class="card-standard__inner">
<h3 class="card-standard__title js-title">Generic headline for character limits</h3>
<div class="card-standard__rating">
<div class="star-rating star-rating--5-max star-rating--4-rating"></div>
<p class="card-standard__rating-text">4/5</p>
</div>
<a href="#" class="card-standard__link card-standard__link--external js-external-link js-link" target="_blank" rel="noopener" data-type="Accomodation">Visit hotel 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="coast" onclick="window.location='#coast'" role="button">#Coast</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="cell small-6 large-3 card-collection-with-image-background__cell">
<div data-module="card" class="card-standard card-standard--short-form js-card-standard js-short-form-card js-card-generic has-location ">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-collection-with-image-background" data-module="cardCollectionWithImageBackground">
<div class="card-collection-with-image-background__image">
{{> @cp-medium-image backgroundResponsiveImage}}
</div>
<div class="card-collection-with-image-background__fade"></div>
<div class="card-collection-with-image-background__content">
<div class="grid-container">
{{#if eyebrow}}
<div class="card-collection-with-image-background__eyebrow">
<div class="card-collection-with-image-background__eyebrow-title">
{{eyebrow.title}}
</div>
<div class="card-collection-with-image-background__eyebrow-image">
<img src="{{eyebrow.simpleImage.src}}" alt="{{eyebrow.simpleImage.altText}}">
</div>
</div>
{{else}}
<div class="card-collection-with-image-background__title">{{{title}}}</div>
{{/if}}
<div class="card-collection-with-image-background__cards-wrapper">
<div class="grid-x grid-margin-x card-collection-with-image-background__grid">
{{#each cards}}
<div class="cell small-6 large-3 card-collection-with-image-background__cell">
{{> @cp-card-standard}}
</div>
{{/each}}
</div>
</div>
</div>
</div>
</div>
{
"backgroundResponsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "/media/card-collection-with-image-background/image1.png",
"sources": [
{
"type": "image/jpeg",
"largeUrl": "/media/card-collection-with-image-background/image1.png",
"smallUrl": "/media/card-collection-with-image-background/image-mobile.png"
}
]
},
"eyebrow": {
"title": "Sponsored by",
"simpleImage": {
"src": "/media/card-collection-with-image-background/ryanair-logo.svg",
"altText": "sponsored by"
}
},
"title": "Great trips for golfers",
"cards": [
{
"webAppMode": true,
"likeText": "Like",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?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-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
"smallUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"cardType": "Generic",
"title": "Bay Coast",
"subtitle": "A picturesque stretch of the Wild Atlantic Way where land and water meet.",
"timeSpan": {
"text": "4 min read"
},
"link": {
"text": "",
"url": "#"
},
"tags": {
"isLarge": false,
"hashtags": [
{
"text": "#Coast",
"url": "#coast",
"openOnClick": true,
"tagName": "coast"
},
{
"text": "#Outdoors",
"url": "#outdoors",
"openOnClick": true,
"tagName": "outdoors"
}
]
}
},
{
"webAppMode": true,
"likeText": "Like",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?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-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
"smallUrl": "https://images.unsplash.com/photo-1551819561-c69621886139?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"cardType": "Generic",
"title": "Bay Coast",
"subtitle": "A picturesque stretch of the Wild Atlantic Way where land and water meet.",
"timeSpan": {
"text": "4 min read"
},
"link": {
"text": "",
"url": "#"
}
},
{
"webAppMode": true,
"likeText": "Like",
"responsiveImage": {
"altText": "Alt Text",
"lowResolutionUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?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-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
"smallUrl": "https://images.unsplash.com/photo-1574643156929-51fa098b0394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80"
}
]
},
"cardType": "ShortForm",
"pageType": "Accomodation",
"title": "Generic headline for character limits",
"starRating": {
"rating": 4,
"total": 5
},
"locationName": "Dublin",
"link": {
"text": "Visit hotel website",
"url": "#",
"isExternal": true,
"target": "_blank"
},
"detailsLink": {
"text": "View details",
"url": "#"
},
"tags": {
"isLarge": false,
"hashtags": [
{
"text": "#Coast",
"url": "#coast",
"openOnClick": true,
"tagName": "coast"
},
{
"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": "#"
}
}
]
}
There are no notes for this item.