Vertical Centered
Classic alternating layout with a glowing red center spine and editorial dot markers. Items zigzag left and right along a vertical line — the most recognizable timeline pattern, refined with bold serif type and a moody dark canvas.
Vertical Centered the 13th 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="tl13-wrap">
<div class="tl13-line" aria-hidden="true"></div>
<div class="tl13-item">
<div class="tl13-content">
<p class="tl13-year">2018</p>
<h3 class="tl13-heading">First Contact</h3>
<p class="tl13-body">A small prototype quietly changed everything. What started as a weekend project became the foundation for something much larger.</p>
<span class="tl13-tag">Origin</span>
</div>
<div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
<div class="tl13-empty"></div>
</div>
<div class="tl13-item">
<div class="tl13-empty"></div>
<div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
<div class="tl13-content">
<p class="tl13-year">2019</p>
<h3 class="tl13-heading">First Funding Round</h3>
<p class="tl13-body">Series A closed at $4.2M. The team grew from 3 to 18 people over the following six months, fueling rapid product development.</p>
<span class="tl13-tag">Growth</span>
</div>
</div>
<div class="tl13-item">
<div class="tl13-content">
<p class="tl13-year">2021</p>
<h3 class="tl13-heading">Global Expansion</h3>
<p class="tl13-body">Operations extended to 12 countries. Localization teams established in EMEA, APAC, and LATAM markets.</p>
<span class="tl13-tag">Scale</span>
</div>
<div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
<div class="tl13-empty"></div>
</div>
<div class="tl13-item">
<div class="tl13-empty"></div>
<div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
<div class="tl13-content">
<p class="tl13-year">2023</p>
<h3 class="tl13-heading">Product V3 Launch</h3>
<p class="tl13-body">A full platform rearchitecture delivered 10× performance improvements and unlocked an entirely new category of enterprise clients.</p>
<span class="tl13-tag">Milestone</span>
</div>
</div>
<div class="tl13-item">
<div class="tl13-content">
<p class="tl13-year">2025</p>
<h3 class="tl13-heading">IPO Filed</h3>
<p class="tl13-body">With $120M ARR and 94% NRR, the company filed S-1 with an initial valuation range between $1.4B and $1.9B.</p>
<span class="tl13-tag">Today</span>
</div>
<div class="tl13-dot-col"><div class="tl13-dot" aria-hidden="true"></div></div>
<div class="tl13-empty"></div>
</div>
</div> .tl13-wrap {
--tl13-bg: #0a0a0a;
--tl13-accent: #c8423a;
background: var(--tl13-bg);
padding: 2.5rem 1.5rem;
max-width: 900px;
margin: 0 auto;
position: relative;
font-family: 'Inter', system-ui, sans-serif;
}
.tl13-line {
position: absolute;
left: 50%;
top: 2.5rem;
bottom: 2.5rem;
width: 1px;
background: linear-gradient(
to bottom,
transparent,
rgba(200,66,58,0.6) 10%,
rgba(200,66,58,0.6) 90%,
transparent
);
transform: translateX(-50%);
}
.tl13-item {
display: grid;
grid-template-columns: 1fr 60px 1fr;
gap: 0;
align-items: start;
margin-bottom: 3rem;
}
.tl13-item:last-child { margin-bottom: 0; }
.tl13-item:nth-child(odd of .tl13-item) .tl13-content { grid-column: 1; text-align: right; }
.tl13-item:nth-child(odd of .tl13-item) .tl13-empty { grid-column: 3; }
.tl13-item:nth-child(even of .tl13-item) .tl13-empty { grid-column: 1; }
.tl13-item:nth-child(even of .tl13-item) .tl13-content { grid-column: 3; text-align: left; }
.tl13-dot-col {
grid-column: 2;
display: flex;
justify-content: center;
padding-top: 0.6rem;
}
.tl13-dot {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--tl13-accent);
box-shadow:
0 0 0 4px rgba(200,66,58,0.2),
0 0 16px rgba(200,66,58,0.5);
}
.tl13-content { padding: 0 1.5rem; }
.tl13-year {
font-family: ui-monospace, monospace;
font-size: 11px;
letter-spacing: 2px;
color: var(--tl13-accent);
text-transform: uppercase;
margin-bottom: 0.4rem;
}
.tl13-heading {
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.2rem;
font-weight: 700;
color: #fff;
margin: 0 0 0.5rem;
line-height: 1.25;
}
.tl13-body {
font-size: 13px;
color: rgba(255,255,255,0.5);
line-height: 1.65;
margin: 0;
}
.tl13-tag {
display: inline-block;
margin-top: 0.7rem;
font-family: ui-monospace, monospace;
font-size: 10.5px;
letter-spacing: 1px;
padding: 0.2rem 0.55rem;
border: 1px solid rgba(200,66,58,0.4);
border-radius: 4px;
color: var(--tl13-accent);
}
@media (max-width: 600px) {
.tl13-line { left: 22px; }
.tl13-item,
.tl13-item:nth-child(odd of .tl13-item),
.tl13-item:nth-child(even of .tl13-item) {
grid-template-columns: 44px 1fr;
}
.tl13-item:nth-child(odd of .tl13-item) .tl13-content,
.tl13-item:nth-child(even of .tl13-item) .tl13-content {
grid-column: 2;
text-align: left;
padding: 0 0 0 0.5rem;
}
.tl13-dot-col { grid-column: 1; justify-content: flex-start; padding-left: 14px; }
.tl13-empty { display: none; }
}