The generic container primitive — outlined surface, card radius, base padding.
Anatomy
┌───────────────────────────┐ ← border-outline-variant, │ p-4 padding │ rounded-card, bg-surface-container │ (children — caller owns │ │ the internal layout) │ └───────────────────────────┘
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
interactive | boolean | false | Hover surface lift + scale(0.98) press. Set on clickable cards only. |
className | string | — | cn-merged; override padding with p-* when needed. |
| …rest | HTMLAttributes<HTMLDivElement> | — | onClick, role, etc. pass through. |
Motion
150ms on background-color + transform only (no transition-all),
and only when interactive. Static cards are motionless.
A11y
Renders a plain div — semantics come from the caller. If the whole
card is clickable, prefer wrapping it in a link/button or pass
role="button" + tabIndex={0} + key handlers; don't leave a bare
onClick on a div for keyboard users. Interactive cards must contain a
visible affordance (the hover lift alone is not discoverable).