Primer CSS Timeline Target TimelineItem

Primer CSS is a free open-source CSS framework that is built upon systems that create 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 highly reusable and flexible. It is created with GitHub’s design system.

Primer CSS Timeline is used to display the items in the vertical direction. Primer CSS Timeline Target TimelineItem is used to create the timeline with item links for navigation. In this article, we will discuss Primer CSS Timeline Target TimelineItem.

Primer CSS Timeline Target TimelineItem Classes:

• Link--primary: This class is used to create the primary link.
• Link--secondary: This class is used to create the secondary link.

Syntax:

<div class="TimelineItem" id="1">
 <div class="TimelineItem-body">
 <a href="#" class="Target-TimelineItem-Class">
 ...
 </a>
 ...
 </div>
</div>

Example 1: The following example demonstrates the Primer CSS Timeline Target TimelineItem using Link--primary class.

Output:

👁 Image

Example 2: The following example demonstrates the Primer CSS Timeline Target TimelineItem using Link--secondary class.

Output:

👁 Image

Reference: https://primer.style/#target-timelineitem