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">
Sit veritatis architecto atque recusandae quo. Ab minus dignissimos sunt id officia voluptatibus ipsum magnam commodi. Explicabo exercitationem unde necessitatibus optio earum dolore.
</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>