Card

A surface with consistent anatomy and padding; width and outer margins are up to you.

Billed monthly, cancel anytime.

Real-time collaboration, history and priority support.

Installation

Run it from the root of a project already set up with zunoui init.

$ npx zunoui@latest add card

What add card installs alongside the component. The CLI skips any you already have in a compatible version.

1 examples · 1 component

Billed monthly, cancel anytime.

Real-time collaboration, history and priority support.

Header, content and footer with actions.

Forwards props and ref to the container element; it only adds composition utilities.

Prop	Type	Default
`Card` Container with a border and card surface.	`div`	—
`CardHeader` Header with title and description.	`div`	—
`CardTitle` Card title.	`h3`	—
`CardDescription` Secondary supporting text.	`p`	—
`CardContent` Main body.	`div`	—
`CardFooter` Actions or metadata at the bottom.	`div`	—

Use CardTitle as a heading for the document hierarchy; adjust the level with className or your own element.

Card is a presentational surface: it does not capture focus or add roles. Place accessible controls inside it.