Timeline

Display information in chronological order

Use the Timeline component to display events in chronological order, visually represented along a linear path. They’re useful for illustrating the sequence and timing of events or steps in a process.

---
import { Timeline, TimelineItem } from 'webcoreui/astro'
---

<Timeline>
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

<script>
    import { Timeline, TimelineItem } from 'webcoreui/svelte'
</script>

<Timeline>
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

import React from 'react'
import { Timeline, TimelineItem } from 'webcoreui/react'

const Component = () => (
    <Timeline>
        <TimelineItem>Getting started</TimelineItem>
        <TimelineItem>Setup</TimelineItem>
        <TimelineItem>Conclusion</TimelineItem>
    </Timeline>
)

export default Component

Themes

Timelines comes with three predefined themes out of the box that can be configured using the theme prop: fill, stroke, stroke fill:

<Timeline theme="fill">
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

<Timeline theme="stroke">
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

<Timeline theme="stroke fill">
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

Timelines with Icons

Timelines can also be created using icons. To use icons, set the theme prop to icons then specify icons using the icon prop on your TimelineItem component:

<Timeline theme="icons">
    <TimelineItem icon="home">Getting started</TimelineItem>
    <TimelineItem icon="github">Setup</TimelineItem>
    <TimelineItem icon="info">Conclusion</TimelineItem>
</Timeline>

To specify an icon, you can use an existing icon type for Astro component. You can also import SVG strings and pass them to the icon prop to display custom icons. For available icon types, please see the documentation of the Icons component.

Alternating Timeline

You can create alternating timelines by setting alternate to true:

<Timeline alternate={true}>
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

<Timeline alternate={true} centered={true}>
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

By default, alternating timelines follow a left to right alignment for all timeline items. To change the alignment of timeline items relative to the timeline, set centered to true.

Styles

To change the style of your timelines, you can override the following CSS variables:

html body {
    --w-timeline-color: #252525;
    --w-timeline-text-color: #FFF;
    --w-timeline-counter: decimal;
}

You can also configure these styles for individual timelines using the color, textColor, and counter props:

<Timeline color="#e73f40">
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

<Timeline textColor="#48dbfb">
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

<Timeline counter="upper-alpha">
    <TimelineItem>Getting started</TimelineItem>
    <TimelineItem>Setup</TimelineItem>
    <TimelineItem>Conclusion</TimelineItem>
</Timeline>

Timeline Item Titles

Timeline items can be configured to have a title, using the title and titleTag props:

<Timeline>
    <TimelineItem title="Start here">Getting started</TimelineItem>
    <TimelineItem title="Prerequisites">Setup</TimelineItem>
    <TimelineItem title="Wrapping Up">Conclusion</TimelineItem>
</Timeline>

The default value of the titleTag prop is span, meaning titles are rendered into span elements.

API

type TimelineProps = {
    theme?: 'fill' | 'stroke' | 'stroke fill' | 'icons'
    alternate?: boolean
    centered?: boolean
    color?: string
    textColor?: string
    counter?: string
    className?: string
}

type TimelineItemProps = {
    title?: string
    titleTag?: string
    icon?: string
    className?: string
}