Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Container

Constrains the maximum width of page content.

View sourceReport an issue
<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
sizeResponsive<"1" | "2" | "3" | "4">"4"
displayResponsive<"none" | "block">No default value

The following props are shared between Box, Flex, Grid, Container and Section layout components.

PropTypeDefault
penumNo default value
pxenumNo default value
pyenumNo default value
ptenumNo default value
prenumNo default value
pbenumNo default value
plenumNo default value
positionResponsive<"static" | "relative" | "absolute" | "fixed" | "sticky">No default value
insetResponsive<"auto" | "0" | "50%" | "100%">No default value
topResponsive<"auto" | "0" | "50%" | "100%">No default value
rightResponsive<"auto" | "0" | "50%" | "100%">No default value
bottomResponsive<"auto" | "0" | "50%" | "100%">No default value
leftResponsive<"auto" | "0" | "50%" | "100%">No default value
widthenumNo default value
heightenumNo default value
shrinkResponsive<"0" | "1">No default value
growResponsive<"0" | "1">No default value
PreviousGrid
NextSection
Edit this page on GitHub.