Skip to main content

Col

A Box preset with direction="column". Use it to lay out children vertically.

<Col gap="s-2">
  <Box bg="primary" w={64} h={24} rounded="r-2" />
  <Box bg="primary" w={64} h={24} rounded="r-2" />
  <Box bg="primary" w={64} h={24} rounded="r-2" />
</Col>

Props​

Col accepts every Box prop except direction is fixed to 'column' (it can still be overridden). See Box's props for the full list, including justify, align, wrap, gap, spacing (m*/p*), bg, rounded, and dimension props.