Pattern Paste
Subscribe

Core Patterns How it works

Catalogue accessStandard

Process switchback

Four numbered joinery steps follow alternating ruled landings, turning from one edge to the other while keeping a clear reading order.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

The signature moment

The route changes direction at every landing

Each landing has one heavy turning edge. Successive text groups shift between a broad inset and a narrow inset, so the route switches direction without reversing the numbered reading order. The indents shrink on a phone and the steps stay 1 to 4.

Full pattern notes

Why it works, and how it is built

Open a topic for the complete design reasoning, editing guidance and implementation notes.

Design rationaleComposition, intent and nearest alternatives

Overview

Four numbered joinery steps follow alternating ruled landings, turning from one edge to the other while keeping a clear reading order.

The signature moment: the route changes direction at every landing

Each landing has one heavy turning edge. Successive text groups shift between a broad inset and a narrow inset, so the route switches direction without reversing the numbered reading order. The indents shrink on a phone and the steps stay 1 to 4.

Theme behaviourInheritance, fixed decisions and contrast

Display type

Step numbers are 42px to 72px display paragraphs with close leading. Step titles and the section heading follow the theme heading ladder. Timing labels are 15px; descriptions follow medium.

Technical notesBlock mechanics, responsive behaviour and constraints

Theme inheritance

The Core payload follows the theme’s base ground, contrast ink, heading face and button treatment. Its painter lets heading and link colour follow a recolour. Text is intended for 4.5:1 contrast, with 3:1 reserved for large display type.

Styled look

Silt #ECE4DA, charcoal #282522 and carmine #982F43, set in sturdy Arial. Carmine numbers follow the alternating landings and the final square action. Every action is deliberately filled or underlined. The Core payload preserves the same layout as the theme route.

Editing

Replace the four step titles, descriptions and timing notes in order. Duplicate an entire landing for a new step, then alternate its turning edge and inset.

Questions

Process switchback: common questions

Does Process switchback need a plugin?

No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install.

Will Process switchback match my theme?

Choose by variation. Theme takes your theme’s palette; Silt and carmine brings its own colours.

How many variations does Process switchback have?

2: Theme and Silt and carmine. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Process switchback free?

It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.

Which WordPress version does it need?

Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.

The markup

11KB of core-block markup, 5 blocks (button, buttons, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Subscribe to copy it, £49 a yearWhat you copy is yours forever. Not for you? We refund within 14 days.

Back to Core Patterns

Continue exploring

Next in How it works

Explore all 9 How it works patterns

Steps screens rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

Steps screens

A software walkthrough in four columns: a 16:10 frame with an example photograph ruled in currentColor, then a numeral chip that laps half into the frame and half into the caption below it, then the step title and one sentence.

How it worksPreview pattern
TPO permission steps rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

TPO permission steps

A four-step process on an inverted slab for work that needs the council's consent: each step opens with an oversized numeral and a timescale badge on a hairline, then a heading and a short line.

How it worksPreview pattern
First visit to scale rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksNo plugin needed

First visit to scale

What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button.

How it worksPreview pattern