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 Alvina, 6th May 2023, 61405 comments</p>
<div class="card__content">
Perspiciatis ea non quae in odit eveniet doloremque quasi. Non numquam eius possimus rerum aliquid eveniet qui et. Quibusdam nisi quas iure consequuntur at. Sed dolor nulla eaque culpa at omnis necessitatibus qui. Pariatur et est natus quisquam totam quae minus. Rem doloremque a suscipit.
</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>