Process steps

A numbered sequence of steps — for how-it-works explainers, onboarding, or process stories. Each step is a theme block; numbering, connectors, and layout are section-level controls.

What it does

Lays out its step blocks horizontally, in a grid, or vertically, optionally numbering each step and drawing a connector between them. The section heading can run at display scale, and numbers can render plain, circled, filled, or oversized.

Section settings

• Heading with Heading display size (none/sm/md/lg/xl).
• Layout — horizontal, grid, vertical.
• Columns (desktop) and Columns (mobile) — 1 or 2 on mobile.
• Show numbers — toggle step numbering.
• Number style — plain, circled, filled, oversized.
• Show connector — draw a line linking the steps.
• Image aspect ratio — adapt, square, portrait, landscape.
• Alignment — left, center.
• Padding top / bottom — 0–160px.
• Color scheme — Section-level scheme.

Blocks

Accepts step blocks from the shared theme block library — typically an image, heading, and text per step. See Theme blocks.

Example use cases

• A "how it works" or onboarding sequence.
• A made-to-order or production process explained in stages.
• A numbered getting-started guide on a landing page.