Cascade Lift
Manila folder index — kraft-paper folders with green tab labels stacked tight; hover lifts them into a staggered cascade.
Cascade Lift the 7th of 22 designs in the 22 CSS Stacked Card Designs collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="scd-casc"> <div class="scd-casc__c" style="--i: 0"><b>2026 — Q1</b><span>3 events</span></div> <div class="scd-casc__c" style="--i: 1"><b>2026 — Q2</b><span>1 event</span></div> <div class="scd-casc__c" style="--i: 2"><b>2026 — Q3</b><span>5 events</span></div> <div class="scd-casc__c" style="--i: 3"><b>2026 — Q4</b><span>2 events</span></div> </div>
.scd-casc { position: relative; width: 220px; height: 200px; margin: 0 auto; cursor: pointer; }
.scd-casc__c {
position: absolute; left: 50%; bottom: 0;
width: 200px; height: 56px; margin-left: -100px;
background: #d4b86a;
color: #1a1a1a;
border-radius: 2px 8px 2px 2px;
padding: 14px 18px 10px;
display: flex; justify-content: space-between; align-items: center;
box-shadow: 0 3px 6px -1px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.4);
transform: translateY(calc(var(--i) * -10px));
transition: transform .4s cubic-bezier(.3,1.3,.5,1);
z-index: calc(10 - var(--i));
}
.scd-casc__c::before {
content: '';
position: absolute; top: -10px; right: 14px;
width: 56px; height: 12px;
background: #2a4d3a;
border-radius: 4px 4px 0 0;
}
.scd-casc:hover .scd-casc__c { transform: translateY(calc(var(--i) * -56px)); }
.scd-casc__c b { font: 700 12px/1 ui-monospace, monospace; letter-spacing: 0.04em; }
.scd-casc__c span { font: 11px/1 system-ui; color: #4a3d20; }