Process stack steps, Pattern Paste Canonical: https://patternpaste.com/pattern/process-stack-steps.html Interactive (https://patternpaste.com/interactive/) Stack (https://patternpaste.com/interactive/stack/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Process stack steps Six process cards with oversized phase numbers, short editorial headlines and a ruled deliverables footer. Alternating paper and ink surfaces make each new card unmistakable as it settles onto the pile. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the six steps as a plain column of fully designed cards. States no colour and no font of its own. Start here ## What you change first - The words. Edit the ordinary core blocks inside each Card group. - The order and count. Duplicate, remove or reorder Card groups in List View. - The card surfaces. Preserve an opaque base or contrast ground on every Card group while the block’s plate is off. - The masthead and hand-off. Both are ordinary groups outside the pinned block. - Motion. The inspector provides the switch, deal, peek, depth, shrink, dim, overshoot, lean, width, minimum card height, gap, plate and counter. - Heading levels. The masthead is h2 and the card titles are h3. The signature moment ## Six numbered steps dealt into one pile, each locking over the last, so the process is read as a deck being built rather than a list being scrolled The number is part of the composition. It sits beside the step’s headline and short explanation on a wide screen, then above them on a phone. Fine rules divide the phase header and the deliverables footer from the main thought. Earlier cards remain visible as a stepped set of edges above the current card. Theme handoff ## What comes from where ### From your theme - Every typeface comes from the theme. - Surfaces and their ink use paired base and contrast chains with core fallbacks. Inverted cards reverse the pair. Every heading states its own colour. - The masthead follows the x-large type rung and its introduction follows medium. The phase headlines are display type, sized against the number. - Outer vertical spacing uses core spacing presets. The hand-off button follows the theme’s button styling. ### Set by this pattern - Display type. - The card surface. - The layout. - The pile. - Contrast. 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 Six process cards with oversized phase numbers, short editorial headlines and a ruled deliverables footer. Alternating paper and ink surfaces make each new card unmistakable as it settles onto the pile. ### The signature moment: Six numbered steps dealt into one pile, each locking over the last, so the process is read as a deck being built rather than a list being scrolled The number is part of the composition. It sits beside the step’s headline and short explanation on a wide screen, then above them on a phone. Fine rules divide the phase header and the deliverables footer from the main thought. Earlier cards remain visible as a stepped set of edges above the current card. ### Why this is not pricing-stack-tiers The process is six editorial cards, alternating light and dark, with a phase number and a concrete outcome for each step. Pricing is a four-plan comparison with large prices and a single inverted recommendation. Make it yoursVariations and the edits to make first ### What you change first - The words. Edit the ordinary core blocks inside each Card group. Replace the phase names, dates, headlines and deliverables. Keep the copy concise enough to fit a phone. - The order and count. Duplicate, remove or reorder Card groups in List View. Update the phase numbers and header totals alongside your steps. The block derives the live counter and scroll length from the actual card count. - The card surfaces. Preserve an opaque base or contrast ground on every Card group while the block’s plate is off. Edit the paired ink at the same time. - The masthead and hand-off. Both are ordinary groups outside the pinned block. Replace the hand-off link destination. - Motion. The inspector provides the switch, deal, peek, depth, shrink, dim, overshoot, lean, width, minimum card height, gap, plate and counter. A larger card or deeper pile needs more room in the viewport. - Heading levels. The masthead is h2 and the card titles are h3. Adjust these to the surrounding page’s outline. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Every typeface comes from the theme. - Surfaces and their ink use paired base and contrast chains with core fallbacks. Inverted cards reverse the pair. Every heading states its own colour. - The masthead follows the x-large type rung and its introduction follows medium. The phase headlines are display type, sized against the number. - Outer vertical spacing uses core spacing presets. The hand-off button follows the theme’s button styling. ### What it decides for itself - Display type. Phase numbers use a 3.5rem to 8.5rem clamp with tight tracking. Card headlines use a 1.875rem to 3rem clamp. These proportions stay independent of the theme ladder. Compact card copy uses a 1rem to 1.125rem clamp, line-height 1.55, because it lives in a narrow column. Footers and feature rows have a 15px floor. Tracked header labels are incidental apparatus. - The card surface. The block’s plate is off. Every Card group supplies its own opaque ground, matching ink, one-pixel currentColor border, one-rem corners and fluid horizontal padding. The design therefore survives plugin deactivation. It needs no pattern-specific CSS. - The layout. Core columns divide the number from the explanation and stack below WordPress’s mobile breakpoint. Header and footer rows wrap. Cards use a vertical flex layout so the footer stays at the foot of the full surface. - The pile. A 1080px deck, three moving levels, 32px peeks, three-percent shrink and ten-percent dim leave clear card edges. The velocity lean is four degrees. Each phase uses the block’s default deal. The card group’s 380px minimum is a floor; content may make it taller. - Contrast. Ordinary copy must reach 4.5:1 in the rendered themes; large display type may use the 3:1 floor. These are measured in the verification loop. Technical notesBlock mechanics, responsive behaviour and constraints ### What needs the plugin Install the companion plugin, included with access, before pasting. The pattern embeds patternpaste/stack and an absent block registration shows a missing-block placeholder in the editor. With motion enabled the frame pins while the cards are dealt, then releases on the final card. Scrolling back reverses the sequence. The counter follows the current card. Nothing moves while the page is still. With motion off, reduced motion requested, or JavaScript unavailable, all six cards form a plain column with their complete content visible. With the plugin deactivated, the same core groups retain their backgrounds, borders, padding and composition. The plugin’s deck width and inter-card layout go with the wrapper. ### What is not proved The theme matrix and responsive checks cover the supported authoring themes, not every possible type scale or amount of replacement copy. Test a long translation and your own theme before publishing. The effect does not measure whether a visitor understands a process or prefers a particular plan. 44KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, paragraph, patternpaste/stack), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Use it for - Studio and agency process pages - How it works sections on a service site - Onboarding and client journey explainers - Hiring and application stages - Method or methodology pages #### Pair with Features Feature alternating Four feature rows, each a 4:3 frame set against its copy, with the seam flipping side to side down the page. The hairline that closes each row runs only under the text half, so the rule changes sides with the picture and the section never squares up on one edge. Example images are included and can be replaced in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/feature-alternating.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Timeline Timeline ahead A timeline that runs forward: six dated entries hung on one continuous currentColor hairline, three of them behind and three still to come, with the current entry set on an inverted plate so the reader can see at a glance where the work stands. The entries ahead carry the same rule and shorter copy, so the section visibly thins out toward the future. It is a history with an open end rather than a process: nothing is numbered and nothing asks the reader to act. States no colour and no font of its own. (https://patternpaste.com/pattern/timeline-ahead.html) #### Before you paste Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. How to install it (https://patternpaste.com/docs/install-pattern-paste/). Requires a block theme on WordPress 6.7 to 7.0. 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. How we test patterns (https://patternpaste.com/how-we-test/) #### What's inside Blocks button, buttons, column, columns, group, heading, paragraph, patternpaste/stack Core only NO Chains 132, deepest 2 rungs currentColor yes color base, black, contrast, white spacing 20, 40, 70 font-size medium, x-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in How it works (https://patternpaste.com/patterns/steps/) Shot in Twenty Twenty-Five Pricing Pricing Compare Needs plugin ### Pricing stack tiers Four pricing cards built as plan sheets: a numbered header, a large price beside a compact feature ledger, and a ruled footer. 8 blocks Open preview (https://patternpaste.com/pattern/pricing-stack-tiers.html) Shot in Twenty Twenty-Five Gallery Gallery Needs plugin ### Destination reel A full-screen-height landscape reel fills the left beside an editorial heading and numbered travel index. 9 blocks Open preview (https://patternpaste.com/pattern/gallery-warp-reel-destinations.html) Shot in Twenty Twenty-Five Hero Hero Needs plugin ### Fullscreen portfolio reel A photographic wheel fills the screen from top to bottom, with one project opening between curved neighbours. 7 blocks Open preview (https://patternpaste.com/pattern/hero-warp-reel-portfolio.html)