Cards
Card components for displaying content
Examples
Basic Card
Simple card with just content area.
Basic Card
This is a basic card with just a body content area.
html
Card with Header
Card with separated header section.
Card Header
Card content goes here.
html
Feature Card
Card with icon for highlighting features.
Feature Card
Highlight features with visual icons.
html
Stats Card
Card for displaying metrics and statistics.
Total Revenue
+12.5%
$45,231
Compared to last month
html
Usage
Cards use semantic theme classes:
Theme Classes
.bg-card
.text-card-foreground
.border-border
.bg-muted
.text-muted-foreground
.text-primary