# 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. Canonical: https://patternpaste.com/pattern/process-stack-steps.html Section: How it works Access: Included in Pattern Paste access. Needs: 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. Also needs: 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. Blocks: button, buttons, column, columns, group, heading, paragraph, patternpaste/stack Keywords: steps, process, how it works, stack, cards, deck, scroll, onboarding, method Promise: This variation embeds one of our blocks: install the companion plugin, then paste. --- ## 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. ## 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. ## 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 you change first 1. **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. 2. **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. 3. **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. 4. **The masthead and hand-off.** Both are ordinary groups outside the pinned block. Replace the hand-off link destination. 5. **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. 6. **Heading levels.** The masthead is h2 and the card titles are h3. Adjust these to the surrounding page’s outline. ## 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.