Cards

Cards are a special component that is incredibly flexible.

Basic

• card

  • card-header card-footer card-body card-img

• card-body

  • card-title card-subtitle card-text card-link

Try it

There's a main card container class and then there are a number of structural cards that help elements fit properly inside the card. Cards don't have a set size, so unless you size them manually or with other classes, they'll take up the entire width of the container.

The main set of classes are header, footer, body and image. There are actually multiple types of image classes so we'll get back to that one.

Inside the body class, you can include a number of classes that will help elements have the proper spacing inside the body container.

Card Images

• card-img{-TYP}
  • top bottom overlay

Try it

There are a few classes that can help with image placement. Images are drawn as being part of the borders.

card-img-overlay - The overlay class is special in that it allows you to place the content inside the container.

card-img - In the case of the overlay class, you use a regular card-img class instead of the top or bottom classes.

Card Layouts

card-group

Try it

Shockingly enough, there's only one special layout class for cards and that's the card group. It makes cards share a border horizontally.

To create different types of layouts you simply use any of the existing layout classes like the grid or flexbox.

And that's also true for the types of things you can add to or include in cards.