Section

A structural component that groups layouts into isolated block regions separated by consistent padding rules.

Sizes

Use the section-{size} class to control the component size.

Size values can include:xssmmdlgxl.

For more information on all available sizing utilities, visit Tailwind

Customizing

globals.css


:root {
  --ex-section-py-xs: calc(var(--spacing) * 8);
  --ex-section-py-sm: calc(var(--spacing) * 12);
  --ex-section-py-md: calc(var(--spacing) * 16);
  --ex-section-py-lg: calc(var(--spacing) * 20);
  --ex-section-py-xl: calc(var(--spacing) * 24);
}

API

Element	Selector
`Section`	`.ex-section`

Prop	Type	Default
`as`	`ElementType`	`section`
`asChild`	`boolean`	`false`