Primer CSS Issue Labels

Last Updated : 09 May, 2022

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 Labels

Example 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>