Hero Image



Cards contain content and actions about a single subject.

Interactive demo

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


Body content in p tag with class=card-text

className: card-text sets margin bottom: 0;

      <h3 className="card-header-title">
        Body content in p tag with class=card-text
      <p className="card-text">
        className: card-text sets margin bottom: 0;


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.



Contained Card

A card is identifiable as a single, contained unit.


Stand alone card

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

Simple card

Simplest of card that builds on the Paper component.

Card branding

Card with branding

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

Card body

Card with body

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

Card header

Card with header

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

Card with footer

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

Card image

Card with 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.



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.

Anatomy of card explained

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 card group togheter

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

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

Card as links

Expandable card

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

Expandable card

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

Cards in carousel