Properties
| Properties | Description |
|---|---|
variant | (optional) defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type prop |
element | (optional) define what HTML element should be used. Defaults to <section>. |
breakout | (optional) use true to enable a fullscreen breakout look. Supports also media query breakpoints like { small: boolean }. Defaults to true. |
outline | (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 | (optional) use true to enable rounded corners (border-radius). Supports also media query breakpoints like { small: boolean }. Defaults to false. |
backgroundColor | (optional) define a custom background color, instead of a variant. Use a Eufemia color. Supports also media query breakpoints like { small: 'white' }. |
textColor | (optional) define a custom text color to compliment the backgroundColor. Use a Eufemia color. Supports also media query breakpoints like { small: 'black-80' }. |
innerSpace | (optional) will add a padding around the content. Supports also media query breakpoints like {small: { top: 'medium' }}. |
innerRef | (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 | (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 |