Timeline

<afp-timeline>

Since 1.4.0

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A timeline component to display a series of events or milestones in chronological order.

Week 1

Planning & requirements

Week 2

Design

<afp-timeline>
  <afp-timeline-item>
    <b>Week 1</b>
    <p>Planning & requirements</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 2</b>
    <p>Design</p>   
  </afp-timeline-item>
</afp-timeline>

<afp-timeline>
  <afp-timeline-item>
    <b>Week 1</b>
    <p>Planning & requirements</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 2</b>
    <p>Design</p>   
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline>
  <AfpTimelineItem>
    <b>Week 1</b>
    <p>Planning & requirements</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 2</b>
    <p>Design</p>   
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline>
  <AfpTimelineItem>
    <b>Week 1</b>
    <p>Planning & requirements</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 2</b>
    <p>Design</p>   
  </AfpTimelineItem>
</AfpTimeline>

Examples #

Orientation #

Use the orientation attribute to specify the direction of the timeline.

Week 1

Project kickoff

Week 2

Requirement analysis

Week 3

Implementation

Week 4

Review & testing

Week 5

Release

<afp-timeline orientation="horizontal">
  <afp-timeline-item>
    <b>Week 1</b>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 2</b>
    <p>Requirement analysis</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 3</b>
    <p>Implementation</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 4</b>
    <p>Review & testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 5</b>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<afp-timeline [orientation]="'horizontal'">
  <afp-timeline-item>
    <b>Week 1</b>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 2</b>
    <p>Requirement analysis</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 3</b>
    <p>Implementation</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 4</b>
    <p>Review & testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 5</b>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline orientation="horizontal">
  <AfpTimelineItem>
    <b>Week 1</b>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 2</b>
    <p>Requirement analysis</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 3</b>
    <p>Implementation</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 4</b>
    <p>Review & testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 5</b>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline :orientation="'horizontal'">
  <AfpTimelineItem>
    <b>Week 1</b>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 2</b>
    <p>Requirement analysis</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 3</b>
    <p>Implementation</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 4</b>
    <p>Review & testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 5</b>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

Placement #

Use the placement attribute to define the position of timeline items.

Week 1

Project kickoff

Week 2

Requirement analysis

Week 3

Implementation

Week 4

Review & testing

Week 5

Release

<afp-timeline placement="left">
  <afp-timeline-item>
    <b>Week 1</b>
    <p>Project kickoff</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 2</b>
    <p>Requirement analysis</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 3</b>
    <p>Implementation</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 4</b>
    <p>Review & testing</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 5</b>
    <p>Release</p>   
  </afp-timeline-item>
</afp-timeline>

<afp-timeline [placement]="'left'">
  <afp-timeline-item>
    <b>Week 1</b>
    <p>Project kickoff</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 2</b>
    <p>Requirement analysis</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 3</b>
    <p>Implementation</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 4</b>
    <p>Review & testing</p>   
  </afp-timeline-item>
  <afp-timeline-item>
    <b>Week 5</b>
    <p>Release</p>   
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline placement="left">
  <AfpTimelineItem>
    <b>Week 1</b>
    <p>Project kickoff</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 2</b>
    <p>Requirement analysis</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 3</b>
    <p>Implementation</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 4</b>
    <p>Review & testing</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 5</b>
    <p>Release</p>   
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline :placement="'left'">
  <AfpTimelineItem>
    <b>Week 1</b>
    <p>Project kickoff</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 2</b>
    <p>Requirement analysis</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 3</b>
    <p>Implementation</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 4</b>
    <p>Review & testing</p>   
  </AfpTimelineItem>
  <AfpTimelineItem>
    <b>Week 5</b>
    <p>Release</p>   
  </AfpTimelineItem>
</AfpTimeline>

Alternating #

Use the alternating attribute to display timeline items on alternating sides of the timeline.

Project kickoff

Planning

Development

Testing

Release

<afp-timeline alternating>
  <afp-timeline-item>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<afp-timeline alternating>
  <afp-timeline-item>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline alternating>
  <AfpTimelineItem>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline alternating>
  <AfpTimelineItem>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

Horizontal orientation when timeline items are alternating.

Project kickoff

Planning

Development

Testing

Release

<afp-timeline orientation="horizontal" alternating>
  <afp-timeline-item>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<afp-timeline [orientation]="'horizontal'" alternating>
  <afp-timeline-item>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline orientation="horizontal" alternating>
  <AfpTimelineItem>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline :orientation="'horizontal'" alternating>
  <AfpTimelineItem>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

Alignment #

Use the alignment attribute to define the alignment within the container.

Left (Start) #

The start value aligns the timeline to the left when the timeline is oriented vertically.

Project kickoff

Jan 01, 2026

Planning

Jan 15, 2026

Development

Jan 30, 2026

Testing

Feb 15, 2026

Release

Feb 30, 2026

<afp-timeline alignment="start">
  <afp-timeline-item>
    <p>Project kickoff</p>
    <afp-badge appearance="filled" slot="opposite-content">Jan 01, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
    <afp-badge appearance="filled" slot="opposite-content">Jan 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
    <afp-badge appearance="filled" slot="opposite-content">Jan 30, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
    <afp-badge appearance="filled" slot="opposite-content">Feb 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
    <afp-badge appearance="filled" slot="opposite-content">Feb 30, 2026</afp-badge>
  </afp-timeline-item>
</afp-timeline>

<afp-timeline [alignment]="'start'">
  <afp-timeline-item>
    <p>Project kickoff</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Jan 01, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Jan 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Jan 30, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Feb 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Feb 30, 2026</afp-badge>
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline alignment="start">
  <AfpTimelineItem>
    <p>Project kickoff</p>
    <AfpBadge appearance="filled" slot="opposite-content">Jan 01, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
    <AfpBadge appearance="filled" slot="opposite-content">Jan 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
    <AfpBadge appearance="filled" slot="opposite-content">Jan 30, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
    <AfpBadge appearance="filled" slot="opposite-content">Feb 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
    <AfpBadge appearance="filled" slot="opposite-content">Feb 30, 2026</AfpBadge>
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline :alignment="'start'">
  <AfpTimelineItem>
    <p>Project kickoff</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Jan 01, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Jan 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Jan 30, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Feb 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Feb 30, 2026</AfpBadge>
  </AfpTimelineItem>
</AfpTimeline>

Left alignment when no left-side timeline items exist.

Project kickoff

Planning

Development

Testing

Release

<afp-timeline alignment="start">
  <afp-timeline-item>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<afp-timeline [alignment]="'start'">
  <afp-timeline-item>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline alignment="start">
  <AfpTimelineItem>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline :alignment="'start'">
  <AfpTimelineItem>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

Center #

The center value aligns the timeline in the middle when the timeline is oriented vertically.

Project kickoff

Jan 01, 2026

Planning

Jan 15, 2026

Development

Jan 30, 2026

Testing

Feb 15, 2026

Release

Feb 30, 2026

<afp-timeline alignment="center">
  <afp-timeline-item>
    <p>Project kickoff</p>
    <afp-badge appearance="filled" slot="opposite-content">Jan 01, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
    <afp-badge appearance="filled" slot="opposite-content">Jan 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
    <afp-badge appearance="filled" slot="opposite-content">Jan 30, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
    <afp-badge appearance="filled" slot="opposite-content">Feb 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
    <afp-badge appearance="filled" slot="opposite-content">Feb 30, 2026</afp-badge>
  </afp-timeline-item>
</afp-timeline>

<afp-timeline [alignment]="'center'">
  <afp-timeline-item>
    <p>Project kickoff</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Jan 01, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Jan 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Jan 30, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Feb 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Feb 30, 2026</afp-badge>
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline alignment="center">
  <AfpTimelineItem>
    <p>Project kickoff</p>
    <AfpBadge appearance="filled" slot="opposite-content">Jan 01, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
    <AfpBadge appearance="filled" slot="opposite-content">Jan 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
    <AfpBadge appearance="filled" slot="opposite-content">Jan 30, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
    <AfpBadge appearance="filled" slot="opposite-content">Feb 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
    <AfpBadge appearance="filled" slot="opposite-content">Feb 30, 2026</AfpBadge>
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline :alignment="'center'">
  <AfpTimelineItem>
    <p>Project kickoff</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Jan 01, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Jan 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Jan 30, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Feb 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Feb 30, 2026</AfpBadge>
  </AfpTimelineItem>
</AfpTimeline>

Right (End) #

The end value aligns the timeline in the right when the timeline is oriented vertically.

Project kickoff

Jan 01, 2026

Planning

Jan 15, 2026

Development

Jan 30, 2026

Testing

Feb 15, 2026

Release

Feb 30, 2026

<afp-timeline alignment="end">
  <afp-timeline-item>
    <p>Project kickoff</p>
    <afp-badge appearance="filled" slot="opposite-content">Jan 01, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
    <afp-badge appearance="filled" slot="opposite-content">Jan 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
    <afp-badge appearance="filled" slot="opposite-content">Jan 30, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
    <afp-badge appearance="filled" slot="opposite-content">Feb 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
    <afp-badge appearance="filled" slot="opposite-content">Feb 30, 2026</afp-badge>
  </afp-timeline-item>
</afp-timeline>

<afp-timeline [alignment]="'end'">
  <afp-timeline-item>
    <p>Project kickoff</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Jan 01, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Jan 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Jan 30, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Feb 15, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
    <afp-badge [appearance]="'filled'" [slot]="'opposite-content'">Feb 30, 2026</afp-badge>
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline alignment="end">
  <AfpTimelineItem>
    <p>Project kickoff</p>
    <AfpBadge appearance="filled" slot="opposite-content">Jan 01, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
    <AfpBadge appearance="filled" slot="opposite-content">Jan 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
    <AfpBadge appearance="filled" slot="opposite-content">Jan 30, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
    <AfpBadge appearance="filled" slot="opposite-content">Feb 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
    <AfpBadge appearance="filled" slot="opposite-content">Feb 30, 2026</AfpBadge>
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline :alignment="'end'">
  <AfpTimelineItem>
    <p>Project kickoff</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Jan 01, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Jan 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Jan 30, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Feb 15, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
    <AfpBadge :appearance="'filled'" :slot="'opposite-content'">Feb 30, 2026</AfpBadge>
  </AfpTimelineItem>
</AfpTimeline>

Right alignment when no right-side timeline items exist.

Project kickoff

Planning

Development

Testing

Release

<afp-timeline alignment="end" placement="left">
  <afp-timeline-item>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<afp-timeline [alignment]="'end'" [placement]="'left'">
  <afp-timeline-item>
    <p>Project kickoff</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Planning</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Development</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Testing</p>
  </afp-timeline-item>
  <afp-timeline-item>
    <p>Release</p>
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline alignment="end" placement="left">
  <AfpTimelineItem>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline :alignment="'end'" :placement="'left'">
  <AfpTimelineItem>
    <p>Project kickoff</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Planning</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Development</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Testing</p>
  </AfpTimelineItem>
  <AfpTimelineItem>
    <p>Release</p>
  </AfpTimelineItem>
</AfpTimeline>

Customization #

Use the attributes of the timeline-item component and other related components to customize the timeline.

Jan 10, 2026

Application

Application submitted.

Jan 12, 2026 Document Upload

Required verification documents uploaded.

See uploaded documents

Review

Your application is being reviewed by the officer.

Disbursement

<afp-timeline>
  <afp-timeline-item variant="success" inheritmarkercolor>
    <afp-icon slot="marker" name="check-circle-fill"></afp-icon>
    <p style="color:grey" slot="opposite-content">Jan 10, 2026</p>
    <b>Application</b>
    <p style="color:grey">Application submitted.</p>
  </afp-timeline-item>

  <afp-timeline-item variant="success">
    <afp-icon slot="marker" name="check-circle-fill"></afp-icon>
    <span style="color:grey" slot="opposite-content">Jan 12, 2026</span>
    <b>Document Upload</b>
    <p style="color:grey">Required verification documents uploaded.</p>
    <afp-button variant="neutral" appearance="filled"> See uploaded documents</afp-button>
  </afp-timeline-item>

  <afp-timeline-item disabled>
    <afp-spinner slot="marker" style="font-size: 1.5rem; --afp-spinner-indicator-color: blue;"></afp-spinner>
    <b>Review</b>
    <p style="color:grey">Your application is being reviewed by the officer.</p>
  </afp-timeline-item>

  <afp-timeline-item>
    <afp-icon slot="marker" name="cash-stack"></afp-icon>
    <b>Disbursement</b>
  </afp-timeline-item>
</afp-timeline>

<afp-timeline>
  <afp-timeline-item [variant]="'success'" inheritmarkercolor>
    <afp-icon [slot]="'marker'" [name]="'check-circle-fill'"></afp-icon>
    <p style="color:grey" slot="opposite-content">Jan 10, 2026</p>
    <b>Application</b>
    <p style="color:grey">Application submitted.</p>
  </afp-timeline-item>

  <afp-timeline-item [variant]="'success'">
    <afp-icon [slot]="'marker'" [name]="'check-circle-fill'"></afp-icon>
    <span style="color:grey" slot="opposite-content">Jan 12, 2026</span>
    <b>Document Upload</b>
    <p style="color:grey">Required verification documents uploaded.</p>
    <afp-button [variant]="'neutral'" [appearance]="'filled'"> See uploaded documents</afp-button>
  </afp-timeline-item>

  <afp-timeline-item disabled>
    <afp-spinner [slot]="'marker'" [style]="'font-size: 1.5rem; --afp-spinner-indicator-color: blue;'"></afp-spinner>
    <b>Review</b>
    <p style="color:grey">Your application is being reviewed by the officer.</p>
  </afp-timeline-item>

  <afp-timeline-item>
    <afp-icon [slot]="'marker'" [name]="'cash-stack'"></afp-icon>
    <b>Disbursement</b>
  </afp-timeline-item>
</afp-timeline>

<AfpTimeline>
  <AfpTimelineItem variant="success" inheritmarkercolor>
    <AfpIcon slot="marker" name="check-circle-fill"></AfpIcon>
    <p style="color:grey" slot="opposite-content">Jan 10, 2026</p>
    <b>Application</b>
    <p style="color:grey">Application submitted.</p>
  </AfpTimelineItem>

  <AfpTimelineItem variant="success">
    <AfpIcon slot="marker" name="check-circle-fill"></AfpIcon>
    <span style="color:grey" slot="opposite-content">Jan 12, 2026</span>
    <b>Document Upload</b>
    <p style="color:grey">Required verification documents uploaded.</p>
    <AfpButton variant="neutral" appearance="filled"> See uploaded documents</AfpButton>
  </AfpTimelineItem>

  <AfpTimelineItem disabled>
    <AfpSpinner slot="marker" style="font-size: 1.5rem; --afp-spinner-indicator-color: blue;"></AfpSpinner>
    <b>Review</b>
    <p style="color:grey">Your application is being reviewed by the officer.</p>
  </AfpTimelineItem>

  <AfpTimelineItem>
    <AfpIcon slot="marker" name="cash-stack"></AfpIcon>
    <b>Disbursement</b>
  </AfpTimelineItem>
</AfpTimeline>

<AfpTimeline>
  <AfpTimelineItem :variant="'success'" inheritmarkercolor>
    <AfpIcon :slot="'marker'" :name="'check-circle-fill'"></AfpIcon>
    <p style="color:grey" slot="opposite-content">Jan 10, 2026</p>
    <b>Application</b>
    <p style="color:grey">Application submitted.</p>
  </AfpTimelineItem>

  <AfpTimelineItem :variant="'success'">
    <AfpIcon :slot="'marker'" :name="'check-circle-fill'"></AfpIcon>
    <span style="color:grey" slot="opposite-content">Jan 12, 2026</span>
    <b>Document Upload</b>
    <p style="color:grey">Required verification documents uploaded.</p>
    <AfpButton :variant="'neutral'" :appearance="'filled'"> See uploaded documents</AfpButton>
  </AfpTimelineItem>

  <AfpTimelineItem disabled>
    <AfpSpinner :slot="'marker'" :style="'font-size: 1.5rem; --afp-spinner-indicator-color: blue;'"></AfpSpinner>
    <b>Review</b>
    <p style="color:grey">Your application is being reviewed by the officer.</p>
  </AfpTimelineItem>

  <AfpTimelineItem>
    <AfpIcon :slot="'marker'" :name="'cash-stack'"></AfpIcon>
    <b>Disbursement</b>
  </AfpTimelineItem>
</AfpTimeline>

Properties

Learn more about properties.

Name Description Reflects

disabled

Disabled state of the timeline

Type boolean

Default false

alternating

Display the timeline items on alternating side.

Type boolean

Default false

size

Size of the timeline

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

placement

Placement of the timeline items. For vertical orientation, allowed values are `left` and `right`. For horizontal orientation, allowed values are `top` and `bottom`.

Type

AfpPlacement

Name	Description
`TOP`	Top placement.
`RIGHT`	Right placement.
`BOTTOM`	Bottom placement.
`LEFT`	Left placement.
`TOP_START`	Top-start placement.
`TOP_END`	Top-end placement.
`RIGHT_START`	Right-start placement.
`RIGHT_END`	Right-end placement.
`BOTTOM_START`	Bottom-start placement.
`BOTTOM_END`	Bottom-end placement.
`LEFT_START`	Left-start placement.
`LEFT_END`	Left-end placement.

AfpPlacement

alignment

Alignment of the timeline.

Type

AfpAlignment

Name	Description
`CENTER`	Centers content along the axis.
`START`	Aligns content to the beginning of the axis.
`END`	Aligns content to the end of the axis.

AfpAlignment

Default AfpAlignment.START

orientation

Orientation of the timeline.

Type

AfpOrientation

Name	Description
`HORIZONTAL`	Horizontal layout orientation.
`VERTICAL`	Vertical layout orientation.

AfpOrientation

Default AfpOrientation.VERTICAL

Slots

Learn more about slots.

Name	Description
`default`	The default slot for the timeline items.

Internationalization

Learn more about internationalization.

Key	Description
`timeline.aria-label`	The aria-label of the timeline.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The timeline's base wrapper.	`::part(base)`
`timeline`	The timeline container for the timeline items.	`::part(timeline)`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-timeline-item

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/timeline/timeline.js';