Card

Beta notice: This page is being built.Edit on GitHub(opens in new tab)

Card has one shared set of props. onChange makes it selectable, onClick or href makes it clickable, and otherwise it is a plain content card. Selection takes priority when both kinds of interaction props are supplied.

This is a LongLink-specific component.

longlink docs component "Card"

Example

Order details

Properties

Card - Properties
childrenReactNode
Content rendered inside the card.
padding0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10
Inner spacing using the theme spacing scale.
isClippedboolean
Clips full-bleed content to the card's rounded edges.
variant"default" | "transparent" | "muted"
Background color variant, independent of the interaction mode.
widthstring | number
Card width; numbers are pixels and strings are CSS sizes.
heightstring | number
Card height; numbers are pixels and strings are CSS sizes.
maxWidthstring | number
Maximum card width.
minHeightstring | number
Minimum card height.
inertboolean
Makes the card and its descendants non-interactive.
labelstring
Accessible label for interactive cards; supply a descriptive label.
onClick(event: ViewMouseEvent) => void
Runs when the card surface is activated.
hrefstring
Link destination, used when onChange is absent.
targetstring
Link target; external URLs open in a new tab in Views.
isDisabledboolean
Disables activation of an interactive card.
isSelectedboolean
Whether the card is selected.
onChange(isSelected: boolean) => void
Enables selection and receives its next state, overriding onClick and href.