About this set
A horizontal timeline where events sit at their true distance along a dated axis instead of being spaced evenly, so a gap of fourteen years looks longer than a gap of two. The demo plots six moments in the history of the web from 1991 to 2024 on a gradient line with a decade scale underneath, alternating the labels above and below the line and joining each one to the axis with a short stem. Use it for histories, research timelines or any story where the spacing between dates matters. Each event has a –x custom property, a percentage along the axis, which positions both its tick and its label; the events themselves are an ordered list with the year in a time element. The line, ticks, stems and scale numbers are decoration and are hidden from screen readers. Below 760 pixels the axis is dropped and the same list becomes a simple vertical stack with an indigo rule beside each entry, which keeps every label readable on a phone. The Bootstrap and Tailwind versions place events through the same –x variable, with left-[var(–x)] doing the work in Tailwind.
What’s included
- Events positioned proportionally with a --x custom property
- Labels alternate above and below the axis with stems
- Decade scale under a gradient line
- Becomes a vertical list below 760px
- Years in time elements, decoration hidden from screen readers
Accessibility
The events are an ordered list in date order with each year in a time element, so a screen reader reads a clean chronology. The axis line, ticks and scale are aria-hidden, and stems are CSS pseudo-elements. Text, including the scale numbers, meets 4.5:1 contrast, and nothing animates.
Customise it
Set each event's --x (and its tick's) to the date's position as a percentage. Colours are --dt-accent, --dt-from, --dt-stem and --dt-muted on .decade-tl (plain CSS and Bootstrap) or --color-dt-* in Tailwind; the 760px media query sets when it stacks.
