Card

Three materials, and each has its place. A card carries a hairline or a shadow, never both, and every variant keeps a 1px border (transparent unless outlined), so switching variant never moves the content.

CardHeader takes an optional icon in a 32px tile, a title, a one-line description and actions on the right. CardBody holds the content. CardFooter right-aligns its actions under a hairline that runs edge to edge. All three follow the card's padding.

md (20px) is the default. The gap between header, body and footer follows the padding, so a denser card is dense all the way through. none is for tables and media, whose rows bring their own spacing.

When the whole card is one way in, set interactive and render the link itself with asChild. Hover firms the hairline (a sunken card darkens, a raised card lifts to the floating shadow), a press dips it to 99.5%, and keyboard focus draws the teal ring. Point at them, or tab to them.

All three variants, light and dark side by side. In dark the canvas is near black, so outline and sunken cards read by their hairline and their tone, and the raised card sits on the ground.

The kit groups with space, weight and hairlines before boxes. The page canvas is the one raised surface and the main container, and the home dashboard uses no cards at all. A card earns its border only when the grouping cannot be read without one.