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.

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.

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.

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.

• 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.

• 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.

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.

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.