Timeline

hc-timeline renders activity history — audit logs, deployment events, order status — as a plain <ol> with a marker rail and connector line. Pure CSS: the list semantics are the accessibility story, statuses ride on data-variant, and RTL flips for free (logical properties).

Basic HTML

PreviewCode

1. ✓
   09:14Deploy finished

   v2.4 to production.

2. !
   09:10Smoke test flaky

   Retried once, then green.

3. 09:02Build started

<ol class="hc-timeline" aria-label="Deployment history">
  <li class="hc-timeline__item" data-variant="success">
    <span class="hc-timeline__marker" aria-hidden="true">✓</span>
    <div class="hc-timeline__content">
      <time class="hc-timeline__time" datetime="2026-07-03T09:14">09:14</time>
      <span class="hc-timeline__title">Deploy finished</span>
      <p class="hc-timeline__description">v2.4 to production.</p>
    </div>
  </li>
  <!-- … one <li class="hc-timeline__item"> per event -->
</ol>

__time and __description are optional; a title-only item works. The connector line stops at the last item automatically.

Variants

data-variant on an item colors its marker via the status tokens: success, warning, error, info. Without it the marker is a neutral hollow dot. The optional glyph inside the marker is decorative — keep it aria-hidden and put the meaning in the title.

PreviewCode

1. ✓
   Deploy finished
2. !
   Smoke test flaky
3. ✕
   Rollback triggered
4. i
   Maintenance window opened

<ol class="hc-timeline" aria-label="Status variants">
  <li class="hc-timeline__item" data-variant="success">
    <span class="hc-timeline__marker" aria-hidden="true">✓</span>
    <div class="hc-timeline__content"><span class="hc-timeline__title">Deploy finished</span></div>
  </li>
  <li class="hc-timeline__item" data-variant="warning">
    <span class="hc-timeline__marker" aria-hidden="true">!</span>
    <div class="hc-timeline__content"><span class="hc-timeline__title">Smoke test flaky</span></div>
  </li>
  <li class="hc-timeline__item" data-variant="error">
    <span class="hc-timeline__marker" aria-hidden="true">✕</span>
    <div class="hc-timeline__content"><span class="hc-timeline__title">Rollback triggered</span></div>
  </li>
  <li class="hc-timeline__item" data-variant="info">
    <span class="hc-timeline__marker" aria-hidden="true">i</span>
    <div class="hc-timeline__content"><span class="hc-timeline__title">Maintenance window opened</span></div>
  </li>
</ol>

htmx usage

An activity feed is a list of server-rendered items — prepend new events with an out-of-band swap, or refresh via SSE (see the sse-updates recipe):

<ol class="hc-timeline" id="audit-log"
    data-hx-get="/audit?page=2" data-hx-trigger="revealed from:#log-more"
    data-hx-swap="beforeend">
  …
</ol>

Newest-first or oldest-first is your choice — the component draws the same either way; announce the order in the list’s aria-label if it is not obvious.

Accessibility

• It is a list: <ol>/<li> are announced with position and count. Give the list an aria-label when the heading doesn’t already name it.
• Use <time datetime="…"> for machine-readable timestamps.
• Marker glyphs are decorative (aria-hidden="true") — the title text carries the meaning, so the status is never color-only.

Theming tokens

Component tokens (in component.tokens.json):

Token path	Purpose
timeline.marker-size	Marker diameter.
timeline.marker-bg / marker-fg / marker-border / marker-border-size	Neutral marker.
timeline.line-size / line-color	Connector segment.
timeline.gap	Column gap between rail and content.
timeline.item-gap	Vertical gap between items.
timeline.time-fg / time-font-size	Timestamp text.
timeline.title-fg / title-font-weight	Title text.
timeline.description-fg / description-font-size	Description text.
timeline.success-bg / warning-bg / error-bg / info-bg / status-fg	Variant markers.

CSS variables

Show the generated CSS variables

--hc-timeline-marker-size | -marker-bg | -marker-fg | -marker-border | -marker-border-size
--hc-timeline-line-size | -line-color | -gap | -item-gap
--hc-timeline-time-fg | -time-font-size
--hc-timeline-title-fg | -title-font-weight
--hc-timeline-description-fg | -description-font-size
--hc-timeline-success-bg | -warning-bg | -error-bg | -info-bg | -status-fg

Related

• Item — the flat row primitive for feeds without the rail metaphor.
• Stepper — for process steps the user moves through, rather than history.
• Status colors — the shared tokens behind the variant markers.