# Timeline > A dev-tool release timeline as a clean versions panel — each release leads with a tinted action chip on a neutral connector rail, a mixed-weight activity line, and a muted timestamp. Mono diffstats and hashes, an accent-tinted active pill with a canary meter, and a dashed planned-release stub. - Category: Card - Frameworks: Vanilla, React + CSS, React + Tailwind - Design system: Tensor - Dark mode: yes - Access: premium (Atheros AI Pass) - Tags: timeline - Page: https://builder.atheros.ai/components/timeline - Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_timeline/preview-37b5ac82aa53.webp ## Features - Semantic ordered-list markup (`
    `/`
  1. `) so the release sequence is meaningful to assistive technology - Each release leads with a soft rounded icon chip — a pale pastel tint of its per-stage action color (jade green, teal cyan, iris violet, copper amber, orchid pink) holding a 24px Tabler stroke icon in the saturated hue - A thin neutral connector line runs down the chip axis, linking consecutive releases with no extra DOM - Mixed-weight activity line per release — bold version tag, mid-gray connective verb, bold release name — above a muted relative timestamp - Per-release diffstat row — mono `+adds −dels` counts, a five-cell GitHub-style diff meter, and a short commit hash, all kept small and muted - The in-progress release renders as a pale-violet full-row pill with a solid violet left accent bar flush to the panel edge and a violet check on the right - Canary rollout meter on the in-progress release — violet-tinted track, `scaleX` fill at the rollout fraction, and a looping sheen sweep - A dashed planned-release stub after the last release — dashed connector continuation, hollow dashed chip, and a `v1.2` tag with ETA - Header carries a left-aligned title and top-right square outlined icon buttons (branch, compact-density toggle) - Compact-view toggle in the header — the density icon button flips `aria-pressed` and collapses every release to its activity line and timestamp, hiding descriptions, diffstats, and the canary meter - Rows stagger-fade in on load using `transform` and `opacity` via `:nth-child` (max 6) - Full-width Show-More-style follow button — outlined, no lift, pale-violet pressed state with bell fill - Neutral light-gray page ground with a clean white panel and hairline border - Responsive panel that adapts padding down to 280px - Fully respects `prefers-reduced-motion` ## Accessibility - **Semantic order** — Releases are an `
      ` of `
    1. ` so sequence is conveyed without visuals - **Icon buttons** — Header branch/density buttons and the follow button are native `