Components
Card
A versatile container component for grouping related content with optional header, footer, and styling.
Card
The Card component provides a flexible container for grouping and displaying related content. It supports headers, descriptions, content areas, and footers, making it ideal for dashboards, product listings, and content previews.
Cards are compositional — use Card.Header, Card.Title, Card.Description, Card.Content, and Card.Footer to build your layout.
Features
- Compositional API with separate header, content, and footer components
- Built-in title and description styling
- Consistent border, shadow, and spacing
- Flexible content area for any child components
- Customizable via className props
- Works well with other design system components
Usage
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from '@loke/design-system/card';
export default function Example() {
return (
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Card description goes here.</CardDescription>
</CardHeader>
<CardContent>
<p>Your content goes here.</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
);
}Tips:
- Use
CardHeaderwithCardTitleandCardDescriptionfor consistent heading styles. CardContentprovides proper padding for your main content.CardFooteris ideal for action buttons or metadata.
Props
Card
Prop
Type
CardHeader
Prop
Type
CardTitle
Prop
Type
CardDescription
Prop
Type
CardContent
Prop
Type
CardFooter
Prop
Type
Examples
Basic card
Notifications
You have 3 unread messages.
Check your inbox for new updates and announcements from your team.
<Card className="w-[350px]">
<CardHeader>
<CardTitle>Notifications</CardTitle>
<CardDescription>You have 3 unread messages.</CardDescription>
</CardHeader>
<CardContent>
<p>Check your inbox for new updates.</p>
</CardContent>
</Card>Card with header and footer
Create project
Deploy your new project in one-click.
<Card className="w-[350px]">
<CardHeader>
<CardTitle>Create project</CardTitle>
<CardDescription>Deploy your new project in one-click.</CardDescription>
</CardHeader>
<CardContent>
<form>
<div className="grid w-full items-center gap-4">
<div className="flex flex-col space-y-1.5">
<Label htmlFor="name">Name</Label>
<Input id="name" placeholder="Name of your project" />
</div>
</div>
</form>
</CardContent>
<CardFooter className="flex justify-between">
<Button variant="outline">Cancel</Button>
<Button>Deploy</Button>
</CardFooter>
</Card>Card variants
Total Revenue
$45,231.89
+20.1% from last month
Subscriptions
+2,350
+180.1% from last month
Active Now
+573
+201 since last hour
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Card>
<CardHeader>
<CardTitle>Total Revenue</CardTitle>
</CardHeader>
<CardContent>
<p className="text-2xl font-bold">$45,231.89</p>
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Subscriptions</CardTitle>
</CardHeader>
<CardContent>
<p className="text-2xl font-bold">+2350</p>
</CardContent>
</Card>
</div>Interactive card
Interactive Card
This card has hover effects.
Hover over this card to see the shadow effect. Interactive cards can be used for navigation or selection.
<Card className="w-[350px] cursor-pointer transition-shadow hover:shadow-lg">
<CardHeader>
<CardTitle>Click me</CardTitle>
<CardDescription>This card has hover effects.</CardDescription>
</CardHeader>
<CardContent>
<p>Interactive cards can be used for navigation.</p>
</CardContent>
</Card>Accessibility
- Cards use semantic HTML structure with proper heading hierarchy.
- Use appropriate heading levels (
h2,h3, etc.) withinCardTitlefor screen reader navigation. - When cards are interactive, ensure they have proper focus states and click handlers.
- Consider using
asChildwith a link element for navigational cards.
Best practices
- Use consistent card layouts within the same context (e.g., all dashboard cards).
- Keep card titles concise and descriptive.
- Use
CardDescriptionfor supplementary information, not critical content. - Group related actions in
CardFooter. - Consider responsive behavior — cards often need different sizes on mobile vs desktop.
- Don't overload cards with too much content; they should be scannable.