Examples
Basic usage
Deployed to production
· Jordan Lee
Pull request merged
· Sam Rivera
Code review approved
· Casey Park
Branch created
· Jordan Lee
<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>
Dot colors
Default (primary)
Success
Warning
Danger
Accent
Neutral
<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
Request submitted
Yesterday · You
Manager approved
2 hours ago · Sam Rivera
Awaiting finance review
Pending
Disbursement
Not started
<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)
Alex Chen
opened an issue
Build is failing on main after the dependency update. Error from
esbuild: missing export from the tokens module.
Jordan Lee
commented
Looking at this now -- I think we missed re-running the lockfile after the bump. PR incoming in a few minutes.
Jordan Lee
closed the issue
<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-block: var(--space-sm);
--card-padding-inline: 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-block: var(--space-sm);
--card-padding-inline: 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
Delivered
· Signed by J. Smith
Out for delivery
· Local facility
In transit
· Regional hub
Order placed
<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>
Source comments
Timeline -- vertical sequence of events with connecting lines
(extra).
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>Deployed to production</p>
</div>
<div class="timeline-marker">
<span class="timeline-dot"></span>
<span class="timeline-line is-dashed"></span>
</div>
<div class="timeline-content">
<p>Awaiting QA approval</p>
</div>
<div class="timeline-marker">
<span class="timeline-dot is-neutral"></span>
<!-- no line element -- last marker auto-hides anyway -->
</div>
<div class="timeline-content">
<p>Order placed</p>
</div>
</div>
Archetype: Slotted container (P3) over a two-column CSS grid.
Auto-hide last line: the marker whose next sibling is the last
content (the bottom event) gets its line hidden via :has(). No
inline style required from consumers; markup stays uniform.
Avatar-as-marker (activity feeds, comment threads): drop in any
child instead of a dot. The marker's flex column centers
whatever's inside; the line stretches below. brio doesn't
special-case avatar markers because the structural pattern is
the same -- the consumer composes:
<div class="timeline-marker">
<div class="avatar is-sm"><img src="..." alt="Alex"></div>
<span class="timeline-line"></span>
</div>
Reference
Source: src/css/extras/timeline.css
Applies to
.timeline
Classes
| Class | Kind | Description |
|---|---|---|
.is-dashed | variant | Dashed line pattern for pending or future events |
.is-success | variant | Success color variant for the dot |
.is-warning | variant | Warning color variant for the dot |
.is-danger | variant | Danger color variant for the dot |
.is-accent | variant | Accent color variant for the dot |
.is-neutral | variant | Neutral color variant for the 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 |
Tokens
| Token | Default | Description |
|---|---|---|
--timeline-gap | var(--gutter-spacious) | 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 |