Skip to main content

Stacking cards block

What is the Stacking cards block for?

Scrolling assembles the story one step at a time. Stacking cards reveal content in sequence instead of showing everything at once. They work well for a process, a service journey or a short narrative where each new card adds the next part of the idea.

If the cards can be reordered without changing the meaning, a grid is probably a better fit.

Example: how we work

Four connected steps that visitors discover one by one as they scroll.

  1. 1. Understand the goal

    First we clarify what you want to achieve, who the page is for and what a good outcome looks like.

  2. 2. Set the direction

    We define the important decisions, the structure and the experience the page needs to create.

  3. 3. Build the first version

    The plan becomes a version you can see and try, rather than only a long specification.

  4. 4. Refine and hand over

    We refine the details from feedback, then agree on the handover and the next steps.

Another example

When every step has its own visual, the stack can carry more of the story.

Each card can use a different image while scrolling keeps the sequence clear.

Example: an object's story, image by image

Each card gets its own visual moment, so the image sequence helps move the story forward.

  1. A craftswoman carving a pattern into a wooden bowl with a chisel in a workshop.

    1. The form begins

    The first card establishes the starting point and the visual world of the story.

  2. Close-up of a craftsperson carving a pattern into a wooden bowl with a chisel.

    2. The details come into focus

    The next image moves closer to the details, giving visitors a genuinely different view rather than repeating the same visual.

  3. A craftswoman looking at a finished wooden bowl in her workshop.

    3. The story comes together

    The final card completes the arc with the finished result.

Stacking cards or Scrolling story? Choose Stacking cards when each step should have its own card and, optionally, its own image. Choose Scrolling story when one visual anchor should stay on screen while the text changes beside it.

What can you configure in the Stacking cards block?

Alongside the card content, you can control the layout, image ratio and section around the stack.

Cards

Three to five cards usually works best. Each card has its own title, text and optional image.

Card layout

Choose from four layouts, from side-by-side image and text to a full-screen card treatment.

Card image ratio

Keep card images consistent with 4:3, 1:1, 16:9 or 4:5 aspect ratios.

Heading and subheading

Add a section heading and a short introduction above the cards.

Background and width →

Place the stack on the page background or in a custom or inverted band, with Reading, Wide or Full content width.

Spacing and anchor →

Tune the rhythm with section spacing, and add an anchor ID if navigation should jump directly here.

Full-screen card stack

Five images, five moments.

  1. People walking on grass near trees under a blue sky.

    Shape

    It starts here.

  2. Close-up photograph of a small detail.

    Detail

    Look a little closer.

  3. A collection of brown wooden logs.

    Material

    Texture tells its own story.

  4. A path between tall buildings.

    Refinement

    Every detail matters.

  5. A dog and a cat lying in the grass.

    Complete

    The story comes together.

When is another block better?

The structure of the story should determine the format.

Scrolling story →

Use it when one image or video should remain fixed while the steps change alongside it.

Features →

Use it when the items are equal in importance and visitors should compare them quickly.

Timeline →

Use it when real dates, years or milestones form the backbone of the story.

BUILD THE STORY STEP BY STEP

Do not show everything at once. Give sequence a rhythm.

Use a few strong cards, a consistent visual world and an order that genuinely moves the idea forward.

Build my website →Back to Website Blocks