AG Design System

Component

Card

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

Installation

Install from the live registry into any shadcn-initialized app (another project). Prefer installing ag-globals first so AG tokens and fonts are present.

npx shadcn@latest add https://design.ag.org/r/card

Usage

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

Composition

Button

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>

Variants & States

Supported variants, sizes, and interaction states for this component.

Layouts

  • Vertical
  • Horizontal

States

  • With footer
  • Without footer

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