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>
.
I am in a box!
Box component
<Box>
I am in a box!
</Box>
Attributes
The <Box>
component can be customized using the following attributes.
Padding
You can adjust the padding inside the <Box>
with the p
attribute. It must be a value between 0 and 5 inclusive.
I am in a box with a padding of 5!
Box component with a padding of 5
<Box pad="5">
I am in a box with a padding of 5!
</Box>
Height
You can tell your Box
element to consume the full height of its container with the height
attribute.
Must be one of auto
or full
. Defaults to auto
.
Box component with a height of 100%
<Box height="full">
I am in a box with a height of 100%
</Box>