Primer CSS Timeline

Last Updated : 28 May, 2025

Primer CSS is a free open-source CSS framework that is built upon the GitHub design system to provide support to the broad spectrum of Github websites. It creates 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 a highly reusable model.

One such important and frequently used component in today’s website is Timeline. It is used in several cases. Like in GitHub, it is used in the issues section where one user asks solution to a problem and another user helps him to solve it and the whole thing is depicted using a timeline.

In this article, we will learn about the timeline component in Primer CSS.

Primer CSS Timeline components:

TimelineItem: This component helps to display items in the form of a Timeline. It is the container for the timeline component.
TimelineItem-badge: This component helps to display the text in the vertical format by connecting them. The TimelineItem-badge has dark text color on light grey background. We can also add different background and foreground colors to the TimelineItem-badge.
TimelineItem--condensed: This component reduces the vertical padding between the two timeline elements and removes the background from the badges. It gives a condensed timeline look.
TimelineItem-avatar: This component helps to add an avatar image beside a timeline item to mark it as an event by some author or a particular person.
TimelineItem-break: This component adds a horizontal bar to the timeline where it is applied. This generally marks a break or disruption in the timeline.
TimelineItem-Target: This component helps to add links within the Timeline.

Example 1: The following code demonstrates timeline with a different color badges.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
</head>

<body style="margin:2em;">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Primer CSS Timeline</h2>
    <div class="TimelineItem">
        <div class=
        "TimelineItem-badge color-bg-attention-emphasis color-fg-on-emphasis">
            <svg width="25" height="25" viewBox="0 0 22 22" 
                            fill="currentColor" class="octicon">
                <path fill-rule="evenodd" clip-rule="evenodd" 
                    d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13
                    0zM8 0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 
                    100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 
                    0 012 0zM5.32 9.636a.75.75 
                    0 011.038.175l.007.009a1.82 1.82 0 
                    00.35.31c.264.178.683.37 1.285.37.602 
                    0 1.02-.192 1.285-.371a1.82 1.82 0 
                    00.35-.31l.007-.008a.75.75 
                    0 011.222.87l-.614-.431c.614.43.614.431.613.
                    431v.001l-.001.002-.002.003-.005.007-.014.019a1.989 
                    1.989 0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766
                    0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 
                    0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.02-.
                    005-.006-.012-.003v-.002h-.001l.613-.432-.
                    614.43a.75.75 0 01.183-1.044z">
                </path>
            </svg>
        </div>
        <div class="TimelineItem-body">
            This is the sample text for the timeline
        </div>
    </div>
    <div class="TimelineItem">
        <div class="TimelineItem-badge color-bg-success-emphasis 
                                       color-fg-on-emphasis">
            <svg width="16" height="16" viewBox="0 0 16 16" 
                            fill="currentColor" class="octicon">
                <path fill-rule="evenodd" clip-rule="evenodd" 
                    d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 
                    0a8 8 0 100 16A8 8 0 008 0zM5 8a1 1 0 100-2 1 1 
                    0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 
                    0zM5.32 9.636a.75.75 0 011.038.175l.007.009a1.82 1.82 
                    0 00.35.31c.264.178.683.37 1.285.37.602 
                    0 1.02-.192 1.285-.371a1.82 1.82 
                    0 00.35-.31l.007-.008a.75.75 0 
                    011.222.87l-.614-.431c.614.43.614.431.613.431v.001l-.
                    001.002-.002.003-.005.007-.014.019a1.989 1.989 
                    0 01-.184.213 3.32 3.32 0 01-.53.445A3.766 3.766 
                    0 018 12c-.946 0-1.652-.308-2.126-.63a3.323 3.323 
                    0 01-.673-.604 1.975 1.975 0 01-.042-.053l-.014-.
                    02-.005-.006-.002-.003v-.002h-.001l.613-.432-
                    .614.43a.75.75 0 01.183-1.044z">
                </path>
            </svg>
        </div>
        <div class="TimelineItem-body">
            This is the sample text for the timeline.
        </div>
    </div>
    <div class="TimelineItem">
        <div class="TimelineItem-badge color-bg-sponsors-emphasis 
                                       color-fg-on-emphasis">
            <svg width="16" height="16" viewBox="0 0 16 16" 
                            fill="currentColor" class="octicon">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M7.17674 3.07322L9.57318 0.676753C9.73068 0.51926 9.99996 
                      0.630802 9.99996 0.853529V5.64642C9.99996 5.86915 9.73068 
                      5.98069 9.57319 5.8232L7.17674 3.42677C7.07911 3.32914 
                      7.07911 3.17085 7.17674 3.07322ZM3.75 2.5C3.33579 2.5 
                      3 2.83579 3 3.25C3 3.66421 3.33579 4 3.75 4C4.16421 4 4.5 
                      3.66421 4.5 3.25C4.5 2.83579 4.16421 2.5 3.75 2.5ZM1.5 
                      3.25C1.5 2.00736 2.50736 1 3.75 1C4.99264 1 6 2.00736 
                      6 3.25C6 4.22966 5.37389 5.06309 4.5 5.37197V10.628C5.37389 
                      10.9369 6 11.7703 6 12.75C6 13.9926 4.99264 15 3.75 15C2.50736 
                      15 1.5 13.9926 1.5 12.75C1.5 11.7703 2.12611 10.9369 3 
                      10.628V5.37197C2.12611 5.06309 1.5 4.22966 1.5 3.25ZM11 
                      2.5H10V4H11C11.5523 4 12 4.44772 12 5V10.628C11.1261 
                      10.9369 10.5 11.7703 10.5 12.75C10.5 13.9926 11.5074 
                      15 12.75 15C13.9926 15 15 13.9926 15 12.75C15 11.7703 
                      14.3739 10.9369 13.5 10.628V5C13.5 3.61929 12.3807 2.5 
                      11 2.5ZM12 12.75C12 12.3358 12.3358 12 12.75 12C13.1642 
                      12 13.5 12.3358 13.5 12.75C13.5 13.1642 13.1642 13.5 12.75 
                      13.5C12.3358 13.5 12 13.1642 12 12.75ZM3.75 12C3.33579 12 
                      3 12.3358 3 12.75C3 13.1642 3.33579 13.5 3.75 13.5C4.16421 
                      13.5 4.5 13.1642 4.5 12.75C4.5 12.3358 4.16421 12 3.75 12Z">
                </path>
            </svg>
        </div>
        <div class="TimelineItem-body">
            This is the sample text for the timeline.
        </div>
    </div>
    <div class="TimelineItem">
        <div class="TimelineItem-badge color-bg-accent-emphasis 
                                       color-fg-on-emphasis">
            <svg width="16" height="16" viewBox="0 0 16 16" 
                            fill="currentColor" class="octicon">
                <path fill-rule="evenodd" clip-rule="evenodd"
                    d="M5 3.254V3.25V3.255C4.99934 3.45369 4.91985 3.64401 
                      4.779 3.78415C4.63815 3.9243 4.44745 4.00283 4.24875 
                      4.0025C4.05006 4.00217 3.85961 3.923 3.71923 3.78239C3.57885 
                      3.64177 3.5 3.45119 3.5 3.2525C3.5 3.0538 3.57885 2.86323 
                      3.71923 2.72261C3.85961 2.58199 4.05006 2.50283 4.24875 
                      2.5025C4.44745 2.50217 4.63815 2.5807 4.779 2.72084C4.91985 
                      2.86099 4.99934 3.0513 5 3.25V3.254ZM5.45 5.154C5.88079 
                      4.8824 6.2067 4.47269 6.37445 3.99186C6.54221 3.51102 
                      6.54188 2.9875 6.37353 2.50687C6.20517 2.02624 5.87875 
                      1.61694 5.44762 1.34588C5.01649 1.07483 4.50616 0.95804 
                      4.00005 1.01462C3.49394 1.0712 3.022 1.2978 2.66137 
                      1.65737C2.30074 2.01695 2.07276 2.48822 2.0147 
                      2.99416C1.95664 3.5001 2.07193 4.01077 2.34173 
                      4.4427C2.61152 4.87462 3.01987 5.20224 3.5 5.372V10.628C2.99931 
                      10.8049 2.57729 11.1532 2.30855 11.6112C2.0398 12.0692 1.94163 
                      12.6075 2.03139 13.1309C2.12114 13.6542 2.39305 14.1291 
                      2.79904 14.4713C3.20503 14.8136 3.71897 15.0014 4.25 
                      15.0014C4.78103 15.0014 5.29496 14.8136 5.70095 14.4713C6.10695 
                      14.1291 6.37885 13.6542 6.46861 13.1309C6.55837 12.6075 6.4602 
                      12.0692 6.19145 11.6112C5.9227 11.1532 5.50069 10.8049 5 
                      10.628V7.123C5.53827 7.71503 6.19447 8.18788 6.92641 
                      8.51114C7.65836 8.8344 8.44985 9.00093 9.25 9H10.628C10.8049 
                      9.50069 11.1532 9.9227 11.6112 10.1915C12.0692 10.4602 12.6075 
                      10.5584 13.1309 10.4686C13.6542 10.3789 14.1291 10.1069 14.4713 
                      9.70096C14.8136 9.29496 15.0014 8.78103 15.0014 8.25C15.0014 7.71897
                      14.8136 7.20503 14.4713 6.79904C14.1291 6.39305 13.6542 6.12114 
                      13.1309 6.03139C12.6075 5.94163 12.0692 6.0398 11.6112 6.30855C11.1532
                      6.57729 10.8049 6.99931 10.628 7.5H9.25C8.4613 7.50006 7.68813 7.28066 
                      7.01702 6.86634C6.34592 6.45202 5.80334 5.85912 5.45 5.154ZM12.75 
                      9C12.9489 9 13.1397 8.92098 13.2803 8.78033C13.421 8.63968 13.5 8.44891
                      13.5 8.25C13.5 8.05109 13.421 7.86032 13.2803 7.71967C13.1397 7.57902 
                      12.9489 7.5 12.75 7.5C12.5511 7.5 12.3603 7.57902 12.2197 7.71967C12.079
                      7.86032 12 8.05109 12 8.25C12 8.44891 12.079 8.63968 12.2197 8.78033C12.3603
                      8.92098 12.5511 9 12.75 9ZM4.25 13.5C4.44891 13.5 4.63968 13.421 4.78033 
                      13.2803C4.92098 13.1397 5 12.9489 5 12.75C5 12.5511 4.92098 12.3603 4.78033 
                      12.2197C4.63968 12.079 4.44891 12 4.25 12C4.05109 12 3.86032 12.079 3.71967 
                      12.2197C3.57902 12.3603 3.5 12.5511 3.5 12.75C3.5 12.9489 3.57902 13.1397 
                      3.71967 13.2803C3.86032 13.421 4.05109 13.5 4.25 13.5Z">
                </path>
            </svg>
        </div>
        <div class="TimelineItem-body">
            This is the sample text for the timeline.
        </div>
    </div>
</body>
</html>

Output:

Example 2: The following code demonstrates the condensed timeline.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />    
</head>

<body style="margin:2em;">
    <h1 style="color:green">GeeksforGeeks</h1>
    <h2>Primer CSS Timeline</h2>
    <!-- Condensed Timeline -->
    <div class="TimelineItem TimelineItem--condensed">
        <div class="TimelineItem-badge">
          <svg class="octicon octicon-git-commit" viewBox="0 0 14 16" 
              version="1.1" width="14" height="16" 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">
          This is the message of a condensed TimelineItem
        </div>
      </div>
      <div class="TimelineItem TimelineItem--condensed">
        <div class="TimelineItem-badge">
          <svg class="octicon octicon-git-commit" viewBox="0 0 14 16" 
              version="1.1" width="14" height="16" 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">
          This is the message of a condensed TimelineItem
        </div>
      </div>
      <div class="TimelineItem TimelineItem--condensed">
        <div class="TimelineItem-badge">
          <svg class="octicon octicon-git-commit" viewBox="0 0 14 16" 
             version="1.1" width="14" height="16" 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">
          This is the message of a condensed TimelineItem
        </div>
    </div>
</body>
</html>