Card

Card container with 2 sizes (default, sm), border + shadow-xs, rounded-xl (14px), and segmented footer with border-t + bg-muted/50. Composed of CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.

Figma: DS-001 Foundations ยท 301:1502

Import

Live Demo

Card component with header, content, and footer compositions.

Login Form

Login to your account
Enter your email below to login to your account.

Event Card

Event cover
Featured
Design systems meetup
A practical talk on component APIs, accessibility, and shipping faster.

Small Card

Small Card
This card uses the small size variant.

The card component supports a size prop that can be set to "sm" for a more compact appearance.

Props

NameTypeDefaultDescription
size"default" | "sm""default"The size of the card

Examples

Basic Card

Card with Header

Standard card with title and description.

Card with Footer

Card with action buttons in the footer.