# Card

> A content surface that groups one subject, with optional actions.

- **Level**: molecule · **Status**: stable · **Role**: content
- **Import**: `import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@rrios-forge/ui/molecules/card";`
- **Source**: `packages/ui/src/molecules/card`

Reusable surface for grouped content. Compound API: Card + CardHeader + CardTitle + CardDescription + CardContent + CardFooter. Three tones (default, muted, elevated) and four padding densities. Card is not interactive by default; pass interactive=true plus a real semantic interactive wrapper. Patterns consulted: Patterns/Information Architecture · SectionAnatomy, Patterns/Composition · ReuseBeforeCreate + DoNotOverCompose, Patterns/Density & Growth · DensityLevels.

## Use it for

- Content card → `Card`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `surface` | — | `default` `muted` `raised` | `default` | Which surface level a container paints. |
| `padding` | — | `none` `sm` `md` `lg` | `md` | Inner spacing of a container. |
| `interactive` | — | `true` `false` | `false` | Responds to the pointer: hover and press feedback, a pointer cursor. |
| `fill` | — | `true` `false` | `false` | Card grows to its row's tallest sibling (ADR-012). |

## Stories

- [Playground](/?path=/story/components-molecules-card--playground) · frame: `/iframe.html?id=components-molecules-card--playground&viewMode=story`
- [Anatomy](/?path=/story/components-molecules-card--anatomy) · frame: `/iframe.html?id=components-molecules-card--anatomy&viewMode=story`
- [Tones](/?path=/story/components-molecules-card--tones) · frame: `/iframe.html?id=components-molecules-card--tones&viewMode=story`
- [Padding](/?path=/story/components-molecules-card--padding) · frame: `/iframe.html?id=components-molecules-card--padding&viewMode=story`
- [With actions](/?path=/story/components-molecules-card--with-actions) · frame: `/iframe.html?id=components-molecules-card--with-actions&viewMode=story`
- [Dense content](/?path=/story/components-molecules-card--dense-content) · frame: `/iframe.html?id=components-molecules-card--dense-content&viewMode=story`
- [In context](/?path=/story/components-molecules-card--in-context) · frame: `/iframe.html?id=components-molecules-card--in-context&viewMode=story`
- [Fill in grid](/?path=/story/components-molecules-card--fill-in-grid) · frame: `/iframe.html?id=components-molecules-card--fill-in-grid&viewMode=story`
- [Vibrant](/?path=/story/components-molecules-card--vibrant) · frame: `/iframe.html?id=components-molecules-card--vibrant&viewMode=story`

## Decisions that name it

- ADR-004 — Migrate boolean configuration props to semantic axes
- ADR-005 — Visual operational rules: surfaces, interaction, motion
- ADR-006 — Geometry and typography signature
- ADR-007 — Material highlight on raised surfaces
- ADR-009 — Editorial Frame: PageShell v3 + new `TopBar` molecule
- ADR-011 — PageShell v5: adaptive lateral sidebar + mobile nav bubble
- ADR-012 — Card.fill axis for symmetric growth in grids
- ADR-027 — Vibrant is the system's material, not one of its members

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).