WordPress process steps patterns, Pattern Paste Canonical: https://patternpaste.com/patterns/steps/ 12 layout options 13 Styled looks No plugin needed # WordPress process steps patterns Show a process in order with WordPress how-it-works patterns: numbered steps as a list, cards or a stair, built for the Gutenberg editor. 25 layout options shown Showing 1–25 of 25 Sort by Per page Lightbox Pattern page Live preview at its actual size. Scroll to explore the whole section. Explore pattern (https://patternpaste.com/patterns/) Shot in Twenty Twenty-Five Features No plugin needed ## Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. Features Preview pattern (https://patternpaste.com/pattern/appointment-letter-checklist.html) Shot in Twenty Twenty-Five Timeline No plugin needed ## Course plan taper A typical course of treatment drawn as eight weeks on a ruled baseline: a solid bar for each clinic session, its height set by its minutes, and a short rule for each week of exercises at home, so the sessions visibly shorten and spread out as the course goes on. Timeline Preview pattern (https://patternpaste.com/pattern/course-plan-taper.html) Shot in Twenty Twenty-Five How it works No 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 works Preview pattern (https://patternpaste.com/pattern/first-visit-to-scale.html) Shot in Twenty Twenty-Five How it works No plugin needed ## Steps cards Four photographic process cards with level tops and descending feet. How it works Preview pattern (https://patternpaste.com/pattern/steps-cards.html) Shot in Twenty Twenty-Five How it works No plugin needed ## Steps cover stair A full-bleed cover with a heavy veil of your theme's contrast colour over the photograph, a display headline at the top left and three numbered steps set as a stair: each step a huge numeral, a short title and one line under a hairline rule, every column starting lower than the one before, so the steps descend down and to the right across the photograph. How it works Preview pattern (https://patternpaste.com/pattern/steps-cover-stair.html) Shot in Twenty Twenty-Five How it works No plugin needed ## Process delivery manifest A three-phase handoff unfolds through nested document frames: the brief contains the proof, and the proof contains the final delivery. How it works Preview pattern (https://patternpaste.com/pattern/steps-delivery-manifest.html) Shot in Twenty Twenty-Five How it works No plugin needed ## Steps ledger A process set as a printed schedule: a ruled column-head row (No., Stage, What happens) and then five full-width rows, each one a display numeral, a title and a short description in three columns, hairlines in currentColor between them and a closing rule under the last. How it works Preview pattern (https://patternpaste.com/pattern/steps-ledger.html) Shot in Twenty Twenty-Five How it works No plugin needed ## Steps run A process as one horizontal run: three display numerals across the band, each over a short title and a packed line of copy, with a single hairline threading the gaps between the numerals at numeral height so the row reads as a sequence rather than as three separate cards. How it works Preview pattern (https://patternpaste.com/pattern/steps-run.html) Shot in Twenty Twenty-Five How it works No 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 works Preview pattern (https://patternpaste.com/pattern/steps-screens.html) Shot in Twenty Twenty-Five How it works No plugin needed ## Titles on the seam The chip grows into a full-width bar and takes the step title up onto the seam with it, so under each screen there is one sentence and nothing else. Variation of Steps screens Preview pattern (https://patternpaste.com/pattern/steps-screens.html#variant=seam-bar) Shot in Twenty Twenty-Five How it works No plugin needed ## Process switchback Four numbered joinery steps follow alternating ruled landings, turning from one edge to the other while keeping a clear reading order. How it works Preview pattern (https://patternpaste.com/pattern/steps-switchback.html) Shot in Twenty Twenty-Five How it works No 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 works Preview pattern (https://patternpaste.com/pattern/tpo-permission-steps.html) Features Own palette ## Mend , Appointment letter checklist (https://patternpaste.com/pattern/appointment-letter-checklist.html#variant=mend) Appointment letter checklist Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/appointment-letter-checklist.html#variant=mend)Mend set: whole pages (https://patternpaste.com/sets/mend/) Timeline Own palette ## Mend , Course plan taper (https://patternpaste.com/pattern/course-plan-taper.html#variant=mend) Course plan taper Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/course-plan-taper.html#variant=mend)Mend set: whole pages (https://patternpaste.com/sets/mend/) How it works Own palette ## Mend , First visit to scale (https://patternpaste.com/pattern/first-visit-to-scale.html#variant=mend) First visit to scale Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/first-visit-to-scale.html#variant=mend)Mend set: whole pages (https://patternpaste.com/sets/mend/) How it works Own palette ## Cloud and teal , Steps cards (https://patternpaste.com/pattern/steps-cards.html#variant=cloud-and-teal) Steps cards Authored font stack with theme and device fallbacks Cloud and teal (https://patternpaste.com/pattern/steps-cards.html#variant=cloud-and-teal)Mend (https://patternpaste.com/pattern/steps-cards.html#variant=mend)Spur (https://patternpaste.com/pattern/steps-cards.html#variant=spur) How it works Own palette ## Mend , Steps cards (https://patternpaste.com/pattern/steps-cards.html#variant=mend) Steps cards Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/steps-cards.html#variant=mend)Mend set: whole pages (https://patternpaste.com/sets/mend/) How it works Own palette ## Spur , Steps cards (https://patternpaste.com/pattern/steps-cards.html#variant=spur) Steps cards Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/steps-cards.html#variant=spur)Spur set: whole pages (https://patternpaste.com/sets/spur/) How it works Own palette ## Terracotta and linen , Steps cover stair (https://patternpaste.com/pattern/steps-cover-stair.html#variant=terracotta-and-linen) Steps cover stair Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/steps-cover-stair.html#variant=terracotta-and-linen) How it works Own palette ## Pale blue and russet , Process delivery manifest (https://patternpaste.com/pattern/steps-delivery-manifest.html#variant=pale-blue-and-russet) Process delivery manifest Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/steps-delivery-manifest.html#variant=pale-blue-and-russet) How it works Own palette ## Cobalt and chalk , Steps ledger (https://patternpaste.com/pattern/steps-ledger.html#variant=cobalt-and-chalk) Steps ledger Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/steps-ledger.html#variant=cobalt-and-chalk) How it works Own palette ## Denim and lemon , Steps run (https://patternpaste.com/pattern/steps-run.html#variant=denim-and-lemon) Steps run Authored font stack with theme and device fallbacks Denim and lemon (https://patternpaste.com/pattern/steps-run.html#variant=denim-and-lemon)Folio (https://patternpaste.com/pattern/steps-run.html#variant=folio) How it works Own palette ## Folio , Steps run (https://patternpaste.com/pattern/steps-run.html#variant=folio) Steps run Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/steps-run.html#variant=folio)Folio set: whole pages (https://patternpaste.com/sets/folio/) How it works Own palette ## Silt and carmine , Process switchback (https://patternpaste.com/pattern/steps-switchback.html#variant=silt-and-carmine) Process switchback Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/steps-switchback.html#variant=silt-and-carmine) How it works Own palette ## Bough , TPO permission steps (https://patternpaste.com/pattern/tpo-permission-steps.html#variant=bough) TPO permission steps Authored font stack with theme and device fallbacks Explore this design (https://patternpaste.com/pattern/tpo-permission-steps.html#variant=bough)Bough set: whole pages (https://patternpaste.com/sets/bough/) ## Choose a layout for your page Number the steps so a reader knows where they are. Use cards when each step has an image and a list when the copy carries it. New to patterns? Learn how to copy and paste a pattern (https://patternpaste.com/how-it-works/). Read how we test patterns (https://patternpaste.com/how-we-test/). All Core Patterns (https://patternpaste.com/patterns/)