Woodlands.co.uk Component Library

Cards: With Sold Banner

Cards

Various cards styles. Cards include a title and media object. Optionally, include a “banner”.

The “Woodland” card includes location information.

<div class="card card--sold ">
    <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 Sold Banner</h3>
        <div class="card__content">
            Sint quia et aut. Autem doloribus corporis ut id et eius. Debitis nam excepturi assumenda nisi possimus sed. Ut possimus rerum dolorem neque natus ut commodi aliquid et. Itaque rerum laborum quia. Odio rerum repellat ut eos beatae consequuntur labore architecto.
        </div>
    </div>
    <div class="card__banner">
        £32,793
    </div>
    <div class="card__banner card__banner--sold">
        Sold
    </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}}