Skip to content

Components

Timelines

Use semantic timelines for activity feeds, release history, or incident updates, with vertical, horizontal, and alternating layouts.

Usage

Add .timeline to a native ol with direct li children. Use role="list" to preserve list announcements in Safari/VoiceOver. No JavaScript, item classes, or inner wrappers are needed. Headings and timestamps are optional, and ordinary nested lists retain their own markers.

The line and square markers follow the theme; status and content colors remain author-owned. Opt into .horizontal or .alternating, never both. These layouts apply at viewport widths of 44rem and wider and fall back to the default vertical timeline on smaller screens. See the incident report example.

Vertical

The default class="timeline" keeps events along a vertical line at every viewport width.

  1. Resolved

    All services are operating normally.

  2. Monitoring

    The fix is deployed. We are checking recovery.

  3. Investigating

    We are checking delayed deliveries.

<ol class="timeline" role="list">
  <li>
    <h3>Resolved</h3>
    <p>All services are operating normally.</p>
    <time datetime="2026-10-15T18:56:00Z">18:56 UTC</time>
  </li>
  <li>
    <h3>Monitoring</h3>
    <p>The fix is deployed. We are checking recovery.</p>
    <time datetime="2026-10-15T18:53:00Z">18:53 UTC</time>
  </li>
  <li>
    <h3>Investigating</h3>
    <p>We are checking delayed deliveries.</p>
    <time datetime="2026-10-15T18:31:00Z">18:31 UTC</time>
  </li>
</ol>

Horizontal

Use class="timeline horizontal" for a short sequence of steps.

  1. Build

    Compile the release.

  2. Test

    Check the artifacts.

  3. Deploy

    Ship to production.

<ol class="timeline horizontal" role="list">
  <li><h3>Build</h3><p>Compile the release.</p></li>
  <li><h3>Test</h3><p>Check the artifacts.</p></li>
  <li><h3>Deploy</h3><p>Ship to production.</p></li>
</ol>

Alternating

Use class="timeline alternating" to place events on alternating sides of a central line.

  1. Release tagged

    Version 1.0 is ready.

  2. Rollout started

    The first region is live.

  3. Rollout complete

    All regions are healthy.

<ol class="timeline alternating" role="list">
  <li>
    <h3>Release tagged</h3>
    <p>Version 1.0 is ready.</p>
    <time datetime="2026-10-15T09:00:00Z">09:00 UTC</time>
  </li>
  <li>
    <h3>Rollout started</h3>
    <p>The first region is live.</p>
    <time datetime="2026-10-15T09:15:00Z">09:15 UTC</time>
  </li>
  <li>
    <h3>Rollout complete</h3>
    <p>All regions are healthy.</p>
    <time datetime="2026-10-15T09:30:00Z">09:30 UTC</time>
  </li>
</ol>