Card
A surface with four elevations, plus header, body and footer slots that keep their own padding.
Loading documentation…
Powered by heyo
Last 3 builds of acme-api
Card is the box every grouped surface in an application is built from. The
parts are independent: a card can be a header and a body, a body alone, or all
three. Seams are only drawn where something actually follows, so a header
without a body carries no stray rule.
Every slot keeps its own padding, which is what lets a table or a list sit
flush inside one — drop p-0 on CardBody and the rows run edge to edge.
flat is the default and the right answer in a dense interface: a hairline is
enough to separate a surface from the page. raised adds a real edge and a
whisper of shadow for something that floats. recessed is a well — logs,
diffs, empty states. plain keeps only the layout. Hierarchy comes from the
surface, not from a border.
Same padding, different elevation.
Hierarchy comes from the surface, not from a border.
Same padding, different elevation.
Hierarchy comes from the surface, not from a border.
Same padding, different elevation.
Hierarchy comes from the surface, not from a border.
Same padding, different elevation.
Hierarchy comes from the surface, not from a border.
CardHeader is a flex row with justify-between, so a title on the left and a
control on the right need no extra wrapper. Group the title and description in
one element when both are present.
No variables yet.
A card does not need three slots. One CardBody is the whole component when
the content is a single figure.
Requests today
1.24M
CardFooter sits on the elevated surface and right-aligns its children, which
is where a card's actions belong. It is not a second body — long content in a
footer means the card wants another section instead.
The surface treatment. It defaults to flat.
Merged through tailwind-merge, so a different radius or width is one
class.
Usually CardHeader, CardBody and CardFooter, in that order.
CardHeader lays its children out as a row with the last item pushed right.
CardBody is the content column. CardFooter right-aligns actions on the
elevated surface.
Merged into the respective part — p-0 on CardBody is how a table or a
list sits flush. Every part also carries a data-slot (card-header,
card-body, card-footer) for global overrides.
CardTitle renders an <h3> at 13px medium; CardDescription renders a
12px muted paragraph. Both have their margins reset.