Editorial
Magazine-style two-column alternating layout with large gradient visuals, italic serif headings, and pull quotes. Refined type on warm paper — built for retrospectives, brand histories, and long-read feature articles.
Editorial the 16th 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="tl16-scene">
<div class="tl16-wrap">
<div class="tl16-entry">
<div class="tl16-text">
<p class="tl16-number">01</p>
<p class="tl16-decade">1940 — 1960</p>
<h3 class="tl16-heading">The Atomic Age</h3>
<p class="tl16-body">Nuclear fission unlocked both promise and peril. Nations raced to harness what was once thought to be nature's most fundamental secret.</p>
<blockquote class="tl16-pullquote">"We have unleashed a force that will reshape civilization itself."</blockquote>
</div>
<div class="tl16-visual">
<div class="tl16-visual-inner tl16-v1" data-label="1940 — 1960">40s</div>
</div>
</div>
<div class="tl16-entry">
<div class="tl16-text">
<p class="tl16-number">02</p>
<p class="tl16-decade">1960 — 1980</p>
<h3 class="tl16-heading">The Space Race</h3>
<p class="tl16-body">Earthbound dreams took flight. Rockets carried humans beyond the atmosphere, reframing humanity's sense of its own place in the cosmos.</p>
<blockquote class="tl16-pullquote">"The Moon is not so far when you decide you must go there."</blockquote>
</div>
<div class="tl16-visual">
<div class="tl16-visual-inner tl16-v2" data-label="1960 — 1980">60s</div>
</div>
</div>
<div class="tl16-entry">
<div class="tl16-text">
<p class="tl16-number">03</p>
<p class="tl16-decade">1980 — 2000</p>
<h3 class="tl16-heading">The Digital Revolution</h3>
<p class="tl16-body">Personal computers arrived in homes. Software became the new architecture, and those who wrote it found themselves as the architects of the century ahead.</p>
<blockquote class="tl16-pullquote">"Software is eating the world — and it's hungry."</blockquote>
</div>
<div class="tl16-visual">
<div class="tl16-visual-inner tl16-v3" data-label="1980 — 2000">80s</div>
</div>
</div>
<div class="tl16-entry tl16-last">
<div class="tl16-text">
<p class="tl16-number">04</p>
<p class="tl16-decade">2000 — Present</p>
<h3 class="tl16-heading">The Intelligence Age</h3>
<p class="tl16-body">Data became the substrate of decision. Machines learned from patterns invisible to human eyes, and the boundary between tool and collaborator began to blur.</p>
<blockquote class="tl16-pullquote">"We are no longer just using intelligence; we are growing it."</blockquote>
</div>
<div class="tl16-visual">
<div class="tl16-visual-inner tl16-v4" data-label="2000 — Now">2K</div>
</div>
</div>
</div>
</div> .tl16-scene {
--tl16-paper: #f0ece4;
--tl16-ink: #0d0d0d;
background: var(--tl16-paper);
padding: 3rem 1.5rem;
font-family: 'Inter', system-ui, sans-serif;
}
.tl16-wrap {
max-width: 900px;
margin: 0 auto;
}
.tl16-entry {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem 3rem;
margin-bottom: 3rem;
padding-bottom: 3rem;
align-items: center;
border-bottom: 1px solid rgba(13,13,13,0.1);
}
.tl16-last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.tl16-entry:nth-child(even) .tl16-text { order: 2; }
.tl16-entry:nth-child(even) .tl16-visual { order: 1; }
.tl16-visual {
aspect-ratio: 4 / 3;
border-radius: 3px;
overflow: hidden;
position: relative;
}
.tl16-visual-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter Tight', 'Inter', sans-serif;
font-weight: 800;
font-size: 4rem;
letter-spacing: 2px;
color: rgba(255,255,255,0.9);
position: relative;
}
.tl16-visual-inner::after {
content: attr(data-label);
position: absolute;
bottom: 1rem;
right: 1rem;
font-family: ui-monospace, monospace;
font-size: 10px;
letter-spacing: 1.5px;
color: rgba(255,255,255,0.55);
text-transform: uppercase;
font-weight: 400;
}
.tl16-v1 { background: linear-gradient(135deg, #1a1a2e, #c8423a); }
.tl16-v2 { background: linear-gradient(135deg, #0a3d62, #2980b9); }
.tl16-v3 { background: linear-gradient(135deg, #1a3a1a, #2ecc71); }
.tl16-v4 { background: linear-gradient(135deg, #3d2000, #d4a017); }
.tl16-number {
font-family: Georgia, 'Times New Roman', serif;
font-size: 3.5rem;
font-weight: 300;
color: rgba(13,13,13,0.1);
line-height: 1;
margin: 0 0 -0.5rem;
}
.tl16-decade {
font-family: ui-monospace, monospace;
font-size: 11px;
letter-spacing: 2px;
color: rgba(13,13,13,0.4);
text-transform: uppercase;
margin: 0 0 0.7rem;
}
.tl16-heading {
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 1.5rem;
font-weight: 700;
color: var(--tl16-ink);
margin: 0 0 0.7rem;
line-height: 1.2;
}
.tl16-body {
font-size: 13.5px;
color: rgba(13,13,13,0.6);
line-height: 1.75;
margin: 0;
}
.tl16-pullquote {
margin-top: 1rem;
padding-left: 1rem;
border-left: 2px solid var(--tl16-ink);
font-family: Georgia, 'Times New Roman', serif;
font-style: italic;
font-size: 14px;
color: rgba(13,13,13,0.65);
line-height: 1.6;
}
@media (max-width: 600px) {
.tl16-entry,
.tl16-entry:nth-child(even) { grid-template-columns: 1fr; gap: 1.25rem; }
.tl16-entry:nth-child(even) .tl16-text,
.tl16-entry:nth-child(even) .tl16-visual { order: unset; }
}