Primer CSS Timeline TimelineItem-Condensed

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-Condensed is used to reduce the vertical padding and remove the background from the badge. We can use these in commits in Github.

In this article, we will discuss Primer CSS TimelineItem–condensed.

Primer CSS TimelineItem–condensed Class:

TimelineItem–condensed: This class is used to create condensed timeline items.

Syntax:

<div class="TimelineItem TimelineItem--condensed">
   ...
</div>

Example 1: The following example demonstrates the Primer CSS TimelineItem–condensed.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Primer CSS TimelineItem--condensed </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--condensed </h3> 
    </div> <br> 
  
    <div class="d-flex flex-justify-center"> 
        <div class="d-flex flex-column"> 
          <div class="TimelineItem TimelineItem--condensed"> 
            <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"> 
              GeeksforGeeks condensed 
            </div> 
          </div> 
            
          <div class="TimelineItem TimelineItem--condensed"> 
            <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"> 
              GeeksforGeeks condensed 
            </div> 
          </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Primer CSS TimelineItem–condensed

Example 2: The following example demonstrates the Primer CSS TimelineItem–condensed.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
  <title> Primer CSS TimelineItem--condensed </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--condensed </h3> 
    </div> <br> 
  
    <div class="d-flex flex-justify-center"> 
        <div class="d-flex flex-column"> 
          <div class="TimelineItem TimelineItem--condensed"> 
            <div class="TimelineItem-badge" > 
              <svg class="octicon octicon-git-commit" width="16" height="18" 
                   viewBox="0 0 16 18"
                   aria-hidden="true" > 
                <path fill-rule="evenodd" 
                      d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41  
                      1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86  
                      0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22  
                      0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0  
                      2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"> 
                </path> 
              </svg> 
            </div> 
            <div class="TimelineItem-body"> 
              GeeksforGeeks condensed 1 
            </div> 
          </div> 
            
          <div class="TimelineItem TimelineItem--condensed"> 
            <div class="TimelineItem-badge"> 
              <svg class="octicon octicon-git-commit" width="16" height="18" 
                   viewBox="0 0 16 18"
                   aria-hidden="true" > 
                <path fill-rule="evenodd" 
                      d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41  
                      1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86  
                      0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22  
                      0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0  
                      2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"> 
                </path> 
              </svg> 
            </div> 
            <div class="TimelineItem-body"> 
              GeeksforGeeks condensed 2 
            </div> 
          </div> 
  
          <div class="TimelineItem TimelineItem--condensed"> 
            <div class="TimelineItem-badge"> 
              <svg class="octicon octicon-git-commit"
                   width="16" 
                   height="18" 
                   viewBox="0 0 16 18"
                   aria-hidden="true" > 
                <path fill-rule="evenodd" 
                      d="M10.86 7c-.45-1.72-2-3-3.86-3-1.86 0-3.41  
                      1.28-3.86 3H0v2h3.14c.45 1.72 2 3 3.86 3 1.86  
                      0 3.41-1.28 3.86-3H14V7h-3.14zM7 10.2c-1.22  
                      0-2.2-.98-2.2-2.2 0-1.22.98-2.2 2.2-2.2 1.22 0  
                      2.2.98 2.2 2.2 0 1.22-.98 2.2-2.2 2.2z"> 
                </path> 
              </svg> 
            </div> 
            <div class="TimelineItem-body"> 
              GeeksforGeeks condensed 3 
            </div> 
          </div> 
        </div> 
    </div> 
</body> 
</html>