# Card

> A solid card with a washed header, a lifted highlight tone, and a sunken muted tone.

Category: Layout and surfaces. Docs page: https://rime.mjsons.net/components/card

## Installation

```bash
npx shadcn@latest add KezLahd/rime/card
```

Card is a solid surface for content that should not show the field through it: summaries, forms, record details. default is a solid card with a washed header; highlight lifts the one block that needs action (white, a crisp brand hairline, a soft lift and a faint top rule); muted is a sunken box for secondary information.

It sets data-surface="solid", so secondary buttons inside become white tiles, and publishes --card-pad and --inner-radius to its content.

Two ways to fill it, rendering identically: props (title, description, actions, footer) or shadcn's parts (CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter). With parts, the children render bare and the parts give the structure.

## Usage

```tsx
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui";

<Card title="This month" description="Updated hourly" actions={<Button size="sm" variant="secondary">Export</Button>}>…</Card>
```

## Composition

```tsx
Card
├── CardHeader
│   ├── CardTitle
│   ├── CardDescription
│   └── CardAction
├── CardContent
└── CardFooter
```

## Props: Card

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `title` | `ReactNode` |  |  |
| `description` | `ReactNode` |  |  |
| `actions` | `ReactNode` |  | Right side of the header: buttons, a status pill. |
| `footer` | `ReactNode` |  |  |
| `tone` | `"default" \| "highlight" \| "muted"` | `"default"` | default = solid card with a washed header. highlight = lifted white panel with a soft brand top edge, for the one block on a screen that needs the user's action. muted = sunken neutral box for secondary information. |
| `padding` | `"sm" \| "md" \| "lg"` | `"md"` |  |
| `as` | `"div" \| "section" \| "article" \| "aside"` | `"section"` |  |
| `headingLevel` | `2 \| 3 \| 4` | `3` |  |

Also accepts the native attributes of: AriaAttributes, DOMAttributes, HTMLAttributes.

## Props: CardHeader

Also accepts the native attributes of: AriaAttributes, DOMAttributes, HTMLAttributes.

## Props: CardContent

Also accepts the native attributes of: AriaAttributes, DOMAttributes, HTMLAttributes.

## Props: CardFooter

Also accepts the native attributes of: AriaAttributes, DOMAttributes, HTMLAttributes.

## Examples

### Tones

```tsx
<Card title="Default">…</Card>
<Card tone="highlight" title="Two invoices are overdue">…</Card>
<Card tone="muted">Secondary info</Card>
```

### Composed from parts

The same card written with shadcn's parts; it renders identically to the props form below it.

```tsx
<Card>
  <CardHeader>
    <CardTitle>This month</CardTitle>
    <CardDescription>Updated hourly</CardDescription>
    <CardAction><Button size="sm" variant="secondary">Export</Button></CardAction>
  </CardHeader>
  <CardContent>32 invoices paid</CardContent>
  <CardFooter><Button size="sm">View all</Button></CardFooter>
</Card>

// identical to:
<Card title="This month" description="Updated hourly" actions={…} footer={…}>32 invoices paid</Card>
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--card-bg` | `var(--surface-solid)` |
| `--card-border` | `var(--line)` |
| `--card-header-bg` | `linear-gradient(to right, var(--surface-sunken), var(--surface-sunken-2))` |
| `--card-pad-lg` | `calc(24px * var(--density))` |
| `--card-pad-md` | `calc(20px * var(--density))` |
| `--card-pad-sm` | `calc(14px * var(--density))` |
| `--card-radius` | `var(--r-xl)` |
| `--card-shadow` | `var(--shadow-hairline-card)` |

System tokens it reads: `--border-w`, `--density`, `--font-body`, `--highlight-edge`, `--highlight-glow`, `--highlight-line`, `--ink-heading`, `--ink-muted`, `--line`, `--line-glass`, `--line-soft`, `--r-2xs`, `--r-xl`, `--shadow-hairline-card`, `--shadow-lift`, `--surface-solid`, `--surface-sunken`, `--surface-sunken-2`, `--text-card-title`, `--text-small`.

## Accessibility

- The title renders as h3 by default; set headingLevel to fit the page outline.

## Do

- Use highlight once per screen at most.

## Don't

- Don't tint a card to make it stand out; lift it (tone="highlight").