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 |
spacing | (optional) will add spacing around the given content. If true, then large is used. See the available sizes. Defaults to false. |
element | (optional) define what HTML element should be used. Defaults to <section>. |
style_type | (optional) to define the style of the visual helper. Defaults to mint-green-12. |
inner_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 | (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 |