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 Labels that provide some metadata to the user or indicates the status of an item. There are 3 types of labels, Labels to indicate metadata, States to show the status, and Counters to indicate the count of a number of items. In this article, we will discuss the Labels that provide some metadata. along with examples.
Primer CSS Labels used classes:
- Label: This class is used to define a label.
- Label–primary: This class is used to define a primary label that has a stronger border.
- Label–secondary: This class is used to define a secondary label that has a subtler text color.
- Label–accent: This class is used to define a blue-colored label.
- Label–success: This class is used to define a green-colored label.
- Label–attention: This class is used to define a golden-colored label.
- Label–severe: This class is used to define a brown-colored label.
- Label–danger: This class is used to define a red-colored label.
- Label–sponsors: This class is used to define a purple-colored label.
- Label–large: This class is used to define a label having some extra padding.
- Label–inline: This class is used to define an inline label.
Syntax:
<span class="Label <label-classes>">
...
</span>Example 1: Below example demonstrates the use of Primer CSS Labels using State–primary and State–secondary classes.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS 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 Labels </h3>
<span class="Label Label--primary mr-1 mt-2">
Primary Label
</span>
<span class="Label Label--secondary mr-1 mt-2">
Secondary Label
</span>
</center>
</body>
</html>
|
Output:
Primer CSS Labels
Example 2: Below example demonstrates the use of Primer CSS Labels using different colored labels.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS 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 Labels </h3>
<span class="Label mr-2 mt-3 Label--accent">
Blue Color Label
</span>
<span class="Label mr-2 mt-3 Label--success">
Green Color Label
</span>
<span class="Label mr-2 mt-3 Label--danger">
Red Color Label
</span>
<span class="Label mr-2 mt-3 Label--sponsors">
Purple Color Label
</span>
</center>
</body>
</html>
|
Output:
Primer CSS Labels
Example 3: Below example demonstrates the use of Primer CSS Labels using large size labels.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS 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 Labels</h3>
<span class="Label mt-3 mr-1">Default Label</span>
<span class="Label Label--large mt-3 mr-1">
Large sized Label
</span>
</center>
</body>
</html>
|
Output:
Primer CSS Labels
Example 4: Below example demonstrates the use of Primer CSS Labels using inline labels.
<!DOCTYPE html> <html>
<head>
<title> Primer CSS 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 Labels </h3>
<p class="mt-3">
GeeksforGeeks is a Computer Science Portal
<span class="Label Label--inline">for geeks</span>
of india as well as overseas.
</p>
</center>
</body>
</html>
|
Output:
Primer CSS Labels
Reference: https://primer.style/css/components/labels#labels