COMPONENTS

Activity timeline

One class on an ordered list presents events and audit history with native timestamps.

Usage

Markup: ol.timeline > li

Behaviour: Server supplies ordered events; no JavaScript.

  • Use ol.timeline with one li per event. Ordinary headings or paragraphs describe the event; time with datetime supplies an unambiguous timestamp.
  • Keep chronological or reverse chronological DOM order explicit. CSS does not reorder, group, fetch or announce events.
  • Spacing, typography, palette and border thickness inherit. Markers are decorative: event meaning must remain visible in text. Logical properties support RTL.

Component API and styling module · Inherited appearance settings

Recent activity

One structural class and ordinary event text.

  1. Workspace refresh shared

    Ready for review.

  2. Report completed

HTMLSelect text to copy
<ol class="timeline">
  <li><p><strong>Workspace refresh shared</strong></p><p>Ready for review.</p><time datetime="2026-10-03T09:40:00+03:00">October 3 · 09:40</time></li>
  <li><p><strong>Report completed</strong></p><time datetime="2026-10-02T16:30:00+03:00">October 2 · 16:30</time></li>
</ol>