Components

Container

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>

API Reference

This component is based on the div element and supports common margin props.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3" | "4">
"4"
display
Responsive<"none" | "initial">
No default value
align
Responsive<"left" | "center" | "right">
No default value

Container sizes use the following max-width values, which may be customized if needed.

SizeCSS variableWidth
size="1"--container-1448px
size="2"--container-2688px
size="3"--container-3880px
size="4"--container-41136px

The following props are shared between Box, Flex, Grid, Container and Section components. Read more about layout components in Layout.

PropTypeDefault
p
Responsive<enum | string>
No default value
px
Responsive<enum | string>
No default value
py
Responsive<enum | string>
No default value
pt
Responsive<enum | string>
No default value
pr
Responsive<enum | string>
No default value
pb
Responsive<enum | string>
No default value
pl
Responsive<enum | string>
No default value
width
Responsive<string>
No default value
minWidth
Responsive<string>
No default value
maxWidth
Responsive<string>
No default value
height
Responsive<string>
No default value
minHeight
Responsive<string>
No default value
maxHeight
Responsive<string>
No default value
position
Responsive<enum>
No default value
inset
Responsive<enum | string>
No default value
top
Responsive<enum | string>
No default value
right
Responsive<enum | string>
No default value
bottom
Responsive<enum | string>
No default value
left
Responsive<enum | string>
No default value
overflow
Responsive<enum>
No default value
overflowX
Responsive<enum>
No default value
overflowY
Responsive<enum>
No default value
flexBasis
Responsive<string>
No default value
flexShrink
Responsive<enum | string>
No default value
flexGrow
Responsive<enum | string>
No default value
gridArea
Responsive<string>
No default value
gridColumn
Responsive<string>
No default value
gridColumnStart
Responsive<string>
No default value
gridColumnEnd
Responsive<string>
No default value
gridRow
Responsive<string>
No default value
gridRowStart
Responsive<string>
No default value
gridRowEnd
Responsive<string>
No default value
PreviousGrid