Card
Card Component
Flexible card container with header, content, and footer sections. Perfect for dashboards and lists.
Import
import { Card } from '@covers/ui';Usage
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from '@covers/ui';
<Card>
<CardHeader>
<CardTitle>Card Title</CardTitle>
<CardDescription>Optional description text</CardDescription>
</CardHeader>
<CardContent>
<p>Main content goes here.</p>
</CardContent>
<CardFooter>
<Button>Action</Button>
</CardFooter>
</Card>
// Compact variant
<Card className="p-4">
<h3 className="font-semibold">Quick Card</h3>
<p className="text-slate-400">Simple content</p>
</Card>Props
| Name | Type | Description |
|---|---|---|
| className | string | Additional CSS classes |
Default Styling
bg-slate-900 border border-slate-700 rounded-lg
Part of CoverKit
This component is part of CoverKit (@covers/ui), a dark-first React component library.