Back to docs
Recipe
Data card design
A reusable card pattern for displaying structured data with clear hierarchy, consistent spacing, and responsive behavior.
Anatomy
Label
Primary value
Secondary description
Metadata leftAction →
Variants
Compact
$12,450
Monthly revenue
Expanded
847
Active users
+12%vs last week
Guidelines
- Use a single primary metric with a supporting label — never overload the card with competing numbers.
- Reserve the top-right quadrant for a small icon or status indicator.
- Keep the action affordance at the bottom, separated by a subtle divider when the card has metadata.
- On mobile, stack the icon below the value; on desktop, keep them inline.
Next: Status badge design →