Start free trial

Interactive Stack Needs plugin

The Stack block

Cards that stack over one another as the reader scrolls. The section holds the screen while each card rides up from below, overshoots its resting line and locks, and every card already down slides back a notch, shrinks, dims and leans away, so the section reads as a pile being built rather than content scrolling past. A hard flick tips the whole pile and it springs level again. Without JavaScript it is the plain column of cards the markup already is.

SubscribeThe 3 designs
Case stack panels·Twenty Twenty-FivePlays best in its own window

Open in its own window Rendered by WordPress in Twenty Twenty-Five.Open this pattern

3 patterns3 designs13 settingspatternpaste/stackRequires 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.

The designs

3 patterns, 3 designs between them. Each is this one block wrapped in core blocks, so everything around it takes its colours, spacing and type from your theme.

All 36 interactive patterns

Case stack panels rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryGalleryEditorialNeeds plugin

Case stack panels

Five case-study panels on a dark band: a short masthead, then five prints dealt over one another as you scroll, each one a photograph in a wide cinematic crop with its client, its year and one line of outcome on the plate beneath it.

7 blocksOpen preview
Pricing stack tiers rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePricingPricingCompareNeeds 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 blocksOpen preview
Process stack steps rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHow it worksHow it worksNeeds plugin

Process stack steps

Six process cards with oversized phase numbers, short editorial headlines and a ruled deliverables footer.

8 blocksOpen preview

What you can set before you copy

Every one of these is an attribute of the block, so it is the same control the editor's inspector offers after you have pasted. The Motion drawer on a pattern's own page writes your values into the markup before you copy it.

SettingAttributeValuesDefault
Animate this blockpatternpasteMotionOn or offOn
Scroll per cardpatternpasteDeal40 to 200%, in steps of 585%
PeekpatternpastePeek0 to 60px, in steps of 226px
Shrink per levelpatternpasteShrink0 to 9%, in steps of 0.55%
Dim per levelpatternpasteDim0 to 40%, in steps of 216%
Deck depthpatternpasteDepth1 to 6, in steps of 14
OvershootpatternpasteOvershoot0 to 40px, in steps of 112px
Lean on a fast scrollpatternpasteLean0 to 14deg, in steps of 19deg
Deck widthpatternpasteWidth480 to 1600px, in steps of 20920px
Card heightpatternpasteCardHeight0 to 800px, in steps of 80px
Gap at restpatternpasteGap0 to 96px, in steps of 424px
Draw the cardspatternpastePlateOn or offOn
Step counterpatternpasteCountOn or offOn
Back to the interactive patterns