Steps block

A numbered process — three steps across, or a vertical timeline.

Steps Horizontal Numbered steps across, joined by a dashed line. Swap the number for an emoji with the Icon field.

A process, across the page

Three to four steps read best side by side.

  1. Choose a block

    Pick from the library — each one lists what it needs.

  2. Fill in the fields

    Words, a picture, a link. The form is built from the block's own options.

  3. Publish

    Save, and the site rebuilds with your changes.

Steps Timeline A vertical rail with the steps alternating either side on a wide screen.

A process, down the page

Longer sequences — up to eight steps — suit the timeline.

  1. Discover

    Work out what the site needs to say and who it is for.

  2. Design

    Choose a theme and sketch the page as a list of blocks.

  3. Build

    Compose pages from blocks; add one if something is missing.

  4. Launch

    Provision, deploy, and hand the keys to the client.

What an editor can change

Every field below is something an editor can change on Steps. The editor builds its form from this list, so adding a field to a block never means building a screen for it.

Styles horizontaltimeline

  • Heading Text
  • Intro Text up to 220 characters
  • Note under the steps Text A short aside shown below the steps, for something that does not belong in one of them. up to 220 characters
  • Steps required Repeating list at least 2 — up to 8
  • Step title required Text
  • Step text required Text up to 280 characters
  • Icon Text One emoji or short symbol. Leave empty to show the step number. up to 4 characters
  • Style Choice horizontal: steps side by side on a connecting line. timeline: a vertical rail with the steps alternating. horizontal · timeline — default: horizontal