General

Timeline

New

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

Displays a list of events in chronological order.

Usage#

app.component.ts

import { WDS_TIMELINE } from '@wds/angular/timeline';

Put wds-timeline-item elements in wds-timeline, newest or oldest first. Each item has a heading, a date and content in the default slot. Name the timeline with aria-label.

Examples#

Default#

A dot for each event, the title, the date (datetime gives the <time> element a machine-readable date) and a description.

Number field, table and timeline components.

Stepper and scroll area.

Tooltip, popover and hover card.

Show code

timeline-default.ts

import { Component } from '@angular/core';
import { WdsTimelineComponent, WdsTimelineItemComponent } from '@wds/angular/timeline';

@Component({
  selector: 'app-timeline-default-demo',
  imports: [WdsTimelineComponent, WdsTimelineItemComponent],
  template: `
    <wds-timeline class="w-full max-w-md" aria-label="Release history">
      <wds-timeline-item heading="Version 2.4 released" date="Sep 28, 2026" datetime="2026-09-28">
        Number field, table and timeline components.
      </wds-timeline-item>
      <wds-timeline-item heading="Version 2.3 released" date="Sep 14, 2026" datetime="2026-09-14">
        Stepper and scroll area.
      </wds-timeline-item>
      <wds-timeline-item heading="Version 2.2 released" date="Aug 30, 2026" datetime="2026-08-30">
        Tooltip, popover and hover card.
      </wds-timeline-item>
    </wds-timeline>
  `,
})
export class TimelineDefaultDemo {}

Progress#

value marks how far the process has got: earlier items are completed, the item at value is the current one (aria-current="step"), later ones are pending.

We received your order #48213.

Your items are packed and ready to ship.

The parcel is on its way to Warsaw.

Expected on Oct 3.

Show code

timeline-progress.ts

import { Component } from '@angular/core';
import { WdsTimelineComponent, WdsTimelineItemComponent } from '@wds/angular/timeline';

@Component({
  selector: 'app-timeline-progress-demo',
  imports: [WdsTimelineComponent, WdsTimelineItemComponent],
  template: `
    <wds-timeline value="3" class="w-full max-w-md" aria-label="Order status">
      <wds-timeline-item heading="Order placed" date="Oct 1, 9:12">We received your order #48213.</wds-timeline-item>
      <wds-timeline-item heading="Packed" date="Oct 1, 15:40">Your items are packed and ready to ship.</wds-timeline-item>
      <wds-timeline-item heading="In transit" date="Oct 2, 8:05">The parcel is on its way to Warsaw.</wds-timeline-item>
      <wds-timeline-item heading="Out for delivery">Expected on Oct 3.</wds-timeline-item>
      <wds-timeline-item heading="Delivered"></wds-timeline-item>
    </wds-timeline>
  `,
})
export class TimelineProgressDemo {}

Icons#

An icon in the icon slot shows in a circle; all markers then line up on one axis.

Mira Stone wants to merge 3 commits into release.

Sana Qureshi was asked for a review.

“Looks good, one question about the focus ring.”

Sana Qureshi approved these changes.

Show code

timeline-icons.ts

import { Component } from '@angular/core';
import { WdsTimelineComponent, WdsTimelineItemComponent } from '@wds/angular/timeline';

@Component({
  selector: 'app-timeline-icons-demo',
  imports: [WdsTimelineComponent, WdsTimelineItemComponent],
  template: `
    <wds-timeline value="4" class="w-full max-w-md" aria-label="Pull request activity">
      <wds-timeline-item heading="Pull request opened" date="2 days ago">
        <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="18" cy="18" r="3" /><circle cx="6" cy="6" r="3" /><path d="M6 21V9a9 9 0 0 0 9 9" /></svg>
        Mira Stone wants to merge 3 commits into <code class="font-mono text-xs">release</code>.
      </wds-timeline-item>
      <wds-timeline-item heading="Review requested" date="2 days ago">
        <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" /><circle cx="12" cy="12" r="3" /></svg>
        Sana Qureshi was asked for a review.
      </wds-timeline-item>
      <wds-timeline-item heading="Comment" date="Yesterday">
        <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z" /></svg>
        “Looks good, one question about the focus ring.”
      </wds-timeline-item>
      <wds-timeline-item heading="Approved" date="2 h ago">
        <svg slot="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5" /></svg>
        Sana Qureshi approved these changes.
      </wds-timeline-item>
    </wds-timeline>
  `,
})
export class TimelineIconsDemo {}

Horizontal#

orientation="horizontal" puts the items in a row with the content below the line.

Interviews and research.

Prototypes and tests.

Development and QA.

Rollout to all users.

Show code

timeline-horizontal.ts

import { Component } from '@angular/core';
import { WdsTimelineComponent, WdsTimelineItemComponent } from '@wds/angular/timeline';

@Component({
  selector: 'app-timeline-horizontal-demo',
  imports: [WdsTimelineComponent, WdsTimelineItemComponent],
  template: `
    <wds-timeline orientation="horizontal" value="2" class="w-full max-w-2xl" aria-label="Project plan">
      <wds-timeline-item heading="Discovery" date="Q1">Interviews and research.</wds-timeline-item>
      <wds-timeline-item heading="Design" date="Q2">Prototypes and tests.</wds-timeline-item>
      <wds-timeline-item heading="Build" date="Q3">Development and QA.</wds-timeline-item>
      <wds-timeline-item heading="Launch" date="Q4">Rollout to all users.</wds-timeline-item>
    </wds-timeline>
  `,
})
export class TimelineHorizontalDemo {}

Status colors#

--wds-timeline-indicator-color on an item sets the color of its marker, e.g. for success or failure. Say the status in the text too.

Build #1289 · all checks passed

Build #1288 · health check timed out

Build #1288

Show code

timeline-status.ts

import { Component } from '@angular/core';
import { WdsTimelineComponent, WdsTimelineItemComponent } from '@wds/angular/timeline';

@Component({
  selector: 'app-timeline-status-demo',
  imports: [WdsTimelineComponent, WdsTimelineItemComponent],
  template: `
    <wds-timeline class="w-full max-w-md" aria-label="Deployments">
      <wds-timeline-item class="[--wds-timeline-indicator-color:var(--color-green-600)]" heading="Deployed to production" date="12:40">
        Build #1289 · all checks passed
      </wds-timeline-item>
      <wds-timeline-item class="[--wds-timeline-indicator-color:var(--wds-destructive)]" heading="Deployment failed" date="11:58">
        Build #1288 · health check timed out
      </wds-timeline-item>
      <wds-timeline-item heading="Deployed to staging" date="11:20">Build #1288</wds-timeline-item>
    </wds-timeline>
  `,
})
export class TimelineStatusDemo {}

Rich content#

The title slot takes any content (here an avatar), and the default slot can hold a card.

Mira Stone upgraded the plan

Team → Business$480 / month

Sana Qureshi added 12 seats

Ivo Vidal created the workspace

Show code

timeline-rich-content.ts

import { Component } from '@angular/core';
import { WdsTimelineComponent, WdsTimelineItemComponent } from '@wds/angular/timeline';
import { WdsAvatarComponent } from '@wds/angular/avatar';

@Component({
  selector: 'app-timeline-rich-content-demo',
  imports: [WdsTimelineComponent, WdsTimelineItemComponent, WdsAvatarComponent],
  template: `
    <wds-timeline class="w-full max-w-md" aria-label="Customer activity">
      <wds-timeline-item date="Today, 10:24">
        <div slot="title" class="flex items-center gap-2">
          <wds-avatar size="sm" alt="">MS</wds-avatar>
          <span>Mira Stone upgraded the plan</span>
        </div>
        <div class="mt-2 rounded-lg border border-border p-3 text-foreground">
          <div class="flex justify-between"><span>Team → Business</span><span class="tabular-nums">$480 / month</span></div>
        </div>
      </wds-timeline-item>
      <wds-timeline-item date="Yesterday, 16:02">
        <div slot="title" class="flex items-center gap-2">
          <wds-avatar size="sm" alt="">SQ</wds-avatar>
          <span>Sana Qureshi added 12 seats</span>
        </div>
      </wds-timeline-item>
      <wds-timeline-item date="Sep 30">
        <div slot="title" class="flex items-center gap-2">
          <wds-avatar size="sm" alt="">IV</wds-avatar>
          <span>Ivo Vidal created the workspace</span>
        </div>
      </wds-timeline-item>
    </wds-timeline>
  `,
})
export class TimelineRichContentDemo {}

API References#

wds-timeline#

A list of events in time order (an activity log, a changelog, the history of an order), each with a marker on a line, a title, a date and content. value marks how far the timeline has got: items before it are completed and the item at value is the current one. Without value all items look the same.

Attributes

Attribute	Type	Default	Description
value	number	0	The current item, counted from 1: earlier items are completed. 0 (default) marks no progress.
orientation	WdsTimelineOrientation	'vertical'	Items in a column (default) or in a row.

Slots

Slot	Description
(default)	`wds-timeline-item` elements.

CSS custom properties

Property	Description
--wds-timeline-indicator-size	Size of the markers with an icon (default 24px; a dot is 8px).
--wds-timeline-gap	Space between items (default 24px).

wds-timeline-item#

One event of wds-timeline: a marker (a dot, or your icon in a circle) on the line, a title, a date and content. The timeline sets its state from its value.

Attributes

Attribute	Type	Default	Description
heading	string	''	Title of the event.
date	string	''	Date or time of the event, as shown (e.g. `Sep 28` or `2 h ago`).
datetime	string \| undefined		Machine-readable date for the `<time>` element (e.g. `2026-09-28`).

Slots

Slot	Description
(default)	Content under the title: a description, details, a card.
icon	An icon in the marker instead of the dot.
title	Title (instead of `heading`).
date	Date (instead of `date`).

CSS parts (::part)

Part	Description
indicator	The marker (dot or circle with the icon).
separator	The line to the next item.
content	Title, date and content.
title	The title.
date	The date (a `<time>` element).

CSS custom properties

Property	Description
--wds-timeline-indicator-color	Color of the marker, e.g. a status color for one item.

Accessibility#

The timeline is a list and each item a listitem, so screen readers announce the number of events. Name the timeline with aria-label.

The markers and the line are decorative. The current item with value has aria-current="step"; completed and pending items differ only by color, so say the state in the text when it matters.

The date is a <time> element; datetime gives it a machine-readable value.

Keyboard support#

The timeline has no keyboard interaction of its own; links and buttons in the items are in the tab order.

Usage#

Examples#

Default#

Progress#

Icons#

Horizontal#

Status colors#

Rich content#

API References#

wds-timeline#

Attributes

Slots

CSS custom properties

wds-timeline-item#

Attributes

Slots

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#