Woodlands.co.uk Component Library

Cards: With 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 ">
    <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 Banner</h3>
        <div class="card__content">
            Quasi alias sed quia nisi cupiditate harum ea. Eum voluptatem soluta doloremque laborum dolores. Dolorum ut neque quibusdam rerum. Harum et ut quae sit molestiae odit nulla cumque voluptates. Unde incidunt quaerat maiores debitis. Quam neque consequatur quo quisquam vero.
        </div>
    </div>
    <div class="card__banner">
        Banner
    </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}}