<ol style="list-style:none;margin:0;padding:0;max-width:28rem">
  <li style="position:relative;padding:0 0 var(--space-5) var(--space-6);border-left:1px solid var(--border);margin-left:var(--space-2)">
    <span aria-hidden="true" style="position:absolute;left:calc(-1 * var(--space-2) + 3px);top:2px;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--success)"></span>
    <div style="font-weight:var(--weight-medium)">Settlement batch completed</div>
    <div class="muted" style="font-size:var(--text-sm)">2026-08-27, 06:00, 1,281 transactions</div>
  </li>
  <li style="position:relative;padding:0 0 var(--space-5) var(--space-6);border-left:1px solid var(--border);margin-left:var(--space-2)">
    <span aria-hidden="true" style="position:absolute;left:calc(-1 * var(--space-2) + 3px);top:2px;width:10px;height:10px;border-radius:var(--radius-pill);background:var(--danger)"></span>
    <div style="font-weight:var(--weight-medium)">Risk hold placed on TX-88409</div>
    <div class="muted" style="font-size:var(--text-sm)">2026-08-27, 10:19, awaiting review</div>
  </li>
  <li style="position:relative;padding:0 0 0 var(--space-6);margin-left:var(--space-2)">
    <span aria-hidden="true" style="position:absolute;left:calc(-1 * var(--space-2) + 3px);top:2px;width:10px;height:10px;border-radius:var(--radius-pill);border:2px solid var(--border-strong);background:var(--surface)"></span>
    <div style="font-weight:var(--weight-medium)">Next settlement window</div>
    <div class="muted" style="font-size:var(--text-sm)">2026-08-28, 06:00, scheduled</div>
  </li>
</ol>

Usage

An ordered list with a token border as the spine; dots are judgement-coloured only where a judgement exists (completed green, risk red), otherwise a neutral outline.
Newest first for operational feeds; oldest first for case histories that read as a story.
Every entry carries an absolute timestamp; relative times ("2 hours ago") drift and are banned in audit views.
Keep entries to two lines: what happened, then when and the key figure.

‹ Collapse & Disclosure Value chain ›