Radix Homepage
Radix Homepage
ThemesThemesPrimitivesPrimitivesIconsIconsColorsColors
DocumentationPlayground
Components

Section

Denotes a section of page content.

View sourceReport an issue
<Box
  py="8"
  style={{ backgroundColor: 'var(--gray-a2)', borderRadius: 'var(--radius-3)' }}
>

  <DecorativeBox asChild size="2">

    <Section />

  </DecorativeBox>

</Box>

API Reference

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

PropTypeDefault
sizeResponsive<"1" | "2" | "3">"3"
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
PreviousContainer
NextText
Edit this page on GitHub.