Stack, Pattern Paste

Canonical: https://patternpaste.com/interactive/stack/

Interactive (https://patternpaste.com/interactive/) Stack Needs plugin (https://patternpaste.com/docs/install-pattern-paste/)

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

Subscribe (https://patternpaste.com/account/#plan)The 3 designs

Case stack panels · Twenty Twenty-Five Plays best in its own window (https://patternpaste.com/previews/case-stack-panels/twentytwentyfive.html)

Open in its own window (https://patternpaste.com/previews/case-stack-panels/twentytwentyfive.html) Rendered by WordPress in Twenty Twenty-Five. Open this pattern (https://patternpaste.com/pattern/case-stack-panels.html)

3 patterns 3 designs 13 settings patternpaste/stack 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.

## 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 (https://patternpaste.com/interactive/#stack)

Shot in Twenty Twenty-Five Gallery Gallery Editorial Needs 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 blocks Open preview (https://patternpaste.com/pattern/case-stack-panels.html)

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 How it works How it works Needs plugin

### Process stack steps

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

8 blocks Open preview (https://patternpaste.com/pattern/process-stack-steps.html)

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

Setting | Attribute | Values | Default |

Animate this block | patternpasteMotion | On or off | On |

Scroll per card | patternpasteDeal | 40 to 200%, in steps of 5 | 85% |

Peek | patternpastePeek | 0 to 60px, in steps of 2 | 26px |

Shrink per level | patternpasteShrink | 0 to 9%, in steps of 0.5 | 5% |

Dim per level | patternpasteDim | 0 to 40%, in steps of 2 | 16% |

Deck depth | patternpasteDepth | 1 to 6, in steps of 1 | 4 |

Overshoot | patternpasteOvershoot | 0 to 40px, in steps of 1 | 12px |

Lean on a fast scroll | patternpasteLean | 0 to 14deg, in steps of 1 | 9deg |

Deck width | patternpasteWidth | 480 to 1600px, in steps of 20 | 920px |

Card height | patternpasteCardHeight | 0 to 800px, in steps of 8 | 0px |

Gap at rest | patternpasteGap | 0 to 96px, in steps of 4 | 24px |

Draw the cards | patternpastePlate | On or off | On |

Step counter | patternpasteCount | On or off | On |

Back to the interactive patterns (https://patternpaste.com/interactive/)

## Needs the plugin

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.

The plugin is yours to use forever: after you cancel, it and every section using it keep working. Only updates and support stop.

How to install it (https://patternpaste.com/docs/install-pattern-paste/)

The plugin registers this block and nothing else: it ships no patterns of its own. The designs live here, as copy-paste markup.

### Before you 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.