<link media="all" rel="stylesheet" href="/assets/themes/default/css/event-featured-card.css?cb=">
<div class="feature-event-card">
<div class="grid-x feature-event-card__container">
<div class="feature-event-card__image lazy-load-image" data-module="imageLazyLoad">
<picture>
<source media="(max-width: 840px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<source media="(min-width: 841px)" type="image/jpeg" srcset="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" />
<img src="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" loading="lazy" alt="">
</picture>
</div>
<div class="feature-event-card__content">
<h2 class="feature-event-card__title">Event card lorem ipsum</h2>
<p class="feature-event-card__date">2019-7-11</p>
<p class="feature-event-card__start-time">10:00</p>
<p class="feature-event-card__location">London, UK</p>
<p class="feature-event-card__price">£9.99</p>
<p class="feature-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.</p>
<p class="feature-event-card__cta">
<a href="#" class="primary-cta" role="button">Click here</a>
</p>
</div>
</div>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/event-featured-card.css?cb={{cacheBuster}}">
{{/if}}
<div class="feature-event-card">
<div class="grid-x feature-event-card__container">
<div class="feature-event-card__image lazy-load-image" data-module="imageLazyLoad">
{{> @picture image }}
</div>
<div class="feature-event-card__content">
<h2 class="feature-event-card__title">{{title}}</h2>
<p class="feature-event-card__date">{{date}}</p>
<p class="feature-event-card__start-time">{{startTime}}</p>
<p class="feature-event-card__location">{{location}}</p>
<p class="feature-event-card__price">{{price}}</p>
<p class="feature-event-card__description">{{description}}</p>
{{#if cta}}
<p class="feature-event-card__cta">
<a href="{{cta.url}}" class="primary-cta" role="button">{{cta.text}}</a>
</p>
{{/if}}
</div>
</div>
</div>
{
"theme": "default",
"firstInstance": true,
"image": {
"placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
"fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
"sources": [
{
"type": "image/jpeg",
"desktopImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg"
}
]
},
"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": {
"url": "#",
"text": "Click here"
}
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.feature-event-card {
background: $color-featured-event-card-bg;
width: 100%;
&__image {
background-position: center;
background-size: cover;
min-height: 300px;
width: 100%;
@include breakpoint(large) {
min-height: 0;
width: 33.33333%;
}
}
&__content {
padding: rem(42) rem(35);
@include breakpoint(large) {
width: 66.66667%;
}
}
&__title {
@extend %heading02;
text-transform: uppercase;
}
&__description {
margin: rem(20) 0;
}
}
No notes defined.