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. Hilll Bypass, South Durwardmouth, Borders</p>
<p class="card__extra">About 3 ¼ acres</p>
<div class="card__content">
Sunt ut dolorem consectetur ipsa provident. A sint pariatur sunt velit ea ipsa iste necessitatibus ea. Quas hic unde veritatis totam tempora sequi. In molestiae dolorem porro praesentium aliquam iste sapiente quia deleniti. Dolore ut debitis quidem ut temporibus sunt in. Earum qui ut ipsum ea et ut.
</div>
</div>
<div class="card__banner">
£76,293
</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>