Card

Groups content about one subject on a raised surface.

Code

import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"

<Card>
  <CardHeader>
    <CardTitle>Pro plan</CardTitle>
    <CardDescription>Billed monthly. Cancel anytime.</CardDescription>
  </CardHeader>
  <CardContent>$18 per month, up to 10 members.</CardContent>
  <CardFooter>
    <Button variant="outline">Compare plans</Button>
    <Button>Subscribe</Button>
  </CardFooter>
</Card>

Examples

Example source

var P = window.PUI, h = React.createElement;
  ReactDOM.createRoot(document.getElementById('preview')).render(h(P.Card, { style: { maxWidth: 380 } },
    h(P.CardHeader, null, h(P.CardTitle, null, 'Pro plan'), h(P.CardDescription, null, 'Billed monthly. Cancel anytime.')),
    h(P.CardContent, null, h('div', { style: { font: '800 30px/36px var(--font-sans)' } }, '$18', h('span', { className: 'pui-muted', style: { fontSize: 14, fontWeight: 400 } }, ' /month'))),
    h(P.CardFooter, null, h(P.Button, { variant: 'outline' }, 'Compare plans'), h(P.Button, null, 'Subscribe'))));

Usage

What you provide

A short CardTitle (card-title style) and an optional one-sentence CardDescription.
Content in CardContent; actions in CardFooter, primary on the right.

Rules

Padding comes from the component (24px = space-6). Don't add p-* to the Card.
Don't nest a Card inside a Card. Inside a card, split blocks with Separator or gap-6.
Card grids: grid gap-4 md:grid-cols-2 lg:grid-cols-3.
Don't highlight a card with a colored side border; use a Badge in the header.

Accessibility

A card is a visual grouping, not an ARIA role. A static card takes no focus just because it has a border.
Use headings that fit the page outline for card titles, and a list when cards form a collection.
Links navigate and buttons run actions. Don't nest a button or link inside another link; a secondary action (Favorite) never also opens the card's main destination.
Name links so they identify the card ("View Pro plan", not a row of "Learn more"). If the whole card area extends a link, the focus ring must show that area.
Informative images need useful alt text; decorative ones don't repeat the title.

Adapted from Magoo 1.6.0 by Marcelo Sales: Cards (cards). Magoo is educational guidance; test the behavior in your implementation.

API

Install with:

npx @aline-aroucha/pui add card

<Card>
  <CardHeader>
    <CardTitle />
    <CardDescription />
    <CardAction />
  </CardHeader>
  <CardContent />
  <CardFooter />
</Card>

Card

Name	Type
`children`	`ReactNode`
Header, content and footer.

CardTitle

Name	Type
`children`	`ReactNode`
Short title; use a heading level that fits the page.

CardDescription

Name	Type
`children`	`ReactNode`
One sentence of context.

CardAction

Name	Type
`children`	`ReactNode`
A control placed at the header's end.

CardFooter

Name	Type
`children`	`ReactNode`
Actions; the primary one goes last.