Primer CSS Labels Default

Last Updated : 14 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. 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>