Timeline

An <ol class="timeline"> lists events in order. Each <li> is an event: a <time>, a heading and supporting text. A dot marks each event and a line joins it to the next.

The page picks the order, newest or oldest first. Give every <time> a datetime, so "Yesterday" still has a date behind it.

1. 9:12 AM

   Order placed

   Two items, paid by card.

2. 11:40 AM

   Shipped

   Tracking number sent by email.

3. Tomorrow

   Arrives

<ol class="timeline">
  <li>
    <time datetime="2026-10-06T09:12">9:12 AM</time>
    <h3>Order placed</h3>
    <p>Two items, paid by card.</p>
  </li>
  <li>
    <time datetime="2026-10-06T11:40">11:40 AM</time>
    <h3>Shipped</h3>
    <p>Tracking number sent by email.</p>
  </li>
</ol>

Leading icon

For an activity feed that mixes kinds of event, put a leading icon first in the event. It replaces the dot with a tonal circle. Hide the icon from assistive technology, since the heading says what happened.

1. chat Today

   Ada commented

   Looks good to me.

2. commit Yesterday

   Grace pushed 3 commits

<li>
  <span class="material-symbols" aria-hidden="true">chat</span>
  <time datetime="2026-10-06">Today</time>
  <h3>Ada commented</h3>
  <p>Looks good to me.</p>
</li>

Tokens

Override these on the .timeline.