When to use
Use to present a handful of attributes for one object in a set.
Loading…
Find components, patterns, tokens, and docs
Documentation
Cards chunk related information so a collection can be scanned.
One object per card. Make the whole card clickable or keep a single clear action.
Appearance is not enough. This is the contract for when the control earns a place in the product.
Use to present a handful of attributes for one object in a set.
Use a table when users need to compare many rows on the same attributes.
Turns a list of records into scannable, self-contained units.
Don't nest interactive elements. If the card is a link, keep inner actions out of it.
<Card
variant="primary"
size="medium"
>
Billing overview
</Card>