npm i @velkin/react
import { VuCard } from "@velkin/react/card";| Prop | Type | Default | Description |
|---|---|---|---|
| variant | VuCardVariant | "elevated" | Surface paint recipe. Default: `"elevated"`. |
| tone | VuCardTone | "normal" | Neutral surface weight. Default: `"normal"`. |
| size | VuCardSize | "md" | Content shell padding and section gap. Default: `"md"`. |
| radius | VuCardRadius | "md" | Corner radius preset. Default: `"md"`. |
| orientation | VuCardOrientation | "vertical" | Layout axis. Default: `"vertical"`. |
| divider | VuCardDivider | "none" | Section hairline strategy. Default: `"none"`. |
| flush | boolean | false | Zeros content shell padding. Default: `false`. |
| interactive | boolean | false | Focusable surface that dispatches `vu-activate`. Default: `false`. |
| selected | boolean | false | Chosen-state ring; sets `aria-pressed` when `interactive`. Default: `false`. |
| disabled | boolean | false | Blocks interaction when `interactive`. Default: `false`. |
| label | string | "" | Accessible name when `interactive` and no visible heading. |
| Event | Detail | Description |
|---|---|---|
| vu-activate | VuCardActivateDetail | Fires on click or keyboard activation (Enter / Space) when `interactive` and not `disabled`. Detail: `{ source }` where `source` is the original `MouseEvent` / `KeyboardEvent`. |
| Slot | Description |
|---|---|
| media | Full-bleed media (image, video, picture, svg). No padding; auto-sizes common media tags to `inline-size: 100%`. In `orientation="horizontal"`, this slot sits on the start edge instead of on top. |
| media-actions | Overlay actions positioned at the top-end of `media` (favorite, play, options menu). `media` is the containing block, so any slotted element is absolutely positioned for free — typically icon buttons. |
| header | Top section. Renders as a flex row with `space-between` (title left, secondary action right) so a slotted heading + actions split naturally; wraps on narrow widths. |
| — | - Body content (the default slot). |
| footer | Bottom section. Renders as a flex row with `flex-end` (actions on the trailing edge — `Cancel` + `Save` pattern). For status-text + action layouts, add `margin-inline-start: auto` to the trailing item. |
| Part | Description |
|---|---|
| base | The outer surface that lays the variant paint. |
| media | The media wrapper around the `media` slot. Acts as the positioning context for `media-actions`. |
| media-actions | The overlay wrapper around the `media-actions` slot. Top-end of `media` by default. |
| media-divider | Hairline between media and content when `divider` is `header` or `all`. |
| content | Column wrapping `header` / body / `footer`; holds the shared padding inset and vertical `gap` between sections. |
| header | The header section. |
| section-divider | Hairline between adjacent content sections when `divider` is set. |
| body | The body section. |
| footer | The footer section. |
| Name | Definition |
|---|---|
| VuCardActivateDetail | |
| VuCardDivider | |
| VuCardOrientation | |
| VuCardRadius | |
| VuCardSize | |
| VuCardTone | |
| VuCardVariant | |