<link media="all" rel="stylesheet" href="/assets/themes/default/css/list-card-collection.css?cb=">
<div class="list-card-collection list-card-collection--4-cards" data-module="cardCollection">
<div class="grid-container">
<div class="grid-x grid-padding-x list-card-collection__cards">
<div class="cell list-card-collection__card-wrapper list-card-collection__card-wrapper-- js-card-wrapper">
<link media="all" rel="stylesheet" href="/assets/themes/default/css/list-card.css?cb=">
<div class="list-card">
<div class="list-card__image-wrapper">
<div class="list-card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="image/png" srcset="https://dummyimage.com/768x1200/000000/545454.png" />
<source media="(min-width: 841px)" type="image/png" srcset="https://dummyimage.com/1600x900/f0f0f0/545454.png" />
<img src="https://dummyimage.com/1600x900/f0f0f0/545454.png" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="list-card__text-container">
<h3 class="list-card__title">Title No 1</h3>
<div class="list-card__subline">This the search result 1 text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="list-card__cta-container">
<a href="#" data-module="cta" class="cta list-card__cta">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="cell list-card-collection__card-wrapper list-card-collection__card-wrapper-- js-card-wrapper">
<div class="list-card">
<div class="list-card__image-wrapper">
<div class="list-card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="image/png" srcset="https://dummyimage.com/768x1200/000000/545454.png" />
<source media="(min-width: 841px)" type="image/png" srcset="https://dummyimage.com/1600x900/f0f0f0/545454.png" />
<img src="https://dummyimage.com/1600x900/f0f0f0/545454.png" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="list-card__text-container">
<h3 class="list-card__title">Title No 1</h3>
<div class="list-card__subline">This the search result 1 text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="list-card__cta-container">
<a href="#" data-module="cta" class="cta list-card__cta">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="cell list-card-collection__card-wrapper list-card-collection__card-wrapper-- js-card-wrapper">
<div class="list-card">
<div class="list-card__image-wrapper">
<div class="list-card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="image/png" srcset="https://dummyimage.com/768x1200/000000/545454.png" />
<source media="(min-width: 841px)" type="image/png" srcset="https://dummyimage.com/1600x900/f0f0f0/545454.png" />
<img src="https://dummyimage.com/1600x900/f0f0f0/545454.png" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="list-card__text-container">
<h3 class="list-card__title">Title No 1</h3>
<div class="list-card__subline">This the search result 1 text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="list-card__cta-container">
<a href="#" data-module="cta" class="cta list-card__cta">
Find out more
</a>
</div>
</div>
</div>
</div>
<div class="cell list-card-collection__card-wrapper list-card-collection__card-wrapper-- js-card-wrapper">
<div class="list-card">
<div class="list-card__image-wrapper">
<div class="list-card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="image/png" srcset="https://dummyimage.com/768x1200/000000/545454.png" />
<source media="(min-width: 841px)" type="image/png" srcset="https://dummyimage.com/1600x900/f0f0f0/545454.png" />
<img src="https://dummyimage.com/1600x900/f0f0f0/545454.png" loading="lazy" alt="Image Alt Text">
</picture>
</div>
</div>
<div class="list-card__text-container">
<h3 class="list-card__title">Title No 1</h3>
<div class="list-card__subline">This the search result 1 text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
<div class="list-card__cta-container">
<a href="#" data-module="cta" class="cta list-card__cta">
Find out more
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/list-card-collection.css?cb={{cacheBuster}}">
{{/if}}
{{#if cards.length}}
<div class="list-card-collection list-card-collection--{{cards.length}}-cards{{#if numberOfColumns}} list-card-collection--{{numberOfColumns}}-columns{{/if}}" data-module="cardCollection">
<div class="grid-container">
<div class="grid-x grid-padding-x list-card-collection__cards">
{{#each cards}}
<div class="cell list-card-collection__card-wrapper list-card-collection__card-wrapper--{{type}} js-card-wrapper">
{{> @list-card theme=../theme }}
</div>
{{/each}}
</div>
</div>
</div>
{{/if}}
{
"theme": "default",
"firstInstance": true,
"cards": [
{
"firstInstance": true,
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
"sources": [
{
"type": "image/png",
"desktopImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
"mobileImageUrl": "https://dummyimage.com/768x1200/000000/545454.png"
}
]
},
"title": "Title No 1",
"subline": "This the search result 1 text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"cta": {
"text": "Find out more",
"url": "#"
}
},
{
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
"sources": [
{
"type": "image/png",
"desktopImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
"mobileImageUrl": "https://dummyimage.com/768x1200/000000/545454.png"
}
]
},
"title": "Title No 1",
"subline": "This the search result 1 text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"cta": {
"text": "Find out more",
"url": "#"
}
},
{
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
"sources": [
{
"type": "image/png",
"desktopImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
"mobileImageUrl": "https://dummyimage.com/768x1200/000000/545454.png"
}
]
},
"title": "Title No 1",
"subline": "This the search result 1 text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"cta": {
"text": "Find out more",
"url": "#"
}
},
{
"image": {
"altText": "Image Alt Text",
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
"sources": [
{
"type": "image/png",
"desktopImageUrl": "https://dummyimage.com/1600x900/f0f0f0/545454.png",
"mobileImageUrl": "https://dummyimage.com/768x1200/000000/545454.png"
}
]
},
"title": "Title No 1",
"subline": "This the search result 1 text: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
"cta": {
"text": "Find out more",
"url": "#"
}
}
]
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.list-card-collection {
@extend %spacer-large;
.grid-layout & {
// Override the spacer (margin bottom) if the component is used as a grid editor
// rather than a fix component (such as related pages)
margin-bottom: 0;
}
}
No notes defined.