Properties
| Type | Description | |
|---|---|---|
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.Action Properties
| Type | Description | |
|---|---|---|
href | string | (optional) The URL to navigate to. When set, renders an anchor element. |
to | string | (optional) Route path for use with a router Link component (e.g. react-router). Pass a custom element that accepts to. |
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. |
onClick | function | (optional) Click handler. When used without href/to, renders a button-like wrapper with keyboard support (Enter/Space). |
children | React.ReactNode | (required) Contents of the Card inside the action wrapper. |
Card properties | Various | (optional) All Card properties are supported. |
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. |