Card

Hairline surface primitive with raised, sunken, and interactive variants.

Cards are bounded content surfaces. Prefer bare sections for page structure and cards only for repeated items, modals, or framed tools.

Default

Border only. The canonical surface.

Raised

One step of elevation over canvas.

Sunken

Recessed. Code, quotes, wells.

Playground

Props in the URL.

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground.

States

Every state maps to the same render route through the `state` query param.

Default

Border only. The canonical surface.

Raised

One step of elevation over canvas.

Sunken

Recessed. Code, quotes, wells.

Default

Default hairline surface.

Default

Border only. The canonical surface.

Raised

One step of elevation over canvas.

Sunken

Recessed. Code, quotes, wells.

Raised

One step of elevation above canvas.

Default

Border only. The canonical surface.

Raised

One step of elevation over canvas.

Sunken

Recessed. Code, quotes, wells.

Sunken

Recessed surface for code, quotes, and wells.

Props

Name	Type	Default	Description
`variant`	`'default' \| 'raised' \| 'sunken'`	`default`	Surface depth treatment.
`interactive`	`boolean`	`false`	Adds hover affordance for clickable card compositions.
`title`	`ReactNode`	-	Optional compact title.
`description`	`ReactNode`	-	Optional supporting copy.
`children`	`ReactNode`	-	Card content slot.