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">
Libero accusamus itaque minima vel totam exercitationem. Qui aut necessitatibus a. Harum tempora eum blanditiis odit dignissimos voluptatem fuga atque. Voluptas molestiae ut voluptas consectetur quam quasi quia culpa perferendis. Molestiae reprehenderit sint labore ipsa consectetur.
</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>