Stronger shadow on hover/focus-within (Figma hover state).
boolean
boolean
false
accessibleLabel
aria-label
Accessible name when no visible title (rare; prefer `title` / `title` slot).
string | undefined
string | undefined
—
Slots
Name
Description
media
Top image or illustration (overrides `image-src` when provided).
title
Custom title markup (overrides the `title` attribute).
subtitle
Custom subtitle markup (overrides the `subtitle` attribute).
header
Full header region (overrides built-in title / subtitle / `header-actions`).
header-actions
Header toolbar (e.g. action menu button).
default
Body content between header and footer.
actions
Footer actions (e.g. `<duo-button>`).
Usage
Card presents a bounded content tile: optional top media, a header (title, subtitle, and optional header actions), body copy, and optional footer actions. It matches Figma data display / card.
Do
Set title (or the title slot) so the card has a clear heading; default title-tag is h3.
Use image-src / image-alt or the media slot for top imagery; use actions for footer buttons.
Put menus or icon controls in header-actions.
Enable interactive when the whole card is hoverable (e.g. clickable tile) to match Figma hover elevation.
Don’t
Don’t use a card for page layout shells — use duo-stack or duo-box.
Don’t use a card for blocking dialogs — use duo-modal.
Don’t rely on color alone in footer actions — button labels must stay readable.