Open In App

Primer CSS Timeline Target TimelineItem

Last Updated : 21 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:

Primer CSS Timeline Target TimelineItem

Reference: https://primer.style/css/components/timeline#target-timelineitem



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads