Primer CSS Timeline Target TimelineItem

Last Updated : 21 Apr, 2022

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Timeline Target TimelineItem </title> 
    <link rel="stylesheet" 
          href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Timeline Target TimelineItem </h3> 
    </div> <br> <br> 
  
    <div class="d-flex flex-justify-center"> 
        <div class="d-flex flex-column"> 
            <div class="TimelineItem"> 
                <div class="TimelineItem-badge"> 
                    <svg class="octicon" width="18" 
                         height="18" viewBox="0 0 16 16" 
                         aria-hidden="true"> 
                        <path fill-rule="evenodd" 
                              d="M11.5 7a4.499 4.499 0  
                              11-8.998 0A4.499 4.499 0  
                              0111.5 7zm-.82 4.74a6 6 0  
                              111.06-1.06l3.04 3.04a.75.75  
                              0 11-1.06 1.06l-3.04-3.04z" > 
                        </path> 
                    </svg> 
                </div> 
                <div class="TimelineItem-body"> 
                    <a href="#" class="text-bold Link--primary"> 
                        GeeksforGeeks 
                    </a> website 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Primer CSS Timeline Target TimelineItem

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

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS Timeline Target TimelineItem </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head> 
  
<body> 
    <div class="text-center"> 
        <h1 class="color-fg-success"> GeeksforGeeks </h1> 
        <h3> Primer CSS Timeline Target TimelineItem </h3> 
    </div> <br> <br> 
  
    <div class="d-flex flex-justify-center"> 
        <div class="d-flex flex-column"> 
            <div class="TimelineItem"> 
                <div class="TimelineItem-badge 
                            color-bg-success-emphasis  
                            color-fg-on-emphasis" > 
                    <svg class="octicon" width="18" 
                         height="18" viewBox="0 0 16 16" 
                         aria-hidden="true"> 
                        <path fill-rule="evenodd" 
                              d="M11.5 7a4.499 4.499 0  
                              11-8.998 0A4.499 4.499 0  
                              0111.5 7zm-.82 4.74a6 6 0  
                              111.06-1.06l3.04 3.04a.75.75  
                              0 11-1.06 1.06l-3.04-3.04z" > 
                        </path> 
                    </svg> 
                </div> 
                <div class="TimelineItem-body"> 
                    <a href="#" class="text-bold Link--secondary  
                                       color-fg-danger" > 
                        GeeksforGeeks 
                    </a> website 
                </div> 
            </div> 
  
            <div class="TimelineItem"> 
                <div class="TimelineItem-badge 
                            color-bg-success-emphasis  
                            color-fg-on-emphasis" > 
                    <svg class="octicon" width="18" 
                         height="18" viewBox="0 0 16 16" 
                         aria-hidden="true"> 
                        <path fill-rule="evenodd" 
                              d="M11.5 7a4.499 4.499 0  
                              11-8.998 0A4.499 4.499 0  
                              0111.5 7zm-.82 4.74a6 6 0  
                              111.06-1.06l3.04 3.04a.75.75  
                              0 11-1.06 1.06l-3.04-3.04z" > 
                        </path> 
                    </svg> 
                </div> 
                <div class="TimelineItem-body"> 
                    <a href="#" class="Link--secondary 
                                       color-bg-sponsors 
                                       color-fg-done"> 
                        A Computer Science 
                    </a> portal for geeks 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>