cards

▼

Cards

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Each card has at least the card_title and card_text variables in use and will have a card like this one above it explaining the other variables it is using. Also, each row is demonstrating a different feature of the bootstrap grid system.

Text

Variables: card_subtitle, text_alignment, card_link, card_link_text, text_color, card_flush

Grid: This row is using the standard hand-coded class="col-sm" bootstrap system

More Info

Card Title

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

Card Title

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

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.
Grid: This row uses the pattern lab "grid-3" atom located in source/_patterns/01-atoms/grid

Card Title

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

Card Title

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

Card Title

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

Width

Variables: card_width

Grid: This row is occupying the whole container by using the col-sm-12 class.

More Info

Card Title

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

Card Title

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

Card Title

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

Image

Variables: card_image, card_image_location, card_image_overlay

Grid: This row is using the card-deck class which is unique to cards. It sets all of its cards to an equal width and height.

More Info
A placeholder image

Card Title

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

Card Title

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

Card Title

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

Structure

Variables: card_header, card_footer, button_text, button_color, card_list

Grid: This row is using the card-group class which is unique to cards. It renders cards as a single, attached element with equal width and height columns.

More Info
Header

Card Title

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

Card Title

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

Card Title

Some quick example text to build on the card title and make up the bulk of the card's content.
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros

Background and Border

Variables: card_background, card_border

Grid: This row is using the card-columns class which is unique to cards. It renders cards in the optimal position based on vertical space.

More Info

Card Title

These cards have variable body length

Card Title

In order to show off bootstrap's column functionality

Card Title

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

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet facilisis erat. Suspendisse ultrices sed massa a faucibus. Vivamus scelerisque eleifend dui, ut consectetur tellus rutrum in. Nullam lobortis, ex vel rutrum volutpat, magna eros tristique nisi, quis bibendum urna erat consequat sapien.

Card Title

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

Card Title

I'm using a lot of extra words and characters in this sentence to make sure it takes at least three lines!

Card Title

This card takes two lines. Oops, not quite enough characters, heres some more.

Card Title

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

Variation

This example card uses twig's block system to override the provided default body template with new elements

First Title

Second Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet facilisis erat. Suspendisse ultrices sed massa a faucibus.