Loading...
Loading...
The Card component provides a flexible container for displaying content with header, body, and footer sections. Perfect for grouping related information and creating consistent layouts.
This is the card content area. You can put any content here.
Content area with footer below.
Subtle variant with lighter background
Outline variant with border
Elevated variant with shadow
Small card size
Medium card size (default)
Large card size
import { CardRoot, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card';
// Basic card
<CardRoot>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description</CardDescription>
</CardHeader>
<CardContent>
<p>Card content</p>
</CardContent>
</CardRoot>
// Card with footer
<CardRoot>
<CardHeader>
<CardTitle>Title</CardTitle>
</CardHeader>
<CardContent>
<p>Content</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</CardRoot>
// Variants
<CardRoot variant="subtle">...</CardRoot>
<CardRoot variant="outline">...</CardRoot>
<CardRoot variant="elevated">...</CardRoot>
// Sizes
<CardRoot size="sm">...</CardRoot>
<CardRoot size="md">...</CardRoot>
<CardRoot size="lg">...</CardRoot>