Card
A general-purpose content container with an optional title, description, and actions.
Upgrade to Pro
Unlock every block and priority support.
Get unlimited components, private support, and early access to new blocks.
Interactive
Hover me
Elevates on hover.
Try moving your cursor over this card to see the elevation.
Two buttons
Delete project
This can't be undone.
All associated data, files, and members will be permanently removed.
Three buttons
Onboarding
Set up your workspace.
Connect your team's tools to get the most out of your workspace.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | Card heading. | |
| description | string | Supporting text under the title. | |
| actions | ReactNode | Footer action buttons. Hugs the card's left edge. | |
| leadingAction | ReactNode | A standalone action opposite `actions`, e.g. a Skip/Cancel button -- switches the footer to space-between. | |
| interactive | boolean | false | Enables a hover elevation, for clickable cards. |
| children | ReactNode | Arbitrary content, rendered below the description. |
Why it works this way
Why
- It is a container surface for one unit of content, optionally with actions. Hover is a CSS state; the one-, two- and three-button layouts come from the actions slots.
Don't
- Don't wrap everything in a Card as a layout shortcut. Nested cards add borders and weight without meaning.