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 Hailie, 16th April 2026, 25961 comments</p>
<div class="card__content">
Impedit modi nulla cum. Quisquam dicta est nisi aliquam. Ratione tempore quia. In autem ut impedit aut. Vitae animi blanditiis sunt qui nemo porro. Perspiciatis quia molestiae consectetur debitis quo ea temporibus alias.
</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>