# Card

Groups content about one subject on a raised surface.

```tsx
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>
```

## 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](https://magoo.cc/en/components/structure/cards.html) (`cards`). Magoo is educational guidance; test the behavior in your implementation._

## API

Install:

```bash
npx @aline-aroucha/pui add card
```

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

### Card

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Header, content and footer. |

### CardTitle

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Short title; use a heading level that fits the page. |

### CardDescription

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | One sentence of context. |

### CardAction

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | A control placed at the header's end. |

### CardFooter

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | Actions; the primary one goes last. |

## Related pages

- [Separator](https://aline-aroucha.github.io/pui/components/separator.html)
- [Table](https://aline-aroucha.github.io/pui/components/table.html)

---
PUI documentation · https://aline-aroucha.github.io/pui/components/card.html