Home Get Started Examples

Card

displayunchanged positionunchanged z-indexunchanged font-size scalingno breakpointsno

Class list

  • .card
  • .card .card-header
  • .card .card-body
  • .card .card-footer
  • .card.r-0
  • .card .card-header.image
  • .card .card-body.image
  • .card .card-footer.image

Description

A .card is an extremely versatile way of organizing content, and splitting it into subdivisions. Any content you want can be put into the subdivisions of a .card.

Structure

lorem
ipsum
dolor
<div class="card">
    <div class="card-header">lorem</div>
    <div class="card-body">ipsum</div>
    <div class="card-footer">dolor</div>
</div>

There's no requirement that all the subdivisions of a card be used together. If you only wanted to use a .card-body inside of a .card, you could.

Image

Using the .image class on a subdivison of a .card makes it so an img element used within that subdivison fills up its space.

Image

ipsum
dolor
<div class="card">
    <div class="card-header image">
        <img src="/path/to/img" alt="image">
    </div>
    <div class="card-body">ipsum</div>
    <div class="card-footer">dolor</div>
</div>

Radius utility

Using the .r-0 utility class on a .card zeroes out the border-radius for any card subdivisions used within it.

lorem
ipsum
dolor
<div class="card r-0">
    <div class="card-header">lorem</div>
    <div class="card-body">ipsum</div>
    <div class="card-footer">dolor</div>
</div>
previous next