Timeline

A vertical feed of events with color-coded markers and a connecting line. Use for retry history, activity logs, audit trails, or status changes.

Retry history

<ol class="nano-timeline">
  <li class="nano-timeline__item nano-timeline__item--destructive">
    <span class="nano-timeline__marker"><svg>...</svg></span>
    <span class="nano-timeline__line"></span>
    <div class="nano-timeline__body">
      <div class="nano-timeline__header">
        <span class="nano-timeline__title">Payment failed</span>
        <time class="nano-timeline__time">3 days ago</time>
      </div>
      <span class="nano-timeline__description">Card declined — insufficient funds.</span>
    </div>
  </li>

  <li class="nano-timeline__item nano-timeline__item--success">
    <span class="nano-timeline__marker"><svg>...</svg></span>
    <div class="nano-timeline__body">...</div>
  </li>
</ol>

Item states

• Default — neutral/muted marker (generic event)
• .nano-timeline__item--info — primary blue (informational)
• .nano-timeline__item--success — green (successful action)
• .nano-timeline__item--warning — amber (pending, scheduled)
• .nano-timeline__item--destructive — red (failure, error)

Elements

• .nano-timeline__marker — circular icon/number that marks the event
• .nano-timeline__line — the connecting line between items (omit on the last item, or let it collapse automatically)
• .nano-timeline__title — event headline
• .nano-timeline__time — relative/absolute timestamp
• .nano-timeline__description — event description
• .nano-timeline__meta — monospace metadata (IDs, codes, etc.)

Variants

• .nano-timeline--compact — smaller markers and tighter spacing for dense lists