# Flux 2.0 — Timeline

Events in time order on a hairline rail. A booking history, a day’s schedule, a workflow’s progress.

Reference: https://flux.kaptio.com/components/timeline/
Requires: https://flux.kaptio.com/tokens/v2/flux.css and flux-components.css

## Use it when
Shows things that happen in sequence — what has happened to a booking, what runs when on a departure day — so the order and the gaps between them can be read at a glance. Each event has a time, a title and optionally one line of detail and a status. The marker says whether the event is done, current or still ahead.

## Do not use it when
Not for steps a person fills in one after another; that is a form split into sections. Not for comparing many records on the same attributes; that is a Table. Not for a slide; decks have their own timeline in flux-deck.css.

## Markup

### Booking history

<ol class="flux-timeline">
  <li class="flux-timeline__item" data-state="done">
    <time class="flux-timeline__time" datetime="2026-09-02T10:14">2 Sep 2026, 10:14</time>
    <span class="flux-timeline__marker" aria-hidden="true"></span>
    <div class="flux-timeline__content">
      <p class="flux-timeline__title">Booking created</p>
      <p class="flux-timeline__body">Sigrún Halldórsdóttir · Direct</p>
    </div>
  </li>
  <li class="flux-timeline__item" data-state="done">
    <time class="flux-timeline__time" datetime="2026-09-02T10:21">2 Sep 2026, 10:21</time>
    <span class="flux-timeline__marker" aria-hidden="true"></span>
    <div class="flux-timeline__content">
      <p class="flux-timeline__title">Deposit received</p>
      <p class="flux-timeline__body">ISK 120,000 · Card</p>
    </div>
  </li>
  <li class="flux-timeline__item" aria-current="step">
    <time class="flux-timeline__time" datetime="2026-09-04T16:02">4 Sep 2026, 16:02</time>
    <span class="flux-timeline__marker" aria-hidden="true"></span>
    <div class="flux-timeline__content">
      <p class="flux-timeline__title">Glacier walk requested</p>
      <p class="flux-timeline__body">Mountain Guides</p>
      <span class="flux-timeline__aside"><span class="flux-badge flux-badge--awaiting">Awaiting supplier</span></span>
    </div>
  </li>
  <li class="flux-timeline__item">
    <time class="flux-timeline__time" datetime="2026-09-08">8 Sep 2026</time>
    <span class="flux-timeline__marker" aria-hidden="true"></span>
    <div class="flux-timeline__content">
      <p class="flux-timeline__title">Balance due</p>
      <p class="flux-timeline__body">ISK 366,000</p>
    </div>
  </li>
</ol>

### Schedule

<ol class="flux-timeline flux-timeline--schedule" aria-label="South Coast day tour">
  <li class="flux-timeline__item" data-state="done">
    <time class="flux-timeline__time" datetime="2026-09-13T08:30">08:30</time>
    <span class="flux-timeline__marker" aria-hidden="true"></span>
    <div class="flux-timeline__content">
      <p class="flux-timeline__title">Pick-up at Hotel Borg</p>
      <p class="flux-timeline__body">Coach 18 · Guide Anna Jónsdóttir</p>
    </div>
  </li>
  <li class="flux-timeline__item" aria-current="step">
    <time class="flux-timeline__time" datetime="2026-09-13T10:15">10:15</time>
    <span class="flux-timeline__marker" aria-hidden="true"></span>
    <div class="flux-timeline__content">
      <p class="flux-timeline__title">Seljalandsfoss</p>
      <p class="flux-timeline__body">45 minutes</p>
    </div>
  </li>
  <li class="flux-timeline__item">
    <time class="flux-timeline__time" datetime="2026-09-13T13:00">13:00</time>
    <span class="flux-timeline__marker" aria-hidden="true"></span>
    <div class="flux-timeline__content">
      <p class="flux-timeline__title">Glacier walk</p>
      <p class="flux-timeline__body">Sólheimajökull · Mountain Guides</p>
      <span class="flux-timeline__aside"><span class="flux-badge flux-badge--awaiting">Awaiting supplier</span></span>
    </div>
  </li>
  <li class="flux-timeline__item">
    <time class="flux-timeline__time" datetime="2026-09-13T17:30">17:30</time>
    <span class="flux-timeline__marker" aria-hidden="true"></span>
    <div class="flux-timeline__content">
      <p class="flux-timeline__title">Check-in at Hotel Kría</p>
      <p class="flux-timeline__body">Vík</p>
    </div>
  </li>
</ol>

## API
- flux-timeline (class): The ol. Time sits above each title.
- flux-timeline--schedule (class): Puts the time in a column before the rail, --flux-timeline-time-width wide.
- flux-timeline__item (class): One li, holding the time, the marker and the content, in that order.
- data-state="done" (attribute): On the item: the event has happened. Fills the marker.
- aria-current="step" (attribute): On the item that is happening now or needs attention next. At most one per timeline. Use "time" or "date" when the list is a schedule rather than a process.
- flux-timeline__time (class): A time element with a datetime attribute.
- flux-timeline__marker (class): An empty span with aria-hidden="true".
- flux-timeline__content (class): Wraps the title, body and aside.
- flux-timeline__title (class): A p naming the event. Use a heading only when events are sections of the page.
- flux-timeline__body (class): Optional p with one line of detail.
- flux-timeline__aside (class): Optional span holding one badge or one action.

## Accessibility
- Use an ol, so the count and order are announced.
- Give every time element a datetime attribute.
- Mark the current event with aria-current; the marker itself is hidden, so the state must not live only in its fill.
- Name a timeline with aria-label or aria-labelledby when the page has more than one.

## Keyboard
- —: Not interactive. Links and buttons inside an event take focus in reading order.

## Tokens
- --flux-timeline-rail | -rail-width
- --flux-timeline-marker-size | -marker-current-size | -marker-radius
- --flux-timeline-marker-done | -marker-upcoming | -marker-bg
- --flux-timeline-item-gap | -column-gap | -time-width | -title-min-width
- --flux-timeline-font-size
- --flux-timeline-time-color | -time-current | -title-color | -body-color

## Do
- Order events by time. Oldest first for a history of a process, earliest first for a schedule.
- Use the status badge only where the event has a status that someone acts on.
- Keep each event to a title and one line. Put the full record behind a link.

## Do not
- Do not number the events. The time already orders them.
- Do not colour markers by status. The badge carries status; the marker carries done, current and upcoming.
- Do not put each event in its own card. The rail is the grouping.
- Do not use the timeline as a stepper for a form.