GitHub

Components / Display & Media / Timeline

Timeline beta

Events on a rail, newest last. The current step carries the core.

Preview
  1. Build passed

    128 files compiled with no warnings.

  2. Deploying — current step

    Uploading to production.

  3. Cache purge

    Queued.

<ol class="k-timeline" style="max-width:400px">
  <li><time>09:41</time><b>Build passed</b><p>128 files compiled with no warnings.</p></li>
  <li data-now><time>09:43</time><b>Deploying — current step</b><p>Uploading to production.</p></li>
  <li><time>—</time><b>Cache purge</b><p>Queued.</p></li>
</ol>
/* KATA Timeline */
.k-timeline{list-style:none;font-family:var(--k-font)}
.k-timeline li{position:relative;padding:0 0 18px 22px}
.k-timeline li::before{content:"";position:absolute;left:0;top:3px;width:9px;height:9px;border-radius:50%;background:var(--k-bg);border:2px solid var(--k-border-strong)}
.k-timeline li::after{content:"";position:absolute;left:4px;top:16px;bottom:-2px;width:1px;background:var(--k-line)}
.k-timeline li:last-child{padding-bottom:0}
.k-timeline li:last-child::after{display:none}
.k-timeline li[data-now]::before{background:var(--k-core);border-color:var(--k-core)}
.k-timeline time{display:block;font-family:var(--k-mono);font-size:11px;color:var(--k-ink-3);margin-bottom:1px}
.k-timeline b{display:block;font-size:13.5px;font-weight:550;color:var(--k-ink)}
.k-timeline p{font-size:13px;color:var(--k-ink-2);line-height:1.65}

Usage

For histories, delivery steps and changelogs. Times in mono, one line per event; if an event needs a paragraph, it belongs somewhere else.

Accessibility

An ordered list in chronological order. The current step is marked with data-now and announced in its text, not by color alone.

Previous
Table