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>

Output:

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

Primer CSS Labels

shreyasnaphad

Improve

Article Tags :

Primer CSS Labels Default

Similar Reads