Primer CSS Timeline

Primer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.

One such important and frequently used component in today’s website is Timeline. It is used in several cases. Like in GitHub, it is used in the issues section where one user asks solution to a problem and another user helps him to solve it and the whole thing is depicted using a timeline. 

In this article, we will learn about the timeline component in Primer CSS.

Primer CSS Timeline components:

• TimelineItem: This component helps to display items in the form of a Timeline. It is the container for the timeline component.
• TimelineItem-badge: This component helps to display the text in the vertical format by connecting them. The TimelineItem-badge has dark text color on light grey background. We can also add different background and foreground colors to the TimelineItem-badge.
• TimelineItem--condensed: This component reduces the vertical padding between the two timeline elements and removes the background from the badges. It gives a condensed timeline look.
• TimelineItem-avatar: This component helps to add an avatar image beside a timeline item to mark it as an event by some author or a particular person.
• TimelineItem-break: This component adds a horizontal bar to the timeline where it is applied. This generally marks a break or disruption in the timeline.
• TimelineItem-Target: This component helps to add links within the Timeline. 

Example 1: The following code demonstrates timeline with a different color badges.

Output:

Example 2: The following code demonstrates the condensed timeline.

Output: