Card

Cards are flexible containers for grouping related content and actions.

Basic card

Share of voice

Your brand appeared in 38% of ChatGPT answers about project management tools this week.

Backgrounds

The default background is primary.

Primary

Secondary

Tertiary

Quaternary

Padding

sm adds 16 px of padding and md adds 24 px. The default is none.

Small padding

16 px. Use it for compact cards in grids and side panels.

Medium padding

24 px. Use it for standalone cards such as report summaries.

Usage

Properties

background
'primary''secondary''tertiary''quaternary'

Semantic background surface of the card

Default: primary

padding
'none''sm''md'

Apply a predefined internal padding size

Default: none

className
string

Additional CSS classes to apply to the card container