Woodlands.co.uk Component Library

Cards

Cards

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

The “Woodland” card includes location information.

<div class="card ">
    <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">Default Card</h3>
        <div class="card__content">
            Consequatur dolor totam officia eius velit amet. Quam praesentium sint. Voluptatem perspiciatis eum dolore sed. Quas distinctio explicabo aut. Eveniet totam repellat repellendus debitis dolorem et vel.
        </div>
    </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}}