SectionHeading
Markdown for agentsSection heading block: eyebrow, title (level 2–4), description and actions, with left/center alignment and three sizes.
npx slipstream-ui@latest add section-headingMarketing section
Components
Built for agents
Every component ships a machine-readable spec, so your assistant writes correct UI the first time.
Centered variant
Use align=center for hero-adjacent sections.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Section title. |
| description | string | — | Supporting copy. |
| eyebrow | ReactNode | — | Kicker above the title. |
| actions | ReactNode | — | Right-aligned actions. |
| level | 2 | 3 | 4 | 2 | Heading level rendered for the title. |
| align | 'left' | 'center' | 'left' | Text and action alignment. |
| size | 'sm' | 'md' | 'lg' | 'md' | Title scale. |
Accessibility
- Renders h2 by default (PageHeader owns the page h1).
- Pass level={3} for nested subsections so the outline stays sequential.
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.