Layout & display

Card

A surfaced container with optional header, footer, and configurable padding. Use it for forms, settings panels, dashboard widgets: anything you'd bound with a soft border.

Basic

A plain card with default padding.

With title and description

Profile

Personal details and contact info.

Card body content sits here.

A real section heading

heading draws the icon, a real heading element at the level you name, and a meta note at the end of the band. Prefer it to title for anything a reader navigates by: a page's outline is built from its heading elements, and what title renders is a styled paragraph that appears in no heading list. Use headingLevel={2} for a card directly under the page title and the default 3 for one nested inside another.

The header band has three ways in and they resolve in one order: header wins over everything, then heading, then title. Set one of the three. title still renders exactly what it always did, so the cards already shipping do not move.

Delivery

updated 4m ago

Endpoints receiving content events.

Two endpoints are healthy. One is retrying.

With a footer

Delete account

This cannot be undone.

Removing your account will purge all associated data.

Hover border

A card used as a link tile can opt into a hover state. Its border turns brand under the pointer, and nothing glows around it. A card with onclick answers the same way.

Open in new tab

Hover to see the brand border.

Hover this tile.

Padding control

Banner area

Use pad="none" when you need flush content.

API

Prop	Type	Default	Description
`heading`	`string`	no default	The header band as a real heading element, with the icon and the meta row.
`headingLevel`	`2 \| 3`	`3`	2 under a page title, 3 inside another card. Applies to heading, not title.
`icon`	`Component`	no default	A lucide component before the heading. Decorative, so it carries no name.
`meta`	`string`	no default	A count, a status or a timestamp at the end of the heading row.
`title`	`string`	no default	The older header. A styled paragraph, not a heading element. Prefer heading.
`description`	`string`	no default	Subdued sub-text below the heading.
`pad`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Body padding scale.
`hover`	`boolean`	`false`	Turn the border brand on hover.
`class`	`string`	no default	Extra classes on the wrapper.
`header`	`Snippet`	no default	The whole header band, written by hand. Wins over heading and title.
`footer`	`Snippet`	no default	Footer rendered with a subtle divider above.
`onclick`	`(e: MouseEvent) => void`	no default	Makes the card a button: it takes a tab stop and answers Enter and Space.
`onkeydown`	`(e: KeyboardEvent) => void`	no default	Runs on every key press on the card. On a clickable card, Enter and Space then press it unless you prevent the default.
`children` required	`Snippet`	no default	Body content.
`image`	`{ src; alt; width?; height?; ratio? }`	no default	Drawn edge to edge above the heading. With its own width and height it keeps its shape, and without them it is cropped to ratio, 16:9 by default.