Card
A container component with header, content, and footer sub-components. Used to group related information into a visually distinct surface.
Anatomy
- Card — Outer container. Sets background, border, shadow.
- CardHeader — Top section with title and description. Has bottom padding.
- CardTitle — The main heading. Renders as
h3by default. - CardDescription — Muted subtitle below the title.
- CardContent — Main body content area.
- CardFooter — Bottom section, typically for actions.
Examples
A typical notification card:
Notification Settings
Manage how you receive notifications.
- Email digests
- Push notifications
- SMS alerts
Simple
A minimal card with only header and content sections, no footer.
Notifications
You have 3 unread messages.
Installation
Props
Card adds the props below. All sub-components extend their respective HTML element props.
| Prop | Type | Default | Description |
|---|---|---|---|
clickable | boolean | false | Makes the card interactive — adds hover elevation and a pointer cursor. |
elevation | "none" | "sm" | "md" | "lg" | "sm" | Shadow depth of the card. |
CardextendsHTMLDivElementCardHeaderextendsHTMLDivElementCardTitleextendsHTMLH3ElementCardDescriptionextendsHTMLPElementCardContentextendsHTMLDivElementCardFooterextendsHTMLDivElement