Skip to content

Skip design navigation

Components · Card

Card

Grouped content surface with optional header and footer.

Anatomy

1 .card-root Card surface.
2 .card-header Title and metadata group.
3 .card-title Card headline.
4 .card-description Supporting card copy.
5 .card-content Primary card content.
6 .card-footer Actions or metadata after card content.

Variants

Elevated
Filled
Outlined

Theme ready

All component tokens resolve from your foundations.

Default

Compositions

The component in context, beside others. Open the code to see the file verbatim.

Colors

Light and dark roles are ready.

Type

Two typefaces cover the full scale.

Settings summary

When to use

Use a card to group one subject and its supporting actions when that grouping needs a distinct surface.