<div class="card-collection" data-module="cardCollection" data-nba-instruction="" data-sitecore-recommendation="">
<section class="grid-x grid-margin-x">
<h2 class="card-collection__title cell">Mixed Cards - Long Form</h2>
<div class="card-collection__item cell medium-6 large-3">
<div data-module="card" class="card-standard js-card-standard js-card-generic has-location card-standard--destination ">
<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">Destination</p>
<div class="card-standard__inner">
<div class="card-standard__details">
<h3 class="card-standard__title js-title">Gardens in Ireland have a magic edge</h3>
<p class="card-standard__subtitle js-subtitle">Progressively supply state of the art partnerships with 24/7 e-services. Interactively incentivize.</p>
</div>
<p class="card-standard__location js-location-name">Dublin</p>
</div>
</a>
</div>
</div>
<div class="card-collection__item cell medium-6 large-3">
<div data-module="card" class="card-standard card-standard--long-form js-card-standard js-card-generic has-location ">
<a href="#" class="card-standard__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>
<div class="card-standard__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-1549918864-48ac978761a4?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-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="">
</picture>
</figure>
</div>
<p class="card-standard__page-type js-page-type">Event</p>
<div class="card-standard__inner">
<div class="card-standard__details">
<time class="card-standard__read-time js-readtime" datetime="">14 - 18 March</time>
<h3 class="card-standard__title js-title">Generic headline for character limits</h3>
<p class="card-standard__subtitle js-subtitle">Nulla varius eget diam a volutpat. In neque enim, aliquet ac eleifend vitae, tincidunt vel elit.</p>
</div>
<p class="card-standard__location js-location-name">Dublin</p>
</div>
</a>
</div>
</div>
<div class="card-collection__item cell medium-6 large-3">
<div data-module="card" class="card-standard card-standard--long-form js-card-standard js-card-generic has-location ">
<a href="#" class="card-standard__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>
<div class="card-standard__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-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">
<div class="card-standard__details">
<h3 class="card-standard__title js-title">Generic headline for character limits</h3>
<p class="card-standard__subtitle js-subtitle">Nulla varius eget diam a volutpat. In neque enim, aliquet ac eleifend vitae, tincidunt vel elit.</p>
<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>
</div>
<p class="card-standard__location js-location-name">Dublin</p>
</div>
</a>
</div>
</div>
<div class="card-collection__item cell medium-6 large-3">
<div data-module="card" class="card-standard card-standard--long-form js-card-standard js-card-generic has-location ">
<a href="#" class="card-standard__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>
<div class="card-standard__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-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">
<div class="card-standard__details">
<h3 class="card-standard__title js-title">Generic headline for character limits</h3>
<p class="card-standard__subtitle js-subtitle">Nulla varius eget diam a volutpat. In neque enim, aliquet ac eleifend vitae, tincidunt vel elit.</p>
</div>
<p class="card-standard__location js-location-name">Dublin</p>
</div>
</a>
</div>
</div>
</section>
</div>
<div class="card-collection" data-module="cardCollection" data-nba-instruction="{{nbaInstruction}}" data-sitecore-recommendation="{{sitecoreRecommendation}}" >
<section class="grid-x grid-margin-x">
{{#if title}}<h2 class="card-collection__title cell">{{{title}}}</h2>{{/if}}
{{#if subtitle}}
<div class="cell">
<p class="card-collection__subtitle">{{{subtitle}}}</p>
</div>
{{/if}}
{{#each cards}}
<div class="card-collection__item cell medium-6 large-3">
{{> @cp-card-standard hideTeaser=true}}
</div>
{{/each}}
{{#if button}}
<div class="cell card-collection__button">
{{> @cp-button-primary url=button.url target=button.target text=button.text}}
</div>
{{/if}}
</section>
</div>
{
"title": "Mixed Cards - Long Form",
"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": "Destination",
"pageType": "Destination",
"title": "Gardens in Ireland have a magic edge",
"subtitle": "Progressively supply state of the art partnerships with 24/7 e-services. Interactively incentivize.",
"locationName": "Dublin",
"timeSpan": {
"text": ""
},
"link": {
"text": "",
"url": "#"
}
},
{
"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": "LongForm",
"pageType": "Event",
"title": "Generic headline for character limits",
"subtitle": "Nulla varius eget diam a volutpat. In neque enim, aliquet ac eleifend vitae, tincidunt vel elit.",
"locationName": "Dublin",
"timeSpan": {
"text": "14 - 18 March"
},
"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": "LongForm",
"pageType": "Accomodation",
"title": "Generic headline for character limits",
"subtitle": "Nulla varius eget diam a volutpat. In neque enim, aliquet ac eleifend vitae, tincidunt vel elit.",
"starRating": {
"rating": 4,
"total": 5
},
"locationName": "Dublin",
"link": {
"text": "",
"url": "#"
}
},
{
"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": "LongForm",
"pageType": "Attraction",
"title": "Generic headline for character limits",
"subtitle": "Nulla varius eget diam a volutpat. In neque enim, aliquet ac eleifend vitae, tincidunt vel elit.",
"locationName": "Dublin",
"link": {
"text": "",
"url": "#"
}
}
]
}
There are no notes for this item.