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/[email protected]/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/[email protected]/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>
Output:
Similar Reads
CSS Tutorial CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website presentation. CSS is one of the three main components of a webpage, along with HTML and JavaScript.HTML adds Structure to a web page.JavaScript adds logic to it and CSS makes it visually appealing or
7 min read
CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable.It allows you to apply styles to HTML documents by prescribing colors, fonts, spacing, and positioning.The main advantages are the separation of content (in HTML) and styling (in CSS) and the
4 min read
CSS Syntax CSS is written as a rule set, which consists of a selector and a declaration block. The basic syntax of CSS is as follows:The selector is a targeted HTML element or elements to which we have to apply styling.The Declaration Block or " { } " is a block in which we write our CSS.HTML<html> <h
2 min read
CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato
7 min read
CSS Comments CSS comments are used to add notes or explanations to your code, helping you and others understand it better. They start with /* and end with */ and can be used for both single-line and multi-line comments. Note: Comments are ignored by browsers, so they won’t affect how your webpage looks or works.
2 min read
CSS Colors CSS colors are used to set the color of different parts of a webpage, like text, background, and borders. This helps make the page look more attractive and easier to read. You can define colors using names, hex codes, RGB values, and more.You can try different formats of colors here- #content-iframe
5 min read
CSS Borders Borders in CSS are used to create a visible outline around an element. They can be customized in terms ofWidth: The thickness of the border.Style: The appearance of the border (solid, dashed, dotted, etc.).Color: The color of the border.You can try different types of borders here- #custom-iframe{ he
5 min read
CSS Margins CSS margins are used to create space around an element, separating it from neighboring elements and the edges of the webpage. They control the layout by adjusting the distance between elements, providing better organization and readability.Syntax:body { margin: value;}HTML<html> <head>
4 min read
CSS Height and Width Height and Width in CSS are used to set the height and width of boxes. Their values can be set using length, percentage, or auto.Width and HeightThe width and height properties in CSS are used to define the dimensions of an element. The values can be set in various units, such as pixels (px), centim
4 min read
CSS Outline CSS outline is a property used to draw a line around an element's border. It does not affect the layout, unlike borders. It's often used to highlight elements, providing a visual emphasis without altering the dimensions of the element.Syntaxselector{ outline: outline-width outline-type outline-color
4 min read