Various cards styles. Cards include a title and media object. Optionally, include a “banner”.
The “Woodland” card includes location information.
<div class="card ">
<a href="#link" 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">Card With Link</h3>
<div class="card__content">
Eum labore quo necessitatibus. Illum consequuntur id et non. Aspernatur laborum autem quasi et ea et rerum perspiciatis possimus. Laborum dicta quis occaecati eum nobis. Voluptas sunt earum sequi quis. Rem doloremque et voluptas a qui inventore maxime ipsa.
</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">{{ card.meta }}</p>
{{/if}}
<div class="card__content">
{{ card.text }}
</div>
</div>
{{#if card.banner}}
<div class="card__banner">
{{ card.banner }}
</div>
{{/if}}
{{#if card.sold}}
<div class="card__banner card__banner--sold">
Sold
</div>
{{/if}}
</a>
</div>