Timelines
Tell a sequence of meaningful events in chronological order.
Live preview
- Release deployed· Production environment
- Quality checks passed· Automated regression
- Release prepared· Release candidate created
HTML
<ol class="xsh-timeline">
<li class="xsh-timeline__item">
<div class="xsh-timeline__title">Release deployed</div>
<time datetime="2026-10-30">30 Oct 2026</time> · Production environment</li>
<li class="xsh-timeline__item">
<div class="xsh-timeline__title">Quality checks passed</div>
<time datetime="2026-10-29">29 Oct 2026</time> · Automated regression</li>
<li class="xsh-timeline__item">
<div class="xsh-timeline__title">Release prepared</div>
<time datetime="2026-10-28">28 Oct 2026</time> · Release candidate created</li>
</ol>Installation & markup
Include the local stylesheet and script once on the page, then place the component inside a data-xsh-ui root. The example above works without a build system.
<link rel="stylesheet" href="/dist/xshna-ui.css">
<div data-xsh-ui>
<!-- Add the HTML example above -->
</div>
<script defer src="/dist/xshna-ui.js"></script>Component API
Public classes, attributes and hooks used by this example. Keep the xsh- prefix intact.
| Identifier | Contract |
|---|---|
xsh-timeline | Used by the example markup and component styles or behavior. |
xsh-timeline__item | Used by the example markup and component styles or behavior. |
xsh-timeline__title | Used by the example markup and component styles or behavior. |
Accessibility & keyboard
Ordered lists convey chronology correctly. Use time elements with machine-readable datetime values.
Implementation note. Prefer concise event descriptions and stable dates.
Interaction contract
Behavioral components use the shared delegated runtime; visual-only primitives rely on semantic HTML and CSS. Runtime controls emit bubbling xsh:* CustomEvents; bind application handlers to those events when server persistence, API data or navigation is required.