<div class="listing__content">
<link media="all" rel="stylesheet" href="/assets/themes//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">
<span class="list-card__eyebrow" data-value="page">page</span>
<h3 class="list-card__title">DATA Title No 1</h3>
<div class="list-card__subline">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 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">DATA Title No 2</h3>
<div class="list-card__subline">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 class="list-card list-card--event">
<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">
<div class="list-card__date">
<p class="list-card__day">
2020-7-4
</p>
<p class="list-card__start-time">
10:00
</p>
<p class="list-card__end-time">
12:00
</p>
</div>
<p class="list-card__location">
New York, USA
</p>
<h3 class="list-card__title">Lorem Ipsum</h3>
<p class="list-card__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.
</p>
<div class="list-card__footer">
<p class="event-default-card__price">
£31 pp
</p>
<div class="list-card__cta-container">
<a href="#" data-module="cta" class="cta list-card__cta">
Click here
</a>
</div>
</div>
</div>
</div>
</div>
<div class="listing__content">
{{#if cards}}
{{#each cards}}
{{#ifEquals type "events"}}
{{> @event-list-card }}
{{/ifEquals}}
{{#ifEquals type "page"}}
{{> @list-card }}
{{/ifEquals}}
{{#ifEquals type "property"}}
{{> @property-list-card }}
{{/ifEquals}}
{{/each}}
{{else}}
<p class="search-listing__no-results">{{noResultsText}}</p>
{{/if}}
</div>
{
"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": "DATA Title No 1",
"eyebrow": "page",
"subline": "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": "#"
},
"type": "page"
},
{
"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": "DATA Title No 2",
"subline": "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": "#"
},
"type": "page"
},
{
"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"
}
]
},
"date": "2020-7-4",
"type": "events",
"startTime": "10:00",
"endTime": "12:00",
"title": "Lorem Ipsum",
"description": "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.",
"location": "New York, USA",
"cta": {
"url": "#",
"text": "Click here"
},
"price": "£31 pp"
}
]
}
No notes defined.