Tour Stub Timeline
Horizontal snap-scroll strip of concert ticket stubs. Each card carries a city, venue, set list, and a hand-stamped seal — slightly rotated, with dashed tear-perforations and offset shadows. Built for tour archives, festival lineups, and any event-driven brand history.
Tour Stub Timeline the 2nd of 24 designs in the 24 CSS Timeline Layouts 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
<section class="tl2-wrap">
<header class="tl2-head">
<h2 class="tl2-title">The Static<br><span class="tl2-title-alt">World Tour '26</span></h2>
<div class="tl2-credits">
44 cities<br>
6 continents<br>
sold + standing<br>
━━━━━━━━━<br>
scroll →
</div>
</header>
<div class="tl2-strip">
<article class="tl2-stub tl2-sold-out">
<div class="tl2-top">
<div class="tl2-date">14 · FEB · 2026 · FRI</div>
<div class="tl2-city">Reykjavík</div>
<div class="tl2-venue">Harpa Concert Hall</div>
</div>
<div class="tl2-bot">
<h5 class="tl2-list-head">SET LIST</h5>
<ol class="tl2-setlist">
<li>Northern Static</li>
<li>Glacier Song</li>
<li>Bone Radio</li>
<li>Encore: Aurora</li>
</ol>
</div>
<div class="tl2-seal">Sold<br>Out</div>
</article>
<article class="tl2-stub">
<div class="tl2-top">
<div class="tl2-date">22 · FEB · 2026 · SAT</div>
<div class="tl2-city">Berlin</div>
<div class="tl2-venue">Tempodrom · Kreuzberg</div>
</div>
<div class="tl2-bot">
<h5 class="tl2-list-head">SET LIST</h5>
<ol class="tl2-setlist">
<li>U-Bahn Hymn</li>
<li>Brutalist Love</li>
<li>Concrete Dawn</li>
<li>Encore: Static (live edit)</li>
</ol>
</div>
<div class="tl2-seal">Few<br>Left</div>
</article>
<article class="tl2-stub tl2-sold-out">
<div class="tl2-top">
<div class="tl2-date">06 · MAR · 2026 · FRI</div>
<div class="tl2-city">Marrakech</div>
<div class="tl2-venue">Jardin Majorelle</div>
</div>
<div class="tl2-bot">
<h5 class="tl2-list-head">SET LIST</h5>
<ol class="tl2-setlist">
<li>Blue Garden</li>
<li>Souk Static</li>
<li>Atlas Lullaby</li>
<li>Encore: Mint Tea</li>
</ol>
</div>
<div class="tl2-seal">Sold<br>Out</div>
</article>
<article class="tl2-stub">
<div class="tl2-top">
<div class="tl2-date">19 · MAR · 2026 · THU</div>
<div class="tl2-city">Lagos</div>
<div class="tl2-venue">Terra Kulture Arena</div>
</div>
<div class="tl2-bot">
<h5 class="tl2-list-head">SET LIST</h5>
<ol class="tl2-setlist">
<li>Harmattan</li>
<li>Static Pt. II</li>
<li>Yellow Bus</li>
<li>Encore: Lagos After Dark</li>
</ol>
</div>
<div class="tl2-seal">Tix<br>Live</div>
</article>
<article class="tl2-stub tl2-sold-out">
<div class="tl2-top">
<div class="tl2-date">04 · APR · 2026 · SAT</div>
<div class="tl2-city">Mexico City</div>
<div class="tl2-venue">Foro Sol</div>
</div>
<div class="tl2-bot">
<h5 class="tl2-list-head">SET LIST</h5>
<ol class="tl2-setlist">
<li>Xochimilco</li>
<li>Smog Romance</li>
<li>Tláloc</li>
<li>Encore: Mezcal Static</li>
</ol>
</div>
<div class="tl2-seal">Sold<br>Out</div>
</article>
<article class="tl2-stub">
<div class="tl2-top">
<div class="tl2-date">02 · MAY · 2026 · SAT</div>
<div class="tl2-city">Tokyo</div>
<div class="tl2-venue">Nippon Budokan</div>
</div>
<div class="tl2-bot">
<h5 class="tl2-list-head">SET LIST</h5>
<ol class="tl2-setlist">
<li>Shibuya Static</li>
<li>Sakura Loop</li>
<li>Train at 3am</li>
<li>Encore: Hanami Hymn</li>
</ol>
</div>
<div class="tl2-seal">Few<br>Left</div>
</article>
</div>
</section> .tl2-wrap {
background: #f4ed47;
color: #1a1a1a;
font-family: 'Archivo', system-ui, sans-serif;
padding: 2rem 0 2.5rem;
position: relative;
overflow: hidden;
}
.tl2-wrap::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(circle, #1a1a1a 1px, transparent 1.5px);
background-size: 8px 8px;
opacity: 0.08;
pointer-events: none;
}
.tl2-head {
padding: 1rem 2rem 2rem;
display: grid;
grid-template-columns: 1fr auto;
align-items: end;
gap: 1.5rem;
position: relative;
}
.tl2-title {
font-family: 'Anton', 'Archivo', sans-serif;
font-weight: 400;
font-size: clamp(2.25rem, 9vw, 5.5rem);
line-height: 0.85;
letter-spacing: -0.02em;
text-transform: uppercase;
color: #1a1a1a;
margin: 0;
}
.tl2-title-alt {
display: block;
color: #ff2d72;
-webkit-text-stroke: 2px #1a1a1a;
}
.tl2-credits {
font-weight: 900;
font-size: 11px;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.05em;
text-align: right;
border: 3px solid #1a1a1a;
padding: 0.75rem;
background: #f4ed47;
transform: rotate(2deg);
box-shadow: 5px 5px 0 #1a1a1a;
}
.tl2-strip {
display: flex;
gap: 1rem;
padding: 1rem 2rem 2rem;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
scrollbar-color: #1a1a1a #f4ed47;
position: relative;
}
.tl2-strip::-webkit-scrollbar { height: 6px; }
.tl2-strip::-webkit-scrollbar-thumb { background: #1a1a1a; }
.tl2-stub {
flex: 0 0 270px;
min-height: 400px;
background: #fff;
border: 3px solid #1a1a1a;
box-shadow: 7px 7px 0 #1a1a1a;
position: relative;
scroll-snap-align: start;
transform: rotate(-1deg);
transition: transform 0.35s, box-shadow 0.35s;
display: flex;
flex-direction: column;
cursor: pointer;
}
.tl2-stub:nth-child(odd) { transform: rotate(1.5deg); }
.tl2-stub:nth-child(3n) { transform: rotate(-2deg); }
.tl2-stub:nth-child(5n) { transform: rotate(0.5deg); }
.tl2-stub:hover {
transform: rotate(0deg) translateY(-6px);
box-shadow: 10px 10px 0 #ff2d72;
}
.tl2-stub::before {
content: '';
position: absolute;
left: 0; right: 0;
top: 35%;
border-top: 2px dashed #1a1a1a;
}
.tl2-stub::after {
content: '';
position: absolute;
left: -8px;
top: calc(35% - 8px);
width: 16px; height: 16px;
background: #f4ed47;
border: 3px solid #1a1a1a;
border-radius: 50%;
}
.tl2-top {
padding: 1rem;
flex: 0 0 35%;
background: #fff;
}
.tl2-date {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
}
.tl2-city {
font-family: 'Anton', 'Archivo', sans-serif;
font-size: 2rem;
line-height: 0.9;
text-transform: uppercase;
margin-top: 0.5rem;
}
.tl2-venue {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-top: 0.4rem;
color: #555;
}
.tl2-bot {
padding: 1.5rem 1rem 1rem;
flex: 1;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.tl2-list-head {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 9px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #777;
margin: 0 0 0.5rem;
}
.tl2-setlist {
list-style: none;
padding: 0;
margin: 0;
font-size: 12px;
font-weight: 700;
line-height: 1.5;
counter-reset: tl2-set-num;
}
.tl2-setlist li {
padding: 2px 0;
border-bottom: 1px dotted #ddd;
}
.tl2-setlist li::before {
content: counter(tl2-set-num, decimal-leading-zero) ' · ';
counter-increment: tl2-set-num;
color: #ff2d72;
}
.tl2-seal {
position: absolute;
bottom: 14px;
right: 14px;
width: 54px; height: 54px;
border: 2px solid #ff2d72;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'Anton', 'Archivo', sans-serif;
font-size: 10px;
color: #ff2d72;
line-height: 1.1;
transform: rotate(-15deg);
text-transform: uppercase;
}
.tl2-sold-out .tl2-seal {
color: #1a1a1a;
border-color: #1a1a1a;
background: #ff2d72;
transform: rotate(-15deg) scale(1.05);
}
@media (max-width: 720px) {
.tl2-head { grid-template-columns: 1fr; }
.tl2-credits { justify-self: start; }
}