Card
moleculeSurface container with five elevation variants (ghost → combo), optional header/footer, interactive onClick/href support, status accent bars (inset box-shadow, curves with border-radius), selectable state, and hoverable prop for hover lift with neutral glow without making the card interactive. Default radius bumped to lg. Overflow visible by default (hidden only when media prop is set) so nested child shadows are never clipped. Collapsible auto-bleeds inside Card — just wrap and it works. Adapts to the active theme.
Elevation variants
Five variants form a visual importance hierarchy, from ghost (invisible) to combo (inset body). Headers and footers recede into the tint on combo while the body pops.
Header + footer
Full card with title and action footer.
Interactive card
onClick renders as a button with hover lift and active press. href renders as a link.
Status accent
A colored bar on the left edge signals status context.
Media & selected
media renders full-bleed content at the top. selected applies a unified accent-subtle background for toggle behavior.
CardBleed
Let children stretch edge-to-edge, cancelling the card's horizontal padding. Text stays aligned with the rest of the card content.
Hoverable
Hover lift and neutral glow without making the card interactive. Use when the card wraps its own clickable content like a Collapsible.
Usage
Installation
API Reference
Card props — * required
| Prop | Type | Default | Description |
|---|---|---|---|
children* | React.ReactNode | — | Card body content. |
variant | "ghost" | "outline" | "filled" | "elevated" | "combo" | "outline" | Elevation level. ghost = transparent, no border. outline = transparent with border. filled = surfaceTint background. elevated = surface with border and shadow. combo = filled wrapper with elevated body inset. |
header | React.ReactNode | — | Content rendered in the card header area. |
footer | React.ReactNode | — | Content rendered in the card footer area. |
media | React.ReactNode | — | Full-bleed content rendered at the top of the card before the header, with no padding. |
onClick | () => void | — | Renders the card as a <button> with hover lift, focus ring, and active press state. |
href | string | — | Renders the card as an <a> with hover lift, focus ring, and active press state. |
hoverable | boolean | false | Enables hover lift and neutral glow shadow without making the card a button or link. Interactive cards (onClick/href) get accent-colored glow; hoverable-only cards get a neutral glow (12% text-primary). Use when the card wraps its own interactive content. |
disabled | boolean | false | Reduces opacity, blocks interaction, sets cursor: not-allowed. |
status | "success" | "warning" | "danger" | "info" | — | Adds a 3px colored bar on the left edge as an inset box-shadow that curves with the card's border-radius. |
selected | boolean | false | Applies a unified accent-subtle background across all variants. Sets aria-pressed on interactive cards. |
padding | "none" | "sm" | "md" | "lg" | "md" | Inner padding. Vertical padding is tighter than horizontal. |
shadow | "none" | "sm" | "md" | "lg" | "sm" | Drop shadow. |
radius | "none" | "sm" | "md" | "lg" | "lg" | Border radius. |
style | React.CSSProperties | — | Inline style override. |