Pattern Library

Cards

Cards are used to break up content into distinguishable chunks of related information. Cards can be used in list or grid views, or as a way to segment parts of an interface.

Basic card

A simple card can be text only. This one contains a title, body text and call to action.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.

Main Action
<div class="card">
  <div class="card__item">
    <div class="card__content">
      <h3 class="card__title">Card title</h3>
      <p class="card__description">Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.</p>
      <a href="#" class="button button--flat button--bottom button--left">Main Action</a>
    </div>
  </div>
</div>

Card with image

Cards can also contain an image or icon to add visual interest.

Card image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.

Main Action
<div class="card">
  <div class="card__item">
    <img class="card__thumbnail" src="/static/figures/placeholder-1.jpg" alt="Card image">
    <div class="card__content">
      <h3 class="card__title">Card title</h3>
      <p class="card__description">Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.</p>
      <a href="#" class="button button--flat button--left button--bottom">Main Action</a>
    </div>
  </div>
</div>

Multiple cards

An array of cards can be placed together in the grid system.

Card image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.

Main Action
Card image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.

Main Action
<div class="card">
  <div class="card__item">
    <img class="card__thumbnail" src="/static/figures/placeholder-1.jpg" alt="Card image">
    <div class="card__content">
      <h3 class="card__title">Card title</h3>
      <p class="card__description">Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.</p>
      <a href="#" class="button button--flat button--bottom button--left">Main Action</a>
    </div>
  </div>
  <div class="card__item">
    <img class="card__thumbnail" src="/static/figures/placeholder-2.jpg" alt="Card image">
    <div class="card__content">
      <h3 class="card__title">Card title</h3>
      <p class="card__description">Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.</p>
      <a href="#" class="button button--flat button--bottom button--left">Main Action</a>
    </div>
  </div>
</div>

Clickable cards

Adding the card__item--clickable modifier to a card__item applies the clickable styling to a card, giving it a shadow on hover.

<div class="card">
  <a href="#" class="card__item card__item--clickable">
    <img class="card__thumbnail" src="/static/figures/placeholder-1.jpg" alt="Card image">
    <div class="card__content">
      <h3 class="card__title">Card title</h3>
      <p class="card__description">Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.</p>
      <button class="button button--flat button--bottom button--left">Main Action</button>
    </div>
  </a>
  <a href="#" class="card__item card__item--clickable">
    <img class="card__thumbnail" src="/static/figures/placeholder-2.jpg" alt="Card image">
    <div class="card__content">
      <h3 class="card__title">Card title</h3>
      <p class="card__description">Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.</p>
      <button class="button button--flat button--bottom button--left">Main Action</button>
    </div>
  </a>
</div>

Avatars and tags

Cards can contain extra details like a user avatar and tags to display statistics.

<div class="card">
  <a href="#" class="card__item card__item--clickable">
    <div class="card__thumbnail">
      <img src="/static/figures/placeholder-1.jpg" alt="Card image">
      <div class="card__thumbnailTag">
        <svg fill="#000000" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></svg>

        45:00
      </div>
    </div>
    <div class="card__content">
      <div class="card__profile">
        <div class="avatar avatar--xsmall" title="Boba Fett">
          <img class="avatar__image" src="http://www.radfaces.com/images/avatars/boba-fett.jpg" alt="Picture of Boba Fett">
          <div class="avatar__initials">BF</div>
        </div>
        <div class="card__profileName">Boba Fett</div>
      </div>
      <h3 class="card__title">Advanced Cybernetics</h3>
      <p class="card__description">Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.</p>
    </div>
  </a>
  <a href="#" class="card__item card__item--clickable">
    <div class="card__thumbnail">
      <img src="/static/figures/placeholder-2.jpg" alt="Card image">
      <div class="card__thumbnailTag">
        <svg fill="#000000" height="18" viewBox="0 0 24 24" width="18" xmlns="http://www.w3.org/2000/svg"><path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"></path></svg>

        45:00
      </div>
    </div>
    <div class="card__content">
      <div class="card__profile">
        <div class="avatar avatar--xsmall" title="Shōtarō Kaneda">
          <img class="avatar__image" src="http://www.radfaces.com/images/avatars/akira.jpg" alt="Picture of Shōtarō Kaneda">
          <div class="avatar__initials">SK</div>
        </div>
        <div class="card__profileName">Shōtarō Kaneda</div>
      </div>
      <h3 class="card__title">Mutant Mantis Cloning 101</h3>
      <p class="card__description">Some quick example text to build on the card title and make up the bulk of the card's content. This is another sentence.</p>
    </div>
  </a>
</div>