Timeline

Visually display timeline.

Basic usage

Timeline can be split into multiple activities. Timestamps are important features that distinguish them from other components. Note the difference with Steps.

Custom node

Size, color, and icons can be customized in node.

Custom timestamp

Timestamp can be placed on top of content when content is too high.

Vertically centered

Timeline-Item is centered vertically.

Timeline Slots

NameDescriptionSubtags
Custom content for timelineTimeline-Item

Timeline-Item Attributes

AttributeDescriptionTypeAccepted ValuesDefault
timestamptimestamp contentstring
hide-timestampwhether to show timestampbooleanfalse
centerWhether vertically centeredbooleanfalse
placementposition of timestampstringtop / bottombottom
typenode typestringprimary / success / warning / danger / info
colorbackground color of nodestringhsl / hsv / hex / rgb
sizenode sizestringnormal / largenormal
iconicon class namestring
hollowicon is hollowbooleanfalse

Timeline-Item Slots

NameDescription
Custom content for timeline item
dotCustom defined node