Skip to content
search icon
clear
Component Status

A card displays content related to a single subject and acts as an entry point to more detailed information. Card blocks can be combined in a variety of ways.

Guidelines

Cards should display data related to a single topic. They are easy to scan and have clear actions. Cards can be customized by combining different card blocks. Dividers can be used to separate sections within a card, however, the divider should not be full-width, except when displaying content that can be expanded.

Don't

  • Do not use cards as or in Top bars
  • Do not use cards as Sidesheets
  • Do not use cards as or in Nav drawers
  • Do not use cards as Lists
  • Do not use cards inside other cards
  • Do not use cards as galleries
  • Do not use cards with text over photography or illustrations
  • Do not use cards to group large sets of information

Variations

Card container

The container is the only required block in a card. The card aligns to the artboard/frames grid columns, which gives the card a fluid width. Content blocks within the card, however, follow the card container's own grid. There are four available card/container options: default, info, danger and warning. The primary action of a card is generally the card itself being a large touch target.

FigmaExternal linkFigma design of card container

Title

There are twelve title blocks to choose between: Avatar H6 caption, Avatar H6 caption action, Overline H6, Overline H6 action, Overline H6 avatar, H4 body short, H4 body short action, H4 body short avatar, H5 body short, H5 body short action and H5 body short avatar.

Content

Title blocks can have:

  • Title
  • Subtitle
  • Avatar
  • Metadata
    • Tags, badges and free text
  • Overflow menu
FigmaExternal linkFigma design of card content

Supporting text

There are two supporting text blocks to choose between: supporting-text/middle which is to be used when it is sandwiched between other blocks, and supporting-text/last which is to be used when it is the last block.

Content

Supporting text blocks can have:

  • Supporting text
    • Should not contain multiple paragraphs
    • Use inline links with high caution
FigmaExternal link
🙈Ops! Can't find the image, but you could still try Figma.

Rich media

There are three rich media blocks to choose between: rich-media/middle which is to be used when it is sandwiched between other blocks, rich-media/last which is to be used when it is the last block and rich-media/leading-image which is to be used when it is the first block. The rich-media/middle and rich-media/last blocks are placeholder blocks, meaning that you can add your own rich content to them. Rich media can be used full-width, and if it's the first block on the card, it can go all the way to top

Content

Rich media blocks can have:

  • Graph
  • Table
  • Image
    • within the grid when between blocks and full width when leading
  • Dividers
FigmaExternal linkFigma design of card rich media blocks

Supplemental actions

There are three supplemental action blocks to choose between: supplemental-actions/buttons, supplemental-actions/icons and supplemental-actions/meta. Supplemental actions are represented by buttons, icons, UI controls and supporting text. A rule of thumb is to place them at the bottom of a card.

Content

Supplemental action blocks can have:

  • Supplemental actions
  • Dividers
    • Content that can be expanded should use full-width dividers, ignoring the horizontal spacing.
  • Overflow menu
  • UI controls
  • Chips
FigmaExternal linkFigma design of supplemental action

Demo

Card variants

Default
Info
Warning
Danger

Card header variants

Title goes here

Body short

Title goes here

Body short

Title goes here

Body short

Kitten
Title goes here

Body short

Title goes here

Body short

Title goes here

Body short

Kitten
Kitten
Title goes here

Caption

Kitten
Title goes here

Caption

Overline

Title goes here

Overline

Title goes here

Card media variants

Image for representation
Full width

Full width as leading block

Leading images are full width, and go straight to the top - ignoring spacings

Full width

Full width as last block

Last blocks with fullWidth ignores left and right spacings but keep 24px bottom spacing

Image for representation
Middle

To be used between blocks

Image for representation

Default spacing is 16px between middle blocks

Cards with actions

Default

Left aligned buttons

Action elements are aligned left in this example

Right

Right aligned buttons

Action elements are aligned right in this example

Meta

Use as supporting text for icons

Action elements with metadata

Share

Edit this page on GitHub