Component

Card

Grouped container for related content. Cards establish visual hierarchy and organize information into scannable units.

Usage

Use cards to group related content. Avoid nesting cards within cards.

Playground

Preview
Card Title
Card description goes here.

Card content area

Configure

Yes

Stack content vertically or place media beside content.

Optional image placement for the selected layout.

Code

<Card className="w-[360px]">
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description goes here.</CardDescription>
  </CardHeader>
  <CardContent>
    {/* card content */}
  </CardContent>
  <CardFooter>
    <Button variant="outline">Learn more</Button>
  </CardFooter>
</Card>

Do

  • Use consistent padding and spacing within cards
  • Group closely related items in the same card

Don't

  • Don't nest cards inside cards
  • Don't use cards as purely decorative containers