+
+ | background |
+
+ {backgroundTypeString}
+ |
+
+ Based on the CSS property background allows configuring all properties related to the
+ background of a container. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+ - |
+
+
+ | border |
+
+
+ {borderTypeString}
+
+ being BorderProperties an object with the following properties:
+
+ {borderPropertiesTypeString}
+
+ and LineStyleValues an enum with the following possible values:
+
+
+ 'none' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'
+
+
+ |
+
+ Based on the CSS property border allows configuring all properties related to the border of a
+ container.
+ |
+ - |
+
+
+ | borderRadius |
+
+ string
+ |
+
+ Sets the border-radius CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+ - |
+
+
+ | boxShadow |
+
+ string
+ |
+
+ Sets the box-shadow CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'none'
+ |
+
+
+ | boxSizing |
+
+ 'content-box' | 'border-box'
+ |
+
+ Sets the box-sizing CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'content-box'
+ |
+
+
+ | children |
+
+ React.ReactNode
+ |
+ Custom content inside the container. |
+ - |
+
+
+ | display |
+
+ 'block' | 'inline-block' | 'inline' | 'none'
+ |
+
+ Sets the display CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information. The set of values is limited to the ones related to the outer display type. If
+ you want to apply any pattern from the inner box and how the children are laid out, we recommend you to
+ use the Flex and Grid components.
+ |
+
+ 'block'
+ |
+
+
+ | float |
+
+ 'left' | 'right' | 'none'
+ |
+
+ Sets the float CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'none'
+ |
+
+
+ | height |
+
+ string
+ |
+
+ Sets the height CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'auto'
+ |
+
+
+ | inset |
+
+ {insetTypeString}
+ |
+
+ Based on the CSS property inset this prop is a shorthand that corresponds to the{" "}
+ top, right, bottom, and/or left properties.
+ |
+
+ 'auto'
+ |
+
+
+ | margin |
+
+ 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Space
+ |
+
+ Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+ 'right' properties in order to specify different margin sizes.
+ |
+ - |
+
+
+ | maxHeight |
+
+ string
+ |
+
+ Sets the max-height CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'none'
+ |
+
+
+ | maxWidth |
+
+ string
+ |
+
+ Sets the max-width CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'none'
+ |
+
+
+ | minHeight |
+
+ string
+ |
+
+ Sets the min-height CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'auto'
+ |
+
+
+ | minWidth |
+
+ string
+ |
+
+ Sets the min-width CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'auto'
+ |
+
+
+ | outline |
+
+ {outlineTypeString}
+ |
+
+ Based on the CSS property outline allows configuring all properties related to the outline of
+ a container.
+ |
+ - |
+
+
+ | overflow |
+
+ {overflowTypeString}
- and LineStyleValues an enum with the following possible values:
+ being OverflowValues an enum with the following possible values:
-
- 'none' | 'dotted' | 'dashed' | 'solid' | 'double' | 'groove' | 'ridge' | 'inset' | 'outset'
-
-
- |
-
- Based on the CSS property border allows configuring all properties related to the border of a
- container.
- |
- - |
-
-
- | borderRadius |
-
- string
- |
-
- Sets the border-radius CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
- - |
-
-
- | boxShadow |
-
- string
- |
-
- Sets the box-shadow CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'none'
- |
-
-
- | boxSizing |
-
- 'content-box' | 'border-box'
- |
-
- Sets the box-sizing CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'content-box'
- |
-
-
- |
-
-
- children
-
- |
-
- React.ReactNode
- |
- Custom content inside the container. |
- - |
-
-
- | display |
-
- 'block' | 'inline-block' | 'inline' | 'none'
- |
-
- Sets the display CSS property. See{" "}
-
- MDN
- {" "}
- for further information. The set of values is limited to the ones related to the outer display type. If you
- want to apply any pattern from the inner box and how the children are laid out, we recommend you to use the
- Flex and Grid components.
- |
-
- 'block'
- |
-
-
- | float |
-
- 'left' | 'right' | 'none'
- |
-
- Sets the float CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'none'
- |
-
-
- | height |
-
- string
- |
-
- Sets the height CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'auto'
- |
-
-
- | inset |
-
- {insetTypeString}
- |
-
- Based on the CSS property inset this prop is a shorthand that corresponds to the{" "}
- top, right, bottom, and/or left properties.
- |
-
- 'auto'
- |
-
-
- | margin |
-
- 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Space
- |
-
- Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
- 'right' properties in order to specify different margin sizes.
- |
- - |
-
-
- | maxHeight |
-
- string
- |
-
- Sets the max-height CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'none'
- |
-
-
- | maxWidth |
-
- string
- |
-
- Sets the max-width CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'none'
- |
-
-
- | minHeight |
-
- string
- |
-
- Sets the min-height CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'auto'
- |
-
-
- | minWidth |
-
- string
- |
-
- Sets the min-width CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'auto'
- |
-
-
- | outline |
-
- {outlineTypeString}
- |
-
- Based on the CSS property outline allows configuring all properties related to the outline of a
- container.
- |
- - |
-
-
- | overflow |
-
- {overflowTypeString}
-
- being OverflowValues an enum with the following possible values:
-
- 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'
- |
-
- Sets the overflow CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'visible'
- |
-
-
- | padding |
-
- 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Space
- |
-
- Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
- 'right' properties in order to specify different margin sizes.
- |
- - |
-
-
- | position |
-
- 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'
- |
-
- Sets the position CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'static'
- |
-
-
- | width |
-
- string
- |
-
- Sets the width CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'auto'
- |
-
-
- | zIndex |
-
- 'auto' | number
- |
-
- Sets the z-index CSS property. See{" "}
-
- MDN
- {" "}
- for further information.
- |
-
- 'auto'
- |
-
+ 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto'
+
+
+ Sets the overflow CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'visible'
+ |
+
+
+ | padding |
+
+ 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | Space
+ |
+
+ Size of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and
+ 'right' properties in order to specify different margin sizes.
+ |
+ - |
+
+
+ | position |
+
+ 'static' | 'relative' | 'absolute' | 'fixed' | 'sticky'
+ |
+
+ Sets the position CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'static'
+ |
+
+
+ | width |
+
+ string
+ |
+
+ Sets the width CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'auto'
+ |
+
+
+ | zIndex |
+
+ 'auto' | number
+ |
+
+ Sets the z-index CSS property. See{" "}
+
+ MDN
+ {" "}
+ for further information.
+ |
+
+ 'auto'
+ |
+
+
),
},
@@ -408,8 +404,8 @@ const sections = [
<>