Card Preview

A card is a container that holds information and actions related to a single concept or object, like a document or a contact.

Cards can give information prominence and create predictable patterns. While they're very flexible, it's important to use them consistently for particular use cases across experiences.

Loading...
Open in CodeSandbox
Card storybook
React guidance

Properties

appearance

Sets the appearance of the card.

filled The card will have a shadow, border and background color.

filled-alternative This appearance is similar to filled , but the background color will be a little darker.

outline This appearance is similar to filled , but the background color will be transparent and no shadow applied.

subtle This appearance is similar to filled-alternative , but no border is applied.

“filled” “subtle” “outline” “filled-alternative”
Default:
“‘filled’”

as

“div”
Default:
none

checkbox

The internal checkbox element that renders when the card is selectable.

({ as?: "input"; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; }, "children"> & { ...; }) | null
Default:
none

defaultSelected

Defines whether the card is initially in a selected state when rendered.

boolean
Default:
false

floatingAction

Floating action that can be rendered on the top-right of a card. Often used together with selected , defaultSelected , and onSelectionChange props

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

focusMode

Sets the focus behavior for the card.

off The card will not focusable.

no-tab This behaviour traps the focus inside of the Card when pressing the Enter key and will only release focus when pressing the Escape key.

tab-exit This behaviour traps the focus inside of the Card when pressing the Enter key but will release focus when pressing the Tab key on the last inner element.

tab-only This behaviour will cycle through all elements inside of the Card when pressing the Tab key and then release focus after the last inner element.

“off” “no-tab” “tab-exit” “tab-only”
Default:
“‘off’”

onSelectionChange

Callback to be called when the selected state value changes.

((event: CardOnSelectionChangeEvent, data: CardOnSelectData) => void)
Default:
none

orientation

Defines the orientation of the card.

“horizontal” “vertical”
Default:
“‘vertical’”

selected

Defines the controlled selected state of the card.

boolean
Default:
false

size

Controls the card’s border radius and padding between inner elements.

“small” “medium” “large”
Default:
“‘medium’”