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">
            Error rerum nostrum autem asperiores eum dolor autem. Reiciendis esse similique quod. Reiciendis optio nulla aut dolore ab numquam et repellat optio. Sed eos hic. Tenetur sapiente aliquid exercitationem voluptatem laborum iste voluptas.
        </div>
    </div>
    <div class="card__banner">
        £70,669
    </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}}