Box

This component serves as a wrapper component for most layout related needs. Use Box to set values such as display, width, height, and more. In practice, this component is used frequently as a wrapper around other components to achieve Box Model related styling.

The Box supports space, layout, position, color, flexbox, grid-layout and background styled-system props.

Examples

Box can be used to create both inline and
block-level elements,
elements with fixed or responsive width and height,
and more!