Card Component
Displays structured content in a visually distinct container with sections for headers, content, and footers.
Basic Card
A simple card with header, content, and footer sections.
Card Title
Card description goes here.
This is the main content area of the card.
Login Form Example
Card component used for a login form (matching shadcn/ui example).
Login to your account
Enter your email below to login to your account
Card Grid Layout
Multiple cards in a responsive grid layout.
Total Revenue
January - December 2024
+20.1% from last year
Active Users
Current active subscriptions
+180.1% from last month
New Customers
This month
+12.5% from last month
Card with Action Buttons
Cards with footer action buttons in different layouts.
Create Project
Deploy your new project in one-click.
Your project will be created with default settings.
Team Members
Invite your team to collaborate.
Content-Only Cards
Cards without footers, suitable for displaying information.
Notifications
You have 3 unread messages.
Your call has been confirmed.
5 minutes ago
You have a new message!
1 hour ago
System Status
All systems operational.
Custom Styling
Cards with custom CSS classes for extended styling.
Featured Card
With custom border color
This card has a custom border using the Class parameter.
Enhanced Shadow
With larger shadow effect
This card uses an enhanced shadow for more depth.
Accessibility
Semantic structure and proper content hierarchy.
✓ Semantic HTML structure with proper heading hierarchy
✓ Clear visual hierarchy with title, description, and content sections
✓ Sufficient color contrast for all text (WCAG 2.1 AA)
✓ Responsive layout adapts to different screen sizes
✓ Dark mode compatible via CSS variables
✓ Keyboard navigation works naturally with interactive elements
Usage
Common card patterns and code examples.
Basic Card Structure
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
<CardContent>
Content goes here
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>