Railroad Stations
Horizontal stations on a dashed track with one active station glowing cyan. Each station has a status header (Archived / Current / Planned / Concept), year, name, and sub-line. Built for product roadmaps, technology evolution, and API version maps.
Railroad Stations the 22nd 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="tl22-wrap">
<div class="tl22-track">
<div class="tl22-station">
<div class="tl22-top">ARCHIVED</div>
<div class="tl22-node"></div>
<div class="tl22-label">
<div class="tl22-year">2019</div>
<div class="tl22-name">REST API v1</div>
<div class="tl22-sub">Deprecated</div>
</div>
</div>
<div class="tl22-station">
<div class="tl22-top">ARCHIVED</div>
<div class="tl22-node"></div>
<div class="tl22-label">
<div class="tl22-year">2021</div>
<div class="tl22-name">GraphQL Gateway</div>
<div class="tl22-sub">Replaced 2024</div>
</div>
</div>
<div class="tl22-station tl22-active">
<div class="tl22-top">CURRENT</div>
<div class="tl22-node"></div>
<div class="tl22-label">
<div class="tl22-year">2024</div>
<div class="tl22-name">Edge Runtime</div>
<div class="tl22-sub">Live · 99.98% uptime</div>
</div>
</div>
<div class="tl22-station">
<div class="tl22-top">PLANNED</div>
<div class="tl22-node"></div>
<div class="tl22-label">
<div class="tl22-year">Q3 2026</div>
<div class="tl22-name">WASM Runtime</div>
<div class="tl22-sub">In development</div>
</div>
</div>
<div class="tl22-station">
<div class="tl22-top">CONCEPT</div>
<div class="tl22-node"></div>
<div class="tl22-label">
<div class="tl22-year">2027+</div>
<div class="tl22-name">Zero-latency Mesh</div>
<div class="tl22-sub">Research phase</div>
</div>
</div>
</div>
</div> .tl22-wrap {
background: #0d0f14;
border-radius: 4px;
padding: 2.5rem;
overflow-x: auto;
font-family: 'IBM Plex Sans', system-ui, sans-serif;
}
.tl22-track {
display: flex;
align-items: flex-start;
gap: 0;
min-width: 700px;
position: relative;
padding-top: 3rem;
}
.tl22-track::before {
content: '';
position: absolute;
top: calc(3rem + 16px);
left: 0;
right: 0;
height: 4px;
background: repeating-linear-gradient(
90deg,
#1e2530 0px, #1e2530 8px,
#2a3340 8px, #2a3340 12px
);
}
.tl22-station {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
}
.tl22-node {
width: 36px;
height: 36px;
border-radius: 50%;
background: #0d0f14;
border: 3px solid #3a4a5c;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
transition: border-color 0.2s, box-shadow 0.2s;
}
.tl22-node::after {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: #3a4a5c;
transition: background 0.2s;
}
.tl22-active .tl22-node {
border-color: #00e5ff;
box-shadow: 0 0 20px rgba(0,229,255,0.3);
}
.tl22-active .tl22-node::after {
background: #00e5ff;
width: 10px;
height: 10px;
}
.tl22-label {
margin-top: 0.8rem;
text-align: center;
}
.tl22-year {
font-family: 'Space Mono', ui-monospace, monospace;
font-size: 0.7rem;
color: #3a4a5c;
letter-spacing: 0.1em;
margin-bottom: 0.2rem;
}
.tl22-active .tl22-year { color: #00e5ff; }
.tl22-name {
font-family: 'Syne', 'Inter Tight', sans-serif;
font-size: 0.75rem;
font-weight: 700;
color: #8899aa;
line-height: 1.3;
max-width: 90px;
}
.tl22-active .tl22-name { color: #ccd6e0; }
.tl22-sub {
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.55rem;
color: #3a4a5c;
margin-top: 0.2rem;
max-width: 90px;
line-height: 1.4;
}
.tl22-active .tl22-sub { color: #5a7a8c; }
.tl22-top {
position: absolute;
top: -3rem;
font-family: 'DM Mono', ui-monospace, monospace;
font-size: 0.55rem;
color: #2a3340;
letter-spacing: 0.1em;
white-space: nowrap;
}
.tl22-active .tl22-top { color: #4a6070; }