Timeline
Part of the extras bundle, not included by default.
Intent
A two-column vertical layout for changelogs, activity logs, order tracking, comment threads, and event histories. Column one carries the visual marker (a dot, a line, sometimes an avatar); column two carries the event copy. Connecting lines between markers turn discrete events into a recognizable sequence.
The last connector line auto-hides via a :has()
selector, so consumers don't need to special-case the bottom
event with an inline style. Dot colors follow brio's standard
status convention; a .is-dashed line variant
marks "waiting" or "future" states.
Basic usage
Each event is a pair of grid children: a
.timeline-marker (dot + line) followed by a
.timeline-content. The first event's content
sits beside the first marker; the second event's content
beside the second marker; and so on, flowing into rows
automatically.
<div class="timeline">
<div class="timeline-marker">
<span class="timeline-dot is-success"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Deployed to production</strong>
<span class="text-muted">
<time datetime="2026-04-25T14:32">Today at 2:32 PM</time> · Jordan Lee
</span>
</div>
<div class="timeline-marker">
<span class="timeline-dot"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Pull request merged</strong>
<span class="text-muted">
<time datetime="2026-04-25T13:15">Today at 1:15 PM</time> · Sam Rivera
</span>
</div>
<div class="timeline-marker">
<span class="timeline-dot"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Code review approved</strong>
<span class="text-muted">
<time datetime="2026-04-25T11:48">Today at 11:48 AM</time> · Casey Park
</span>
</div>
<div class="timeline-marker">
<span class="timeline-dot is-neutral"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Branch created</strong>
<span class="text-muted">
<time datetime="2026-04-24T09:20">Yesterday at 9:20 AM</time> · Jordan Lee
</span>
</div>
</div>
The bottom marker still has a .timeline-line in
its markup -- brio's :has() selector hides it
because that marker is the last in the sequence. Consumer
markup stays uniform; no inline style needed.
Dot colors
Status convention shared with alerts and badges:
.is-success, .is-warning,
.is-danger, .is-accent,
.is-neutral. The default dot pulls
--color-primary. Override
--timeline-dot-color per instance for non-standard
shades.
<div class="timeline">
<div class="timeline-marker">
<span class="timeline-dot"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content"><span>Default (primary)</span></div>
<div class="timeline-marker">
<span class="timeline-dot is-success"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content"><span>Success</span></div>
<div class="timeline-marker">
<span class="timeline-dot is-warning"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content"><span>Warning</span></div>
<div class="timeline-marker">
<span class="timeline-dot is-danger"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content"><span>Danger</span></div>
<div class="timeline-marker">
<span class="timeline-dot is-accent"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content"><span>Accent</span></div>
<div class="timeline-marker">
<span class="timeline-dot is-neutral"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content"><span>Neutral</span></div>
</div>Waiting states with dashed lines
A .timeline-line.is-dashed visually marks
"waiting" or "future" events -- response-pending in approval
flows, scheduled steps that haven't started yet, or anything
that hasn't happened. Pair with a neutral or muted dot color
to underline the not-yet-here-ness.
<div class="timeline">
<div class="timeline-marker">
<span class="timeline-dot is-success"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Request submitted</strong>
<span class="text-muted">Yesterday · You</span>
</div>
<div class="timeline-marker">
<span class="timeline-dot is-success"></span>
<span class="timeline-line is-dashed"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Manager approved</strong>
<span class="text-muted">2 hours ago · Sam Rivera</span>
</div>
<div class="timeline-marker">
<span class="timeline-dot is-neutral"></span>
<span class="timeline-line is-dashed"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Awaiting finance review</strong>
<span class="text-subtle">Pending</span>
</div>
<div class="timeline-marker">
<span class="timeline-dot is-neutral"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Disbursement</strong>
<span class="text-subtle">Not started</span>
</div>
</div>Avatar markers (comment threads, activity feeds)
The marker is just a flex column with whatever you put inside
-- swap the .timeline-dot for an
.avatar and the line still stretches below.
Useful for comment threads, social feeds, or anywhere the
person matters more than the event type.
Build is failing on main after the dependency update. Error from esbuild: missing export from the tokens module.
Looking at this now -- I think we missed re-running the lockfile after the bump. PR incoming in a few minutes.
<div class="timeline" style="--timeline-gap: var(--space-sm)">
<div class="timeline-marker">
<div class="avatar is-sm">
<img src="https://picsum.photos/seed/tl-alex/64/64" alt="Alex Chen"/>
</div>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight" style="padding-block-end: var(--space-md)">
<div class="cluster is-tight">
<strong>Alex Chen</strong>
<span class="text-muted">opened an issue</span>
</div>
<div class="card" style="--card-padding: var(--space-sm)">
<p>Build is failing on main after the dependency update. Error from <code>esbuild</code>: missing export from the tokens module.</p>
</div>
<span class="text-subtle"><time datetime="2026-04-25T10:05">10:05 AM</time></span>
</div>
<div class="timeline-marker">
<div class="avatar is-sm">
<img src="https://picsum.photos/seed/tl-jordan/64/64" alt="Jordan Lee"/>
</div>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight" style="padding-block-end: var(--space-md)">
<div class="cluster is-tight">
<strong>Jordan Lee</strong>
<span class="text-muted">commented</span>
</div>
<div class="card" style="--card-padding: var(--space-sm)">
<p>Looking at this now -- I think we missed re-running the lockfile after the bump. PR incoming in a few minutes.</p>
</div>
<span class="text-subtle"><time datetime="2026-04-25T10:18">10:18 AM</time></span>
</div>
<div class="timeline-marker">
<div class="avatar is-sm">
<img src="https://picsum.photos/seed/tl-jordan/64/64" alt="Jordan Lee"/>
</div>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<div class="cluster is-tight">
<strong>Jordan Lee</strong>
<span class="text-muted">closed the issue</span>
</div>
<span class="text-subtle"><time datetime="2026-04-25T10:42">10:42 AM</time></span>
</div>
</div>Order tracking
<div class="timeline">
<div class="timeline-marker">
<span class="timeline-dot is-success"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Delivered</strong>
<span class="text-muted">
<time datetime="2026-04-10">April 10, 2026</time> · Signed by J. Smith
</span>
</div>
<div class="timeline-marker">
<span class="timeline-dot"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Out for delivery</strong>
<span class="text-muted">
<time datetime="2026-04-10">April 10, 2026</time> · Local facility
</span>
</div>
<div class="timeline-marker">
<span class="timeline-dot"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>In transit</strong>
<span class="text-muted">
<time datetime="2026-04-08">April 8, 2026</time> · Regional hub
</span>
</div>
<div class="timeline-marker">
<span class="timeline-dot is-neutral"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content stack is-tight">
<strong>Order placed</strong>
<span class="text-muted">
<time datetime="2026-04-06">April 6, 2026</time>
</span>
</div>
</div>Customization
Gap, line color, dot size, and dot color all flow through
scoped --timeline-* tokens. Override
--timeline-gap on the root for tighter or looser
vertical rhythm; override --timeline-dot-color
on individual .timeline-dots for non-standard
shades; override --timeline-line-color globally
if the connector should pick up a brand color or muted tint
instead of the default border tone.
How it works
The timeline is a CSS grid with two columns:
auto for the marker, 1fr for the
content. Each event is two grid children that flow into a
new row automatically. The marker is itself a flex column
that stacks the dot above the line; the line uses
flex: 1 to fill remaining vertical space, so it
always stretches to meet the next event's marker.
The bottom event's line is hidden by a
:has() selector targeting the marker whose next
sibling is the last content -- by definition, the
bottom-event marker. Consumer markup stays uniform; no
special-case last item.
Markup
<div class="timeline">
<div class="timeline-marker">
<span class="timeline-dot is-success"></span>
<span class="timeline-line"></span>
</div>
<div class="timeline-content">
<p>Event description</p>
</div>
<!-- Repeat for each event. The last marker's line auto-hides. -->
</div>
<!-- Dashed connector for "waiting" / "future" items -->
<span class="timeline-line is-dashed"></span>
<!-- Avatar marker -->
<div class="timeline-marker">
<div class="avatar is-sm"><img src="..." alt="..."></div>
<span class="timeline-line"></span>
</div>CSS Reference: Timeline
Vertical sequence of events with connecting lines
Source: src/css/extras/timeline.css
Tokens
| Token | Default | Description |
|---|---|---|
--timeline-gap | var(--space-md) | Horizontal gap between the marker column and content column |
--timeline-line-color | var(--color-border) | Color of the connecting line between events |
--timeline-dot-size | 0.625rem | Diameter of the event indicator dot |
--timeline-dot-color | var(--color-primary) | Fill color for the event indicator dot |
Slots
| Slot | Description |
|---|---|
.timeline-marker | Marker column holding the dot or avatar and connecting line |
.timeline-marker .timeline-dot | Colored event indicator dot inside timeline-marker |
.timeline-marker .timeline-line | Connecting line between event markers inside timeline-marker |
.timeline-content | Content column for the event description |
Classes
| Class | Description |
|---|---|
.timeline | component root |
.is-dashed | Dashed line pattern for pending or future events |
.is-success | Success color variant for the dot |
.is-warning | Warning color variant for the dot |
.is-danger | Danger color variant for the dot |
.is-accent | Accent color variant for the dot |
.is-neutral | Neutral color variant for the dot |