Skip to main content
xtylext xtyle
xriptxr

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

Statused events
  1. Deploy Success:green

    Rolled out to every region with no failed health check.

  2. Rollback Danger:failed
  3. Opened the incident Warning:sev-2

    The rail stops here: the last event ends at its dot rather than trailing a line into nothing.

Zero-JS

The Astro binding reads the authored <li>s on the server and renders the whole feed — the dots, the rails, and each event's content in its own region — so the timeline arrives complete. static keeps it that way: the instance below never asks for the runtime, and on a page with no other xtyle element it stays a plain, fully-styled feed with zero JavaScript. Re-reading the list when it changes is what hydration adds on top.

  1. Rendered on the server
  2. Shipped as plain HTML
  3. Styled by the cascade alone

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

The dot and the rail are real nodes rendered by the component's fill, not lines painted onto the author's markup, so a mod can swap the dot for a per-event icon or draw the rail dashed — while each event's content is relocated into its content region untouched, and the rendered list stays a semantic <ol> screen readers hear in order. Inside an event, a <strong> reads as the 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.

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.
The dot and the rail are the fill's own nodes: a mod filling component.timeline can turn the dot into a per-event icon or dash the rail, without the app changing a line.

Props

1 prop, straight from the manifest.

PropTypeDefaultBindingsDescription
static boolean false
astro
Astro only: emit the server-rendered feed but never load the runtime to hydrate it. The dots, rails, and per-event content regions are rendered from the authored `<li>`s at build time, so a static timeline is complete; hydration only adds re-reading the list when it changes. The Svelte and raw-element paths always upgrade, so they carry no equivalent.

Anatomy

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

list

 .xtyle-timeline__list

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

item

 .xtyle-timeline__item

One event: its dot, the rail running to the next event, and its content. Carries any attributes the author put on the source <li>.
--space-5 --space-4

dot

 .xtyle-timeline__dot

The event's marker on the rail. A real node, so a mod can replace it with a per-event icon or status glyph.
--accent --bg-0 --border-thick --radius-full

rail

 .xtyle-timeline__rail

The line running from one event's dot down to the next. The last event has none, so the feed ends at its dot.
--line --border-thin

content

 .xtyle-timeline__content

The region each event's authored content is relocated into, beside its dot.

title

 .xtyle-timeline__content > strong

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

meta

 .xtyle-timeline__content > time

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

body

 .xtyle-timeline__content > 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: 305 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. Each event's content is relocated into the rendered item's content region, and any attributes on the source <li> ride along onto the rendered item.

Accessibility
It renders a semantic ordered list, so assistive tech announces the events in order with no ARIA to wire; the dot and rail nodes are decorative and carry aria-hidden.
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>