<div class="api-events">
<div class="grid-x">
<div class="cell medium-6 large-6">
<div class="event-card__holder">
<p class="event-card__timings">10:00 - 12:00</p>
<p class="event-card__title">Event card lorem ipsum</p>
<div class="event-card__description">Here is the text for the title: Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.</div>
<p class="event-card__location">London, UK</p>
<p class="event-card__price">£9.99</p>
<p class="event-card__cta">
<a href="" class="primary-cta">Book now</a>
</p>
<p class="event-card__repeated">Also happening on:</p>
<a href="#" data-event-date="2019-9-11" class="event-card__repeated-date">2019-9-11</a>
<a href="#" data-event-date="2019-11-11" class="event-card__repeated-date">2019-11-11</a>
</div>
</div>
<div class="cell medium-6 large-6">
<div class="event-card__holder">
<p class="event-card__timings">14:00 - 17:00</p>
<p class="event-card__title">Event card Example</p>
<div class="event-card__description">Here is the text for the title: Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.</div>
<p class="event-card__location">New York, US</p>
<p class="event-card__price">$19.99</p>
<p class="event-card__cta">
<a href="" class="primary-cta">Book now</a>
</p>
<p class="event-card__repeated">Also happening on:</p>
<a href="#" data-event-date="2019-9-11" class="event-card__repeated-date">2019-9-11</a>
<a href="#" data-event-date="2019-11-11" class="event-card__repeated-date">2019-11-11</a>
</div>
</div>
<div class="cell medium-6 large-6">
<div class="event-card__holder">
<p class="event-card__timings">19:00 - 21:00</p>
<p class="event-card__title">Another event element</p>
<div class="event-card__description">Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.</div>
<p class="event-card__location">Cayman Islands</p>
<p class="event-card__price">$29.99</p>
<p class="event-card__cta">
<a href="" class="primary-cta">Book now</a>
</p>
<p class="event-card__repeated">Also happening on:</p>
<a href="#" data-event-date="2019-9-11" class="event-card__repeated-date">2019-9-11</a>
<a href="#" data-event-date="2019-11-11" class="event-card__repeated-date">2019-11-11</a>
</div>
</div>
<div class="cell medium-6 large-6">
<div class="event-card__holder">
<p class="event-card__timings">10:00 - 12:00</p>
<p class="event-card__title">Event card lorem ipsum</p>
<div class="event-card__description">Here is the text for the title: Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.</div>
<p class="event-card__location">London, UK</p>
<p class="event-card__price">£9.99</p>
<p class="event-card__cta">
<a href="" class="primary-cta">Book now</a>
</p>
<p class="event-card__repeated">Also happening on:</p>
<a href="#" data-event-date="2019-9-11" class="event-card__repeated-date">2019-9-11</a>
<a href="#" data-event-date="2019-11-11" class="event-card__repeated-date">2019-11-11</a>
</div>
</div>
</div>
</div>
<div class="api-events">
<div class="grid-x">
{{#if events}}
{{# each events}}
<div class="cell medium-6 large-6">
<div class="event-card__holder">
<p class="event-card__timings">{{startTime}} - {{endTime}}</p>
<p class="event-card__title">{{title}}</p>
<div class="event-card__description">{{{description}}}</div>
{{#if location}}<p class="event-card__location">{{location}}</p>{{/if}}
{{#if price}}<p class="event-card__price">{{price}}</p>{{/if}}
{{#if cta}}
<p class="event-card__cta">
<a href="{{cta.url}}" class="primary-cta">{{cta.text}}</a>
</p>
{{/if}}
{{#if alsoHappening}}
<p class="event-card__repeated">{{alsoHappeningLabel}}</p>
{{# each alsoHappening}}
<a href="#" data-event-date="{{this.date}}" class="event-card__repeated-date">{{this.displayDate}}</a>
{{/each}}
{{/if}}
</div>
</div>
{{/each}}
{{else}}
<p class="api-events__no-results">{{noResultsText}}</p>
{{/if}}
</div>
</div>
{
"theme": "default",
"firstInstance": true,
"events": [
{
"date": "2019-7-11",
"startTime": "10:00",
"endTime": "12:00",
"title": "Event card lorem ipsum",
"description": "Here is the text for the title: Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.",
"location": "London, UK",
"price": "£9.99",
"cta": {
"text": "Book now",
"ctaUrl": "#"
},
"alsoHappeningLabel": "Also happening on:",
"alsoHappening": [
{
"displayDate": "2019-9-11",
"date": "2019-9-11"
},
{
"displayDate": "2019-11-11",
"date": "2019-11-11"
}
]
},
{
"date": "2019-7-11",
"startTime": "14:00",
"endTime": "17:00",
"title": "Event card Example",
"description": "Here is the text for the title: Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.",
"location": "New York, US",
"price": "$19.99",
"cta": {
"text": "Book now",
"ctaUrl": "#"
},
"alsoHappeningLabel": "Also happening on:",
"alsoHappening": [
{
"displayDate": "2019-9-11",
"date": "2019-9-11"
},
{
"displayDate": "2019-11-11",
"date": "2019-11-11"
}
]
},
{
"date": "2019-7-11",
"startTime": "19:00",
"endTime": "21:00",
"title": "Another event element",
"description": "Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.",
"location": "Cayman Islands",
"price": "$29.99",
"cta": {
"text": "Book now",
"ctaUrl": "#"
},
"alsoHappeningLabel": "Also happening on:",
"alsoHappening": [
{
"displayDate": "2019-9-11",
"date": "2019-9-11"
},
{
"displayDate": "2019-11-11",
"date": "2019-11-11"
}
]
},
{
"date": "2019-7-11",
"startTime": "10:00",
"endTime": "12:00",
"title": "Event card lorem ipsum",
"description": "Here is the text for the title: Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor, Lorem ipsum sollor met sinn codor.",
"location": "London, UK",
"price": "£9.99",
"cta": {
"text": "Book now",
"ctaUrl": "#"
},
"alsoHappeningLabel": "Also happening on:",
"alsoHappening": [
{
"displayDate": "2019-9-11",
"date": "2019-9-11"
},
{
"displayDate": "2019-11-11",
"date": "2019-11-11"
}
]
}
]
}
No notes defined.