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>

    <Section size="2" />

  </DecorativeBox>

</Box>

API Reference

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

PropTypeDefault
size
Responsive<"1" | "2" | "3">
"3"
display
Responsive<"none" | "block">
No default value

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

PropTypeDefault
p
enum
No default value
px
enum
No default value
py
enum
No default value
pt
enum
No default value
pr
enum
No default value
pb
enum
No default value
pl
enum
No default value
position
Responsive<"static" | "relative" | "absolute" | "fixed" | "sticky">
No default value
inset
Responsive<"auto" | "0" | "50%" | "100%">
No default value
top
Responsive<"auto" | "0" | "50%" | "100%">
No default value
right
Responsive<"auto" | "0" | "50%" | "100%">
No default value
bottom
Responsive<"auto" | "0" | "50%" | "100%">
No default value
left
Responsive<"auto" | "0" | "50%" | "100%">
No default value
width
enum
No default value
height
enum
No default value
shrink
Responsive<"0" | "1">
No default value
grow
Responsive<"0" | "1">
No default value
PreviousContainer
NextText
Edit this page on GitHub.