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. Tito Glens, South Wadeville, Cambridgeshire</p>
<p class="card__extra">Almost 4 acres</p>
<div class="card__content">
Nihil unde nihil unde possimus. Laudantium est voluptatem officiis. Vel corporis odit modi aspernatur quaerat culpa ut consequatur. Aut amet aut recusandae et dolorem et vero corporis autem. Optio fugit ut perspiciatis et quam assumenda deserunt ratione repellat. Dolorum animi harum eligendi voluptatem id.
</div>
</div>
<div class="card__banner">
£30,417
</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>