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 card--woodland--map " data-longitude="0.551742" data-latitude="51.1283">
<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 Map Card <span class="card__price">£49,118</span></h3>
<p class="card__meta">NR. Bashirian Fall, New Elsefort, Avon</p>
<p class="card__extra">Almost 4 acres</p>
<a href="page-woodland" class="card__more">See more details</a>
</div>
</div>
<div class="{{modifier 'card' card.modifiers}} {{ card.classes }}" data-longitude="{{ card.coordinates.longitude }}" data-latitude="{{ card.coordinates.latitude }}">
{{ render '@media' card merge=true }}
<div class="card__body">
<h3 class="card__title">{{ titlecase card.title }} <span class="card__price">{{ titlecase card.banner }}</span></h3>
{{#if card.meta}}
<p class="card__meta">{{ card.meta }}</p>
{{/if}}
{{#if card.extra}}
<p class="card__extra">{{ card.extra }}</p>
{{/if}}
<a href="{{ card.link }}" class="card__more">See more details</a>
</div>
</div>