Box

Responsive box-model layout component.

Box
<Box
  p={5}
  fontSize={4}
  width={[ 1, 1, 1/2 ]}
  color='white'
  bg='magenta'>
  Box
</Box>

Props

  • All margin and padding props
  • width: responsive width
  • fontSize: responsive font size
  • color: text color
  • bg: background color
  • flex: CSS flex shorthand property
  • order: CSS order property
  • alignSelf: CSS align-self property