Properties
| Properties | Description |
|---|---|
style_type | (optional) to define the style of the visual helper. Use and Style ID from below. Defaults to mint-green-12. |
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>. |
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. |
Styles
You can easily customize the color.
| Style | Description |
|---|---|
mint-green-12 | (default) uses --color-mint-green-12. |
white | uses --color-white. |
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 |
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. |