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.
Basic Card Without Click-Region Code
This example includes multiple links, so a click-region is no longer useful.
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.
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-group is located outside the
.card-block container, the list becomes flush against the card.
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 individual cards.