Components

Timeline

A vertical event list: a 1px rule runs down the left as a rail, each item hangs a small square dot on it, and stacks a faint timestamp, a title, and supporting body text. Status families recolor the dot — no radius, no shadow.

Basic

Items align to the right of the rail; the last item drops its bottom spacing.

Activity feed
  1. 09:42
    Matrix published
    All 1,204 rates synced to production.
  2. 09:30
    Review requested
    Sent to the Director for sign-off.
  3. 08:15
    Missing currency
    12 rows have no currency set.
  4. Yesterday
    Draft created
    Imported from the Q3 template.
<ol class="ds-timeline">
  <li class="ds-timeline__item">
    <span class="ds-timeline__dot is-success"></span>
    <div class="ds-timeline__time">09:42</div>
    <div class="ds-timeline__title">Matrix published</div>
    <div class="ds-timeline__body">All 1,204 rates synced to production.</div>
  </li>
  <li class="ds-timeline__item">
    <span class="ds-timeline__dot is-info"></span>
    <div class="ds-timeline__time">09:30</div>
    <div class="ds-timeline__title">Review requested</div>
    <div class="ds-timeline__body">Sent to the Director for sign-off.</div>
  </li>
  <li class="ds-timeline__item">
    <span class="ds-timeline__dot"></span>
    <div class="ds-timeline__time">Yesterday</div>
    <div class="ds-timeline__title">Draft created</div>
    <div class="ds-timeline__body">Imported from the Q3 template.</div>
  </li>
</ol>

Status dots

Five families recolor the dot via is-*; the default (no modifier) uses the neutral rule color.

Default · success · warning · danger · info · neutral
  1. Default
  2. Success
  3. Warning
  4. Danger
  5. Info
  6. Neutral
<li class="ds-timeline__item">
  <span class="ds-timeline__dot is-success"></span>
  <div class="ds-timeline__title">Success</div>
</li>
<li class="ds-timeline__item">
  <span class="ds-timeline__dot is-danger"></span>
  <div class="ds-timeline__title">Danger</div>
</li>

React

The <Timeline> component renders the same markup from an items array; status maps to the dot's is-* class.

<Timeline> 
import { Timeline } from "@diametral/design-system/react";

<Timeline
  items={[
    { time: "09:42", title: "Matrix published", body: "All 1,204 rates synced.", status: "success" },
    { time: "09:30", title: "Review requested", body: "Sent to the Director.", status: "info" },
    { time: "08:15", title: "Missing currency", body: "12 rows have no currency set.", status: "warning" },
    { time: "Yesterday", title: "Draft created", body: "Imported from the Q3 template." },
  ]}
/>