Some properties provide flexibility for specific integrations. Follow the component's usage guidance. Customizations beyond the documented patterns need a use case approved by DNB UX. Read about intended use and customization.
Properties#
| Type | Description | |
|---|---|---|
stack | boolean | (optional) True to stack the sub components with space between. Same as stack in Card. But defaults to true. |
Other properties inherited from Card#
| 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. |
direction | "horizontal" "vertical" | (optional) Direction of sub components. Can be: horizontal or vertical. Defaults to vertical. |
gap | "xx-small" "x-small" "small" "medium" "large" "x-large" "xx-large" false | (optional) How much space between the sub components. Use false for no space. Defaults to false, or medium when stack is set. |
alignSelf | "flex-start" "flex-end" "center" "baseline" "stretch" | (optional) Align the Card itself when it is a flex item in an outer container (CSS align-self). 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. |