Card
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 title
Some example text to build on the card title and make up the bulk of the card's content. This is a sample link
ButtonCard 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
(recommended).card-understated
.card-overstated
.card-standout
.card-primary
.card-danger
.card-inverted
Example using .card-primary
Card title
Some example text to build on the card title and make up the bulk of the card's content. This is a sample link
ButtonCard with Header:
Some example text to build on the card title and make up the bulk of the card's content. This is a sample link
ButtonCard with footer:
Some example text to build on the card title and make up the bulk of the card's content. This is a sample link
Button