TimelineItem component is used to display items on a vertical timeline, connected by
The default TimelineItem-badge color is dark text on a light grey background.
To have color variants, use the color utilities on the badge. Be cautious with color choices. We typically use them in the timeline to give meaning to the event in context of the timeline.
TimelineItem has a condensed variant that will reduce the vertical padding and remove the background from the badge item. These are most commonly used in commits.
Sometimes you want to give ownership to an event by displaying an Avatar of the author. To do this, you'll need to wrap the TimelineItem in a
<div> and give it space for the avatar.
ml-6 pl-3 This is
40px, the size of the image, and
16px space for the gutter.
To create a visual break in the timeline, use
TimelineItem-break. This adds a horizontal bar across the timeline to show that something has disrupted it. Usually this happens when a close or merged event occurs.