Various cards styles. Cards include a title and media object. Optionally, include a “banner”.
The “Woodland” card includes location information.
<div class="card card--blog ">
<a href="page-blog-post" class="card__link">
<div class="media media--widescreen">
<div class="media__content">
<img src="http://picsum.photos/400/225" alt="" title="" />
</div>
</div>
<div class="card__body">
<h3 class="card__title">Blog Card</h3>
<p class="card__meta">by Adonis, 18th July 2024, 97340 comments</p>
<div class="card__content">
In quos et explicabo. Ea illum facere dolorem dolorem enim. Et ea inventore nulla repellat est dolor vitae expedita velit. Et iusto ducimus quo sit temporibus sapiente. Non suscipit autem veniam nisi temporibus adipisci est quas. Sit velit magnam ut impedit ipsa ut facere.
</div>
</div>
</a>
</div>
<div class="{{modifier 'card' card.modifiers}} {{ card.classes }}">
<a href="{{ card.link }}" class="card__link">
{{ render '@media' card merge=true}}
<div class="card__body">
<h3 class="card__title">{{ titlecase card.title }}</h3>
{{#if card.meta}}
<p class="card__meta">by {{ card.meta }}</p>
{{/if}}
<div class="card__content">
{{ card.text }}
</div>
</div>
</a>
</div>