Design System
Card
Cards are versatile containers for displaying content and actions. They provide structure and elevation to organize information.
Basic Usage
Cards provide a flexible container for content with built-in elevation and hover states.
Basic Card
Card Title
Card description goes here.
Card content goes here.
With Footer
Cards can include footers for actions or additional information.
Card with Footer
Card Title
Card description goes here.
Card content goes here.
Usage
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
export function MyComponent() {
return (
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description.</CardDescription>
</CardHeader>
<CardContent>
<p>Card content</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
);
}Material 3 Features
- Elevation: Uses Material 3 elevation-sm with hover elevation-md
- Surface Container: Uses surface-container tokens for proper background
- Borders: Subtle outline-variant borders with opacity
- Hover States: Enhanced elevation and border color on hover
- Theme Support: Automatically adapts to light and dark themes