Timeline
Preview Available in release assets
Show chronological events or authored milestones while keeping their order, headings, dates, and status meaningful in the document.
Timeline in context
<section aria-labelledby="order-history-title">
<h2 id="order-history-title">Order history</h2>
<ol class="thin-timeline">
<li data-state="complete">
<article>
<header>
<h3>Order placed</h3>
<time datetime="2026-08-01T09:42:00-05:00">August 1 at 9:42 AM CDT</time>
</header>
<p>Confirmation sent to samira@example.test.</p>
</article>
</li>
<li aria-current="step">
<article>
<header>
<h3>Preparing an unusually large shipment for international delivery</h3>
<time datetime="2026-08-01T11:05:00-05:00">August 1 at 11:05 AM CDT</time>
</header>
<p>Warehouse staff are checking all 48 line items.</p>
</article>
</li>
<li data-state="pending">
<article>
<header>
<h3>Carrier pickup</h3>
</header>
<p>Time not yet available.</p>
</article>
</li>
</ol>
</section>Show code
<section aria-labelledby="order-history-title">
<h2 id="order-history-title">Order history</h2>
<ol class="thin-timeline">
<li data-state="complete">
<article>
<header>
<h3>Order placed</h3>
<time datetime="2026-08-01T09:42:00-05:00">August 1 at 9:42 AM CDT</time>
</header>
<p>Confirmation sent to samira@example.test.</p>
</article>
</li>
<li aria-current="step">
<article>
<header>
<h3>Preparing an unusually large shipment for international delivery</h3>
<time datetime="2026-08-01T11:05:00-05:00">August 1 at 11:05 AM CDT</time>
</header>
<p>Warehouse staff are checking all 48 line items.</p>
</article>
</li>
<li data-state="pending">
<article>
<header>
<h3>Carrier pickup</h3>
</header>
<p>Time not yet available.</p>
</article>
</li>
</ol>
</section>Anatomy
- Labelled section
- Ordered list
- Event item
- Event article
- Heading
- Native time element when known
- Optional supporting content
Variants and sizes
- Event history
- Current milestone
- Compact timeline
- Pending event without a fabricated date
Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.
States and difficult content
Rendered fixtures exercise authored content and constrained layouts with the same production assets.
- Completed event
- Current event
- Pending event
- Missing time stated in text
- Long localized content
- Narrow container
- Right-to-left content
Structured state fixtures are not published for this item yet.
Interaction and keyboard behavior
Timeline owns no interaction or live updating. Links and controls inside an event keep native behavior; server updates must preserve focus and announce material changes separately when appropriate.
Accessibility
Use an ordered list when chronology matters, write visible status and missing-time text, provide machine-readable datetime values only when known, preserve heading order, and do not make connector color the sole status cue.
- Contract
COMPOSE- Basis
- Native headings, lists, time, and table/content relationships; no APG widget
- Evidence
tests/unit/library/content-patterns.test.ts
API
Use ol.thin-timeline with direct li children. Put each substantial event in an article. Optional aria-current=step and data-state=complete|pending provide visual hooks but require visible text that communicates the same state.
Behavior tier: native
Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.
Fallback
The ordered list, event headings, native dates, visible statuses, and supporting content remain chronological and readable without CSS or JavaScript.
Assets and dependencies
/components.css
Dependencies: None
Source: packages/ui/src/items/timeline/style.ts