# Timeline

> Events in order, each with a time, a title and details, joined by a line.

## Anatomy

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.  Today
    
    ### Ada commented
    
    Looks good to me.
    
2.  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`.

| Token | Default |
| --- | --- |
| `--md-comp-timeline-marker-color` | `--md-sys-color-primary` |
| `--md-comp-timeline-connector-color` | `--md-sys-color-outline-variant` |
| `--md-comp-timeline-gap` | 24px |