Cards

Unity's card provide a flexible and extensible content container with multiple variants and options.

Bootstrap Card documentation

Basic example

Below is an example of a basic card with mixed content and a fixed width.

Titles, text, and links

Card titles are used by adding .card-title to a <h*> tag. In the same way, links are added and placed next to each other by adding .card-link to an <a> tag.

Subtitles are used by adding a .card-subtitle to a <h*> tag.

Header

Add an optional header within a card. By default .card-header is set to display: flex; and justify-content: space-between; and align-items: center;.

Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

Add an optional footer within a card.

Card bordered

Sizing

Use .card-xs class.

Use .card-sm class.

Use .card-lg class.

Images

Cards include a few options for working with images. Choose from appending "image caps" at either end of a card, overlaying images with card content, or simply embedding the image in a card.

Image caps

Similar to headers and footers, cards can include top and bottom “image caps”—images at the top or bottom of a card.

Image overlays

Turn an image into a card background and overlay your card’s text. Depending on the image, you may or may not need additional styles or utilities.

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way. In the example below, we remove the grid gutters with .no-gutters and use .col-md-* classes to make the card horizontal at the md breakpoint. Further adjustments may be needed depending on your card content.

Card layout

In addition to styling the content within cards, Bootstrap includes a few options for laying out series of cards. For the time being, these layout options are not yet responsive.

Card transition

Add animation on hover using .card-transition

Card transition-zoom

Card flush

Use .card-flush to drop border

Card stretched vertical

Use .card-stretched-vertical to align the footer at the bottom of a card. Note that .card-footer must be placed in .card-body

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform dimensions starting at the sm breakpoint.

When using card groups with footers, their content will automatically line up.

Card group break

Use .card-group*{-sm|-md|-lg|-xl}-break classes to change when their content vertically stacked.

Card group row

Use .card-group*{-sm|-md|-lg|-xl}-row classes to change when their content as separate card grids. Resize me to md resolution to see in action.

Card group number of cards

In cases where need to place a full container style card under the cards, use .card-group*{-sm|-md|-lg|-xl}*{-2|-3|-4|} classes. *{-2|-3|-4|} depends on how many cards are horizontally placed at the top. This class helps to control the borders of the cards.

Card pinned

Need to place a component on top of a card image? Use .card-pinned-top-start

or .card-pinned-top-end

or .card-pinned-bottom-start

or .card-pinned-bottom-end

Alert

Use .card-alert with alert to remove the border-radius and margin-bottom to perfectly sit within a card body.

Card ghost

Need a card that has no box-shadow and border colors? Use .card-ghost

Table