Various cards styles. Cards include a title and media object. Optionally, include a “banner”.
The “Woodland” card includes location information.
<div class="card ">
<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 Banner</h3>
<div class="card__content">
Qui modi dolores hic aut et. Qui ratione quis id dolor vel sed eos sit accusantium. Nobis atque soluta quas voluptas eum commodi molestias. In voluptate enim magni unde quo. Autem veniam exercitationem qui libero provident.
</div>
</div>
<div class="card__banner">
Banner
</div>
</div>
{{#if card.link}}
{{ render '@block--card--link' this merge=true }}
{{else}}
<div class="{{modifier 'card' card.modifiers}} {{ card.classes }}">
{{ 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}}
</div>
{{/if}}