ProcessSteps
Markdown for agentsOrdered process cards with derived step numbers or custom icons.
npx @slipstream-ui/cli@latest add process-stepsAdvisor process
- 01
Meet your consultant
Share your goals and timing with an Exit Consultant.
- 02
Review recommendations
Compare advisors matched to your business and sector.
- 03
Interview and hire
Shortlist and interview the advisors you like best.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| steps | ProcessStep[] | required | Ordered steps: title, optional description and icon. |
| columns | 2 | 3 | 4 | 3 | Desktop column count. |
| numbered | boolean | true | Show step numbers when no icon is provided. |
| align | 'left' | 'center' | 'left' | Content alignment. |
Accessibility
- Renders an ordered list, so the sequence is structural.
- Step numbers are derived from list order; do not hardcode them in titles.
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.