Editorial Spine
Magazine-style vertical with italic display years on the left of a hairline gold rule, kicker labels, Instrument Serif titles, and Crimson Pro italic body copy on warm paper. Built for company histories, personal biographies, and long-read editorial features.
Editorial Spine the 20th 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
<div class="tl20-wrap">
<div class="tl20-header">
<span class="tl20-header-title">A Brief History</span>
<span class="tl20-header-sub">Studio Chronicle · 2018–present</span>
</div>
<div class="tl20-entry">
<div class="tl20-year">2018</div>
<div class="tl20-rule"></div>
<div class="tl20-body">
<div class="tl20-kicker">Origin</div>
<div class="tl20-title-main">Founded in a rented loft, Shoreditch</div>
<div class="tl20-text">Three designers with one shared monitor and an unhealthy obsession with kerning. The first project was a brand identity for a local coffee importer.</div>
</div>
</div>
<div class="tl20-entry">
<div class="tl20-year">2020</div>
<div class="tl20-rule"></div>
<div class="tl20-body">
<div class="tl20-kicker">Pivot</div>
<div class="tl20-title-main">Shifted to digital-first products</div>
<div class="tl20-text">The pandemic reshaped our practice. We dissolved our print retainer clients and rebuilt around software, motion, and interactive design systems.</div>
</div>
</div>
<div class="tl20-entry">
<div class="tl20-year">2023</div>
<div class="tl20-rule"></div>
<div class="tl20-body">
<div class="tl20-kicker">Recognition</div>
<div class="tl20-title-main">D&AD Wood Pencil, Digital Design</div>
<div class="tl20-text">Our data-journalism work for a climate NGO earned the studio's first major award and opened a new chapter of purpose-led commissions.</div>
</div>
</div>
<div class="tl20-entry">
<div class="tl20-year">Now</div>
<div class="tl20-rule"></div>
<div class="tl20-body">
<div class="tl20-kicker">Present</div>
<div class="tl20-title-main">Eight people, four time zones</div>
<div class="tl20-text">A deliberately small studio that treats craft as a non-negotiable. Currently booking for Q4 2026.</div>
</div>
</div>
</div> .tl20-wrap {
background: #faf6ef;
color: #1a1a1a;
padding: 2.5rem 2rem;
border-radius: 2px;
max-width: 680px;
font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl20-header {
display: flex;
align-items: baseline;
gap: 1.5rem;
margin-bottom: 2.5rem;
border-bottom: 2px solid #1a1a1a;
padding-bottom: 0.75rem;
}
.tl20-header-title {
font-family: Georgia, serif;
font-style: italic;
font-size: 1.85rem;
font-weight: 300;
color: #1a1a1a;
}
.tl20-header-sub {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.6rem;
color: #999;
letter-spacing: 0.2em;
text-transform: uppercase;
}
.tl20-entry {
display: grid;
grid-template-columns: 6ch 1px 1fr;
gap: 0 1.5rem;
margin-bottom: 2.25rem;
animation: tl20-fade-up 0.4s ease both;
}
@keyframes tl20-fade-up {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.tl20-entry { animation: none; }
}
.tl20-year {
font-family: 'Playfair Display', Georgia, serif;
font-style: italic;
font-size: 1.5rem;
color: #c8a96e;
text-align: right;
padding-top: 0.1rem;
}
.tl20-rule {
width: 1px;
background: #ddd;
position: relative;
}
.tl20-rule::before {
content: '';
width: 7px;
height: 7px;
border: 1.5px solid #c8a96e;
border-radius: 50%;
background: #faf6ef;
position: absolute;
top: 0.35rem;
left: 50%;
transform: translateX(-50%);
}
.tl20-kicker {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.6rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #999;
margin-bottom: 0.3rem;
}
.tl20-title-main {
font-family: 'Instrument Serif', 'Playfair Display', Georgia, serif;
font-size: 1.25rem;
color: #1a1a1a;
margin-bottom: 0.4rem;
line-height: 1.3;
}
.tl20-text {
font-family: 'Crimson Pro', Georgia, serif;
font-size: 0.95rem;
color: #555;
line-height: 1.6;
font-style: italic;
}