Card

The surface everything sits on: title and subtitle header, optional actions, and a shape-matched skeleton for the loading frame.

Plain title

String title and subtitle get default styling

Body content is just children.

With a toolbar

Actions sit in the header's right slot

Toolbar accepts arbitrary JSX; header only renders when title, subtitle, or toolbar is present.

With a title divider

Rules off the header, edge to edge: for cards whose body is a list

Opt-in: list-style cards read better with the header fenced off; content cards (a paragraph, a dropzone, a summary) do not.

Compact

Tighter padding

Slot className props override any internal node.

noBorder + custom root class

Caller className merges last, so it wins conflicts.

JSX title passes through renderNode

Strings get defaults; elements keep full control.

noAnimate

Entrance animation opted out

Header icon

Icon is standard header meta: PageTitle's disc one size down; iconVariant and iconTone read every wash off the tint ladder (canon 01 §A8). Hover a card to see the disc move one rung.

disc (default)

faint /5 at rest, soft /10 under the pointer

plain

bare at rest, the faint disc arrives on hover

disc, success tone

soft /10 at rest, strong /15 under the pointer

plain, warning tone

the tone's soft wash arrives on hover

Stagger

Contents cascade in one after another (nested fadeInUp), in the same rhythm the skeleton used: instead of the whole card fading as one block

Shadow system

shadow= none / xs / sm / md / lg: themed via --shadow-* tokens

none

shadow="none"

xs

shadow="xs"

sm

shadow="sm"

md

shadow="md"

lg

shadow="lg"

Skeleton

skeleton renders a card-shaped placeholder

Styling slots

Every className the component exposes, and what it reaches

className: the outer container
titleClassName: the heading
subtitleClassName: the secondary line under the title
toolbarClassName: the right-aligned header actions slot
bodyClassName: the content area