1. Home
  2. Examples
  3. Cards

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.

Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content like images, feel free to put the .card-block class on the .card element to consolidate your markup.

Example:

Card (Default)

button
Card Body

Card (Understated)

button
Card Body

Card (Standout Highlight)

button
Card Body

Card (Overstated)

button
Card Body

Card (Primary)

button
Card Body

Card with an Image

.card-img-top places an image to the top of the card.

Error processing SSI file

Card Variations:

As with most components, cards can be extended to display with a different style. Apply one of the following supported class names to the .card div:

  • .card-default
  • .card-understated
  • .card-overstated
  • .card-standout
  • .card-primary
  • .card-danger
  • .card-inverted

Card decks

Need a set of equal width and height cards that aren’t attached to one another? Use card decks.

Error processing SSI file

Card with Photos

Cards can be extended to include an optional photo background on the left or right. Add a .photo-right or .photo-left class to the .card div.

Before the closing .card-body div, add a new div with a class of .photo and also an inline style with a link to your background-image. e.g. style="background-image: url('/path/to/photo.jpg');" Alternatively, webmasters can move this inline style to their own custom stylesheet if that is more preferable.

Error processing SSI file