Image Stack Card
A project card showing two or three Placeholder images layered at offsets to suggest depth, with the project name and role below.
A project card showing two or three Placeholder images layered at offsets to suggest depth, with the project name and role below.
Search blocks by description or jump to a page.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Image Stack Card presents four projects in a four-column grid where each card stacks 2 or 3 Placeholder images at slight offsets using z-index and border-offset layering, suggesting depth without floating overlaid cards. The project name, role, and year sit below the stack. Ledger and Field Notes get three layers; Tend and Atlas get two.
Projects are one array with an imageCount field typed as
a const literal. The layered-image technique is the
distinctive choice: it hints at process deliverables or a
multi-screen flow in a compact tile footprint.
Reach for this block on a work or projects page when the portfolio includes multi-screen or multi-deliverable projects and a single thumbnail would undersell the scope. The installer swaps the project data and replaces the Placeholder layers with real screens or deliverable images.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the product design portfolio with multiple screens per project. Other uses:
Tip: use three layers only when the project genuinely produced three distinct artefacts; two strong images beat three that repeat the same view.