Components
Card
Displays a card with header, content, and footer. Use it to group related content and actions on a single bordered surface.
Preview
Rendered with live Cognition tokens — toggle the theme and the surface, border, and footer tint remap, no dark: classes.
API
Body content.
<Card>
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Supporting copy.</CardDescription>
</CardHeader>
<CardContent>Body content.</CardContent>
<CardFooter>
<Button className="w-full">Action</Button>
</CardFooter>
</Card>CardHeader, CardContent, and CardFooter are all optional — compose only the parts you need. The footer carries the top border and subtle tint automatically.
Examples
The card component supports a size prop that can be set to "sm" for a more compact appearance.
The featured card pairs the surface with media and a Badge; the compact one is size="sm", which tightens padding and the title throughout the compound parts.
Don't and Do
Don't reach for a Card as a generic div wrapper or hardcode bg-white / border-gray-200 on it — that breaks dark mode and the rebrand.
// Group related content on one surface
<Card>
<CardHeader>
<CardTitle>Monthly usage</CardTitle>
<CardDescription>Resets on the 1st.</CardDescription>
</CardHeader>
<CardContent>{usage}</CardContent>
</Card>import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
export function EventCard() {
return (
<Card>
<CardHeader>
<CardTitle>Design systems meetup</CardTitle>
<CardDescription>
A practical talk on component APIs.
</CardDescription>
</CardHeader>
<CardFooter>
<Button className="w-full">View Event</Button>
</CardFooter>
</Card>
);
}Drop-in ready. The surface, border, shadow, and footer tint are baked into the component as Cognition tokens — no className needed for standard usage.