ProductCard

—

Fixed width in pixels for image sizing hints. When omitted, card fills its container (fluid width).

—

Mode determines the card behavior: - "single": Shows a single product (no carousel, swatches) - "group": Shows a product group with carousel, swatches, etc. - "inspiration": Image-forward card with hover overlay (for explore/masonry feeds) - "swatch": Compact Material Desk tile (Figma Material Card) — image-first idle; hover / keyboard-focus-visible chrome (brand/name + Quickview + spark); selected (not hovered) = shell / selection border only (no spark); menuOpen keeps the Minus close affordance visible; dragging strips chrome and keeps the selection border; optional processing footer

—

Whether this card is active (highlighted). Apps should compute this based on their own state (e.g., sidepanel open, recommendations anchor).

—

Swatch-mode canvas drag: when true, hide Quickview / brand-name caption / spark while keeping the selected shell (white border). Distinct from {@link dragAdapter} (catalog dnd-kit wiring).

—

Render slot for framework-specific image components.

—

Swatch-mode spark button handler. The control mounts in swatch mode and reveals on hover / focus-visible / menuOpen; omit the handler for a presentational (inert, non-focusable) spark that does not capture clicks.

—

Optional flexible "action notice" shown under the meta row (e.g. ⚡ Ships overnight, ⌕ Find similar). Prop-driven; omit to hide.

—

Component slot that wires drag behavior (e.g. dnd-kit useDraggable) around the card image. Omit for a static, non-draggable image.

—

Component to render internal navigation links. Defaults to "a". Pass Link from next/link in Next.js apps to enable client-side navigation and prefetching.

—

Controls <Link prefetch> on all internal links. true forces full route prefetch (including data) on viewport entry. Default (undefined) uses Next.js auto behavior (partial prefetch for dynamic routes).

—

—

When true, the swatch spark spins to a Minus while an anchored suggestions menu is open. Pair with onAdd as the open/close toggle.

—

Collapsed glyph for the swatch add control. "spark" (default) reads as "suggest an action" on canvas surfaces; "plus" reads as a direct add-to-board in library search results, where clicking places the material immediately.

—

Override the default card click behavior. Apps should provide this to handle navigation/sidepanel opening.

—

When provided, a "Quickview" glass pill appears over the image on hover and invokes this handler (e.g. open a quick-view sidepanel). Prop-driven; omit to hide.

—

Callback when variant selection changes.

—

Swatch-mode processing footer ("Matching materials" + elapsed). When set, replaces the brand/name caption and hides Quickview.

—

URL pattern for product links. Use {slug} as placeholder.

—

Render slot for the add-to-cart control, placement-discriminated ("compact" | "cta" | "inspiration"). Omit to render no cart UI at all.

—

Render slot for app-specific tools (saves, visual search, etc.) Rendered in the image overlay area.

—

Show the active row pointer under the card when active.

—

Optional status badge overlaid on the image (e.g. "New"). Prop-driven; omit to hide.

—

For "single" mode: the specific variant ID to display For "group" mode: the initially selected variant ID

—

Override image URL - used for visual search to show the matched image

—

Prioritise loading images (sets loading="eager" and adds preload link)

—

—

—

—

—

—

—

When set, renders the notice as a link (e.g. "Find similar").

—

Optional leading glyph (16px). Pass any icon from @desk/ui/icons.

—

The notice text. When omitted, the component renders null.

—

When set, renders the notice as a button. Takes precedence over href.

Color role for the label + icon.

—

—

Callback after item is successfully added to cart

—

Fixed width in pixels for image sizing hints. When omitted, card fills its container (fluid width).

—

Swatch-mode canvas drag: when true, hide Quickview / brand-name caption / spark while keeping the selected shell (white border). Distinct from {@link dragAdapter} (catalog dnd-kit wiring).

—

Optional flexible "action notice" shown under the meta row (e.g. ⚡ Ships overnight, ⌕ Find similar). Prop-driven; omit to hide.

—

Component to render internal navigation links. Defaults to "a". Pass Link from next/link in Next.js apps to enable client-side navigation and prefetching.

—

Controls <Link prefetch> on all internal links. true forces full route prefetch (including data) on viewport entry. Default (undefined) uses Next.js auto behavior (partial prefetch for dynamic routes).

—

When true, the swatch spark spins to a Minus while an anchored suggestions menu is open. Pair with onAdd as the open/close toggle.

—

Collapsed glyph for the swatch add control. "spark" (default) reads as "suggest an action" on canvas surfaces; "plus" reads as a direct add-to-board in library search results, where clicking places the material immediately.

—

Override the default card click behavior. Apps should provide this to handle navigation/sidepanel opening.

—

When provided, a "Quickview" glass pill appears over the image on hover and invokes this handler (e.g. open a quick-view sidepanel). Prop-driven; omit to hide.

—

Show the active row pointer under the card when active.

—

Optional status badge overlaid on the image (e.g. "New"). Prop-driven; omit to hide.

—

Override image URL - used for visual search to show the matched image

—

Prioritise loading images (sets loading="eager" and adds preload link)

—

—

—

—

—

—

Override image URL - used for visual search to show the matched image

—

Prioritise loading this image (sets loading="eager" and adds preload link)

—

—

—

Right-aligned elapsed / ETA label (e.g. "23 sec").

Process chip label.

—

Optional click on the process chip.

—

Optional flexible "action notice" shown under the meta row (e.g. ⚡ Ships overnight, ⌕ Find similar). Prop-driven; omit to hide.

—

—

—

Component slot that wires drag behavior (e.g. dnd-kit useDraggable) around the card image. Omit for a static, non-draggable image.

—

Whether this card is active (highlighted). Apps should compute this based on their own state (e.g., sidepanel open, recommendations anchor).

—

Swatch-mode canvas drag: when true, hide Quickview / brand-name caption / spark while keeping the selected shell (white border). Distinct from {@link dragAdapter} (catalog dnd-kit wiring).

—

Component to render internal navigation links. Defaults to "a". Pass Link from next/link in Next.js apps to enable client-side navigation and prefetching.

—

Controls <Link prefetch> on all internal links. true forces full route prefetch (including data) on viewport entry. Default (undefined) uses Next.js auto behavior (partial prefetch for dynamic routes).

—

—

Mode determines the card behavior: - "single": Shows a single product (no carousel, swatches) - "group": Shows a product group with carousel, swatches, etc. - "inspiration": Image-forward card with hover overlay (for explore/masonry feeds) - "swatch": Compact Material Desk tile (Figma Material Card) — image-first idle; hover / keyboard-focus-visible chrome (brand/name + Quickview + spark); selected (not hovered) = shell / selection border only (no spark); menuOpen keeps the Minus close affordance visible; dragging strips chrome and keeps the selection border; optional processing footer

—

Swatch-mode spark button handler. The control mounts in swatch mode and reveals on hover / focus-visible / menuOpen; omit the handler for a presentational (inert, non-focusable) spark that does not capture clicks.

—

Collapsed glyph for the swatch add control. "spark" (default) reads as "suggest an action" on canvas surfaces; "plus" reads as a direct add-to-board in library search results, where clicking places the material immediately.

—

When true, the swatch spark spins to a Minus while an anchored suggestions menu is open. Pair with onAdd as the open/close toggle.

—

Override the default card click behavior. Apps should provide this to handle navigation/sidepanel opening.

—

When provided, a "Quickview" glass pill appears over the image on hover and invokes this handler (e.g. open a quick-view sidepanel). Prop-driven; omit to hide.

—

Swatch-mode processing footer ("Matching materials" + elapsed). When set, replaces the brand/name caption and hides Quickview.

—

Callback when variant selection changes.

—

URL pattern for product links. Use {slug} as placeholder.

—

Render slot for the add-to-cart control, placement-discriminated ("compact" | "cta" | "inspiration"). Omit to render no cart UI at all.

—

Render slot for framework-specific image components.

—

Render slot for app-specific tools (saves, visual search, etc.) Rendered in the image overlay area.

—

Show the active row pointer under the card when active.

—

Optional status badge overlaid on the image (e.g. "New"). Prop-driven; omit to hide.

—

For "single" mode: the specific variant ID to display For "group" mode: the initially selected variant ID

—

Fixed width in pixels for image sizing hints. When omitted, card fills its container (fluid width).

—

Horizontal placement over the image. - "center" — catalog full card (default) - "start" — swatch Material Card (Figma bottom-left)

—

—

Keep the pill visible without hover (e.g. Storybook forced state). Swatch selection does not use this — Quickview stays hover / keyboard-focus-visible gated (not mouse :focus-within after click).

Pill label.

—

Invoked when the pill is activated. When omitted, nothing renders.

—

—

—

—

Badge text. When omitted, nothing renders.

Badge tone.

—

—

—

Selected / active → brand yellow when the control is revealed; does not force visibility on its own.

—

—

Overrides the outer anchor (Center) classes. Default pins the control to the card's top-right (absolute top-1 right-1). Section frames pass a relative anchor so the same control can sit in screen-space chrome.

—

When true, the glyph spins from Sparkle to Minus, brand chrome stays on, and the control stays visible even without hover — so the close affordance remains reachable while the suggestions panel is open.

—

Parent pointer-hover has already revealed chrome. Kept separate from active so click-to-select under an open hover does not retarget the reveal classes (same end visual; selection only flips tone).

—

Click handler for the spark. When omitted, the control stays visible but is inert (no pointer/keyboard capture) so parent surfaces can own selection.

—

Collapsed glyph. "spark" (default) — suggest an action; "plus" — direct add-to-board (library search results). The menuOpen Minus morph behaves identically for both.

—

Swatch size, inherited by items via context unless they override it.

—

—