# Card

Bordered surface for grouping related content. Uses radius-container and a border; no shadow (shadows are for floating layers only).

## Usage

### When to use

- Group related content about one subject, such as a project with its title, a short description and its actions.
- Give the group a header, a body and at most one main action, in the footer.

### When not to use

- A single line of text or a lone value. Use a list row.
- Content that is already inside a card. Use a divider or spacing instead.
- A surface that acts as one button. Card is not a button; to make the whole card clickable, stretch one link over it and put no other buttons or links inside.

## Examples

### Default

```tsx
<Card>
  <CardHeader>
    <CardTitle>Project</CardTitle>
    <CardDescription>Last edited 2 hours ago.</CardDescription>
  </CardHeader>
  <CardContent>Design tokens and components for vibe coders.</CardContent>
  <CardFooter>
    <Button variant="secondary">Cancel</Button>
    <Button>Save</Button>
  </CardFooter>
</Card>
```

### With action

```tsx
<Card>
  <CardHeader>
    <CardTitle>Project</CardTitle>
    <CardDescription>Last edited 2 hours ago.</CardDescription>
    <CardAction>
      <Button variant="secondary" size="sm">Share</Button>
    </CardAction>
  </CardHeader>
  <CardContent>Design tokens and components for vibe coders.</CardContent>
</Card>
```

## Do and don't

### Do

- Use Card to group related content. Give it one primary action at most, in the footer.
- To make the whole card clickable, stretch one link over it, use color-overlay-hover on hover and show the focus ring on the card. Then don't put any other button inside.
- Use a border, not a shadow. Shadows are for menus, popovers and dialogs.

### Don't

- Don't put a card inside a card. Use a divider (color-border) or spacing instead.
- Don't use a card for a single line of text or a lone value. Use a list row.
- Don't restyle the fill through className. If the surface color is wrong, open an issue instead of overriding it.

## Props

### Slots

| Name | Required | Description |
| --- | --- | --- |
| `header` | no | Optional header: title, description, and an optional CardAction. |
| `content` | no | Main body content. |
| `footer` | no | Optional footer actions or meta. |

## Anatomy

| Part | Description |
| --- | --- |
| `root` | The card surface: border, radius-container, background-surface. |
| `header` | Top block for title and description. Becomes a two-column grid when it holds an action. |
| `action` | Optional slot at the top right of the header (a button or menu), next to the title and description. |
| `title` | Primary label of the card. |
| `description` | Supporting text under the title. |
| `content` | Main body of the card. |
| `footer` | Actions or meta row at the bottom. |

## Accessibility

Role: `generic`

- Root is a plain div with no role. If a card needs to be announced as a group, add role="group" and aria-labelledby pointing at the CardTitle at the call site.
- Card is not interactive by itself. Put buttons and links inside; do not make the whole card a button.
- If the whole card is clickable, use one link stretched over the card (an ::after on the link with absolute inset-0; the root is relative) and no other buttons or links inside.
- Title should be a heading level that fits the page outline (h2 or h3 in most views).

## Install

```bash
npx shadcn add https://werewolf-ui.vercel.app/r/card.json
```

This also adds `styles/werewolf.css`, the tokens every component uses, and any other component it needs. Import that file once in your root CSS, after `@import "tailwindcss"`, with a path relative to that CSS file (from `app/globals.css` it is `@import "../styles/werewolf.css"`).