Primitive

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.
surface
DOM renderImage render
CardDefault
Default

Border only. The canonical surface.

Raised

One step of elevation over canvas.

Sunken

Recessed. Code, quotes, wells.

Playground

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

Loading playground

Rendered matrix

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

Default

Repeated item cards with depth and compact body copy.
Default

Border only. The canonical surface.

Raised

One step of elevation over canvas.

Sunken

Recessed. Code, quotes, wells.

Render state

Interactive

Interactive repeated item cards.
Run 1048

Open run detail

Schema audit

Inspect schema drift

Render state

Raised

One step of elevation above canvas.
Raised

One step of elevation over canvas.

Render state

Sunken

Recessed surface for code, quotes, and wells.
Sunken

Recessed. Code, quotes, wells.

Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
depth'default' | 'raised' | 'sunken'defaultSurface depth treatment.
interactivebooleanfalseAdds hover affordance for clickable card compositions.
titleReactNode-Optional compact title.
descriptionReactNode-Optional supporting copy.
childrenReactNode-Card content slot.