<link media="all" rel="stylesheet" href="/assets/themes/default/css/event-card.css?cb=">
<div class="event-default-card">
<a href="#">
<div class="event-defaul-card__image-wrapper">
<div class="event-default-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>
<div class="event-default-card__info">
<div class="event-default-card__date">
<p class="event-default-card__day">
2020-7-4
</p>
<p class="event-default-card__start-time">
10:00
</p>
<p class="event-default-card__end-time">
12:00
</p>
</div>
<p class="event-default-card__title">
Lorem Ipsum
</p>
<p class="event-default-card__location">
London, UK
</p>
<p class="event-default-card__description">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae eius atque magnam repellat reiciendis.
</p>
</div>
<div class="event-default-card__footer">
<p class="event-default-card__cta">
<span class="secondary-cta">Click here</span>
</p>
<p class="event-default-card__price">
£31 pp
</p>
</div>
</a>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/event-card.css?cb={{cacheBuster}}">
{{/if}}
<div class="event-default-card">
{{#if cta}}
<a href="{{cta.url}}">
{{/if}}
<div class="event-defaul-card__image-wrapper">
<div class="event-default-card__image lazy-load-image" data-module="imageLazyLoad">
{{> @picture image }}
</div>
</div>
<div class="event-default-card__info">
<div class="event-default-card__date">
<p class="event-default-card__day">
{{date}}
</p>
<p class="event-default-card__start-time">
{{startTime}}
</p>
{{#if endTime}}
<p class="event-default-card__end-time">
{{endTime}}
</p>
{{/if}}
</div>
<p class="event-default-card__title">
{{title}}
</p>
{{#if location}}
<p class="event-default-card__location">
{{location}}
</p>
{{/if}}
<p class="event-default-card__description">
{{description}}
</p>
</div>
<div class="event-default-card__footer">
{{#if cta}}
<p class="event-default-card__cta">
<span class="secondary-cta">{{cta.text}}</span>
</p>
{{/if}}
{{#if price}}
<p class="event-default-card__price">
{{price}}
</p>
{{/if}}
</div>
{{#if cta}}
</a>
{{/if}}
</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": "2020-7-4",
"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": "London, UK",
"cta": {
"url": "#",
"text": "Click here"
},
"price": "£31 pp"
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.event-default-card {
@extend %spacer-small;
background-color: $color-white;
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
a {
text-decoration: none;
}
&__image {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
display: block;
flex-shrink: 0;
margin-bottom: rem(50);
padding-bottom: 56%;
width: 100%;
}
&__info {
padding: 0 rem(20);
@include breakpoint(medium) {
padding: 0 rem(40);
}
}
&__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-';
}
}
&__title {
@extend %heading02;
}
&__location {
@extend %p--lead;
}
&__description {
@extend %p--body;
}
&__footer {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-top: auto;
padding: 0 rem(20);
width: 100%;
@include breakpoint(medium) {
flex-wrap: nowrap;
padding: 0 rem(40);
}
}
&__price {
@extend %heading02;
align-self: flex-end;
}
}
No notes defined.