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:

Awesome card

The awesome card is pretty awesome.

Posted Yesterday

 
<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>

Cards with carousel

Cards can have carousels rather than a single image:

Awesome card

The awesome card is pretty awesome.

Posted Yesterday

 
<div class="card">
  <div class="card--image" data-carousel>
    <div data-carousel-slides>
      <img src="http://placehold.it/1024x600" />
      <img src="http://placehold.it/1024x600" />
      <img src="http://placehold.it/1024x600" />
      <img src="http://placehold.it/1024x600" />
      <img src="http://placehold.it/1024x600" />
    </div>
    <div data-carousel-nav="counter"></div>
  </div>
  <a href="#" 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>
  </a>
</div>

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.

Awesome card

The awesome card is pretty awesome.

Posted Yesterday

 
<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:

Awesome card

The awesome card is pretty awesome.

Posted Yesterday

 
<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:

Drama

With Inline Image

The awesome card is pretty awesome.

Posted Yesterday
Comedy

With Cover Image

The awesome card is pretty awesome.

Posted Yesterday

 
<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>