kit

Timeline

Events in order with a marker, a time and a description, for activity feeds, history and changelogs, toned by what happened.

Tier 1 · CSS only Ordered list preview

Example

  1. Event title

    Supporting text for the event.

  2. A warning

    Something that needed attention.

  3. Person A made a change

  4. Created

Show the markup 
<ol class="kit-timeline demo-fill">
  <li data-tone="good"><p class="kit-timeline-title">Event title</p><time class="kit-timeline-time" datetime="2026-01-03T10:00">3 Jan, 10:00</time><p>Supporting text for the event.</p></li>
  <li data-tone="warn"><p class="kit-timeline-title">A warning</p><time class="kit-timeline-time" datetime="2026-01-02T16:20">2 Jan, 16:20</time><p>Something that needed attention.</p></li>
  <li><span class="kit-avatar" data-size="sm" data-tone="2" aria-hidden="true">AB</span><p class="kit-timeline-title">Person A made a change</p><time class="kit-timeline-time" datetime="2026-01-02T09:05">2 Jan, 09:05</time></li>
  <li data-tone="accent"><p class="kit-timeline-title">Created</p><time class="kit-timeline-time" datetime="2026-01-01T12:00">1 Jan, 12:00</time></li>
</ol>

Usage

<ol class="kit-timeline">
  <li data-tone="good">
    <p class="kit-timeline-title">Deployed</p>
    <time class="kit-timeline-time" datetime="2026-11-03T10:00">10:00</time>
    <p>Supporting text.</p>
  </li>
</ol>
Attribute Values Default
data-tone (on each event) good, warn, bad, info, accent neutral

Newest first for feeds, oldest first for histories; say which in a heading. A kit-avatar as the first child replaces the dot, for who did it.

Accessibility

  • An ordered list, so screen readers count the events. Use <time datetime> for each time.
  • The marker's colour is decoration; what happened is in the title.