Sign Up

Box component

A <Box> component is a way to group together Markdown content inside other components. For example, if you want to group together two paragraphs inside a <Grid> element, you can wrap them in a <Box>.

Under the hood, <Box> will be converted to a plain <div>.


<Box> **One paragraph** More content </Box>


One paragraph

More content

(A <Box> isn't particularly useful on its own.)

Usage in a grid

You can put content inside boxes in order to group them together inside a <Grid> or <Flex> component.

<Grid cols="2">
  <Box> ... </Box>
  <Box> ... </Box>



Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus risus tellus, bibendum at volutpat eget, facilisis ut risus. Maecenas non justo vitae enim lobortis condimentum nec non metus.


Morbi volutpat velit purus, vitae condimentum purus hendrerit ornare. Suspendisse nisl ligula, facilisis ut commodo mattis, vestibulum non mi. Cras et rutrum mi, vel tincidunt risus.


You can adjust the padding inside the <Box> with the p attribute. It must be a value between 0 and 5 inclusive.

<Box pad="5">


You can tell your Box element to consume the full height of its container with the height attribute.


<Box height="full">
  This container will fill its parent

Must be one of auto or full. Defaults to auto.

Was this page helpful?