28 CSS Stacked Card Designs 21 / 28
Timeline Stack
A vertical timeline with a gradient spine and milestone nodes.
The code
<div class="scd-time">
<div class="scd-time__stage">
<div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2021</span><h3>The Beginning</h3><p>First prototype shipped to ten beta users.</p></div></div>
<div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2023</span><h3>Going Public</h3><p>Launched the open platform to everyone.</p></div></div>
<div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2025</span><h3>Scale</h3><p>Crossed one million active accounts.</p></div></div>
<div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2026</span><h3>What's Next</h3><p>Reimagining the experience from scratch.</p></div></div>
</div>
</div> <div class="scd-time">
<div class="scd-time__stage">
<div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2021</span><h3>The Beginning</h3><p>First prototype shipped to ten beta users.</p></div></div>
<div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2023</span><h3>Going Public</h3><p>Launched the open platform to everyone.</p></div></div>
<div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2025</span><h3>Scale</h3><p>Crossed one million active accounts.</p></div></div>
<div class="scd-time__node"><div class="scd-time__card"><span class="scd-time__yr">2026</span><h3>What's Next</h3><p>Reimagining the experience from scratch.</p></div></div>
</div>
</div>@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700&family=Schibsted+Grotesk:wght@400;500&display=swap');
.scd-time, .scd-time *, .scd-time *::before, .scd-time *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-time {
min-height: 460px;
display: grid;
place-items: center;
background: linear-gradient(180deg,#fffaf0,#f0e8dc);
font-family: 'Schibsted Grotesk', sans-serif;
}
.scd-time__stage {
position: relative;
width: 340px;
padding-left: 40px;
}
.scd-time__stage::before {
content: '';
position: absolute;
left: 14px; top: 10px; bottom: 10px;
width: 3px;
background: linear-gradient(#ff8a5c,#a83279);
border-radius: 3px;
}
.scd-time__node { position: relative; margin-bottom: 14px; }
.scd-time__node::before {
content: '';
position: absolute;
left: -33px; top: 18px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid #ff8a5c;
transition: transform .35s, background .35s;
}
.scd-time__card {
background: #fff;
border-radius: 14px;
padding: 16px 20px;
box-shadow: 0 8px 20px rgba(120,60,80,.12);
transition: transform .35s cubic-bezier(.3,.9,.3,1), box-shadow .35s;
cursor: pointer;
}
.scd-time__yr { font-family: 'Bricolage Grotesque', sans-serif; color: #a83279; font-size: .8rem; letter-spacing: .08em; }
.scd-time__card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.1rem; color: #2a2024; margin: 2px 0 4px; }
.scd-time__card p { font-size: .85rem; color: #6a5a60; }
.scd-time__node:hover .scd-time__card { transform: translateX(12px); box-shadow: 0 14px 30px rgba(120,60,80,.2); }
.scd-time__node:hover::before { transform: scale(1.3); background: #a83279; }
@media (prefers-reduced-motion: reduce) {
.scd-time__card, .scd-time__node::before { transition: none !important; }
} @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@700&family=Schibsted+Grotesk:wght@400;500&display=swap');
.scd-time, .scd-time *, .scd-time *::before, .scd-time *::after { box-sizing: border-box; margin: 0; padding: 0; }
.scd-time {
min-height: 460px;
display: grid;
place-items: center;
background: linear-gradient(180deg,#fffaf0,#f0e8dc);
font-family: 'Schibsted Grotesk', sans-serif;
}
.scd-time__stage {
position: relative;
width: 340px;
padding-left: 40px;
}
.scd-time__stage::before {
content: '';
position: absolute;
left: 14px; top: 10px; bottom: 10px;
width: 3px;
background: linear-gradient(#ff8a5c,#a83279);
border-radius: 3px;
}
.scd-time__node { position: relative; margin-bottom: 14px; }
.scd-time__node::before {
content: '';
position: absolute;
left: -33px; top: 18px;
width: 16px; height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid #ff8a5c;
transition: transform .35s, background .35s;
}
.scd-time__card {
background: #fff;
border-radius: 14px;
padding: 16px 20px;
box-shadow: 0 8px 20px rgba(120,60,80,.12);
transition: transform .35s cubic-bezier(.3,.9,.3,1), box-shadow .35s;
cursor: pointer;
}
.scd-time__yr { font-family: 'Bricolage Grotesque', sans-serif; color: #a83279; font-size: .8rem; letter-spacing: .08em; }
.scd-time__card h3 { font-family: 'Bricolage Grotesque', sans-serif; font-size: 1.1rem; color: #2a2024; margin: 2px 0 4px; }
.scd-time__card p { font-size: .85rem; color: #6a5a60; }
.scd-time__node:hover .scd-time__card { transform: translateX(12px); box-shadow: 0 14px 30px rgba(120,60,80,.2); }
.scd-time__node:hover::before { transform: scale(1.3); background: #a83279; }
@media (prefers-reduced-motion: reduce) {
.scd-time__card, .scd-time__node::before { transition: none !important; }
}