Cards

Containers for atomic units of information. A property, a storm event, a code citation — anything that has a header and a body.

Anatomy

✓Verified

Max hail

1.75″

Affected

12,481 props

Default

Border, no shadow. The workhorse.

Elevated

Shadow-sm, no border. Use sparingly.

Muted

For metadata blocks, sidebar panels.

Pair Header + Body + Footer when the card has actions. Header carries the title and the status/decision so the primary action stays in the footer.

Don't

Don't nest Cards. If the inner block needs a container, drop to a muted background div — nesting borders compound visual weight.