Search documentation v0.6.1

Timeline

Display information in chronological order

Source ↗️ Report Issue ↗️

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
How to use Timelines in Astro
---
import { Timeline, TimelineItem } from 'webcoreui/astro'
---
<Timeline>
<TimelineItem>Getting started</TimelineItem>
<TimelineItem>Setup</TimelineItem>
<TimelineItem>Conclusion</TimelineItem>
</Timeline>
How to use Timelines in Svelte
<script>
import { Timeline, TimelineItem } from 'webcoreui/svelte'
</script>
<Timeline>
<TimelineItem>Getting started</TimelineItem>
<TimelineItem>Setup</TimelineItem>
<TimelineItem>Conclusion</TimelineItem>
</Timeline>
How to use Timelines in React
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 PropPurpose
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 PropPurpose
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.

Request improvement for this page