Timeline

Vertical timeline for displaying chronological events.

Basic timeline

An ordered list with a vertical line and marker dots.

Code

<ol class="timeline">
  <li>
    <time class="date">March 2024</time>
    <div class="content">
      <h3>Event title</h3>
      <p>Event description.</p>
    </div>
  </li>
</ol>

  1. Project launched

    Initial release to the public.

  2. Development started

    Repository created and initial architecture defined.

  3. Planning phase

    Requirements gathered and design system scoped.

Semantic markers

Color the dot markers to indicate status: success, warning, or error.

Code

<li data-status="success">...</li>
<li data-status="warning">...</li>
<li data-status="error">...</li>

  1. Deploy to production

    Successfully deployed v1.0.

  2. Code review

    Awaiting reviewer feedback.

  3. API integration

    Waiting on third-party credentials.

Relative event dates

Use relative time for recent events, while keeping the exact date as the semantic and accessible value.

Code

<!-- Optional enhancement; include only on pages that use it -->
<script type="module" src="/dist/relative-time.js"></script>

<li>
  <lw-relative-time lang="en">
    <time class="date" datetime="2026-10-10T15:25:00Z">
      <span data-relative-time-fallback>October 10, 2026 at 3:25 PM UTC</span><span data-relative-time-output hidden></span>
    </time>
  </lw-relative-time>
  <div class="content">
    <h3>Project update</h3>
    <p>A recent event appears as a relative date.</p>
  </div>
</li>

  1. Project update

    A recent event appears as a relative date.

Milestone markers

Group events by year, phase, or stage with a .milestone list item. Uses a larger structural dot and prominent label.

Code

<ol class="timeline">
  <li class="milestone">2024</li>
  <li>
    <time class="date">March</time>
    <div class="content">
      <h3>Event title</h3>
    </div>
  </li>
  <li class="milestone">2023</li>
  <li data-status="success">
    <time class="date">November</time>
    <div class="content">
      <h3>Planning complete</h3>
    </div>
  </li>
</ol>
  1. 2024

  2. Project launched

    Initial release to the public.

  3. Development started

    Repository created and initial architecture defined.

  4. 2023

  5. Planning complete

    Requirements gathered and design system scoped.

  6. Concept exploration

    Initial research and proof of concept.