# Card

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

## Cách dùng

### Khi nào dùng

- 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.

### Khi nào không dùng

- 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.

## Ví dụ

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

## Nên và không nên

### Nên

- 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.

### Không nên

- 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

### Slot

| Tên | Bắt buộc | Mô tả |
| --- | --- | --- |
| `header` | không | Optional header: title, description, and an optional CardAction. |
| `content` | không | Main body content. |
| `footer` | không | Optional footer actions or meta. |

## Cấu tạo

| Phần | Mô tả |
| --- | --- |
| `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. |

## Khả năng truy cập

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).

## Cài đặt

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

Lệnh này thêm luôn `styles/werewolf.css`, bộ token mà mọi component dùng, và các component khác mà nó cần. Import file đó một lần trong CSS gốc, ngay sau `@import "tailwindcss"`, với đường dẫn tính từ file CSS đó (từ `app/globals.css` là `@import "../styles/werewolf.css"`).