Timeline Item

<afp-timeline-item>

stable

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

A timeline item component for displaying a single event within a timeline.

Profile created

Your basic information has been saved.

<afp-timeline-item>
  <b>Profile created</b>
  <p>Your basic information has been saved.</p>
</afp-timeline-item>

<afp-timeline-item>
  <b>Profile created</b>
  <p>Your basic information has been saved.</p>
</afp-timeline-item>

<AfpTimelineItem>
  <b>Profile created</b>
  <p>Your basic information has been saved.</p>
</AfpTimelineItem>

<AfpTimelineItem>
  <b>Profile created</b>
  <p>Your basic information has been saved.</p>
</AfpTimelineItem>

Examples #

Shapes #

Use the shape attribute to define the shape of the timeline item.

Pill

Rounded

Soft

Square

<div class="afp-stack">
  <afp-timeline-item>Pill</afp-timeline-item>
  <afp-timeline-item shape="rounded">Rounded</afp-timeline-item>
  <afp-timeline-item shape="soft">Soft</afp-timeline-item>
  <afp-timeline-item shape="square">Square</afp-timeline-item>
</div>

<div class="afp-stack">
  <afp-timeline-item>Pill</afp-timeline-item>
  <afp-timeline-item [shape]="'rounded'">Rounded</afp-timeline-item>
  <afp-timeline-item [shape]="'soft'">Soft</afp-timeline-item>
  <afp-timeline-item [shape]="'square'">Square</afp-timeline-item>
</div>

<div class="afp-stack">
  <AfpTimelineItem>Pill</AfpTimelineItem>
  <AfpTimelineItem shape="rounded">Rounded</AfpTimelineItem>
  <AfpTimelineItem shape="soft">Soft</AfpTimelineItem>
  <AfpTimelineItem shape="square">Square</AfpTimelineItem>
</div>

<div class="afp-stack">
  <AfpTimelineItem>Pill</AfpTimelineItem>
  <AfpTimelineItem :shape="'rounded'">Rounded</AfpTimelineItem>
  <AfpTimelineItem :shape="'soft'">Soft</AfpTimelineItem>
  <AfpTimelineItem :shape="'square'">Square</AfpTimelineItem>
</div>

Sizes #

Use the size attribute to change a timeline item's size.

Small

Medium

Large

<div class="afp-stack">
  <afp-timeline-item size="small">Small</afp-timeline-item>
  <afp-timeline-item size="medium">Medium</afp-timeline-item>
  <afp-timeline-item size="large">Large</afp-timeline-item>
</div>

<div class="afp-stack">
  <afp-timeline-item [size]="'small'">Small</afp-timeline-item>
  <afp-timeline-item [size]="'medium'">Medium</afp-timeline-item>
  <afp-timeline-item [size]="'large'">Large</afp-timeline-item>
</div>

<div class="afp-stack">
  <AfpTimelineItem size="small">Small</AfpTimelineItem>
  <AfpTimelineItem size="medium">Medium</AfpTimelineItem>
  <AfpTimelineItem size="large">Large</AfpTimelineItem>
</div>

<div class="afp-stack">
  <AfpTimelineItem :size="'small'">Small</AfpTimelineItem>
  <AfpTimelineItem :size="'medium'">Medium</AfpTimelineItem>
  <AfpTimelineItem :size="'large'">Large</AfpTimelineItem>
</div>

Orientation #

Use the orientation attribute to specify the direction in which timeline items are displayed.

Horizontal Item 1

Horizontal Item 2

<div class="afp-grid">
  <afp-timeline-item orientation="horizontal">
      Horizontal Item 1
  </afp-timeline-item>
  <afp-timeline-item orientation="horizontal">
      Horizontal Item 2
  </afp-timeline-item>
</div>

<div class="afp-grid">
  <afp-timeline-item [orientation]="'horizontal'">
      Horizontal Item 1
  </afp-timeline-item>
  <afp-timeline-item [orientation]="'horizontal'">
      Horizontal Item 2
  </afp-timeline-item>
</div>

<div class="afp-grid">
  <AfpTimelineItem orientation="horizontal">
      Horizontal Item 1
  </AfpTimelineItem>
  <AfpTimelineItem orientation="horizontal">
      Horizontal Item 2
  </AfpTimelineItem>
</div>

<div class="afp-grid">
  <AfpTimelineItem :orientation="'horizontal'">
      Horizontal Item 1
  </AfpTimelineItem>
  <AfpTimelineItem :orientation="'horizontal'">
      Horizontal Item 2
  </AfpTimelineItem>
</div>

States #

Use the variant attribute to justify the state of the timeline item.

Default

Success

Error

Warning

<div class="afp-stack">
  <afp-timeline-item>Default</afp-timeline-item>
  <afp-timeline-item variant="success">Success</afp-timeline-item>
  <afp-timeline-item variant="error">Error</afp-timeline-item>
  <afp-timeline-item variant="warning">Warning</afp-timeline-item>
</div>

<div class="afp-stack">
  <afp-timeline-item>Default</afp-timeline-item>
  <afp-timeline-item [variant]="'success'">Success</afp-timeline-item>
  <afp-timeline-item [variant]="'error'">Error</afp-timeline-item>
  <afp-timeline-item [variant]="'warning'">Warning</afp-timeline-item>
</div>

<div class="afp-stack">
  <AfpTimelineItem>Default</AfpTimelineItem>
  <AfpTimelineItem variant="success">Success</AfpTimelineItem>
  <AfpTimelineItem variant="error">Error</AfpTimelineItem>
  <AfpTimelineItem variant="warning">Warning</AfpTimelineItem>
</div>

<div class="afp-stack">
  <AfpTimelineItem>Default</AfpTimelineItem>
  <AfpTimelineItem :variant="'success'">Success</AfpTimelineItem>
  <AfpTimelineItem :variant="'error'">Error</AfpTimelineItem>
  <AfpTimelineItem :variant="'warning'">Warning</AfpTimelineItem>
</div>

Use the inheritMarkerColor (inheritmarkercolor) attribute to display the connectors as the state defined.

Default

Success

Error

Warning

<div class="afp-stack">
  <afp-timeline-item>
      Default
  </afp-timeline-item>
  <afp-timeline-item variant="success" inheritmarkercolor>
      Success
  </afp-timeline-item>
  <afp-timeline-item variant="error" inheritmarkercolor>
      Error
  </afp-timeline-item>
  <afp-timeline-item variant="warning" inheritmarkercolor>
      Warning
  </afp-timeline-item>
</div>

<div class="afp-stack">
  <afp-timeline-item>
      Default
  </afp-timeline-item>
  <afp-timeline-item [variant]="'success'" inheritmarkercolor>
      Success
  </afp-timeline-item>
  <afp-timeline-item [variant]="'error'" inheritmarkercolor>
      Error
  </afp-timeline-item>
  <afp-timeline-item [variant]="'warning'" inheritmarkercolor>
      Warning
  </afp-timeline-item>
</div>

<div class="afp-stack">
  <AfpTimelineItem>
      Default
  </AfpTimelineItem>
  <AfpTimelineItem variant="success" inheritmarkercolor>
      Success
  </AfpTimelineItem>
  <AfpTimelineItem variant="error" inheritmarkercolor>
      Error
  </AfpTimelineItem>
  <AfpTimelineItem variant="warning" inheritmarkercolor>
      Warning
  </AfpTimelineItem>
</div>

<div class="afp-stack">
  <AfpTimelineItem>
      Default
  </AfpTimelineItem>
  <AfpTimelineItem :variant="'success'" inheritmarkercolor>
      Success
  </AfpTimelineItem>
  <AfpTimelineItem :variant="'error'" inheritmarkercolor>
      Error
  </AfpTimelineItem>
  <AfpTimelineItem :variant="'warning'" inheritmarkercolor>
      Warning
  </AfpTimelineItem>
</div>

Outlined #

Use the outlined attribute to display the timeline item markers outlined.

Default Outlined

Success Outlined

Error Outlined

Warning Outlined

<div class="afp-stack">
  <afp-timeline-item outlined>
      Default Outlined
  </afp-timeline-item>
  <afp-timeline-item variant="success" outlined>
      Success Outlined
  </afp-timeline-item>
  <afp-timeline-item variant="error" outlined>
      Error Outlined
  </afp-timeline-item>
  <afp-timeline-item variant="warning" outlined>
      Warning Outlined
  </afp-timeline-item>
</div>

<div class="afp-stack">
  <afp-timeline-item outlined>
      Default Outlined
  </afp-timeline-item>
  <afp-timeline-item [variant]="'success'" outlined>
      Success Outlined
  </afp-timeline-item>
  <afp-timeline-item [variant]="'error'" outlined>
      Error Outlined
  </afp-timeline-item>
  <afp-timeline-item [variant]="'warning'" outlined>
      Warning Outlined
  </afp-timeline-item>
</div>

<div class="afp-stack">
  <AfpTimelineItem outlined>
      Default Outlined
  </AfpTimelineItem>
  <AfpTimelineItem variant="success" outlined>
      Success Outlined
  </AfpTimelineItem>
  <AfpTimelineItem variant="error" outlined>
      Error Outlined
  </AfpTimelineItem>
  <AfpTimelineItem variant="warning" outlined>
      Warning Outlined
  </AfpTimelineItem>
</div>

<div class="afp-stack">
  <AfpTimelineItem outlined>
      Default Outlined
  </AfpTimelineItem>
  <AfpTimelineItem :variant="'success'" outlined>
      Success Outlined
  </AfpTimelineItem>
  <AfpTimelineItem :variant="'error'" outlined>
      Error Outlined
  </AfpTimelineItem>
  <AfpTimelineItem :variant="'warning'" outlined>
      Warning Outlined
  </AfpTimelineItem>
</div>

No Connector #

Use the noConnector (noconnector) attribute to display the timeline with no connector. This attribute is mainly used for the last timeline item.

No connector

<afp-timeline-item noconnector>No connector</afp-timeline-item>

<afp-timeline-item noconnector>No connector</afp-timeline-item>

<AfpTimelineItem noconnector>No connector</AfpTimelineItem>

<AfpTimelineItem noconnector>No connector</AfpTimelineItem>

Placement #

Use the placement attribute to align the timeline item content.

Left Placement

Top Placement

<div class="afp-grid">
  <afp-timeline-item placement="left">Left Placement</afp-timeline-item>
  <afp-timeline-item orientation="horizontal" placement="top">
    Top Placement
  </afp-timeline-item>
</div>

<div class="afp-grid">
  <afp-timeline-item [placement]="'left'">Left Placement</afp-timeline-item>
  <afp-timeline-item [orientation]="'horizontal'" [placement]="'top'">
    Top Placement
  </afp-timeline-item>
</div>

<div class="afp-grid">
  <AfpTimelineItem placement="left">Left Placement</AfpTimelineItem>
  <AfpTimelineItem orientation="horizontal" placement="top">
    Top Placement
  </AfpTimelineItem>
</div>

<div class="afp-grid">
  <AfpTimelineItem :placement="'left'">Left Placement</AfpTimelineItem>
  <AfpTimelineItem :orientation="'horizontal'" :placement="'top'">
    Top Placement
  </AfpTimelineItem>
</div>

Disabled #

Use the disabled attribute to disable the timeline item.

Disabled

<afp-timeline-item disabled>Disabled</afp-timeline-item>

<afp-timeline-item disabled>Disabled</afp-timeline-item>

<AfpTimelineItem disabled>Disabled</AfpTimelineItem>

<AfpTimelineItem disabled>Disabled</AfpTimelineItem>

Opposite Content #

Use the opposite-content slot to display the content on the opposite side of the timeline item.

Start project Jan 1, 2026

Plan tasks Jan 15, 2026

<div class=afp-stack>
  <afp-timeline-item>
    Start project
    <afp-badge variant="info" slot="opposite-content">Jan 1, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item placement="left">
    Plan tasks
    <afp-badge variant="accent" slot="opposite-content">Jan 15, 2026</afp-badge>
  </afp-timeline-item>
</div>

<div class=afp-stack>
  <afp-timeline-item>
    Start project
    <afp-badge [variant]="'info'" [slot]="'opposite-content'">Jan 1, 2026</afp-badge>
  </afp-timeline-item>
  <afp-timeline-item [placement]="'left'">
    Plan tasks
    <afp-badge [variant]="'accent'" [slot]="'opposite-content'">Jan 15, 2026</afp-badge>
  </afp-timeline-item>
</div>

<div class=afp-stack>
  <AfpTimelineItem>
    Start project
    <AfpBadge variant="info" slot="opposite-content">Jan 1, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem placement="left">
    Plan tasks
    <AfpBadge variant="accent" slot="opposite-content">Jan 15, 2026</AfpBadge>
  </AfpTimelineItem>
</div>

<div class=afp-stack>
  <AfpTimelineItem>
    Start project
    <AfpBadge :variant="'info'" :slot="'opposite-content'">Jan 1, 2026</AfpBadge>
  </AfpTimelineItem>
  <AfpTimelineItem :placement="'left'">
    Plan tasks
    <AfpBadge :variant="'accent'" :slot="'opposite-content'">Jan 15, 2026</AfpBadge>
  </AfpTimelineItem>
</div>

Custom Marker #

Use the marker slot to display a customized marker in the timeline item.

Task completed

<div class="afp-stack">
  <afp-timeline-item variant="success">
    <afp-icon slot="marker" name="clipboard2-check-fill"></afp-icon>
    Task completed
  </afp-timeline-item>
</div>

<div class="afp-stack">
  <afp-timeline-item [variant]="'success'">
    <afp-icon [slot]="'marker'" [name]="'clipboard2-check-fill'"></afp-icon>
    Task completed
  </afp-timeline-item>
</div>

<div class="afp-stack">
  <AfpTimelineItem variant="success">
    <AfpIcon slot="marker" name="clipboard2-check-fill"></AfpIcon>
    Task completed
  </AfpTimelineItem>
</div>

<div class="afp-stack">
  <AfpTimelineItem :variant="'success'">
    <AfpIcon :slot="'marker'" :name="'clipboard2-check-fill'"></AfpIcon>
    Task completed
  </AfpTimelineItem>
</div>

Properties

Learn more about properties.

Name Description Reflects

outlined

Outlined marker of the timeline item

Type boolean

Default false

noConnector
noconnector

Avoid displaying the connector

Type boolean

Default false

disabled

Disabled state of the timeline item

Type boolean

Default false

tabIndex
tabindex

html tabIndex property of timeline item

Type number

Default 0

shape

Shape of the timeline item

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.PILL

size

Size of the timeline item

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

orientation

Orientation of the timeline item

Type

AfpOrientation

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

AfpOrientation

Default AfpOrientation.VERTICAL

placement

Placement of the timeline item 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

variant

State of the timeline item.

Type

AfpVariant

Name	Description
`NEUTRAL`	The main call-to-action.
`BRAND`	Less prominent than primary.
`ACCENT`	Secondary highlight for emphasis.
`ERROR`	Used for destructive or critical actions.
`INFO`	Conveys general information.
`SUCCESS`	Indicates a successful or positive action.
`WARNING`	Communicates cautionary actions.

AfpVariant

inheritMarkerColor
inheritmarkercolor

The color of the timeline connector (line)

Type boolean

Default false

Slots

Learn more about slots.

Name	Description
`default`	The default slot for the timeline item content.
`opposite-content`	The timeline item content on the opposite side.
`marker`	The marker of the timeline item.
`marker-icon`	The icon marker of the timeline item when a state is present.

Internationalization

Learn more about internationalization.

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

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The timeline item's base wrapper.	`::part(base)`
`content`	The content of the timeline item.	`::part(content)`
`opposite-content`	The content of the timeline item on the opposite side.	`::part(opposite-content)`
`separator`	The container for the timeline item's marker and connector.	`::part(separator)`
`marker`	The marker of the timeline item.	`::part(marker)`
`marker-icon`	The icon marker of the timeline item.	`::part(marker-icon)`
`connector`	The connector (line) of the timeline item.	`::part(connector)`

CSS Custom Properties

Name	Description	Default
`--afp-timeline-item-disabled-opacity`	The opacity of the timeline item when disabled.	`0.5`

Dependencies

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

Component	CSS Part Prefix
afp-icon	`marker-icon` - The icon marker of the 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-item/timeline-item.js';