Data and analytics · §5.7

Card

A container with a title and one purpose.

Theme
Contrast
Language
Motion
Text size

Code

<Card><CardHeader><CardTitle>…</CardTitle></CardHeader><CardContent>…</CardContent></Card>

Accessibility

  • A section with a heading screen readers can jump to.

Usage

Do

  • One purpose per card.

Don't

  • Never glass; nest at most one level.

Platforms

Web
apps/web/components/ui/card.tsx
iOS
SwiftUI GroupBox
Android
Compose Card