Card
Usage
A bordered surface that groups related content. The reference ships ten colour-tinted card variants; we ship one neutral surface instead, because tinting a whole container to signal status is a job an Alert or a Badge does without dyeing the content inside it.import { Card, CardHeader, CardTitle, CardBody } from '@summonware/ui';Best practices
DoGive a card a header only when it needs a title or a header action. A bare CardBody is a perfectly good card.
DoPut header actions in CardHeader with `ml-auto` so they sit right of the title.
Don'tNest cards inside cards. Two borders and two shadows read as a rendering bug, not as hierarchy.
Anatomy
CardHeaderTitle row with an optional trailing action. Draws the bottom divider.
CardTitleThe heading inside a header. Renders as an h3.
CardBody *The padded content region.
Examples
Common configurations, variations and states.Header and body
Order summary
PaidThree items, shipped 4 March. Delivery expected within five working days.
The standard arrangement: a titled header with a trailing status, over a padded body.
Body only
Storage
48.2 GB of 100 GB used.
Drop the header when the content is self-describing. This is the right shape for dashboard tiles and short summaries.
Header action
Team members
Nine people have access to this workspace.
A control in the header applies to the whole card. Keep it to one — a header with three buttons wants to be a toolbar.
Reference variants
2 of 10 labels from the reference are demonstrated above.Card titleSpecial title treatmentPrimary card titleSecondary card titleSuccess card titleDanger card titleWarning card titleInfo card titleLight card titleDark card title