Skip to main content
Status: FoundationCategory: display

Card

Card groups related content through a small composition API while keeping its visual material and interactive emphasis explicit.

Preview

Surface

Default content grouping.

Clear and quiet.

Mist

Secondary context.

Supporting information.

Glass

Used sparingly.

Capabilities

  • Composes Card, CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.
  • Supports Surface, Mist, and Glass materials, with Surface as the default.
  • Applies hover emphasis only when hoverable is explicitly enabled.

Limitations

  • Does not add navigation or click behavior by itself.
  • Does not use a high-emphasis material as a normal card default.

Accessibility

Renders neutral container elements. Callers provide appropriate headings, surrounding landmarks, and interactive controls when needed.

Server compatible
Yes
Source path
components/ui/card.tsx