How It Works Blocks

A three-step 'how it works' row with numbered, iconed steps.

A vertical left-rail timeline that stacks four numbered steps down the page, each with a bordered icon circle, a connecting line to the next step, a monospaced step counter, a bold title, and a line of supporting copy.

Interactive horizontal stepper with a progress fill and clickable steps that stacks on mobile

A how-it-works section with three alternating zig-zag rows, each pairing a numbered step with a title, description, and checklist on one side and a mock UI preview panel on the other.

Pro how-it-works: an auto-advancing product walkthrough pairing a clickable step list with a synced mock UI that blur cross-fades from connecting data sources to configuring rules to a live dashboard; theme-aware, reduced-motion friendly.

Pro how-it-works: a connected journey timeline whose connector line draws across four numbered nodes as they blur-rise into view on scroll; horizontal on desktop, vertical on mobile, theme-aware and reduced-motion friendly.

Pro how-it-works: an editorial layout pairing an outlined big-numeral step list with a bare grayscale scene photo that drifts on scroll; heading-left with a top-right CTA, blur-rise reveals, theme-aware and reduced-motion friendly.

Pro how-it-works: a process-to-payoff split pairing an animated Recharts adoption chart and a count-up stat band with a three-step recap; content-left, text-right, theme-aware and reduced-motion friendly.

Pro how-it-works: a tabbed use-case walkthrough where each team tab reveals its three-step flow beside a compact animated mock panel with a blur cross-fade on change; theme-aware and reduced-motion friendly.

Pro how-it-works: a four-step card grid where each card carries a looping animated mini-mock, cards blur-rise in on scroll and lift on hover; theme-aware and reduced-motion friendly.

Pro how-it-works: a vertical rail whose connector draws down as each numbered step blur-rises into view on scroll, every step carrying a small live detail panel; theme-aware and reduced-motion friendly.