Card Stack
also known asz-stack · card deck · stacked cards · deck layout
A z-axis stack of overlapping cards where the top card is fully visible and lower cards peek out behind it.
A card stack arranges multiple cards in a small vertical Z-axis pile. The frontmost card is fully visible at 100% scale and opacity; cards behind it peek out a few pixels below, scaled slightly down (0.92–0.96) and faded (0.5–0.75 opacity). The result reads as a deck of cards or a stack of pages.
The pattern is used for swipeable card decks (next item peeks behind), testimonial carousels (depth implies more content available), onboarding flows (each step removes the top card), and as a hint pattern for collections with hidden additional items.
Done well, the stack is a 2–3 card-deep illusion — going deeper looks busy. The peek distance (how much lower cards stick out) should be 8–18px depending on card height, and the scale step should be subtle (4% per layer max).
- Testimonial or quote carousels
- Swipeable mobile flows (Tinder-style decks)
- Onboarding sequences with discrete steps
- Collection hints — "+ 12 more behind this one"
- Long lists where users need to scan all items
- Data tables or anything requiring side-by-side comparison
- +Show 2–3 cards in the stack max — more reads as clutter
- +Use ≤4% scale difference between layers
- +Add a subtle shadow per layer for depth perception
- −Don't stack 5+ cards — it stops looking like a stack and becomes noise
- −Don't use card-stack for content the user must compare side-by-side
People also ask
How is card stack different from a carousel?
A carousel slides cards horizontally — only one is visible. A card stack overlaps them on the Z-axis — the next card peeks behind the current one, hinting at depth and "more available" without taking horizontal space.