Properties#
| Type | Description | |
|---|---|---|
layoutEngine | "css" "legacy" | (optional) Select the internal Flex layout engine. Defaults to legacy for backwards compatibility. Use css to opt in to native CSS gap. |
outset | boolean | (optional) Whether or not to break out (using negative margins) on larger screens. Defaults to false. |
stack | boolean | (optional) True to stack the sub components with space between. The spacing will default to medium. Defaults to false. |
direction | "horizontal" "vertical" | (optional) Defaults to vertical. |
alignSelf | "flex-start" "flex-end" "center" "baseline" "stretch" | (optional) Defaults to stretch. |
title | React.ReactNode | (optional) Define a title that appears on top of the Card. |
responsive | boolean | (optional) Define if the card should behave responsive. Defaults to true. |
filled | boolean | (optional) Define if the Card should get the same background color as the outline border. |
outline | string | (optional) Define the outline color. Defaults to var(--card-outline-color). |
outlineWidth | string number | (optional) Define the outline width. Defaults to var(--card-outline-width) (0.0625rem). |
dropShadow | boolean | (optional) Define if the Card should have drop shadow. Uses Section dropShadow. |
backgroundColor | string | (optional) Define the background color. Defaults to var(--card-background-color). |
element | React.Element | (optional) Define the type of element. Defaults to section. |
children | React.ReactNode | (required) Contents. |
Flex.Container | Various | (optional) Flex.Container properties. |
Flex.Item | Various | (optional) Flex.Item properties. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Card.Info Properties#
| Type | Description | |
|---|---|---|
children | React.ReactNode | (required) Freely composed content such as headings, text, graphics, or actions. Do not include interactive controls when the whole card is interactive. |
Card properties | Various | (optional) All Card properties are supported. Defaults to responsive=false, dropShadow=true, stack=true, gap="small", and innerSpace="small" on small screens or "medium" on larger screens. All defaults can be overridden. |
Card.Action properties | Various | (optional) Card.Action properties are supported for a whole-card link or action. Set href, to, or onClick to make Card.Info interactive. Do not nest Card.Info.CloseButton, Card.Info.MediaButton, or other interactive controls in an interactive card. |
Card.Action Properties#
| Type | Description | |
|---|---|---|
href | string | (optional) The URL to navigate to. When set, renders an anchor element. Values using a script-executing protocol (javascript: or vbscript:) are removed. |
to | string | (optional) Route path for use with a router Link component (e.g. react-router). Pass a custom element that accepts to. Values using a script-executing protocol (javascript: or vbscript:) are removed. |
target | string | (optional) The anchor target attribute. |
rel | string | (optional) The anchor rel attribute. |
element | string React.Element | (optional) Custom element to render as the wrapper. Defaults to a when href/to is set. Use this for router Link components. |
children | React.ReactNode | (required) Contents of the Card inside the action wrapper. |
Card properties | Various | (optional) Card properties are supported. A whole-card action must not contain nested interactive controls. |
Card.List Properties#
| Type | Description | |
|---|---|---|
children | React.ReactNode | (required) Card.ListItem elements. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Card.ListItem Properties#
| Type | Description | |
|---|---|---|
center | boolean "when-small" | (optional) Center the content of the list item. Use true to always center, or "when-small" to center only on small screens. |
children | React.ReactNode | (required) A Card or Card.Action element. |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Card.Info.CloseButton Properties#
| Type | Description | |
|---|---|---|
title | React.ReactNode | (optional) Accessible close label. Defaults to the translated Card.closeTitle. |
Button properties | Various | (optional) Button properties are supported, except href and type. Always renders a type="button" control. Compose directly inside a noninteractive Card or Card.Info. |
Card.Info.MediaButton Properties#
| Type | Description | |
|---|---|---|
videoRef | React.RefObject<HTMLVideoElement | null> | (required) Stable ref attached to the video element. Mount the video and control together. After a render commits, the control detects replacement video elements, removes old listeners, and applies playback preferences to the new element. Native play, pause, ended, emptied, and error events update the control. |
autoPlay | boolean | (optional) Automatically plays muted video when reduced motion is not requested. Enabling reduced motion pauses playback. Manual playback remains available. A browser may block autoplay. |
playTitle | string | (optional) Accessible play label. Defaults to the translated Card.playTitle. |
pauseTitle | string | (optional) Accessible pause label. Defaults to the translated Card.pauseTitle. |
title | React.ReactNode | (optional) Override both playback labels with a fixed accessible label. |
Button properties | Various | (optional) Button properties are supported, except href, type, icon, and transitionState. Position defaults to the top-left corner of the nearest positioned container. The application owns the video element, sources, poster, and error fallback. |
Card.Info.Overlay Properties#
| Type | Description | |
|---|---|---|
gradient | boolean | (optional) Add a transparent-to-dark gradient behind the content. |
blur | boolean | (optional) Add progressive backdrop blur behind the content. The gradient remains available in browsers without backdrop-filter support. |
children | React.ReactNode | (required) Accessible content and controls above the decorative effects. Headings and paragraphs automatically receive text shadows, including when nested in layout components. Provides dark-surface context for Buttons and other supporting components. |
Flex.Stack properties | Various | (optional) All Flex.Stack properties are supported. Defaults to native CSS gaps, gap="small", and responsive padding: small on small screens and large on larger screens. Use spacing or style to position the overlay within the media container. |