Box

A Box is simple box.

Example

Properties

width - ratio | ratio[]

Width defines the width of box, which it tries to consume of the parent element. 'px'/'em'-values and also ratio values like "1/2", "3/4" are allowed. The value can set as a responsive array.

<Box backgroundColor="infoLight" space="medium">
    <Row>
        <Box backgroundColor="positiveLight" width="1/2" space="small">
            50% box
        </Box>
        <Box backgroundColor="negativeLight" width="1/8" space="small">
            12.5% box
        </Box>
        <Box backgroundColor="info" width="150px" space="small">
            150px box
        </Box>
    </Row>
</Box>

space - SpacingType | SpacingType[]

Defines the padding to containing items. Can be a single value or a responsive array.

backgroundColor - Color

Sets the background color for the box. Every defined theme.colors can be applied.

textColor - Color

Sets the text color inside the Box. Every defined theme.colors can be applied.

rounded - boolean

If set the Box has rounded corners.

inline - boolean

If set the Box only consumes the size of it's content.

flex - boolean

If set the Box is displayed as a flexbox so containing items can use flex-box properties.

stretch - boolean

If set the Box tries to consume 100% of height and width of the parent's content.

relative - boolean

If set the Box will be displayed as position: relative.

hideOverflow - boolean

If set all content outside the box will be hidden.

Playground

<Row itemSpace="medium">
  <Box backgroundColor="positiveLight" space="small" width="1/2">
    Box 1
  </Box>
  <Box
    backgroundColor="negativeLight"
    space="small"
    rounded
    width={['1/2', '1/4']}
  >
    Box 2
  </Box>
</Row>