Section
Markdown for agentsFull-width page section with a surface tone, vertical rhythm and an optional centered container.
npx @slipstream-ui/cli@latest add sectionSection tones
Default band
Muted band
Inverse band
Muted text stays readable inside the scope.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | 'default' | 'muted' | 'subtle' | 'brand' | 'inverse' | 'default' | Surface treatment. inverse flips background, foreground, card, border and muted tokens for its subtree. |
| padding | 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Vertical rhythm. |
| width | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Inner Container width. |
| container | boolean | true | Wrap children in a centered Container. |
| containerClassName | string | — | Extra classes for the inner Container. |
| as | 'section' | 'div' | 'article' | 'header' | 'footer' | 'main' | 'aside' | 'section' | Semantic element to render. |
Accessibility
- tone="inverse" scopes background, foreground, card, border and muted tokens so child components stay readable.
- Add aria-label or aria-labelledby when the section is a named landmark.
Browser support
| Browser | Tested versions |
|---|---|
| Chrome | 111+ (Mar 2023) |
| Edge | 111+ (Mar 2023) |
| Firefox | 121+ (Dec 2023) |
| Safari | 17.2+ — macOS & iOS (Dec 2023) |
Slipstream components rely only on CSS custom properties, Flexbox/Grid, and ARIA — the everyday baseline of the last two years of evergreen releases. Anything newer is progressive enhancement: unsupported browsers keep full functionality with static behavior instead of animations.