Presents ordered events, milestones, or state transitions with a connected vertical rail.
Importing
Usage
Use Timeline as the ordered container and compose rows with TimelineItem. Give each event a marker with markerIcon (a Pluma icon), markerIconSrc (an image URL rendered inside the marker coin), or markerContent (text or any node inside the coin). For explanatory context, drop a Banner (or any content) into a TimelineItem with none of those — that marker-less row renders no coin, runs full width, and the connecting line passes straight through it.
Marker content
Give a row a marker with markerIcon, markerIconSrc, or markerContent. markerContent fills the coin with text — a step number, a short code — or any node; in Ember it also accepts a markerContent named block. Setting it to an empty string renders an empty coin, and omitting all three makes the row marker-less.
Custom title, description, and meta content
title, description, and meta accept plain strings for the common case. When you need richer content — inline emphasis, a link, a formatted timestamp — pass arbitrary content instead. In React, give the prop any node; in Ember, provide the matching named block (<:title>, <:description>, <:meta>). The content is wrapped in the same styled slot, so it stays aligned with the marker and rail.
Meta position
Meta sits in a leading column before the marker by default, so timestamps or dates read as a persistent left-side column. Use metaPosition="trailing" to end-align the meta after the row content instead.
States
Set isCurrent on the row that represents the current or most important event. Leave a row's color unset (it defaults to grey) to de-emphasize unavailable, inactive, or expected future events.
Marker alignment
Markers align to the first line of each row's content, so title, icon, and timestamp scan together — the same whether or not a row has a title. The connecting line runs from each marker to the next, so the rail stays continuous regardless of row height.
Marker shape, color, and rail variants
The marker is rendered as a Coin. Set its contents with markerIcon (a Pluma icon), markerIconSrc (an image URL rendered inside the coin), or markerContent (text or any node; an empty string renders an empty coin); an icon scales automatically with the marker size. Use color for the marker and rail accent — or trackColor to color the rail independently of the marker — shape (circle or rounded-square) for the marker outline, and lineVariant for the rail segment. isCurrent draws a ring around the marker that follows its shape.
Marker status indicator
markerStatusIndicatorColor renders a colored status dot on the marker coin, passed straight through to the Coin's own statusIndicatorColor.
API
PlumaTimeline extends Box
Default:'leading'
Controls where the row meta sits relative to the marker. Sets the default
for every row; an individual TimelineItem can override it.
PlumaTimelineItem extends Box
Default:'grey'
Accent color used for both the marker and the rail.
Supporting text rendered below the title.
Default:false
Adds an outer marker ring to identify the current or most important event.
Default:'solid'
Visual treatment of the rail segment that runs through this row.
Default:'label'
Controls how the marker coin is aligned vertically within the row.
label (default) pins the coin center to the first text line.
center centers the coin with the full row height — use this when the
row contains block content (e.g. a card) instead of a text label.
Arbitrary content rendered inside the marker coin — e.g. a short label,
count, or custom node. Setting this (even to an empty string) gives the row
a marker; an empty value renders an empty coin. Leave it undefined (along
with markerIcon/markerIconSrc) for a marker-less row whose content runs
the full width with the rail passing straight through it. Takes precedence
over markerIcon/markerIconSrc when set. In Ember it also accepts a
markerContent named block.
Icon rendered inside the marker coin. Provide this (or markerIconSrc, or
markerContent) to give the row a marker; omit all three for a marker-less
row whose content runs the full width with the rail passing straight through
it.
Image source rendered inside the marker coin, as an alternative to
markerIcon.
Accessible label for the decorative marker when the visible title needs extra context.
Default:'md'
Smaller or larger marker and title treatment.
Renders a colored status indicator dot on the marker coin. Passed straight
through to the coin's statusIndicatorColor.
Secondary metadata for the row, usually a timestamp, count, or short status.
Overrides the Timeline's meta placement for this row — before the marker
(leading) or after the content (trailing). Defaults to the Timeline's
metaPosition.
Default:'circle'
Shape of the marker coin.
Primary event title.
Recolors only the rail, independent of the marker — set it alongside color
to give a row a marker and rail of different colors. Like color, it carries
onto the next row's incoming rail half.
One-off custom color (any CSS color value, e.g. a hex) for this row's whole
rail — both halves — and its current-ring, bypassing the tokenized colors.
The marker keeps its color. Prefer the tokens; reach for this only when the
palette can't express the color you need.
One-off custom color for just this row's incoming (above-coin) rail half. Set it to the previous row's track color to carry a custom color across the seam between the two rows.
One-off custom color for just this row's own (below-coin) rail half — the
custom-hex counterpart of trackColor, independent of the marker. As with
any custom color, propagate it across the seam by setting the next row's
unsafe_colorAbove to match.