Appearance
Process steps
The stages a customer goes through when they work with you — shown as a journey, not a list.
On the Uisce preset the stages sit on a single flowing waterline, so a visitor takes in the whole process at a glance. Four stages is the sweet spot; you can add up to eight.
Try it
←Process steps
Timeline draws the steps along a connecting line. Numbered list stacks them as a numbered list — better for instructions a customer follows in order.
←Step
Storefront preview
How we work
Four stages, documented in writing at every step.
1
Consultation
A structured first meeting on site: brief, budget, scope and timeline agreed before any drawing starts.
2
Design
Measured survey, three concept directions, then buildable drawings and a full procurement package.
3
Build
Design administration or full project management — the lead designer on site at every milestone.
4
Handover
A documented handover pack, a two-year workmanship guarantee, and twelve months of support.
Edit the first step, or switch Step style to Numbered list — that's the same section, the other way round.
How it works
Each stage is a step block: a title, a short description, and optionally an icon or an image. The steps are numbered automatically in the order you arrange them — you never type the numbers yourself, so inserting a stage in the middle renumbers the rest for you.
Two step styles
Timeline is the default. The stages run side by side, connected by a line, and read as one continuous journey. Use it to show how you work.
Numbered list stacks the stages as a real numbered list. Use it for instructions a customer follows in order — a how-to-use guide, an assembly sequence, a care routine. It is a genuine <ol> in the page, so a screen reader announces "1 of 4" rather than describing a decoration.
Composition
Desktop (timeline) Phone (timeline)
①───────②───────③───────④ ① Consultation
Consultation Design Build Handover │ A structured first meeting…
A structured Measured Design A │
first… survey… admin… documented… ② Design
│ Measured survey…
③ Build
│ Design administration…
④ Handover
A documented handover pack…On a phone the waterline turns on its side and runs down the edge of the screen, with each stage indented beside its marker. On a tablet the four stages fold into two rows of two, and each row gets its own line — a line never trails off into empty space.
Settings
| Setting | What it does |
|---|---|
| Heading, Subheading | The title above the stages. Both are optional. |
| Step style | Timeline (side by side, connected) or Numbered list (stacked, numbered). |
| Layout | Horizontal runs the stages across the page; Vertical runs them down it. Both keep the flowing line. |
| Show step numbers | Turns the numbered markers off. The line stays — the stages hang from an unbroken rule instead of numbered markers. |
| Related article | Optional. Adds a "Read article" link after the steps, pointing at one of your blog posts. |
| Color scheme | Which of your theme's colour schemes the whole section uses. |
Layout and Show step numbers belong to the Timeline style, so they disappear when you switch to Numbered list — a numbered list is always stacked and always numbered, and a setting that could not change anything is better hidden than left to mislead you.
Per step: Heading, Text, an optional Icon, and an optional Image (the image replaces the icon when both are set).
Linking to a blog post
Related article is a picker — choose the post from the list; there's nothing to type.
If the chosen post is unpublished or deleted, the link simply doesn't appear — the section never leaves a broken link on your storefront.
Choosing your stages
Write each stage as something you do, not something the customer waits through — "Measured survey, three concept directions" tells a visitor more than "Design phase". Keep each description to two or three lines; the stages are read across, and one long paragraph pulls the eye out of the row.
Four stages read best. Two feels thin, and past six the row gets tight enough that the line stops doing its job.
Accessibility
The numbers are decorative — they're hidden from screen readers, because the reading order already carries the sequence. In Numbered list style the ordering is real markup, so assistive technology announces the position in the list. If you also place an app block inside the section, it occupies one of those positions — the visible step numbers count only steps, so a screen reader will announce a higher total than the last visible number.
Stage numbers and the "Read article" link are drawn in your scheme's text colour rather than its accent, so they stay legible on every one of the shipped colour schemes; the accent stays on the marker ring and the rule under the link.
The waterline fades in once when the section scrolls into view. Nothing moves, and if a visitor has asked their device to reduce motion, the line is simply there from the start.