# Card

```tsx
import { Card } from '@tangible/ui';
```

Interactive docs and examples: [Card in Storybook](https://storybook-tangible-ui.pages.dev/?path=/docs/components-card--docs).

## Card props

| Prop | Type | Default | Description |
| - | - | - | - |
| `as?` | `"article" \| "div" \| "section"` | `'article'` | |
| `children?` | `React.ReactNode` | | |
| `className?` | `string` | | |
| `disabled?` | `boolean` | | |
| `elevated?` | `boolean` | | **Deprecated.** Use `variant="elevated"`. |
| `inline?` | `boolean` | | **Deprecated.** Use `mode="inline"`. |
| `interactive?` | `boolean` | | |
| `mode?` | `"inline" \| "stacked"` | `'stacked'` | Content arrangement. |
| `onClick?` | `React.MouseEventHandler<HTMLElement>` | | **Deprecated.** Use Card.Link for interactive cards. onClick without Card.Link has no keyboard/screen-reader semantics. |
| `style?` | `React.CSSProperties` | | |
| `variant?` | `"elevated" \| "ghost" \| "outline" \| "seamless" \| "solid"` | `'solid'` | Surface treatment. |

Also accepts the standard attributes of `HTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

### Card.Head

| Prop | Type | Default | Description |
| - | - | - | - |
| `children?` | `React.ReactNode` | | |
| `className?` | `string` | | |

Also accepts the standard attributes of `HTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

### Card.Body

| Prop | Type | Default | Description |
| - | - | - | - |
| `children?` | `React.ReactNode` | | |
| `className?` | `string` | | |

Also accepts the standard attributes of `HTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

### Card.Foot

| Prop | Type | Default | Description |
| - | - | - | - |
| `children?` | `React.ReactNode` | | |
| `className?` | `string` | | |

Also accepts the standard attributes of `HTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

### Card.Media

| Prop | Type | Default | Description |
| - | - | - | - |
| `alt` | `string` | | Alt text — pass `""` for decorative media. |
| `flush?` | `boolean` | `true` | Full-bleed media (negative-margin, square outer corners). |

Also accepts the standard attributes of `ImgHTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

### Card.Link

Takes the standard attributes of `AnchorHTMLAttributes` (`data-*`, `aria-*`, event handlers), passed to the element it renders.

## Examples

- [Variants](https://storybook-tangible-ui.pages.dev/?path=/story/components-card--variants): The five surface variants. `solid` (default) and `elevated` fill; `outline` is border-only; `ghost` and `seamless` are chrome-less (seamless also drops padding). On a tinted surface the fill-less variants read against the background.

- [Variants — interactive](https://storybook-tangible-ui.pages.dev/?path=/story/components-card--interactive-variants): With `interactive` (or a `Card.Link` child): solid/outline/elevated shift border/shadow on hover, ghost reveals a fill (`--tui-card-bg-interact` → `bg-muted`), seamless changes nothing but still gets a focus ring. Hover / tab to see each.

- [Card.Media — stacked & inline](https://storybook-tangible-ui.pages.dev/?path=/story/components-card--media): `Card.Media` (flush by default) is full-bleed at the top in `stacked` and covers the side in `inline`. The outer corners follow the card radius via concentric-radius geometry.

- [Grid — footers pinned](https://storybook-tangible-ui.pages.dev/?path=/story/components-card--grid-equal-heights): Cards of different content lengths in a grid row. `.tui-card__inner` is a full-height flex column in stacked mode, so a `Card.Foot` with `.tui-margin-block-start-auto` sinks to the bottom edge — the two footers align on the baseline of the taller card rather than floating directly under their (shorter) body copy. Cards without a foot simply leave the trailing space empty. This is the personal-site “What I’m working on” layout.

Other stories: Basic, Inline, With Stretched Link, Elevated, Disabled, Inline + Elevated ([interactive page](https://storybook-tangible-ui.pages.dev/?path=/docs/components-card--docs)).

## Component API tokens

Read via fallback, never declared. Set one on an ancestor to restyle every instance under it.

- `--tui-card-bg`
- `--tui-card-fg`
- `--tui-card-bg-interact`
- `--tui-card-border`
- `--tui-card-border-width`
- `--tui-card-border-interact`
- `--tui-card-border-active`
- `--tui-card-radius`
- `--tui-card-shadow`
- `--tui-card-shadow-interact`
- `--tui-card-gap`
- `--tui-card-padding`
- `--tui-card-foot-basis`

---

Interactive version: https://storybook-tangible-ui.pages.dev/?path=/docs/components-card--docs