Section
Page-section shell with block padding, centered inner width, and stack gap.
Category: layout · WCAG 2.1-AA · layout, section, page
Props
| Prop | Type | Default | Description |
|---|---|---|---|
width | "content" | "wide" | "full" | "content" | Max inline size: content=72rem, wide=90rem, full=none |
gap | 1|2|3|4|5|6|8|10|12 | 8 | Stack gap between children (spacing token step) |
Design tokens
--cascivo-space-*
When to use
- Wrapping a page region with block padding and a centered inner width
- The default container for stacking content within a page
When not to use
- Just centering a single element — use Center
- A marketing band with built-in CTA content — use Cta or Hero
Examples
Content section
Centered 72rem content column with 2rem block padding
<Section width="content" gap={8}><h2>Heading</h2><p>Body copy.</p></Section>Related components
- Center — Uses centered inner width internally
- PageHeader — Pair sections below a page header