Card

A composable surface. Unlike the other components, Card is five small pieces you assemble — use only the parts you need.

Deploy to production

This will push the current branch to your live environment. The change is visible to all users immediately.

Parts

Component	Element	Description
`Card`	`div`	The bordered surface.
`CardHeader`	`div`	Top section, stacked with a small gap.
`CardTitle`	`h3`	Heading inside the header.
`CardContent`	`div`	Body text, muted by default.
`CardFooter`	`div`	Bottom row, laid out horizontally for actions.

Every part accepts className and forwards all native attributes.

Common patterns

// Header and body only
<Card>
  <CardHeader>
    <CardTitle>Storage</CardTitle>
  </CardHeader>
  <CardContent>4.2 GB of 10 GB used.</CardContent>
</Card>

// Body only — add the top padding back
<Card>
  <CardContent className="pt-6">Just some text.</CardContent>
</Card>

Notes

CardContent and CardFooter use pt-0 because CardHeader already supplies the top padding. If you use CardContent without a header, add pt-6 back.

Card sets no width. Constrain it from the outside with className.