Skip to the page
Tactile UI

Kit parts

Timeline

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.

On this page
  1. Anatomy
  2. Variants
  3. States
  4. Props and options
  5. Usage notes
  6. Accessibility
  7. Related parts

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

NameKindDescription
data-newattribute
timelineEventHTML(event) · timelineClock(date)functionThe 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.

List

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.

Lamp

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.

Chart recorder

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.