Skip to content

Documentation

Card

Card is a surface container for grouped content such as settings panels, dashboard blocks, and inline summaries.

Storybook Source Figma

Root Props

Prop	Type	Default
`size`	`CardSize`	`'md'`
Specifies the size of the card. Affects padding, font size, and possibly layout behavior.
`appearance`	`CardAppearance`	`'outline'`
Defines the visual style of the card's surface. Controls background and border visibility.
`ref`	`Ref<HTMLElement>`	—
Ref forwarded to the card’s root element (`<article>`, or the child element with `asChild`). Useful for DOM measurements, scrolling, or imperative logic.
`asChild`	`boolean`	—
If true, renders the trigger as a child element using `Slot`. This enables custom wrappers (e.g., `<a>`, `<div>`) to inherit behavior.

Also accepts all HTML attributes.

Child Parts

Card does not expose public child parts.

Types

CardProps
CardSize
CardAppearance

State Model

Card is stateless from the component API perspective.
Consumer content and layout determine most of the semantic meaning inside the surface.