<article class="card-with-image">
<div class="card-with-image__content">
<div class="news-card-content">
<div class="news-card-content__date">
November 19, 2021
</div>
<a class="news-card-content__title" href="#">
Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna
</a>
</div>
</div>
<div class="card-with-image__image">
<figure class="image ">
<picture class="image__picture">
<source srcset="https://placekitten.com/320/228" type="image/webp">
<source srcset="https://placekitten.com/320/228" type="image/jpeg">
<img class="image__image" loading="lazy" type="image/jpeg" src="https://placekitten.com/320/228" alt="" height="" width="">
</picture>
</figure>
</div>
</article>
{% embed 'templates/card-with-image/card-with-image.twig' %}
{% block text %}
<div class="news-card-content">
<div class="news-card-content__date">
{{ post.publishDate }}
</div>
<a class="news-card-content__title" href="{{ post.permalink }}">
{{ post.title }}
</a>
</div>
{% endblock %}
{% block image %}
{% include 'partials/image/image.twig' with {
image: post.featuredImage,
cropWidth: 880,
cropHeight: 560,
background: 'dark',
} %}
{% endblock %}
{% endembed %}
{
"post": {
"title": "Mauris nibh felis adipiscing varius adipiscing in lacinia vel tellus urna",
"permalink": "#",
"publishDate": "November 19, 2021",
"featuredImage": {
"src": "https://placekitten.com/320/228",
"altText": "Adorable Kitten"
}
}
}
.news-card-content
--titleColor charcoal
--detailColor charcoal
padding 24px
&__title
@extends $linkHeadline3
color var(--titleColor)
margin-bottom 4px
&__date
@extends $labelSmall
color var(--detailColor)
No notes defined.