Information blocks

Timeline

What HAPPENED to a thing, in order — the other half of a detail screen, where an information block answers what it IS. A payment's authorizations, captures and refunds; a reconciliation run's steps; an audit trail. Anything with a history is read here.

Updated Aug 27, 2026 by Juan Pablo Turina

Anatomy

A row is a node and what hangs off it. A date marker is filled and carries a 12px glyph; an event is a quiet surface with a 16px one. That inversion is the point: the dates are the spine and the events hang off them, so the marker has to out-weigh the thing it introduces.

  1. Tuesday, May 16
  2. Refund succeeded for $20.000,00 COPThought:dLocalThe customer's bank account may take a few days to receive the fundsThursday, May 11, 2025, 10:25:49 GMT-6
  1. 1
    Node

    24px. Filled for a date, quiet for an event. The glyph is picked by WHAT HAPPENED, so the column scans without being read.

  2. 2
    Title

    Semibold, with the amount trailing in regular at the same size and colour — one sentence in two weights, not a second line.

  3. 3
    Provider

    Optional: the logo and name of whatever produced the event.

  4. 4
    Timestamp

    12/16 muted, with the Eye that opens the raw event.

States

Default is a plain row. Disabled is for something that has not happened yet — a scheduled capture, a pending step: it goes quiet rather than disappearing, because the fact that it is COMING is the information the reader came for. And the raised card is a HOVER state, not a variant: it appears on whichever event you point at, never on a chosen one. A row raised at rest reads as 'this is the important step'.

  1. Tuesday, May 16
  2. Captured succeeded for $20.000,00 COPThursday, May 11, 2025, 10:25:49 GMT-6
  3. Captured succeeded for $20.000,00 COPA capture is scheduled for this route and will execute once the specified time has passed.Thursday, May 11, 2025, 10:25:49 GMT-6
  4. Refund succeeded for $20.000,00 COPThe customer's bank account may take a few days to receive the fundsThursday, May 11, 2025, 10:25:49 GMT-6
  5. Tuesday, May 11
  6. Captured succeeded for $52.000,00 COPThursday, May 11, 2025, 10:25:49 GMT-6
  7. Authorization succeeded for $52.000,00 COPThought:dLocalThursday, May 11, 2025, 10:25:49 GMT-6
  8. Payment startedThursday, May 11, 2025, 10:25:49 GMT-6
<Timeline>
  <TimelineDate>Tuesday, May 16</TimelineDate>

  {/* Default. */}
  <TimelineEvent icon={<Clock weight="fill" />} title="Captured succeeded"
    amount="for $20.000,00 COP" timestamp={ts} onInspect={inspect} />

  {/* Not yet: it goes quiet and stays. */}
  <TimelineEvent disabled icon={<ClockCountdown weight="fill" />}
    title="Capture scheduled" timestamp={ts} />

  {/* Opens something — the card is its HOVER state. */}
  <TimelineEvent icon={<Cards weight="fill" />} title="Authorization succeeded"
    timestamp={ts} onClick={open} />
</Timeline>

Why the hover lifts by value

The kit's own rule, from globals.css: elevation in dark is carried by value, not by shadow — a shadow darkens what is under it, and on a near-black ground there is nothing left to darken. Measured, shadow-lg moves the dark canvas by 1 point against 25 on white. So the hover lift is a surface that composes one step up over whatever rung the row sits on, and the shadow is what does the work in light.

Import

Copy this import at the top of the file where you compose these.

import {
  Timeline,
  TimelineDate,
  TimelineEvent,
} from "@/components/patterns/timeline";