<link media="all" rel="stylesheet" href="/assets/themes/default/css/blog-featured-card.css?cb=">
<div class="blog-featured">
<div class="grid-x">
<div class="blog-featured__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="blog-featured__details">
<p class="blog-featured__category">
Category 1, Category 2
</p>
<p class="blog-featured__title">
Lorem Ipsum
</p>
<p class="blog-featured__date">
20/02/2019
</p>
<p class="blog-featured__subline">
Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum
</p>
<a href="#" data-module="cta" class="cta blog-featured__cta">
Click here
</a>
</div>
</div>
</div>
{{#if firstInstance}}
<link media="all" rel="stylesheet" href="/assets/themes/{{theme}}/css/blog-featured-card.css?cb={{cacheBuster}}">
{{/if}}
<div class="blog-featured">
<div class="grid-x">
<div class="blog-featured__image lazy-load-image" data-module="imageLazyLoad">
{{> @picture image }}
</div>
<div class="blog-featured__details">
{{#if categories}}
<p class="blog-featured__category">
{{#each categories}}{{this}}{{#unless @last}} ,{{/unless}}{{/each}}
</p>
{{/if}}
<p class="blog-featured__title">
{{title}}
</p>
<p class="blog-featured__date">
{{date}}
</p>
<p class="blog-featured__subline">
{{subline}}
</p>
{{#if cta}}
{{> @link url=cta.url text=cta.text cssClasses="blog-featured__cta" }}
{{/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"
}
]
},
"categories": [
"Category 1, Category 2"
],
"date": "20/02/2019",
"title": "Lorem Ipsum",
"subline": "Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum",
"cta": {
"url": "#",
"text": "Click here"
}
}
@import 'source/scss/01-settings/_import';
@import 'source/scss/02-tools/_import';
.blog-featured {
display: block;
&__image {
background-position: center;
background-size: cover;
min-height: 300px;
width: 100%;
@include breakpoint(large) {
min-height: 0;
width: 33.33333%;
}
}
&__details {
@include breakpoint(large) {
width: 66.66667%;
}
}
&__date {
display: block;
margin: rem(20);
}
&__title {
@extend %heading02;
margin: rem(20);
}
&__category {
display: none;
}
&__subline {
display: block;
margin: rem(20);
}
&__cta {
@extend %primary-cta;
margin: 0 0 0 rem(18);
}
}
No notes defined.