Staircase Bricks
Subway-tile platform stack — white-tile bricks with a green metro stripe and station-style numbering. Click to rotate the bottom brick to the top.
Staircase Bricks the 4th of 22 designs in the 22 CSS Stacked Card Designs collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). 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-brick scd-cycle" tabindex="0"> <div class="scd-brick__c" style="--i: 0"><span>Q1</span> Plan</div> <div class="scd-brick__c" style="--i: 1"><span>Q2</span> Build</div> <div class="scd-brick__c" style="--i: 2"><span>Q3</span> Ship</div> <div class="scd-brick__c" style="--i: 3"><span>Q4</span> Scale</div> </div>
.scd-brick {
position: relative; width: 240px; height: 200px; margin: 0 auto;
cursor: pointer;
}
.scd-brick__c {
position: absolute;
width: 134px; height: 40px;
background: #f0f0e8;
color: #1a1a1a;
border-radius: 2px;
display: flex; align-items: center; gap: 10px;
padding: 0 14px;
font: 700 12px system-ui, sans-serif;
box-shadow:
inset 0 -3px 0 #1d6b3a,
inset 1px 1px 0 rgba(255,255,255,0.9),
0 4px 0 #3d3d40,
0 6px 14px -3px rgba(0,0,0,0.4);
bottom: calc(var(--i) * 36px);
left: calc(var(--i) * 26px);
z-index: var(--i);
transition: bottom .5s cubic-bezier(.3,1.2,.4,1), left .5s cubic-bezier(.3,1.2,.4,1);
}
.scd-brick__c span {
background: #1d6b3a; color: #f0f0e8;
font: 700 10px ui-monospace, monospace;
padding: 3px 6px; border-radius: 2px; letter-spacing: 0.08em;
} /* Click-to-cycle the staircase: bottom brick rotates to top. */
document.querySelectorAll('.scd-brick.scd-cycle').forEach(function(stack) {
stack.addEventListener('click', function() {
var cards = Array.from(stack.children);
var max = cards.length - 1;
cards.forEach(function(card) {
var current = parseInt(card.style.getPropertyValue('--i') || '0', 10);
var next = current === 0 ? max : current - 1;
card.style.setProperty('--i', next);
});
});
});