Timeline

A timeline is a vertical, chronological list of events — each a dot on a continuous connector rail, with a title, a machine-readable time, and an optional description. CSS-only, built on a native ordered list. See Accessibility for the list semantics and the decorative-dot guidance.

Basic

Each event is an <li class="re-timeline__item"> with a decorative __marker, a __title, a <time class="re-timeline__time" datetime="…">, and an optional __description. The rail joins every dot except the last.

Project created
Jan 4, 2026
Repository initialized and the team invited.
First release
Feb 18, 2026
Version 1.0.0 published to the registry.
Docs site launched
Mar 9, 2026
Guides, component pages, and live demos went live.

<ol class="re-timeline">
  <li class="re-timeline__item">
    <span class="re-timeline__marker" aria-hidden="true"></span>
    <div class="re-timeline__content">
      <p class="re-timeline__title">Project created</p>
      <time class="re-timeline__time" datetime="2026-01-04">Jan 4, 2026</time>
      <p class="re-timeline__description">Repository initialized and the team invited.</p>
    </div>
  </li>
  <li class="re-timeline__item">
    <span class="re-timeline__marker" aria-hidden="true"></span>
    <div class="re-timeline__content">
      <p class="re-timeline__title">First release</p>
      <time class="re-timeline__time" datetime="2026-02-18">Feb 18, 2026</time>
      <p class="re-timeline__description">Version 1.0.0 published to the registry.</p>
    </div>
  </li>
  <li class="re-timeline__item">
    <span class="re-timeline__marker" aria-hidden="true"></span>
    <div class="re-timeline__content">
      <p class="re-timeline__title">Docs site launched</p>
      <time class="re-timeline__time" datetime="2026-03-09">Mar 9, 2026</time>
      <p class="re-timeline__description">
        Guides, component pages, and live demos went live.
      </p>
    </div>
  </li>
</ol>

With a current event

Mark the latest or active event with data-current for an accent dot, and pair it with aria-current so assistive tech hears it — the colour is reinforcement, not the only cue.

Order placed
Jun 22
Shipped
Jun 23
Out for delivery
Jun 24
Arriving today by 8pm.

<ol class="re-timeline">
  <li class="re-timeline__item">
    <span class="re-timeline__marker" aria-hidden="true"></span>
    <div class="re-timeline__content">
      <p class="re-timeline__title">Order placed</p>
      <time class="re-timeline__time" datetime="2026-06-22">Jun 22</time>
    </div>
  </li>
  <li class="re-timeline__item">
    <span class="re-timeline__marker" aria-hidden="true"></span>
    <div class="re-timeline__content">
      <p class="re-timeline__title">Shipped</p>
      <time class="re-timeline__time" datetime="2026-06-23">Jun 23</time>
    </div>
  </li>
  <li class="re-timeline__item" data-current aria-current="step">
    <span class="re-timeline__marker" aria-hidden="true"></span>
    <div class="re-timeline__content">
      <p class="re-timeline__title">Out for delivery</p>
      <time class="re-timeline__time" datetime="2026-06-24">Jun 24</time>
      <p class="re-timeline__description">Arriving today by 8pm.</p>
    </div>
  </li>
</ol>

Compact

data-size="sm" tightens the rhythm and meta type for dense logs.

Signed up
May 1
Upgraded to Pro
May 14

<ol class="re-timeline" data-size="sm">
  <li class="re-timeline__item">
    <span class="re-timeline__marker" aria-hidden="true"></span>
    <div class="re-timeline__content">
      <p class="re-timeline__title">Signed up</p>
      <time class="re-timeline__time" datetime="2026-05-01">May 1</time>
    </div>
  </li>
  <li class="re-timeline__item">
    <span class="re-timeline__marker" aria-hidden="true"></span>
    <div class="re-timeline__content">
      <p class="re-timeline__title">Upgraded to Pro</p>
      <time class="re-timeline__time" datetime="2026-05-14">May 14</time>
    </div>
  </li>
</ol>

Accessibility

The timeline is CSS-only — a passive container with no interactive behaviour of its own.

Ordered-list semantics are kept — the timeline is a real <ol>; the list is stripped visually in CSS (list-style/margin/padding: 0) rather than with role="list", which would downgrade the <ol> and drop the chronological sequence. Author events in chronological order.
The dot and rail are decorative — .re-timeline__marker is aria-hidden="true"; the meaning lives in the __title and the <time datetime="…">. Use a real <time> with a machine-readable datetime so the date is unambiguous to assistive tech and crawlers.
Current event — data-current only restyles the dot. Add aria-current (e.g. ="step") to the <li> so the position is programmatically exposed; the accent colour reinforces it visually. Because the cue is carried by aria-current (and a system-colour dot under forced colors), nothing is lost when colour flattens — no forced-colors override is needed.

See the accessibility guide for the project-wide stance.