Skip to content
Admin design systemv0.20.1

Timeline

Examples

Section titled “Examples”

Activity feed

Section titled “Activity feed”
  1. Order shipped
    14:32 · today
    Handed to DHL, tracking 1Z999AA1.
  2. Payment captured
    14:30 · today
  3. Order placed
    14:28 · today
<ol class="timeline">
  <li class="timeline-item timeline-item-success">
    <span class="timeline-indicator"><span class="timeline-dot"></span></span>
    <div class="timeline-content">
      <div class="timeline-title">Order shipped</div>
      <div class="timeline-time">14:32 · today</div>
      <div class="timeline-description">
        Handed to DHL, tracking 1Z999AA1.
      </div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator"><span class="timeline-dot"></span></span>
    <div class="timeline-content">
      <div class="timeline-title">Payment captured</div>
      <div class="timeline-time">14:30 · today</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator"><span class="timeline-dot"></span></span>
    <div class="timeline-content">
      <div class="timeline-title">Order placed</div>
      <div class="timeline-time">14:28 · today</div>
    </div>
  </li>
</ol>

With icons

Section titled “With icons”
  1. Account created
    Mon 09:14
  2. Uploaded 12 files
    Mon 09:20
  3. Verified
    Mon 09:45
<ol class="timeline">
  <li class="timeline-item">
    <span class="timeline-indicator"
      ><i class="ti ti-user-plus" aria-hidden="true"></i
    ></span>
    <div class="timeline-content">
      <div class="timeline-title">Account created</div>
      <div class="timeline-time">Mon 09:14</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator"
      ><i class="ti ti-upload" aria-hidden="true"></i
    ></span>
    <div class="timeline-content">
      <div class="timeline-title">Uploaded 12 files</div>
      <div class="timeline-time">Mon 09:20</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator"
      ><i class="ti ti-circle-check" aria-hidden="true"></i
    ></span>
    <div class="timeline-content">
      <div class="timeline-title">Verified</div>
      <div class="timeline-time">Mon 09:45</div>
    </div>
  </li>
</ol>

Numbered steps

Section titled “Numbered steps”
  1. 1
    Details
    Name and contact.
  2. 2
    Payment
    Card or invoice.
  3. 3
    Review
    Confirm and submit.
<ol class="timeline timeline-numbered">
  <li class="timeline-item timeline-item-success">
    <span class="timeline-indicator"
      ><span class="timeline-marker">1</span></span
    >
    <div class="timeline-content">
      <div class="timeline-title">Details</div>
      <div class="timeline-description">Name and contact.</div>
    </div>
  </li>
  <li class="timeline-item timeline-item-current">
    <span class="timeline-indicator"
      ><span class="timeline-marker">2</span></span
    >
    <div class="timeline-content">
      <div class="timeline-title">Payment</div>
      <div class="timeline-description">Card or invoice.</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator"
      ><span class="timeline-marker">3</span></span
    >
    <div class="timeline-content">
      <div class="timeline-title">Review</div>
      <div class="timeline-description">Confirm and submit.</div>
    </div>
  </li>
</ol>

Horizontal

Section titled “Horizontal”
  1. 1
    Cart
  2. 2
    Shipping
  3. 3
    Payment
  4. 4
    Confirm
<ol class="timeline timeline-horizontal timeline-numbered">
  <li class="timeline-item timeline-item-success">
    <span class="timeline-indicator"
      ><span class="timeline-marker">1</span></span
    >
    <div class="timeline-content">
      <div class="timeline-title">Cart</div>
    </div>
  </li>
  <li class="timeline-item timeline-item-current">
    <span class="timeline-indicator"
      ><span class="timeline-marker">2</span></span
    >
    <div class="timeline-content">
      <div class="timeline-title">Shipping</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator"
      ><span class="timeline-marker">3</span></span
    >
    <div class="timeline-content">
      <div class="timeline-title">Payment</div>
    </div>
  </li>
  <li class="timeline-item">
    <span class="timeline-indicator"
      ><span class="timeline-marker">4</span></span
    >
    <div class="timeline-content">
      <div class="timeline-title">Confirm</div>
    </div>
  </li>
</ol>

Reference

Section titled “Reference”

React

Section titled “React”
Part Renders Class
Timeline <ol> timeline
Timeline.Item <li> timeline-item
Part Prop Type Default
Timeline numbered boolean false
Timeline horizontal boolean false
Timeline.Item status "default" | "info" | "success" | "warning" | "danger" | "current" "default"
Timeline.Item icon IconProp —
Timeline.Item marker ReactNode —
Timeline.Item title ReactNode —
Timeline.Item time ReactNode —
Timeline.Item description ReactNode —
Timeline.Item classNames slots —

The indicator is a dot by default; icon replaces it with a glyph, and marker — which wins over icon — replaces it with the numbered variant’s filled marker. status accents the dot or fills the marker; current is meaningful only for a marker. classNames reaches the indicator, dot, marker, content, title, time and description slots.

Nothing here advances a step tracker: compute which item is current yourself. Plus native <ol> / <li> attributes.

Vanilla

Section titled “Vanilla”
Class Effect
timeline Marker-less <ol>
timeline-item Two-column grid: 1.5rem indicator gutter, 0.75rem gap, 1rem of space beneath
timeline-indicator Centres the dot, icon or marker in the gutter, above the connector
timeline-dot 0.625rem dot in border-strong, ringed 3px in the surface
timeline-content Text column, 0.125rem gap, shrinkable so long values wrap
timeline-title text-sm medium
timeline-time text-xs muted, tabular figures
timeline-description text-sm muted
timeline-item-info timeline-item-success timeline-item-warning timeline-item-danger Status accent on the dot
timeline-item-current Fills a numbered marker with the primary ink, as -success does
timeline-numbered Widens the gutter to 1.75rem for a marker
timeline-marker 1.75rem circle, text-xs semibold tabular figures, ringed in the surface
timeline-horizontal Items become equal-width columns, indicator above centred content

The connector is drawn as a ::before on each item except the last, so it stops at the end of the rail without any extra markup. An icon indicator gets a surface-coloured background to mask the line running behind it.

timeline-horizontal composes with timeline-numbered for a step tracker, and re-runs the connector along the indicator row. Equal-width columns are what make it land on each indicator’s centre — so items of very different label lengths still line up.