CTASection
Markdown for agentsFull-width conversion band with eyebrow, headline, supporting copy and actions.
npx @slipstream-ui/cli@latest add cta-sectionDefault inverse band
Join Axial
Join the network
Connect with counterparties, source deals and close transactions.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | required | Headline for the call to action. |
| description | string | — | Supporting copy under the headline. |
| eyebrow | string | — | Small overline above the headline. |
| actions | ReactNode | — | Buttons or links. |
| tone | 'default' | 'muted' | 'brand' | 'inverse' | 'inverse' | Surface treatment. |
| align | 'left' | 'center' | 'center' | Copy alignment. |
| size | 'sm' | 'md' | 'lg' | 'md' | Vertical space. |
| width | 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'lg' | Inner container width. |
Accessibility
- Renders an h2 under the page h1.
- Inverse tone scopes the token ladder, so semantic Button variants keep their contrast.
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.