24 CSS Timeline Layouts

A CSS timeline is a layout that orders information sequentially — usually chronologically — so the reader can scan the story before diving into details. Common implementations include vertical thread layouts, horizontal filmstrips, accordion year-rows, stepping-stone paths, grid-based brutalist patterns, audit-style ledgers, changelog tickers, station-stop roadmaps, and domain-themed treatments like archaeological strata, surgical vitals traces, mission-control logs, or hand-drawn day calendars. The right choice depends on whether the content reads as conversation, archive, retrospective, operational log, product roadmap, release stream, audit record, or slow daily process.

Vertical timelines (Stratigraphy, Vitals, Film Reel, Mission Control, Fermentation Calendar, Thread, Accordion, Nature Trail, Art Deco, Terminal, Vertical Centered, Neon Left Rail, Stacked Progress, Editorial, Brutalist Grid, Editorial Spine, Split Screen, Ledger) suit dense storytelling with multiple paragraphs per entry — the eye naturally scrolls top-to-bottom. Horizontal timelines (Tour Stub, Cinematic Filmstrip, Horizontal Scroll, Ticker Tape, Railroad Stations, Film Strip Portfolio) suit short visual entries where comparing adjacent items matters — tickets, film posters, era cards, version cards, stations, project frames. Avoid horizontal scroll on mobile unless drag-to-scroll or snap-scroll feels intentional.

Use semantic markup wherever possible. Real headings for entry titles, real lists where the items are a list, aria-label on the timeline container, and aria-hidden on decorative dots/icons. The Accordion uses an inline onclick you can replace with a proper button + aria-expanded for production. Terminal Log, Vitals, Mission Control, Fermentation, and Editorial Spine respect prefers-reduced-motion where animation is decorative. Every demo's reading order is correct so a screen reader walks the timeline cleanly even without ARIA tags.

Twenty-one of the twenty-four are pure CSS/SVG. Three carry small JS helpers: Accordion (one 5-line toggle function), Cinematic Filmstrip (10-line drag-scroll IIFE), and Horizontal Scroll (same drag-scroll pattern). The JS lives in each demo's js field so you can copy HTML + CSS alone if you don't need the interaction, or paste all three for the full demo. The field-study demos and the documentation volume (Stratigraphy, Tour Stub, Vitals, Film Reel, Mission Control, Fermentation, Ticker Tape, Editorial Spine, Split Screen, Railroad, Film Strip Portfolio, Ledger) ship with zero JavaScript — animations and interactions are pure CSS, including the EKG trace and the rising fermentation bubbles.

Each demo is a structural template — replace the content but keep the markup hierarchy. The class prefix per demo (tl1- through tl24-) is scoped so you can paste multiple demos into the same project without collision. Most demos use CSS custom properties at the wrapper level for the dominant colours — change those and the whole demo retones. The display fonts come from Google Fonts (Anton, Playfair Display, Fraunces, EB Garamond, Caveat, VT323, Major Mono Display, Special Elite, Cormorant Garamond, IBM Plex Mono, JetBrains Mono, Syne, DM Mono, Instrument Serif, Bebas Neue, Crimson Pro, Space Mono) — keep the @import or swap to your own type stack.