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>.
Syntax
<Box> **One paragraph** More content </Box>Output:
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>
</Grid>Output:
One
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.
Two
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.
Padding
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">
...
</Box>Height
You can tell your Box element to consume the full height of its container with the height attribute.
Example:
<Box height="full">
This container will fill its parent
</Box>Must be one of auto or full. Defaults to auto.