Properties
| Property | Type | Description |
|---|---|---|
variant | "error" "information" "warning" "success" "divider" string | (optional) Defines the semantic purpose and subsequently the style of the visual helper. |
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 Section should break out negatively on larger screens. You cannot 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' }. |
outlineWidth | string number | (optional) Define a custom border width. Defaults to var(--card-outline-width). Supports also media query breakpoints like { small: '2px' }. |
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' }}. |
surface | "dark" "light" "initial" | (optional) Define the surface color context. When set to dark, ondark design tokens will be used for text and outline colors. Use initial to reset to the component's default behavior, ignoring any parent surface context. Uses --token-color-decorative-first-bold-static as the default background color and --token-color-text-neutral-ondark as the text color. |
element | string React.Element | (optional) Define what HTML element should be used. Defaults to <section>. |
ref | React.RefObject | (optional) By providing a React.Ref we can get the internally used element (DOM), e.g. ref={myRef} by using React.useRef(null). |
Space | string object | (optional) Spacing properties like top or bottom are supported. |
Variants
| Variant | Description |
|---|---|
information | 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 |