Cards

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

The “Woodland” card includes location information.

<div class="card ">
    <a href="#link" class="card__link">
        <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 Link</h3>
            <div class="card__content">
                Sit veritatis architecto atque recusandae quo. Ab minus dignissimos sunt id officia voluptatibus ipsum magnam commodi. Explicabo exercitationem unde necessitatibus optio earum dolore.
            </div>
        </div>
    </a>
</div>
<div class="{{modifier 'card' card.modifiers}} {{ card.classes }}">
  <a href="{{ card.link }}" class="card__link">
    {{ 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}}
  </a>
</div>