<article class="lakeside {{class}}">
{% if image %}
<aside class="lakeside__media">
{% include 'partials/images/thumbnail.twig' %}
</aside>
{% endif %}
<div class="lakeside__body">
<div class="lakeside__content">
{% include 'partials/title/title.twig' with title %}
{% if summary %}<p class="lakeside__summary long-primer">{{ summary }}</p>{% endif %}
</div>
<div class="lakeside__meta">
{% include 'partials/lists/list-inline.twig' with listItems %}
</div>
</div>
<a href="#" class="lakeside__link" aria-hidden="true" tabindex="-1">{{ title.title }}</a>
</article>
.lakeside {
position: relative;
display: flex;
flex-direction: column;
margin-bottom: 16px;
&__media {
img {
max-width: 100%;
}
}
&__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: space-between;
.link {
position: relative;
z-index: 1;
}
}
&__content {}
&__meta {
margin-top: 1rem;
}
&__summary {
margin-top: 0.5rem;
}
&__link {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
text-indent: 200%;
white-space: nowrap;
z-index: 0;
}
&--large {
flex-direction: row;
}
&--large .lakeside {
&__media {
@extend .col-sm-8;
}
&__body {
@extend .col-sm-4;
}
}
&--horizontal {
flex-direction: row;
}
&--horizontal .lakeside {
&__media {
@extend .col-sm-5;
+ .lakeside__body {
@extend .col-sm-7;
}
}
}
div[class^="col-"] &--horizontal .lakeside {
&__media {
padding-left: 0;
}
&__body {
padding-right: 0;
}
}
}
{
"image": true,
"title": {
"class": "lakeside__title u-bold",
"link": "#",
"title": "Some longer title with seven short - Words"
},
"listItems": {
"items": [
{
"icon": "time",
"title": "20h"
},
{
"link": {
"src": "#",
"title": "Boxing"
}
},
{
"icon": "comment-alt",
"title": "108"
}
]
}
}