Card

Cards display content and actions about a single subject.

Props

React props
NameTypeRequiredDefaultDescription
variantCardVariantNo'outlined'Visual container treatment.
interactivebooleanNofalseEnables the actionable treatment: state layer, pointer cursor, and a visible focus outline. Framework adapters also apply it whenever `href` is provided.
childrenReactNodeNoCustom card content; layout is fully owned by the consumer.
classNamestring | ClassNameComponent<CardInterface> | Partial<Record<"card" | "stateLayer", string>>NoClasses or state-aware element classes applied through the shared style contract.
hrefstringNoNavigation destination; switches the native element from div to link.
refRef<HTMLDivElement> | Ref<HTMLAnchorElement>NoRef forwarded to the native div element. Ref forwarded to the native anchor element.