Timeline

Vertical display timeline of events.

Basic Timeline
Create a services site 2015-09-01
Solve initial network problems 2015-09-01
Technical testing 2015-09-01
Network problems being solved 2015-09-01
<prism-timeline>
  <prism-timeline-item>Create a services site 2015-09-01</prism-timeline-item>
  <prism-timeline-item>Solve initial network problems 2015-09-01</prism-timeline-item>
  <prism-timeline-item>Technical testing 2015-09-01</prism-timeline-item>
  <prism-timeline-item>Network problems being solved 2015-09-01</prism-timeline-item>
</prism-timeline>
Alternate
2015-09-01
 Create a services site 
2015-09-01
 Solve initial network problems 
2015-09-01
 Technical testing 
2015-09-01
 Network problems being solved 
<prism-timeline mode="alternate">
  <prism-timeline-item>Create a services site 2015-09-01</prism-timeline-item>
  <prism-timeline-item>Solve initial network problems 2015-09-01</prism-timeline-item>
  <prism-timeline-item>Technical testing 2015-09-01</prism-timeline-item>
  <prism-timeline-item>Network problems being solved 2015-09-01</prism-timeline-item>
</prism-timeline>
Custom Icon
 Technical testing 2024-02-21 
 Network problems being solved 
 Solve initial network problems 
<prism-timeline>
  <prism-timeline-item>
    <prism-icon dot name="checkbox-circle-line" class="text-green-500" />
    Technical testing 2024-02-21
  </prism-timeline-item>
</prism-timeline>
Reverse & Pending
Create a services site 2015-09-01
Solve initial network problems 2015-09-01
 Recording... 
<prism-timeline pending="Recording..." [reverse]="true">
  <prism-timeline-item>Create a services site 2015-09-01</prism-timeline-item>
  <prism-timeline-item>Solve initial network problems 2015-09-01</prism-timeline-item>
</prism-timeline>
Timeline APITimeline PropertiesNameTypeDefaultDescription
mode'left' | 'alternate' | 'right''left'Set vertical position of timeline
pendingboolean | stringfalseSet pending state or text
reversebooleanfalseWhether to reverse the order of items
Timeline Item PropertiesNameTypeDefaultDescription
colorstring'primary'Color of the dot
dotslot-Custom dot via <prism-icon dot>
labelslot-Label displayed on the opposite side

Name	Type	Default	Description
`mode`	`'left' \| 'alternate' \| 'right'`	`'left'`	Set vertical position of timeline
`pending`	`boolean \| string`	`false`	Set pending state or text
`reverse`	`boolean`	`false`	Whether to reverse the order of items

Name	Type	Default	Description
`color`	`string`	`'primary'`	Color of the dot
`dot`	`slot`	`-`	Custom dot via <prism-icon dot>
`label`	`slot`	`-`	Label displayed on the opposite side