Tab Stack
Library catalog cards — cream cardstock with a red Dewey stamp and olive index lines. Click any card to bring it to the front.
Tab Stack the 11th 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-tab">
<input type="radio" name="scd-tab" id="scd-tab-1" checked />
<input type="radio" name="scd-tab" id="scd-tab-2" />
<input type="radio" name="scd-tab" id="scd-tab-3" />
<label for="scd-tab-1" class="scd-tab__c" data-i="0"
><span class="scd-tab__call">823.91</span>
<h4>Atlas of Birds</h4>
<p>Audubon · 1827</p></label
>
<label for="scd-tab-2" class="scd-tab__c" data-i="1"
><span class="scd-tab__call">711.40</span>
<h4>Italian Cities</h4>
<p>Calvino · 1972</p></label
>
<label for="scd-tab-3" class="scd-tab__c" data-i="2"
><span class="scd-tab__call">510.92</span>
<h4>Pure Logic</h4>
<p>Russell · 1903</p></label
>
</div> .scd-tab { position: relative; width: 220px; height: 160px; margin: 0 auto; }
.scd-tab > input { display: none; }
.scd-tab__c {
position: absolute; left: 50%; top: 50%;
width: 200px; height: 116px; margin: -58px 0 0 -100px;
background: #ede4cf;
color: #1a1a1a;
border: 1px solid #c4b896;
border-radius: 2px;
padding: 14px 18px;
cursor: pointer;
box-shadow: 0 4px 12px -4px rgba(0,0,0,0.35);
background-image: repeating-linear-gradient(0deg, transparent 0 18px, #c4b89640 18px 19px);
transition: transform .4s cubic-bezier(.3,1.3,.5,1);
}
.scd-tab__c[data-i="0"] { transform: translateY(0) scale(1); z-index: 3; }
.scd-tab__c[data-i="1"] { transform: translateY(-10px) scale(0.94); z-index: 2; }
.scd-tab__c[data-i="2"] { transform: translateY(-20px) scale(0.88); z-index: 1; }
#scd-tab-1:checked ~ [data-i="0"] { transform: translateY(0) scale(1); z-index: 3; }
#scd-tab-2:checked ~ [data-i="1"] { transform: translateY(0) scale(1); z-index: 3; }
#scd-tab-2:checked ~ [data-i="0"] { transform: translateY(20px) scale(0.88); z-index: 1; }
#scd-tab-3:checked ~ [data-i="2"] { transform: translateY(0) scale(1); z-index: 3; }
#scd-tab-3:checked ~ [data-i="1"] { transform: translateY(20px) scale(0.88); z-index: 1; }
#scd-tab-3:checked ~ [data-i="0"] { transform: translateY(40px) scale(0.78); z-index: 0; opacity: 0.5; }
.scd-tab__call {
display: inline-block;
background: #a32424; color: #ede4cf;
font: 700 10px ui-monospace, monospace; letter-spacing: 0.1em;
padding: 2px 6px; border-radius: 2px;
margin-bottom: 6px;
}
.scd-tab__c h4 { margin: 0 0 4px; font: 700 14px/1.1 ui-serif, Georgia; color: #4d5435; }
.scd-tab__c p { margin: 0; font: italic 11px/1.5 ui-serif, Georgia; color: #5a4a30; }