Skip to content

Properties

PropertiesDescription
variant(optional) defines the semantic purpose and subsequently the style of the visual helper. Will take precedence over the style_type property
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' }.
dropShadow(optional) use true to show the default Eufemia DropShadow. Supports also media query breakpoints like { small: true }.
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

VariantDescription
infoNeutral, informational.
errorIndicates an erroneous state.
warningDraws attention to a potential problem that may or may not require an action on the user's part.
successIndicates a successful state.

Styles

You can easily customize the color.

StyleDescription
whiteuses --color-white.
divideruses --color-white as background with a border-line on top and bottom.
transparentCSS 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-greenuses --color-mint-green.
lavenderuses --color-lavender.
sand-yellowuses --color-sand-yellow.
pistachiouses --color-pistachio.
black-3uses --color-black-3.
emerald-greenuses --color-emerald-green.
fire-reduses --color-fire-red. Is used by GlobalStatus