Various cards styles. Cards include a title and media object. Optionally, include a “banner”.
The “Woodland” card includes location information.
<div class="card card--woodland ">
<a href="page-woodland" 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">Woodland Card</h3>
<p class="card__meta">NR. Dedric Parkway, Kesslertown, Cambridgeshire</p>
<p class="card__extra">About 5 ½ acres</p>
<div class="card__content">
Modi cum unde expedita aut laboriosam quia quibusdam est. Consequatur nam magni explicabo aut nemo. Explicabo dolore excepturi. Ullam est nisi non animi explicabo sint consectetur debitis ipsam. Consequatur aliquam sunt blanditiis asperiores sequi nisi. Ipsum eum adipisci velit in porro porro consequatur.
</div>
</div>
<div class="card__banner">
£15,086
</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}}
{{#if card.extra}}
<p class="card__extra">{{ card.extra }}</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>