# Card

> Container chia khu vực rõ ràng với header/body/footer slots — building block cơ bản của mọi dashboard, list item, content section.

## API

### `<Card>` (root)

| Prop | Type | Default | Description |
|---|---|---|---|
| `variant` | `'basic' \| 'elevated' \| 'outlined' \| 'ghost'` | `'basic'` | Kiểu surface + border |
| `className` | `string` | — | Override container |
| `...rest` | `HTMLAttributes<HTMLDivElement>` | — | Pass-through (id, onClick, data-*) |

### `<Card.Header>` · `<Card.Body>` · `<Card.Footer>`

Sub-components đơn giản nhận `children` + `className`. Mỗi slot có padding và border riêng — composable theo nhu cầu (vd chỉ Body, không Header/Footer).

## Variants

- **basic** — bg-surface + border (default cho mọi card thông tin)
- **elevated** — thêm `shadow-lg`, dùng cho card nổi bật / dialog inline
- **outlined** — border dashed, transparent bg → dùng cho empty state hoặc "drop zone"
- **ghost** — bg-surface-2, no border → flush với background, dùng trong layout dày

## Composition

```
<Card>
  <Card.Header>…</Card.Header>
  <Card.Body>…</Card.Body>
  <Card.Footer>…</Card.Footer>
</Card>
```

Slots optional — chỉ `Body` cũng OK.

## States

- **Default**: tĩnh, không interactive
- **Clickable**: pass `onClick` + `role="button"` + `tabIndex={0}` (caller tự thêm — Card không bake in)

## Usage

```tsx
import { Card, Button } from '@cowork/ui';

<Card variant="elevated">
  <Card.Header>
    <h3 className="text-base font-medium">Đơn hàng #1284</h3>
  </Card.Header>
  <Card.Body>
    <p>Khách: Nguyễn Văn A</p>
    <p>Sản phẩm: Nhang trầm An Nhiên — 2 hộp</p>
  </Card.Body>
  <Card.Footer>
    <Button size="sm">Xem chi tiết</Button>
  </Card.Footer>
</Card>
```

## Real-world example

- An Nhien admin dashboard: Card list đơn hàng mới nhất, mỗi card có header `#mã đơn`, body `khách + sản phẩm`, footer `nút action`.
- KHI Pilates: Card lớp học sắp diễn ra (header = giờ + tên lớp, body = HLV + số chỗ trống, footer = nút Đặt chỗ).
- A-Kryphan: Card bài viết blog (header = thumbnail, body = excerpt, footer = meta date + tag).

## Accessibility

- Card không phải interactive element — không thêm role mặc định
- Khi dùng clickable, caller phải thêm `role="button"` + `tabIndex={0}` + keyboard handler
- Heading bên trong Header nên là `<h3>` hoặc `<h4>` tùy hierarchy của page

## Responsive behavior

Không có breakpoint internal — Card co giãn theo parent grid/flex. Padding giữ constant (px-5, py-5) mọi screen. Nếu cần shrink padding mobile, override qua `className`.

## Related

- [[KPICard]] — đặc biệt cho metric, không dùng slot Header/Body/Footer
- [[Modal]] — Card phóng to thành dialog có overlay
- [[Drawer]] — Card slide từ cạnh màn hình

## Source

`react/src/molecules/Card.tsx`