Skip to content
Get lifetime access
Library

Stacking card

Cards that pin near the top as you scroll and stack, each one settling back a step as the next slides over it. One list, one card per item; the list carries a few lines of script that measure the scroll, so it works in every browser. Full-screen cards (the default) or content-height cards; the outgoing card settles back smaller, dimmer and rounder as the next slides over.

ComponentInteractive

Live preview

Variant
Scheme
Width
Motion

  1. First visit

    A 30-minute visit to listen, ask questions and talk budget. You get a written plan and a line-item price within a week.

  2. Get the plan

    A plan you can picture and a price with a line for everything. Nothing on the invoice you did not see here.

  3. Approve and schedule

    Sign off, pick a start date, pay a deposit. The dates go in writing.

  4. The work

    One team, one lead, regular updates until the job is done.

Scroll-linked: each card pins, then settles back, dims and rounds as the next slides over. Scroll to see it move.

  1. First visit

    A 30-minute visit to listen, ask questions and talk budget. You get a written plan and a line-item price within a week.

  2. Get the plan

    A plan you can picture and a price with a line for everything. Nothing on the invoice you did not see here.

  3. Approve and schedule

    Sign off, pick a start date, pay a deposit. The dates go in writing.

  4. The work

    One team, one lead, regular updates until the job is done.

  1. First visit

    A 30-minute visit to listen, ask questions and talk budget. You get a written plan and a line-item price within a week.

  2. Get the plan

    A plan you can picture and a price with a line for everything. Nothing on the invoice you did not see here.

  3. Approve and schedule

    Sign off, pick a start date, pay a deposit. The dates go in writing.

etchpress.com/library/stacking-card
Stacking card

What you can build with it

A sequence of steps or features that stack as the page scrolls. A case study told card by card. A product's main points on a long landing page.

Props

title (text); text (text); image (image, optional); tone (select: light, dark, primary); size (select: full, content).

States shown

Free (below), pinned, covered (scaled back). Reduced motion and browsers without scroll timelines: pinned cards without the scale.

How to change it

Content and options are 6 props in the component's settings panel. Colour, type, spacing and radius follow your Automatic.css settings, so a change to the site's palette or scale changes this too. For anything else, edit the classes in the Style Manager, starting with .null, .stack, .stacking-card. Its behaviour is a small script that travels with the component; no plugin and nothing to install.

ACSS tokens used

–white / –neutral-ultra-light surfaces, –primary for the primary tone, –header-height for the pin offset.

ACSS requirements

ACSS 4 defaults. No stylesheet needed. The list (the stage's ordered list) carries the script; paste the list, not a card alone.

Version history

Version 1.0.0, September 19, 2026: First release.

Tested with

Etch 1.6.7 and ACSS 4.0.1. Version 1.0.0.

Lifetime members

Members copy this straight into Etch, ready to paste.

Used an earlier version? How to update it

Get lifetime access
Back to the library
Other builders

Want EtchPress for Bricks or the block editor?

Everything here is made for Etch. Pick the builder you use and leave your email: we write once, when EtchPress works there.

This field is required.