Primitives

Card

Composable container for grouping related content. Use the parts you need, skip the ones you don't.

With header and footer

Full composition

Sprint velocity

Last 4 sprints averaged 38 points/sprint.

Consistent improvement over the quarter with reduced carry-over.

<Card>
  <CardHeader>
    <CardTitle>Sprint velocity</CardTitle>
    <CardDescription>Last 4 sprints averaged 38 points.</CardDescription>
  </CardHeader>
  <CardContent>
    <p className='text-sm text-muted-foreground'>...</p>
  </CardContent>
  <CardFooter className='justify-end'>
    <Button variant='ghost' size='sm'>Dismiss</Button>
    <Button size='sm'>View report</Button>
  </CardFooter>
</Card>

Minimal

No parts — just padding

Revenue

$24,580

This month

+12%

Parts

Card — the outer container
CardHeader — padded top section, stacks children
CardTitle, CardDescription — semantic header typography
CardContent — padded body
CardFooter — bordered-top footer, gapped flex row