Timeline

How to use it

Use to show the history of one thing in time order, such as a shipment, a support case or a document's revisions. Replace the events and both forms of each date; keep the newest at the bottom (or reverse the whole list consistently) and move the Latest badge. For steps a user must still complete, use a stepper or progress pattern; for many unrelated events, a sortable table is easier to scan.

Accessibility

An ordered list (<ol>) under a heading, so the events are announced as a list, in the order they happened; every timestamp is a <time> element with a machine-readable datetime attribute. The rail and dots are empty aria-hidden spans, so they add nothing to the reading order, and the current step is marked with the visible word "Latest" rather than colour. Titles #0f172a, times and details #475569, and the badge #1e40af on #eff6ff are 17.9:1, 7.6:1 and 8.0:1.

Source (copy-ready)

Copy code

<section class="dcl-timeline" aria-labelledby="dcl-timeline-title">
  <h3 class="dcl-timeline__title" id="dcl-timeline-title">Shipment history</h3>
  <ol class="dcl-timeline__list" role="list">
    <li class="dcl-timeline__event">
      <span class="dcl-timeline__dot" aria-hidden="true"></span>
      <p class="dcl-timeline__name">Order placed</p>
      <p class="dcl-timeline__meta"><time datetime="2026-11-02T09:14">2 Nov, 09:14</time></p>
    </li>
    <li class="dcl-timeline__event">
      <span class="dcl-timeline__dot" aria-hidden="true"></span>
      <p class="dcl-timeline__name">Packed and handed to courier</p>
      <p class="dcl-timeline__meta"><time datetime="2026-11-03T16:40">3 Nov, 16:40</time> &middot; Bristol depot</p>
    </li>
    <li class="dcl-timeline__event dcl-timeline__event--latest">
      <span class="dcl-timeline__dot" aria-hidden="true"></span>
      <p class="dcl-timeline__name">Out for delivery <span class="dcl-timeline__badge">Latest</span></p>
      <p class="dcl-timeline__meta"><time datetime="2026-11-05T07:55">5 Nov, 07:55</time> &middot; Expected before 6 pm</p>
    </li>
  </ol>
</section>
<style>
.dcl-timeline { max-width: 32rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-timeline__title { margin: 0 0 0.75rem; font-size: 1.125rem; color: #0f172a; background-color: #ffffff; }
.dcl-timeline__list { margin: 0; padding: 0; list-style: none; }
.dcl-timeline__event { position: relative; padding: 0 0 1.25rem 1.75rem; border-left: 2px solid #cbd5e1; margin-left: 0.4375rem; }
.dcl-timeline__event--latest { border-left-color: #ffffff; padding-bottom: 0; }
.dcl-timeline__dot { position: absolute; left: -0.5625rem; top: 0.25rem; width: 0.75rem; height: 0.75rem; border: 2px solid #ffffff; border-radius: 50%; background-color: #64748b; }
.dcl-timeline__event--latest .dcl-timeline__dot { background-color: #1d4ed8; }
.dcl-timeline__name { margin: 0; font-weight: 600; overflow-wrap: anywhere; color: #0f172a; background-color: #ffffff; }
.dcl-timeline__meta { margin: 0.125rem 0 0; font-size: 0.875rem; color: #475569; background-color: #ffffff; }
.dcl-timeline__badge { display: inline-block; margin-left: 0.25rem; padding: 0 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; color: #1e40af; background-color: #eff6ff; }
</style>