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.

Preview

Getting started
Setup
Conclusion

---
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:

Fill

Getting started
Setup
Conclusion

Stroke

Getting started
Setup
Conclusion

Stroke fill

Getting started
Setup
Conclusion

<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>

Alternating Timeline

You can create alternating timelines by setting alternate to true:

Alternate

Getting started
Setup
Conclusion

Alternate + Centered

Getting started
Setup
Conclusion

<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:

Color

Getting started
Setup
Conclusion

Text color

Getting started
Setup
Conclusion

Counter

Getting started
Setup
Conclusion

<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>

The counter prop can take any valid CSS counter value. For a full list of possible value, see the type definitions.

Timeline Item Titles

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

Start here Getting started
Prerequisites Setup
Wrapping Up Conclusion

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

API

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

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

Timeline Prop	Purpose
`theme`	Sets the theme of the timeline. Can be one of `fill`, `stroke`, `stroke fill`.
`alternate`	Creates an alternating timeline. Defaults to `false`.
`centered`	Changes the alignment of timeline items for alternate timelines. Defaults to `false`.
`color`	Sets the background color of the timeline items.
`textColor`	Sets the text color of the counter inside the timeline items.
`counter`	Sets the counter style of the timeline items.
`className`	Pass additional CSS classes for the timeline.

TimelineItem Prop	Purpose
`title`	Sets a title for the timeline item.
`titleTag`	Sets the HTML tag used for the title of the timeline item. Defaults to `span`.
`className`	Pass additional CSS classes for the timeline item.

<- Theme Switcher Toast ->

Request improvement for this page