Aisol Process Steps

Aisol Process Steps lays out "how it works" steps from a CMS collection — numbered, connected, and readable before any script runs.

Aisol Process Steps lays out "how it works" steps from a CMS collection — numbered, connected, and readable before any script runs.

Steps reveal as they enter the viewport using an observer on the component's own items only; the Framer canvas shows every step already finished.

Reduced motion gets the finished list with no observer at all; keyboard and screen-reader users get a real ordered list with real links.

- Vertical or horizontal direction; the horizontal rail stacks under a breakpoint you set, and the connector hides itself when it would misalign.

- Numbers, dots or no markers; a connector line between markers; per-step eyebrow, image, description and a link on the title only.

- Empty state text instead of a blank frame. Colours given as rgb() reach the page unchanged.

What you control

• Steps as an array: eyebrow, title, description, image or image URL, alt text, link — or bind a CMS collection through the step slots

• Direction, stack breakpoint, numbering style, connector on/off

• Reveal on/off, stagger and duration; heading level for step titles; region label for screen readers; empty-state text

• Accent, text, muted, line and card colours; card on/off; text size; max width (0 = fill); radius; gap; left or centred

Limits: the reveal runs once per step by design. Step slots pair by index with the steps array.