Timeline

Vertical timelines using a list with aria-label containing “timeline”.

Basic Timeline

  1. Kickoff

    Project started with the first design draft.

  2. Beta release

    Public beta with theme support and layouts.

  3. 1.2.0

    Alerts, switches, avatars, and refreshed docs.

<ol role="list" aria-label="Project timeline">
  <li>
    <time datetime="2025-01">January 2025</time>
    <strong>Kickoff</strong>
    <p>Project started with the first design draft.</p>
  </li>
  <li aria-current="step">
    <time datetime="2025-05">May 2025</time>
    <strong>Beta release</strong>
    <p>Public beta with theme support and layouts.</p>
  </li>
  <li>
    <time datetime="2025-09">September 2025</time>
    <strong>1.2.0</strong>
    <p>Alerts, switches, avatars, and refreshed docs.</p>
  </li>
</ol>

How It Works

  • Use role="list" with an aria-label that includes timeline
  • Mark the active item with aria-current="step"
  • Optional time children are muted and spaced above the content