Cards

A card is a flexible content container with consistent width and variable height. It is a convenient way to group several elements of a single item.

Typical Card Examples

Basic Card with Click-Region  Code

When a card includes onyl one link, using a click-region allows the entire card to be clicked. When a user interacts with the click-region, the card-title color becomes red and the card's drop-shadow becomes more prominent.

example image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit metus sit amet nisi elementum, ut egestas urna aliquam.

Basic Card Without Click-Region  Code

This example includes multiple links, so a click-region is no longer useful.

example image

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit metus sit amet nisi elementum, ut egestas urna aliquam.

Horizontal Card  Code

Horizontal cards include row and column containers to create a left photo/right content areas. The image and text become stacked on mobile devices.

example image

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris suscipit metus sit amet nisi elementum, ut egestas urna aliquam.

Headers and Footers

Card headers can contain content such as categories or actual headings. Footers can include content like supplementary information, links, or buttons.

Header with Category  Code

Breaking News

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat nunc vitae vulputate mattis.

More Information

Header with Heading  Code

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat nunc vitae vulputate mattis. Ut egestas pharetra bibendum. Sed est leo, vehicula eget aliquet sit amet, blandit at nunc.

Header and Footer  Code

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam volutpat nunc vitae vulputate mattis. Ut egestas pharetra bibendum. Sed est leo, vehicula eget aliquet sit amet, blandit at nunc.

Image Caps

Top Image Cap  Code

example image

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.

Bottom Image Cap  Code

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.

example image

Card and List Group Combinations

Card with Simple List-Group  Code

Add a simple list-group, a streamlined alternative to default bulleted lists.

If the list-grup is located outside the .card-block container, the list becomes flush against the card.

example image

Card title

Vestibulum vestibulum eleifend sollicitudin. Vestibulum mi odio, mattis in venenatis non, lacinia in lorem.

Cards Containing List Group with Custom Content  Code

This example illustrates how a single card can be used to group multiple items. These items would typically be located in indiviual cards.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum eleifend sollici.

    Card image cap
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vestibulum eleifend sollicitudin. Vestibulum mi odio, mattis in venenatis non, lacinia in lorem.

    Card image cap
  • Vestibulum vestibulum eleifend sollicitudin. Vestibulum mi odio, mattis in venenatis non, lacinia in lorem.

    Card image cap