Opens in a new tab

Card template for Bricks

Stacked cards, an animated Bricks template

Each card sticks near the top and the next one slides over it. The one underneath shrinks a little, darkens and tilts back. It works with any number of cards.

After launch, customers who are logged in with an active license get a Copy for Bricks button here.Planned after launch

Live demo

Stacked cards · live

The real template, live. Switch between desktop, tablet and phone widths.Open the demo in a new tab

What moves and how

One setting stacks them

Each card measures how much the next one covers it, so the stack stays exact when you add or remove cards.

  • Each card reacts as the next one covers it: it shrinks, darkens and tilts back.

    Control: Covered by next sibling
  • The cards know their order, so the offsets line up with any number of cards.

    Control: Index children

New in version 3.2

Or ask your assistant to build it

From 3.2 your own AI assistant can build this section in Bricks from a description like this one. It was tested on a real page.

Claude · your-site.com

Make the 5 service cards stick and stack on top of each other as I scroll: each one shrinks slightly, darkens and tilts back while the next slides over it. It must work with any number of cards.

Read the recipe for stacked cards
Set Covered by next sibling and a scroll row
Set Index children for the order
Claude

Done: each card sticks and the next one covers it, while the one underneath shrinks, darkens and tilts back. Tested in Bricks and in Etch.

Reply to Claude…

Add Bricks Builder animations to your next site

From $179, one payment, every update for life. 14-day refund.