Timeline
Timeline is a vertical container (`<pura-timeline>`) that draws a line connecting the dots of each `<pura-timeline-item>` placed in the default slot. Use it to display history logs, process steps, changelogs, or activity feeds in chronological order. It's agent-native: in addition to the accessible `role="list"`, every mounted timeline registers a live, machine-readable snapshot at `window.__puraTimelines[id]` (with a label and items containing time, title, body, and variant), letting agents read the content without scraping the DOM.
Preview
<pura-timeline label="Order history">
<pura-timeline-item variant="success">
<span slot="time">May 29, 2026, 9:12 AM</span>
<span slot="title">Order confirmed</span>
Payment approved and invoice issued.
</pura-timeline-item>
<pura-timeline-item variant="primary">
<span slot="time">May 29, 2026, 2:40 PM</span>
<span slot="title">Being picked</span>
Items reserved in the distribution center's inventory.
</pura-timeline-item>
<pura-timeline-item variant="info">
<span slot="time">May 30, 2026, 8:05 AM</span>
<span slot="title">On the way</span>
Package handed off to the carrier.
</pura-timeline-item>
<pura-timeline-item>
<span slot="time">Estimated: Jun 2, 2026</span>
<span slot="title">Delivery</span>
Awaiting receipt at the registered address.
</pura-timeline-item>
</pura-timeline>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
label | string | — | Accessible name of the list (becomes aria-label) on <pura-timeline>; also reflected in the registry snapshot. |
variant | "neutral" | "primary" | "success" | "warning" | "danger" | "info" | neutral | Sets the dot color of each <pura-timeline-item>. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/timeline.js"></script>import "./pura/lib/timeline.js";