Data

Timeline

Events in order along a line — an order history, a release log, the steps of a process — vertical or horizontal, with content on one side, on both sides or alternating. The events are an ordered list for screen readers.

Features8

API

Theming

Basic

Each item of value is an event; the txTimelineContent template draws it. The empty opposite side keeps the line in the middle — fill it or narrow it as in the next examples.

Ordered
Processing
Shipped
Delivered

Alignment

align puts the content on the left (default), on the right, or swaps sides on every other event with alternate.

Left

Ordered
Processing
Shipped
Delivered

Right

Ordered
Processing
Shipped
Delivered

Alternate

Ordered
Processing
Shipped
Delivered

20 lines

<div class="grid">  <section>    <h3 id="alignment-left">Left</h3>    <tx-timeline ariaLabelledBy="alignment-left" [value]="events">      <ng-template txTimelineContent let-event>{{ event }}</ng-template>    </tx-timeline>  </section>  <section>    <h3 id="alignment-right">Right</h3>    <tx-timeline ariaLabelledBy="alignment-right" align="right" [value]="events">      <ng-template txTimelineContent let-event>{{ event }}</ng-template>    </tx-timeline>  </section>  <section>    <h3 id="alignment-alternate">Alternate</h3>    <tx-timeline ariaLabelledBy="alignment-alternate" align="alternate" [value]="events">      <ng-template txTimelineContent let-event>{{ event }}</ng-template>    </tx-timeline>  </section></div>

Opposite

txTimelineOpposite fills the other side of the line — a date or a time next to each event.

15/10/2026 10:30
Ordered
15/10/2026 14:00
Processing
15/10/2026 16:15
Shipped
16/10/2026 10:00
Delivered

6 lines

<tx-timeline ariaLabel="Order history" [value]="events">  <ng-template txTimelineOpposite let-event>    <span class="date">{{ event.date }}</span>  </ng-template>  <ng-template txTimelineContent let-event>{{ event.status }}</ng-template></tx-timeline>

Horizontal

layout="horizontal" lays the events out in a row. align keeps the line above the content (top, default), below it (bottom) or switches on every other event (alternate).

2023
2024
2025
2026

2023
2024
2025
2026

2023
2024
2025
2026

22 lines

<div class="rows">  <tx-timeline ariaLabel="Release plan, line above" layout="horizontal" [value]="events">    <ng-template txTimelineContent let-event>{{ event }}</ng-template>  </tx-timeline>  <tx-timeline    ariaLabel="Release plan, line below"    layout="horizontal"    align="bottom"    [value]="events"  >    <ng-template txTimelineContent let-event>{{ event }}</ng-template>  </tx-timeline>  <tx-timeline    ariaLabel="Release plan, alternating"    layout="horizontal"    align="alternate"    [value]="events"  >    <ng-template txTimelineContent let-event>{{ event }}</ng-template>    <ng-template txTimelineOpposite>&nbsp;</ng-template>  </tx-timeline></div>

Template

txTimelineMarker replaces the dot — here an icon in a circle of the event tone — and the content template draws a card for each event.

15/10 10:30
OrderedStep
Two items, paid by card.
15/10 14:00
ProcessingStep
Packed at the north warehouse.
15/10 16:15
ShippedStep
Handed to the courier, tracking sent.
16/10 10:00
DeliveredDone
Signed for at the front desk.

21 lines

<tx-timeline ariaLabel="Order history" align="alternate" [value]="events" [pt]="pt">  <ng-template txTimelineMarker let-event>    <span class="marker" [attr.data-tone]="event.tone" aria-hidden="true">      <tx-icon [name]="event.icon" />    </span>  </ng-template>  <ng-template txTimelineOpposite let-event>    <span class="date">{{ event.date }}</span>  </ng-template>  <ng-template txTimelineContent let-event>    <article class="card">      <header class="head">        <strong>{{ event.status }}</strong>        <tx-pill size="small" [tone]="event.tone">{{          event.tone === 'success' ? 'Done' : 'Step'        }}</tx-pill>      </header>      <p>{{ event.note }}</p>    </article>  </ng-template></tx-timeline>

Connector

txTimelineConnector draws the line from an event to the next one — solid after finished steps, dashed after the rest. pt narrows the empty opposite side so the line sits at the start.

Account created
Domain verified
Team invited
First project published

8 lines

<tx-timeline ariaLabel="Setup progress" [value]="steps" [pt]="pt">  <ng-template txTimelineConnector let-step>    <span class="line" [class.line--done]="step.done" aria-hidden="true"></span>  </ng-template>  <ng-template txTimelineContent let-step>    <span [class.muted]="!step.done">{{ step.title }}</span>  </ng-template></tx-timeline>

Design tokens

dt changes the marker, the line and the event height of one timeline.

Ordered
Processing
Shipped
Delivered

15 lines

<tx-timeline  ariaLabel="Order history"  [value]="events"  [dt]="{    event: { minHeight: '48px' },    eventMarker: {      size: '18px',      borderColor: 'var(--tx-primary-base)',      contentSize: '8px',    },    eventConnector: { color: 'var(--tx-primary-base)', size: '3px' },  }">  <ng-template txTimelineContent let-event>{{ event }}</ng-template></tx-timeline>

Pass through

pt adds classes and styles to the parts — here a fixed-width date column and more space under each release.

Nov 2026
2.4.0
Sep 2026
2.3.1
Aug 2026
2.3.0
May 2026
2.2.0

6 lines

<tx-timeline ariaLabel="Releases" [value]="releases" [pt]="pt">  <ng-template txTimelineOpposite let-release>{{ release.date }}</ng-template>  <ng-template txTimelineContent let-release>    <strong>{{ release.version }}</strong>  </ng-template></tx-timeline>