Timeline

cmp-timeline turns a plain <ol> into a connected rail with a small dot per item — no numbered badge, no bordered panel. Use it for content where the sequence already carries its own meaningful label, like a year or a date, so a “1, 2, 3, 4” badge would only compete with that label instead of adding information. For a numbered procedure or set of steps where the position itself is the thing being communicated, use Stepper instead.

Basic usage

University history

1. 1785 — The Georgia legislature charters the University of Georgia, the first public university in the United States.
2. 1801 — Classes begin at the newly founded Franklin College.
3. 1804 — The University's first class of students graduates.
4. 1961 — Hamilton Holmes and Charlayne Hunter enroll, desegregating the University.

<h3>University history</h3>
<ol class="cmp-timeline" role="list">
  <li>
    1785 — The Georgia legislature charters the University of Georgia, the first
    public university in the United States.
  </li>
  <li>1801 — Classes begin at the newly founded Franklin College.</li>
  <li>1804 — The University&#39;s first class of students graduates.</li>
  <li>
    1961 — Hamilton Holmes and Charlayne Hunter enroll, desegregating the
    University.
  </li>
</ol>

Color modifiers

Add a color modifier to change the dot and rail color. These reuse the same brand names already used by util-background-* and cmp-stepper.

Olympic variant

1. First item.
2. Second item.

Sanford variant

1. First item.
2. Second item.

<h3>Olympic variant</h3>
<ol class="cmp-timeline cmp-timeline--olympic" role="list">
  <li>First item.</li>
  <li>Second item.</li>
</ol>
<h3>Sanford variant</h3>
<ol class="cmp-timeline cmp-timeline--sanford" role="list">
  <li>First item.</li>
  <li>Second item.</li>
</ol>

Size modifiers

Add cmp-timeline--sm or cmp-timeline--lg to shrink or enlarge the dot. The rail and content spacing rescale automatically.

Large size

1. First item.
2. Second item.

<h3>Large size</h3>
<ol class="cmp-timeline cmp-timeline--lg" role="list">
  <li>First item.</li>
  <li>Second item.</li>
</ol>

Horizontal orientation

Add cmp-timeline--horizontal to lay items out in a row instead of stacked, with the dot above each item instead of beside it. Below the sm breakpoint (30rem / 480px) it falls back to the default vertical layout automatically.

University history

1. 1785 — Chartered
2. 1801 — Classes begin
3. 1804 — First class graduates
4. 1961 — Desegregated

<h3>University history</h3>
<ol class="cmp-timeline cmp-timeline--horizontal" role="list">
  <li>1785 — Chartered</li>
  <li>1801 — Classes begin</li>
  <li>1804 — First class graduates</li>
  <li>1961 — Desegregated</li>
</ol>

Combining modifiers

Color, size, and orientation modifiers are independent classes, so any combination is valid.

Large, Athens, horizontal

1. First item.
2. Second item.

<h3>Large, Athens, horizontal</h3>
<ol
  class="cmp-timeline cmp-timeline--athens cmp-timeline--lg cmp-timeline--horizontal"
  role="list"
>
  <li>First item.</li>
  <li>Second item.</li>
</ol>

Structure

Element	Classes	Purpose
List	.cmp-timeline	Container — sets up the connecting rail
Item	Plain <li>	No class needed — the dot is drawn by the component itself
Color modifier	.cmp-timeline--<color>, e.g. --olympic, --sanford	Recolors the dot and rail
Size modifier	.cmp-timeline--sm, .cmp-timeline--lg	Shrinks or enlarges the dot; everything else rescales with it
Orientation modifier	.cmp-timeline--horizontal	Lays items out in a row instead of stacked; falls back to vertical below the sm breakpoint

Accessibility

• Sequence is conveyed natively by the semantic <ol>/<li> structure. Unlike Stepper, the dot carries no number at all — it’s a purely visual marker, so there’s nothing for assistive technology to miss or double-announce.
• If a heading sits above the list, that gives assistive technology enough context on its own; no extra label is needed. Only pass the label prop, which becomes the <ol>’s aria-label, when there is no heading nearby.
• Do not add dot or icon <div>s inside the <li> — that markup is not needed and will visually conflict with this component’s own generated dot.