Properties
| Property | Type | Description |
|---|---|---|
variant | string | (optional) Defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type property. |
breakout | boolean | (optional) Use true to enable a fullscreen breakout look. Supports also media query breakpoints like { small: boolean }. Defaults to true. |
outset | boolean | (optional) Define if the Card should break out negatively on larger screens. You can not use breakout and outset together. Defaults to false. |
outline | string | (optional) Define a custom border color. If true is given, color-black-8 is used. Use a Eufemia color. Supports also media query breakpoints like { small: 'black-8' }. |
roundedCorner | boolean | (optional) Use true to enable rounded corners (border-radius). Supports also media query breakpoints like { small: boolean }. Defaults to false. |
backgroundColor | string | (optional) Define a custom background color, instead of a variant. Use a Eufemia color. Supports also media query breakpoints like { small: 'white' }. |
dropShadow | boolean | (optional) Use true to show the default Eufemia DropShadow. Supports also media query breakpoints like { small: true }. |
textColor | string | (optional) Define a custom text color to compliment the backgroundColor. Use a Eufemia color. Supports also media query breakpoints like { small: 'black-80' }. |
innerSpace | string | (optional) Will add a padding around the content. Supports also media query breakpoints like {small: { top: 'medium' }}. |
innerRef | React.Ref | (optional) By providing a React Ref we can get the internally used element (DOM). E.g. inner_ref={myRef} by using React.createRef() or React.useRef(). |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Variants
| Variant | Description |
|---|---|
info | Neutral, informational. |
error | Indicates an erroneous state. |
warning | Draws attention to a potential problem that may or may not require an action on the user's part. |
success | Indicates a successful state. |
Styles
You can easily customize the color.
| Style | Description |
|---|---|
white | uses --color-white. |
divider | uses --color-white as background with a border-line on top and bottom. |
transparent | CSS transparent. Used in situations where a Section is of interest, but without a color as a basis. |
mint-green-12 | (default) uses --color-mint-green-12. |
mint-green | uses --color-mint-green. |
lavender | uses --color-lavender. |
sand-yellow | uses --color-sand-yellow. |
pistachio | uses --color-pistachio. |
black-3 | uses --color-black-3. |
emerald-green | uses --color-emerald-green. |
fire-red | uses --color-fire-red. Is used by GlobalStatus |