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 Label States that inform the user about the status of an item. Generally, States are the labels having bold text. The default state has a grey color.
Primer CSS States used classes:
- State: This class is used to define a state label.
- State–draft: This class is used to define a draft state label of grey color.
- State–open: This class is used to define an open state label of green color.
- State–merged: This class is used to define a merged state label of purple color.
- State–closed: This class is used to define a closed state label of red color.
- State–small: This class is used to define a small-sized state label.
Syntax:
<span class="State State--draft">
...
</span>Example 1: Below example demonstrates the use of Primer CSS States using State, State–draft, State–open, State–merged, and State–closed classes.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS States</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 States</h3>
<span class="State State--draft mr-2 mt-3">
Default State
</span>
<span class="State State--open mr-2 mt-3">
Open State
</span>
<span class="State State--merged mr-2 mt-3">
Merged State
</span>
<span class="State State--closed mr-2 mt-3">
Close State
</span>
</center>
</body>
</html>
|
Output:
Primer CSS States
Example 2: Below example demonstrates the use of Primer CSS States using State, State–small, State–draft, State–open, State–merged, and State–closed classes.
<!DOCTYPE html> <html>
<head>
<title>Primer CSS States</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 States</h3>
<span class="State State--small State--draft mr-2 mt-3">
Default State
</span>
<span class="State State--small State--open mr-2 mt-3">
Open State
</span>
<span class="State State--small State--merged mr-2 mt-3">
Merged State
</span>
<span class="State State--small State--closed mr-2 mt-3">
Close State
</span>
</center>
</body>
</html>
|
Output:
Primer CSS States
Reference: https://primer.style/css/components/labels#states