Skip to content
Related Articles

Related Articles

Primer CSS Issue Labels

Improve Article
Save Article
  • Last Updated : 09 May, 2022
Improve Article
Save Article

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>


Output:

Primer CSS Issue Labels

Reference: https://primer.style/css/components/labels#issue-labels


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!