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.

Card title

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

Button

Featured (header)

Special title treatment

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

Go somewhere

2 days ago (footer)

Background variants

Cards include their own variant classes for quickly changing the background-color and border-color of a card. Darker colors require the use of .card-inverse.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Card Groups

Use card groups to render cards as a single, attached element with equal width and height columns.

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

Card Stats

Various colors of card stats

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aliquid eos hic magni mollitia pariatur possimus quidem quis quo sunt?

Main

Card title

Special title treatment

Background variants

Card Groups

Card title

Card title

Card title

Card Stats