--- title: Timeline path: components/timeline status: Experimental status_issue: 'https://github.com/github/design-systems/issues/101' source: '' bundle: timeline --- The `TimelineItem` component is used to display items on a vertical timeline, connected by `TimelineItem-badge` elements. ```html live
Monalisa created one hot potato Just now
``` ## TimelineItem-badge The default TimelineItem-badge color is dark text on a light gray background. ```html live
Default badge color
``` ### Adding color to TimelineItem-badge To have color variants, use the [color utilities](/utilities/colors) 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. ```html live
Red background used when closed events occur
Green background when opened or passed events occur
Purple background used when pull requests are merged
Blue background to indicate new events below
``` ## 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. ```html live
This is the message of a condensed TimelineItem
This is the message of a condensed TimelineItem
``` ## 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 `
` 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. ```html live
@octocat
Monalisa created one hot potato Just now
``` ## 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. ```html live
Red background used when closed events occur
Green background when opened or passed events occur
``` ## Target TimelineItem ```html live
Monalisa created one hot potato Just now
```