Card
Flexible card component with multiple variants, 16px border radius, 20px padding, and subtle translucent borders.
Preview
Default card with header, content, and footer
Card Title
Card description goes here
This is the main content area of the card. Perfect for displaying information.
Variants
Five card variants optimized for light mode
Default
Clean and minimal
Subtle shadow and border. The go-to variant.
Elevated
Enhanced depth
Adds prominence with shadow-sm for featured content.
Interactive
Clickable with hover
Responds with indigo border and shadow on hover.
Outline
Transparent bg
Border only, no background fill or shadow.
Mist
Frosted glass effect
Semi-transparent with backdrop blur.
Examples
Real-world card implementations
Eidetic Design
Stacked Patterns
Modern layout patterns for grouping cards
Vertical Stack
Fanned Stack
Scale Stack
Animated Stack
Props
Card component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'elevated' | 'interactive' | 'outline' | 'mist' | 'default' | Visual variant |
padding | 'none' | 'sm' | 'md' | 'lg' | 'md' | Internal padding |
className | string | — | Additional CSS classes |
children | ReactNode | — | Card content |
Sub-components
CardHeader - Container for title and description
CardTitle - Main heading (h3)
CardDescription - Subtitle/description text
CardContent - Main content area
CardFooter - Footer with actions
Usage
Import and implementation example
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
export default function Example() {
return (
<>
{/* Basic card */}
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>
<p>Content goes here</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
{/* Variants */}
<Card variant="default">...</Card>
<Card variant="elevated">...</Card>
<Card variant="interactive">...</Card>
<Card variant="outline">...</Card>
<Card variant="mist">...</Card>
{/* No padding (for images) */}
<Card padding="none" className="overflow-hidden">
<img src="/image.jpg" alt="..." />
<CardContent>...</CardContent>
</Card>
</>
)
}Features
Built-in functionality
- Five variants: Default, elevated, interactive, outline, mist
- Padding options: None, small, medium, large
- Composable: Mix and match sub-components
- 16px border radius: Consistent rounded corners
- Translucent borders: Subtle 80% opacity borders
- Interactive variant: Hover effects for clickable cards
- Mist variant: Frosted glass with backdrop blur
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Uses semantic article element when appropriateCardTitle uses h3 for proper heading hierarchyInteractive variant should use button or anchorKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Focus interactive elements within card |
| Enter/Space | Activate focused buttons/links |
Notes
- Wrap interactive cards in button or anchor tags
- Maintain proper heading hierarchy
- Ensure sufficient color contrast
- Consider focus-visible styles for keyboard users