Primer CSS Timeline TimelineItem-Badge

Last Updated : 08 Apr, 2022

Primer CSS is open-source on Github that is created with GitHub’s design system. We can use Primer CSS by installing it via npm or include the CDN link in our HTML file. It has different types of styles like spacing, color, and typography.

Primer CSS Timeline is used to display the items in the vertical direction. Primer CSS TimelineItem-badge is used to create the timeline badge. The default color of the badge is dark text and a light gray background. We can give the color to the badge using color utility classes.

In this article, we will discuss Primer CSS TimelineItem-badge.

Primer CSS TimelineItem-badge classes:

TimelineItem: This class is used to create the timeline item.
TimelineItem-badge: This class is used to create the timeline item badge.
TimelineItem-body: This class is used to place some content inside the timeline body.

Syntax:

<div class="TimelineItem">
    <div class="TimelineItem-badge">
        ...
    </div>
    <div class="TimelineItem-body">
        ...
    </div>
</div>

Example 1: The following example demonstrates the Primer CSS TimelineItem-badge.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS TimelineItem-badge </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 TimelineItem-badge </h3> 
    </div> <br> 
  
    <div class="d-flex flex-justify-center"> 
        <div class="TimelineItem"> 
            <div class="TimelineItem-badge"> 
                <svg class="octicon" width="18" height="18" 
                     viewBox="0 0 16 16" > 
                    
                  <path fill-rule="evenodd" 
                        clip-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"> 
                GeeksforGeeks default 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Primer CSS TimelineItem-badge

Example 2: The following example demonstrates the Primer CSS TimelineItem-badge.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> Primer CSS TimelineItem-badge </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 TimelineItem-badge </h3> 
    </div> <br> 
  
    <div class="d-flex flex-justify-center"> 
        <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" > 
                
              <path fill-rule="evenodd" 
                    clip-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"> 
            GeeksforGeeks Colorful 
          </div> 
        </div> 
    </div> 
</body> 
  
</html>