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.

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.