An event log like the roll of a chart recorder. The rail is engraved down the plate and each event is a tick stamped across it, with its time in tabular figures and its words beside it. A lamp on the rail is the only colour, and a marker for the present separates what has happened from what is still to come.
Seats open in 11 days. Want one email that morning?
Anatomy
One grid per event: the time, a rail cell and the words. The rail below the pen is the same groove dotted in, done with one sibling selector, so there is no “future” class to forget. The pen is the kit’s contrast cap on the time side, a diamond on the rail and a rule across. Appending stamps the tick in with a short overshoot; there is no script needed to draw any of it.
Variants
Plain: time, tick, words
With lamps
The pen
Still to come
Compact
States
Event
Lamps
The pen
To come
Props and options
Name
Kind
Description
data-new
attribute
timelineEventHTML(event) · timelineClock(date)
function
The same event as a string of markup, for a server; and “14:02” from a Date.
Usage notes
Press Add an event: it is stamped in above the pen. The dotted rail below the pen is what is still to come.
Accessibility
It is an ordered list, so a screen reader says how many events there are and which one it is on.
The dotted rail after the pen is not the only sign that events are still to come.
With reduced motion a new event simply appears; nothing is lost.
Rows in a rack: a mark, a title, a second line and a fact or a key at the end. Chosen rows sink into a recess with their check key latched; in a running order, a row lifts out of the rack on its skirt and slides past the others, from the keyboard or by its grip.
The only colour in the kit: a lamp that is on. Green is on, amber is waiting, red is recording or failing, blue is linked, white is standing by. Always next to words.
A strip-chart recorder: gridded paper advancing under a pen that rides a rail, drawing the live value as the paper moves and printing the time in the margin. For p95 latency, tokens per second, grid frequency, a cold room’s log.