Skip to main content
xtyle

Timeline
Info:Content
18

A vertical activity feed: an ordered list drawn as a connected rail of dots.
activity feed history log event list changelog feed

Live demo

live · @xtyle/astro

Timeline

Release activity
  1. Shipped v0.6.0

    The accessibility pass, the reduced-motion self-guards, and a new gallery mockup went live.

  2. Merged the release branch

    Folded the cycle's commits into main and cut the changelog.

  3. Froze the milestone
  4. Opened v0.6.0

Terse feed
  1. Deploy succeeded
  2. Build passed
  3. Pushed 3 commits

Timeline turns a semantic ordered list into a vertical activity feed. It wraps an <ol> of <li> events and decorates them: each item grows a themed dot on a connector rail that runs from one event to the next and stops at the last.

It renders no markup of its own beyond the classes it adds, so the list stays the source of truth for order and content, and screen readers hear a plain ordered list. Inside an item, a <strong> reads as the event title, a <time> as its timestamp, and a <p> as the body; the same styling is available through xtyle-timeline__title / __meta / __body classes if the markup can't use those elements. Being standalone (like Table), it needs no runtime to render, only the derived token register the rail and dots draw from.

When to use

How this component composes with the rest of the set.

Feed it real markup: an order history, a changelog, an audit trail, a deploy log. Each <li> is one event.
Pair a <strong> title with a <time> for the when, and an optional <p> for the detail; leave the <p> off for a terse feed.
Drop a Badge or an Icon inside an item for a status chip beside the title; both inherit the derived theme.

Anatomy

The named parts that make up the component, with their selectors.

list

 .xtyle-timeline__list

The decorated ordered list; carries no bullets and no default spacing.

item

 .xtyle-timeline__item

One event. Its marker dot and the connector rail below it are drawn as pseudo-elements.
--space-5 --space-4 --accent --bg-0 --line --border-thin --border-thick --radius-full

title

 .xtyle-timeline__item > strong

The event title: a <strong> (or .xtyle-timeline__title).
--text-sm --weight-semibold --fg-0 --leading-tight

meta

 .xtyle-timeline__item > time

The timestamp or secondary line: a <time> (or .xtyle-timeline__meta).
--text-xs --fg-2

body

 .xtyle-timeline__item > p

The event body copy: a <p> (or .xtyle-timeline__body).
--text-sm --fg-1 --leading-normal --space-1

Tokens & coverage

What the component consumes, checked live against what the algorithm produces.

Success:fully covered 18/18 consumed tokens produced default register: 299 tokens

Live coverage check against the xtyle-default register (derive(xtyleDefault, { anchors }) → coverComponent(manifest, register)). Every token this component consumes must be a key the algorithm produces.

--accent --bg-0 --border-thick --border-thin --fg-0 --fg-1 --fg-2 --font-sans --leading-normal --leading-tight --line --radius-full --space-1 --space-4 --space-5 --text-sm --text-xs --weight-semibold

Slots
default
html svelte astro

The ordered list. Provide an <ol> (or <ul>) whose <li> children are the events.

Accessibility
It renders a semantic ordered list, so assistive tech announces the events in order with no ARIA to wire; the dots and rail are decorative pseudo-elements that carry no content.
Order is conveyed by the list itself, not by color, so a color-deficient or screen-reader user reads the same sequence.
Use a real <time datetime="…"> for timestamps so the machine-readable date is exposed alongside the human label.

Code

Activity feed

An ordered list of events; each item takes a dot on the connector rail.

 
<xtyle-timeline>
	<ol>
		<li>
			<strong>Deployed v0.6.0</strong>
			<time>2 hours ago</time>
			<p>The accessibility pass and the new gallery mockup went live.</p>
		</li>
		<li>
			<strong>Merged the release branch</strong>
			<time>yesterday</time>
		</li>
		<li>
			<strong>Opened the milestone</strong>
			<time>last week</time>
		</li>
	</ol>
</xtyle-timeline>
 
<script lang="ts">
	import { Timeline } from "@xtyle/svelte";
</script>

<Timeline>
	<ol>
		<li><strong>Deployed v0.6.0</strong><time>2 hours ago</time></li>
		<li><strong>Merged the release branch</strong><time>yesterday</time></li>
	</ol>
</Timeline>
 
---
import Timeline from "@xtyle/astro/Timeline.astro";
---

<Timeline>
	<ol>
		<li><strong>Deployed v0.6.0</strong><time>2 hours ago</time></li>
		<li><strong>Merged the release branch</strong><time>yesterday</time></li>
	</ol>
</Timeline>