Steps Section

v1.0.0·Added in 1.7.0

A How it works section: three to five numbered steps, each with an icon, a title, a line of text and a small drawn product visual.

The horizontal layout puts the numbered steps in one row on desktop, joined by a dashed connector, with a drawn visual under each; tablets show two per row and phones one. The vertical layout runs the steps down a timeline rail with the visual beside the copy from 768px. The cards layout gives each step a raised tile with a large 01, 02, 03 numeral; a step with an href turns its tile into one link that lifts on hover and shows the focus ring around the tile. The tabs layout is a step picker beside a large visual: click a step, or focus the picker and use the arrow keys, Home and End, and the visual swaps with a short fade (no movement under reduced motion); on phones the picker becomes a row of numbered pills that scrolls sideways, with the copy above the visual.