Classic Deck
Brutalist memo deck — riso-red index cards on cream stock with chunky ink labels. Click anywhere to cycle the front card to the back.
Classic Deck the 1st 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-deck scd-cycle" tabindex="0">
<div class="scd-deck__c" style="--i: 2">
<span class="scd-deck__tag">MEMO 03</span>
<h4>Notes</h4>
<p>3 items</p>
</div>
<div class="scd-deck__c" style="--i: 1">
<span class="scd-deck__tag">MEMO 02</span>
<h4>Tasks</h4>
<p>7 items</p>
</div>
<div class="scd-deck__c" style="--i: 0">
<span class="scd-deck__tag">MEMO 01</span>
<h4>Inbox</h4>
<p>12 messages</p>
</div>
</div> .scd-deck {
position: relative; width: 220px; height: 150px; margin: 0 auto;
cursor: pointer;
}
.scd-deck__c {
position: absolute; inset: 0;
background: #f4ead0;
color: #0a0a0a;
border: 2px solid #0a0a0a;
border-radius: 4px; padding: 14px 16px;
box-shadow: 6px 6px 0 #0a0a0a;
transform: translate(calc(var(--i) * -10px), calc(var(--i) * -10px));
z-index: calc(10 - var(--i));
transition: transform .45s cubic-bezier(.3,1.2,.4,1), z-index 0s .22s;
}
.scd-deck__c:nth-child(1) { background: #ee3333; color: #f4ead0; }
.scd-deck__c:nth-child(2) { background: #f4ead0; }
.scd-deck__c:nth-child(3) { background: #1a1a1a; color: #f4ead0; }
.scd-deck__tag { font: 700 9px/1 ui-monospace, monospace; letter-spacing: 0.18em; opacity: 0.7; }
.scd-deck__c h4 { margin: 6px 0 4px; font: 900 18px/1 system-ui, sans-serif; letter-spacing: -0.02em; }
.scd-deck__c p { margin: 0; font: 12px/1 system-ui, sans-serif; opacity: 0.78; } /* Click-to-cycle: send the front card to the back of the deck. */
document.querySelectorAll('.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);
});
});
});