Skip to content
Related Articles

Related Articles

Primer CSS Labels Default

Improve Article
Save Article
  • Last Updated : 14 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. It is a system that assists us to build consistent user experiences efficiently with enough flexibility. This systematic approach ensures that our styles are consistent and interoperable with each other. It features a highly composable spacing scale, customizable typography, and meaningful colors. It is highly reusable and flexible and is created with GitHub’s design system.

A label is an important component of our website as it displays content information to the user. Primer CSS provides us with a label in order to display information.

Primer CSS Labels Default Class:

  • Label: This class is used in order to create a label.

Syntax:

<span class="Label">
   ...
</span>

Example 1: The following example demonstrates how a label is created using the Label class.

HTML




<!DOCTYPE html>
<html>  
<head>
    <title> Primer CSS Labels Default </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head>
<body>
    <div class="text-left">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3> Primer CSS Labels Default </h3>
    </div>
    <br>
    <span class="Label"> <!--Label-->
      Label 1
    </span>
    <span class="Label">
      Label 2
    </span>
    <span class="Label">
      Label 3
    </span>
</body>
</html>


Output:

 

Example 2: The following example demonstrates the difference between a piece of information displayed using a label and a piece of information displayed directly without a label.

HTML




<!DOCTYPE html>
<html>  
<head>
    <title> Primer CSS Labels Default </title>
    <link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" /> 
</head>
<body>
    <div class="text-left">
        <h1 class="color-fg-success">GeeksforGeeks</h1>
        <h3> Primer CSS Labels Default </h3>
    </div>
    <br>
    <span class="no_label"> <!--Not A Label-->
      Not A Label
    </span>
    <span class="Label"> <!--Label-->
      Label 
    </span>
    <span class="Label">
      Label 2
    </span>
</body>
</html>


Output:

 

Reference: https://primer.style/css/components/labels 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!