Card
A container component with header, content, and footer sections. Includes subtle shadow and hover effects.
Full (header · content · footer)
Create project
Deploy your new project in one click.
Configure your project settings and deploy instantly.
Metric
Total revenue
$45,231.89
+20.1% from last month
Subscribers
+2,350
+180 this week
Active now
573
+12 since last hour
User card (Avatar + Badge)
OC
Oscar Corona
Pro
Staff engineer · Remote
Installation
pnpm
pnpm dlx @hex-core/cli add cardAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | — | Additional CSS classes on the root card |
AI Guidance
When to use
Use to group related content with a visual boundary: settings panels, product listings, dashboard widgets, form sections.
When not to use
Don't use for full-page layouts (use plain divs). Don't nest cards inside cards.
Common mistakes
- Nesting cards
- Using Card when a simple div with border would suffice
- Forgetting CardContent padding when placing forms inside
Accessibility
Card is a div by default. Add role='region' and aria-label for landmark cards. CardTitle renders h3 — ensure heading hierarchy.
Token budget: 400