Card

Cards contain content and actions about a single subject.

Interactive demo

Live demo of the Card component with header, body and footer.

<CodeViewerExample>
  <Card>
    <CardHeader>
      <h3 className="card-header-title">
        Header
      </h3>
    </CardHeader>
    <CardBody>
      <p>
        Body content in p tag with class=card-text
      </p>
      <p className="card-text">
        className: card-text sets margin bottom: 0;
      </p>
    </CardBody>
    <CardFooter>
      Footer
    </CardFooter>
  </Card>
</CodeViewerExample>

Usage

Use a card to display content and actions on a single topic.

Cards should be easy to scan for relevant and actionable information. Elements like text and images should be placed on cards in a way that clearly indicates hierarchy.

Principles

Contained

A card is identifiable as a single, contained unit.

Independent

A card can stand alone, without relying on surrounding elements for context.

Different cards

There are 6 different Cards. “Simple card”, “Card branding”, “Card body”, “Card header”, “Card footer” and “Card image”.

Cards can be branded, have a header, footer and images.

Simple card

Simplest of card that builds on the Paper component.

Card branding

Card supports the same branding props as paper- tur, sport and neutral (default). The difference is the border radius.

Card body

Use card body to pad content inside card. Use card-title for titles and card-text for texts in body.

Card header

Can be positioned left(default), centered or right.

Card footer

Can be positioned left(default), centered or right.

Card image

If position overlay is used note that imageHeight needs to be set, all content must be placed inside cardImage-tag and that content cant be higher than the height of the image.

Formatting

Anatomy

The card container is the only required element in a card. Card layouts can vary to support the types of content they contain. Below is a common configuration of elements.

Card group

Multiple cards can be grouped together into collections displayed in a grid, list, or carousel. By default, cards in a collection are coplanar, sharing the same resting elevation unless they are picked up or dragged.

Multiple cards can be grouped into collections with a shared resting elevation.

Card as link

A linkable card changes its state to hover and the elevation goes from 1dp to 8dp.

Expandable card

An expandable card needs a header. This will enable the use of expandable body which is hidden when the card is collapsed.

Carousel

Cards can be displayed together in a horizontal row or carousel.