Timeline

Horizontal or vertical sequence of events. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• timeline, timeline--vertical, timeline-item, timeline-start, timeline-middle, timeline-end, timeline-box

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<ol class="timeline timeline--vertical" aria-label="Project history">
  <li class="timeline-item">
    <time class="timeline-start" datetime="2026-09-01">1 September</time>
    <span class="timeline-middle" aria-hidden="true"></span>
    <div class="timeline-end">Project launched</div>
  </li>
</ol>

Variants and composition

timeline–vertical stacks event items. timeline-start/middle/end place date, marker, and detail; timeline-box frames an event.

Keep timeline-item directly under the timeline, and its date, marker, detail, and optional hr connectors direct under the item. A conditional modifier such as timeline--vertical@md affects those direct parts and leaves nested timelines independent. Utilities can override part layout; connector hr rules or group/peer selectors may need matching specificity or an explicit ! override.

Behavior and accessibility

Use an ordered list for chronological events. Horizontal overflow needs a named focusable region; layout must preserve reading order on narrow screens.

Reference

See the interactive Storybook specimen ↗. Continue to Toast or return to the Official preset overview.