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 offers Issue Labels that are used to add labels for pull requests or any issue. Issue labels also support emojis. In this article, we will discuss the Issue Labels along with examples.
Primer CSS Issue Labels classes:
- IssueLabel: This class is used to create an issue label.
- IssueLabel--big: This class is used to create an issue label that has some extra padding.
Syntax:
<span class="IssueLabel color-bg-success-emphasis
color-fg-on-emphasis mr-1">
...
</span>Example 1: Below is the code that demonstrates the use of Primer CSS Issue labels.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Issue Labels </title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet"/>
</head>
<body>
<center>
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Issue Labels </h3>
<span class="IssueLabel color-bg-success-emphasis
color-fg-on-emphasis mr-1 mt-3">
GeeksforGeeks
<svg width="16" height="16" fill="currentColor"
class="bi bi-laptop" viewBox="0 0 16 16">
<path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5
0 0 1 .5-.5h11zm-11-1A1.5 1.5 0 0 0 1
3.5V12h14V3.5A1.5 1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5
1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"/>
</svg>
</span>
<span class="IssueLabel color-bg-danger-emphasis
color-fg-on-emphasis mr-1 mt-3">
Computer Science portal.
</span>
</center>
</body>
</html>
Output:
Primer CSS Issue LabelsExample 2: Below is another code that demonstrates the use of Primer CSS Issue labels using IssueLabel--big class.
HTML
<!DOCTYPE html>
<html>
<head>
<title> Primer CSS Issue Labels </title>
<link href=
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
rel="stylesheet"/>
</head>
<body>
<center>
<h1 class="color-fg-success"> GeeksforGeeks </h1>
<h3> Primer CSS Issue Labels </h3>
<span class="IssueLabel IssueLabel--big color-bg-danger-emphasis
color-fg-on-emphasis mr-1">
GeeksforGeeks
<svg xmlns="http://www.w3.org/2000/svg" width="16"
height="16" fill="currentColor" class="bi bi-laptop"
viewBox="0 0 16 16">
<path d="M13.5 3a.5.5 0 0 1 .5.5V11H2V3.5a.5.5 0 0 1
.5-.5h11zm-11-1A1.5 1.5 0 0 0 1 3.5V12h14V3.5A1.5
1.5 0 0 0 13.5 2h-11zM0 12.5h16a1.5 1.5 0 0
1-1.5 1.5h-13A1.5 1.5 0 0 1 0 12.5z"/>
</svg>
</span>
<span class="IssueLabel IssueLabel--big
color-bg-success-emphasis
color-fg-on-emphasis mr-1">
Computer Science portal.
</span>
</center>
</body>
</html>
Output:
Primer CSS Issue LabelsReference: https://primer.style/css/components/labels#issue-labels
Similar Reads
Primer CSS Labels 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
3 min read
Primer CSS Labels 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
3 min read
Primer CSS Labels Default 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach e
2 min read
Primer CSS Labels Elements 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
3 min read
Primer CSS Labels Counters 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
2 min read
Primer CSS Header Primer CSS is a free open-source CSS framework that is built upon a 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 stead
3 min read