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 h3 by 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

All sub-components extend their respective HTML element props.

CardextendsHTMLDivElement
CardHeaderextendsHTMLDivElement
CardTitleextendsHTMLH3Element
CardDescriptionextendsHTMLPElement
CardContentextendsHTMLDivElement
CardFooterextendsHTMLDivElement
PropTypeDefaultDescription
className
string—Additional classes. Merged with cn().