Stacked Card
A card layered over offset copies to suggest a deck behind it. Use it for collections, albums, or grouped items where many sit under one cover here.
A card layered over offset copies to suggest a deck behind it. Use it for collections, albums, or grouped items where many sit under one cover here.
Search blocks by description or jump to a page.
Stacked Card is a single card that appears to sit on top of a small deck. Two offset copies are pinned absolutely behind the main card, each shifted down and to the right by one pixel step, so three layers are visible at once. The front card holds a header with a title and description, a body paragraph, and a footer row with two buttons: Cancel on the left and Deploy on the right.
The content inside all three regions is independent. You can replace the title, description, and body copy without adjusting the visual depth effect. The footer buttons are straightforward to swap for other actions, and the offset shadow cards require no content of their own, so adding or removing text does not break the layered look.
This layout fits a project management workspace wherever a single action or resource needs to feel like one item drawn from a larger collection. It is a good fit for a "create new project" prompt, a template picker, or a card representing a workspace that contains many items underneath. The stacked silhouette communicates depth without needing a grid, which makes it more compact than showing multiple full cards side by side.
A natural flow around it on a Components page:
Before
After
The stacked frame works best when the card represents something that contains or groups other items. A few ways to use it:
Tip: keep the body text to two or three short sentences so the card stays compact and the stacked edges behind it remain visible.