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 Pierce, 20th January 2026, 43756 comments</p>
<div class="card__content">
Impedit atque cupiditate. Sit eos atque est aut nemo facere tempora. Reprehenderit ut quia quaerat. Perspiciatis rerum enim velit nobis autem.
</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>