Box

A fundamental layout building block.

<Box width="9" height="9">
  <DecorativeBox />
</Box>

API Reference

This component is based on the div element and supports common margin props.

Only the display prop values are unique to the Box component.

Prop	Type	Default
`display`	`Responsive<"none" \| "inline" \| "inline-block" \| "block">`	No default value

The following props are shared between Box, Flex, Grid, Container and Section layout components.

Prop	Type	Default
`p`	`enum`	No default value
`px`	`enum`	No default value
`py`	`enum`	No default value
`pt`	`enum`	No default value
`pr`	`enum`	No default value
`pb`	`enum`	No default value
`pl`	`enum`	No default value
`position`	`Responsive<"static" \| "relative" \| "absolute" \| "fixed" \| "sticky">`	No default value
`inset`	`Responsive<"auto" \| "0" \| "50%" \| "100%">`	No default value
`top`	`Responsive<"auto" \| "0" \| "50%" \| "100%">`	No default value
`right`	`Responsive<"auto" \| "0" \| "50%" \| "100%">`	No default value
`bottom`	`Responsive<"auto" \| "0" \| "50%" \| "100%">`	No default value
`left`	`Responsive<"auto" \| "0" \| "50%" \| "100%">`	No default value
`width`	`enum`	No default value
`height`	`enum`	No default value
`shrink`	`Responsive<"0" \| "1">`	No default value
`grow`	`Responsive<"0" \| "1">`	No default value