Hero
Markdown for agentsMarketing hero with badge, eyebrow, headline, copy, actions and an optional media slot.
npx @slipstream-ui/cli@latest add heroSplit hero on an inverse band
The private deal network
Find your next buyer.
Join 20,000+ investors, M&A advisors, and business owners who trust Axial to source deals and hire the right advisor.
Network overview
12,000+
deals brought to market annually
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | ReactNode | required | Main headline. Accepts inline markup for a highlighted phrase. |
| description | ReactNode | — | Supporting sentence under the headline. |
| eyebrow | ReactNode | — | Small overline above the headline. |
| badge | ReactNode | — | Pill above the headline. |
| actions | ReactNode | — | Primary and secondary calls to action. |
| media | ReactNode | — | Product shot, illustration, video or form shown beside the copy. |
| mediaPosition | 'left' | 'right' | 'right' | Which side the media sits on at lg and up. |
| align | 'left' | 'center' | 'left' | Copy alignment. |
| size | 'md' | 'lg' | 'lg' | Headline scale. |
| level | 1 | 2 | 1 | Heading level. |
| variant | 'split' | 'centered' | — | Split or centered layout. Defaults to split when media is provided. |
| as | 'div' | 'section' | 'header' | 'div' | Semantic element to render. |
Accessibility
- Renders h1 by default; use level={2} for a second hero-like band.
- Media is a slot, so the consumer owns alt text and decorative treatment.
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.