<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>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/list-card.css?cb={{cacheBuster}}">
{{/if}}
<div class="list-card">
{{#if image}}
<div class="list-card__image-wrapper">
<div class="list-card__image lazy-load-image" data-module="imageLazyLoad">
{{> @picture image }}
</div>
</div>
{{/if}}
<div class="list-card__text-container">
{{#if eyebrow}}
<span class="list-card__eyebrow" data-value="{{eyebrow}}">{{eyebrow}}</span>
{{/if}}
<h3 class="list-card__title">{{title}}</h3>
<div class="list-card__subline">{{{subline}}}</div>
<div class="list-card__cta-container">
{{> @link text=cta.text url=cta.url target=cta.target cssClasses="list-card__cta" }}
</div>
</div>
</div>
{
"theme": "default",
"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": "#"
}
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.list-card {
@extend %spacer-medium;
display: flex;
flex-wrap: wrap;
width: 100%;
&__image-wrapper {
margin-bottom: rem(32);
width: 100%;
@include breakpoint(medium) {
margin-bottom: 0;
width: 25%;
}
}
&__image {
padding-bottom: 56.5%;
width: 100%;
}
&__text-container {
margin-bottom: rem(32);
padding: 0 rem(64);
width: 75%;
}
&__date {
align-items: flex-start;
display: flex;
flex-wrap: wrap;
width: 100%;
}
&__day {
position: relative;
width: 100%;
}
&__start-time {
position: relative;
}
&__end-time {
&::before {
content: '\00a0-';
}
}
&__eyebrow,
&__location {
@extend %p--lead;
}
&__title {
@extend %heading02;
margin-bottom: rem(32);
}
&__subline,
&__description {
margin-bottom: rem(32);
}
&__cta-holder {
padding: rem(16);
position: relative;
text-align: left;
@include breakpoint(medium) {
padding: 0;
}
}
&__cta {
@extend %secondary-cta;
}
&__footer {
display: flex;
flex-direction: column;
}
&__price {
@extend %heading02;
}
}
No notes defined.