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 Folio 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
Pass p-3 to the header and footer and px-3 pb-3 to the content for a more compact appearance.
The featured card pairs the surface with media and a Badge; the compact one tightens the padding with a className on each compound part.
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/shadcn/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 Folio tokens -- no className needed for standard usage.