Timeline

Experimental

The TimelineItem component is used to display items on a vertical timeline, connected by TimelineItem-badge elements.

TimelineItem-badge

The default TimelineItem-badge color is dark text on a light grey background.

Adding color to TimelineItem-badge

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

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.

TimelineItem-avatar

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.

TimelineItem-break

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.

Target TimelineItem