Cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Simple card

This is some text within a card body.

example

...
Card title

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

Go somewhere

card with header and footer

card header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, pariatur, maxime. Sed, ex quod. Eum quam pariatur, eius debitis iusto, odit aliquam ut veniam exercitationem officia, impedit omnis eaque dolor!

Card with material shadow

card header
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, pariatur, maxime. Sed, ex quod. Eum quam pariatur, eius debitis iusto, odit aliquam ut veniam exercitationem officia, impedit omnis eaque dolor!

Styled cards

...

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

...

Posted on January 21, 2015

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

card with list

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

card with navigation

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere