Skip to content
WovenUI

Timeline

wu-timeline styles an <ol> of events. Each item has a marker centered on its first line and a rail to the next item.

Class or attribute Effect
wu-timeline Root. No markers, no padding
wu-timeline-item Part. One event with its marker and rail
wu-timeline-title Part. Event title
wu-timeline-time Part. Muted time line, tabular figures
wu-timeline-text Part. Muted description
brand, success, danger, warning, info on an item Role marker color. Success is a check, warning a triangle, danger an octagon
aria-current="step" on an item Progress mode: earlier items filled, current ringed, later hollow
animated The rail draws down segment by segment, opt-in

Events

Section titled “Events”

  1. Order placed

  2. Payment received

    Card ending in 4242.

  3. Shipped

<ol class="wu-timeline">
  <li class="wu-timeline-item">
    <p class="wu-timeline-title">Order placed</p>
    <time class="wu-timeline-time" datetime="2026-03-02T09:14">Mar 2, 09:14</time>
  </li>
  <li class="wu-timeline-item">
    <p class="wu-timeline-title">Payment received</p>
    <time class="wu-timeline-time" datetime="2026-03-02T09:15">Mar 2, 09:15</time>
    <p class="wu-timeline-text">Card ending in 4242.</p>
  </li>
  <li class="wu-timeline-item">
    <p class="wu-timeline-title">Shipped</p>
    <time class="wu-timeline-time" datetime="2026-03-03T16:40">Mar 3, 16:40</time>
  </li>
</ol>

Roles

Section titled “Roles”

  1. Deploy started

  2. Tests running

  3. Slow test detected

  4. Health check failed

  5. Rolled back

<ol class="wu-timeline">
  <li class="wu-timeline-item brand"><p class="wu-timeline-title">Deploy started</p></li>
  <li class="wu-timeline-item info"><p class="wu-timeline-title">Tests running</p></li>
  <li class="wu-timeline-item warning"><p class="wu-timeline-title">Slow test detected</p></li>
  <li class="wu-timeline-item danger"><p class="wu-timeline-title">Health check failed</p></li>
  <li class="wu-timeline-item success"><p class="wu-timeline-title">Rolled back</p></li>
</ol>

Progress

Section titled “Progress”

aria-current="step" on one item turns the timeline into a progress rail. Say “completed” in the item text too, so the state is not only visual.

  1. Account created (completed)

  2. Email confirmed (completed)

  3. Team invited

  4. First project

<ol class="wu-timeline">
  <li class="wu-timeline-item"><p class="wu-timeline-title">Account created <span class="sr-only">(completed)</span></p></li>
  <li class="wu-timeline-item"><p class="wu-timeline-title">Email confirmed <span class="sr-only">(completed)</span></p></li>
  <li class="wu-timeline-item" aria-current="step"><p class="wu-timeline-title">Team invited</p></li>
  <li class="wu-timeline-item"><p class="wu-timeline-title">First project</p></li>
</ol>

Animation

Section titled “Animation”

animated (or wu-animated on an ancestor) draws each rail segment down when the timeline appears, staggered. Reduced motion turns it off.

  1. Draft

  2. Review

  3. Published

<ol class="wu-timeline animated">
  <li class="wu-timeline-item"><p class="wu-timeline-title">Draft</p></li>
  <li class="wu-timeline-item"><p class="wu-timeline-title">Review</p></li>
  <li class="wu-timeline-item"><p class="wu-timeline-title">Published</p></li>
</ol>

Right to left

Section titled “Right to left”

The rail and markers move to the right edge.

  1. تم تقديم الطلب

  2. تم الشحن

<ol class="wu-timeline">
  <li class="wu-timeline-item success">
    <p class="wu-timeline-title">تم تقديم الطلب</p>
    <time class="wu-timeline-time" datetime="2026-03-02T09:14">2 مارس، 09:14</time>
  </li>
  <li class="wu-timeline-item">
    <p class="wu-timeline-title">تم الشحن</p>
    <time class="wu-timeline-time" datetime="2026-03-03T16:40">3 مارس، 16:40</time>
  </li>
</ol>

Load only the timeline

Section titled “Load only the timeline”
@use "@wovenui/components/timeline";

The timeline needs no other component.