UnreviewedAny data-* attribute is forwarded to the rendered element.
Any aria-* attribute is forwarded to the rendered element.
Optional UnreviewedheaderHeader content, in the top zone. A string is wrapped in a <Title> — a real
heading in the document outline, tinted to match tone, at a level that
tracks size (small → 5, medium → 4, large → 3). Pass your own node
(<Title level={2}>, an <h2>) for a different level or styling. Omit for
no header.
Optional UnreviewedsubtitleA secondary line under the header title, rendered as smaller text
(<Text size="small">) in the heading section. Tinted to match tone, like
the title. Omit for no subtitle.
Optional UnreviewediconLeading visual for the header, laid out to the left of the header /
subtitle as one aligned row (so it doesn't sit inline in the title, where it
mis-aligns). A string is an icon shape, rendered as an <Icon> inside a
circular chip (sized per the card via --card-icon-size); pass an <img>,
initials (<Text>), or any node to use it as-is. Omit for none.
Optional UnreviewedfooterFooter content, usually action buttons. Rendered as a left-aligned row
(wraps under pressure) — the opposite of Dialog's right-aligned footer.
Optional UnreviewedmediaMedia (image, illustration) rendered full-bleed to the card edge, clipped to
its corners. Position it with mediaPosition.
Optional UnreviewedmediaWhich edge the media bleeds to.
Optional UnreviewedchildrenThe card body. A string is wrapped in a <Text> at secondary priority,
following the card's tone and size; pass your own nodes to take over.
Optional UnreviewedtoneSemantic tone, or any literal CSS color ('#ff1493', 'rebeccapurple') for
a one-off custom tone. Named tones re-point the surface + text; a custom
color keeps its hue while lightness/chroma are pinned. 'neutral' (the
default) is the same as omitting it.
Optional UnreviewedprioritySurface emphasis. primary (the default) is a clean sheet; secondary is a
subtle fill; tertiary is a frosted, semi-transparent panel with a backdrop
blur.
Optional UnreviewedsizeSize variant — scales the padding.
Optional UnreviewedselectedSelected / chosen state — draws an inset ring in the tone color, for choice-card / plan-picker patterns.
Optional UnreviewedloadingLoading state — dims the card with a skeleton pulse, sets aria-busy, and (in
link mode) blocks navigation.
Optional UnreviewedroundFully-round corners (border-radius: 999px, clamped to the box). Pass a
number (px) or a CSS length string ('1rem') for a custom radius. Omit for
the default --card-radius.
Optional UnreviewedhrefTurn the whole card into a link. The card renders a focusable anchor and its
accessible name comes from header → body → this URL (override with
aria-label). A link card is display content — don't nest interactive
controls inside it.
Optional UnreviewedtargetAnchor target (only with href).
Optional UnreviewedrelAnchor rel (only with href).
Optional UnreviewedpingSpace-separated URLs the browser pings on navigation (only with href).
Optional UnreviewedclassCSS class on the component's root element (merged with the component's own
classes). Use it directly for layout and positioning — grid/flex placement,
margins, alignment — rather than wrapping the component in a <div>/<span>.
Optional UnreviewedstyleInline styles on the component's root element. Set layout/positioning here
(or via className) directly on the component instead of adding a wrapper.
Optional UnreviewedidHTML id attribute.
Optional UnreviewedtitleHTML title attribute — native browser tooltip on hover.
Optional UnreviewedslotAssigns the element to a named <slot> of a parent web component (e.g.
slot="header" inside a <Card>, slot="footer" inside a <Dialog>).
Optional UnreviewedtabTab order. Set to -1 to skip the element when tabbing.
Optional UnreviewedkeyReact/Preact reconciliation key when rendered inside a list. Consumed by the JSX runtime (not forwarded as a DOM attribute).
Common props for JSX component wrappers.