Skip to content

timeline.md

Latest commit

 

History

History
97 lines (63 loc) · 4.43 KB

timeline.md

File metadata and controls

97 lines (63 loc) · 4.43 KB
Raw
raw true
title Timeline
description Lays its entries along a rail with a marker each, on one side, or on alternate sides of a centred rail when it is wide.
nav_group Grids and Rows
nav_order 6

Timeline

Lays its entries along a rail with a marker each, on one side, or on alternate sides of a centred rail when it is wide.

Example

<iframe title="Timeline, live" srcdoc="<base href="/yeti/"><link rel="stylesheet" href="/yeti/yeti.css"><script type="module" src="/yeti/yeti.js"></script><body style="margin:0;padding:var(--yeti-space-md)"><ol class="timeline" data-alternate role="list"> <li><time datetime="2026-09-12">12 September</time><h3>The plan</h3><p>Twelve layouts on paper.</p></li> <li><time datetime="2026-09-13">13 September</time><h3>The layouts</h3><p>Fifteen of them, in the browser.</p></li> <li><time datetime="2026-09-14">14 September</time><h3>The components</h3><p>Eight, and two themes.</p></li> </ol>"></iframe>
View Code 
<ol class="timeline" data-alternate role="list">
	<li><time datetime="2026-09-12">12 September</time><h3>The plan</h3><p>Twelve layouts on paper.</p></li>
	<li><time datetime="2026-09-13">13 September</time><h3>The layouts</h3><p>Fifteen of them, in the browser.</p></li>
	<li><time datetime="2026-09-14">14 September</time><h3>The components</h3><p>Eight, and two themes.</p></li>
</ol>

When to use it

A history, a changelog, the steps of a process, a schedule: entries in order along a line. It is an ordered list with a rail, so it reads as a list and looks like a timeline.

How it works

The list is a column of entries at the gap, with a rail down its start edge and a marker on the rail beside each entry. Add data-alternate and, once the list's content box is at least lg wide, the rail moves to the centre and the entries take turns on either side of it, markers still on the rail; narrower, they fall back to one side. The switch is the list's own width, so a timeline in a sidebar stays single-sided while the same one across a page alternates.

<ol class="timeline" data-gap="md" role="list">
	<li><time datetime="2026-01-01">January</time><p>Started.</p></li>
	<li><time datetime="2026-06-01">June</time><p>Shipped.</p></li>
</ol>

Why this name

It is a line of time. Foundation 6 had nothing for it; people reached for a snippet and a breakpoint.

Attributes

Attribute Type Values Default Description
data-gap enum none, xs, sm, md, lg, xl, 2xl, 3xl, xs-sm, xs-md, xs-lg, xs-xl, xs-2xl, xs-3xl, sm-md, sm-lg, sm-xl, sm-2xl, sm-3xl, md-lg, md-xl, md-2xl, md-3xl, lg-xl, lg-2xl, lg-3xl, xl-2xl, xl-3xl, 2xl-3xl lg Space between entries.
data-alternate boolean Put entries on alternate sides of a centred rail once the list is wide enough.

Children

  • > li: at least 2. The entries, in order. Put a time, a heading, and text inside each.

Tokens

Token Description
--yeti-space-lg The default gap, and the room between the rail and the entries.
--yeti-color-border-strong The rail and the markers.
Internal tokens (may change between minor versions)
  • --_yeti-gap

Accessibility

  • Use an ordered list, so the sequence is announced, and a time element with datetime in each entry. The rail and markers are decorative. Give the ol role="list": removing the list markers removes the list semantics in some engines.

Browser support

  • Used without guards: container size queries, logical inset properties
  • Behind @supports: nothing

JavaScript

None. This component is CSS only.

Available since 7.0.0.