Constrains the maximum width of page content.
<Box style={{ background: 'var(--gray-a2)', borderRadius: 'var(--radius-3)' }}>
<Container size="1">
<DecorativeBox>
<Box py="9" />
</DecorativeBox>
</Container>
</Box>
This component is based on the div
element and supports common margin props.
Prop | Type | Default |
---|---|---|
size | Responsive<"1" | "2" | "3" | "4"> | "4" |
display | Responsive<"none" | "block"> |
Container sizes use the following max-width
values, which may be customized if needed.
Size | CSS token | Width |
---|---|---|
size="1" |
--container-1 |
448px |
size="2" |
--container-2 |
688px |
size="3" |
--container-3 |
880px |
size="4" |
--container-4 |
1136px |
The following props are shared between Box, Flex, Grid, Container and Section layout components.
Prop | Type | Default |
---|---|---|
p | enum | |
px | enum | |
py | enum | |
pt | enum | |
pr | enum | |
pb | enum | |
pl | enum | |
position | Responsive<"static" | "relative" | "absolute" | "fixed" | "sticky"> | |
inset | Responsive<"auto" | "0" | "50%" | "100%"> | |
top | Responsive<"auto" | "0" | "50%" | "100%"> | |
right | Responsive<"auto" | "0" | "50%" | "100%"> | |
bottom | Responsive<"auto" | "0" | "50%" | "100%"> | |
left | Responsive<"auto" | "0" | "50%" | "100%"> | |
width | enum | |
height | enum | |
shrink | Responsive<"0" | "1"> | |
grow | Responsive<"0" | "1"> |