Card

‹ Back

A basic card component:

Awesome card

The awesome card is pretty awesome.

Posted Yesterday

<div class="card">
  <div class="card--image">
    <img src="http://placehold.it/300x200" />
  </div>
  <div class="card--content compressed">
    <p><strong>Awesome card</strong></p>
    <p>The awesome card is pretty awesome.</p>
    <p><small class="type--grey">Posted Yesterday</small></p>
  </div>
</div>

Cards as links

Cards automatically inherit the nested-link component when they are links, so you can use .nested-link--target to highlight a fake link:

<a href="#" class="card">
  <div class="card--image">
    <img src="http://placehold.it/300x200" />
  </div>
  <div class="card--content compressed">
    <p><strong class="nested-link--target">Awesome card</strong></p>
    <p>The awesome card is pretty awesome.</p>
    <p><small class="type--grey">Posted Yesterday</small></p>
  </div>
</a>

Cover images

Normally card images are inline images, however you may want a responsive cover image that fills an aspect ratio block, you can move the image in to a background image and change the image class to card--image__cover.

<a href="#" class="card">
  <div class="card--image__cover" style="background-image: url(http://placehold.it/500x300);"></div>
  <div class="card--content compressed">
    <p><strong class="nested-link--target">Awesome card</strong></p>
    <p>The awesome card is pretty awesome.</p>
    <p><small class="type--grey">Posted Yesterday</small></p>
  </div>
</a>

Footer

You can add a footer to your card by using .card--footer:

<a href="#" class="card">
  <div class="card--image__cover" style="background-image: url(http://placehold.it/500x300);"></div>
  <div class="card--content compressed">
    <p><strong class="nested-link--target">Awesome card</strong></p>
    <p>The awesome card is pretty awesome.</p>
  </div>
  <div class="card--footer compressed">
    <p><small class="type--grey">Posted Yesterday</small></p>
  </div>
</a>

Badges

Add card badges inside your image div:

<div class="spacing">
  <a href="#" class="card">
    <div class="card--image">
      <div class="card--badge">Drama</div>
      <img src="http://placehold.it/300x200" />
    </div>
    <div class="card--content compressed">
      <p><strong class="nested-link--target">With Inline Image</strong></p>
      <p>The awesome card is pretty awesome.</p>
      <p><small class="type--grey">Posted Yesterday</small></p>
    </div>
  </a>
  <a href="#" class="card">
    <div class="card--image__cover" style="background-image: url(http://placehold.it/500x300);">
      <div class="card--badge">Comedy</div>
    </div>
    <div class="card--content compressed">
      <p><strong class="nested-link--target">With Cover Image</strong></p>
      <p>The awesome card is pretty awesome.</p>
      <p><small class="type--grey">Posted Yesterday</small></p>
    </div>
  </a>
</div>