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.
In this article, we will learn about Primer CSS Alerts Color. Primer CSS Alerts Color is used to add colors to the alerts like blue, red, green and yellow.
Classes:
- flash: This is the default class, it provides blue color to the alert.
- flash-warn: This class provides yellow color to the alert.
- flash-error: This class provides red color to the alert.
- flash-success: This class provides a success color to the alert.
Syntax:
<div class="flash flash-*">
Flash message goes here.
</div>Note: * represent a class that is used to provide color. We will discuss these classes below
Example 1: In this example, we will display Alerts using classes flash and flash-warn
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
<body>
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Alert With Colors</h3>
</div>
<div class="flash ">
Hi Geek !! I am Blue color Alert
</div>
<div class="flash flash-warn">
Hi Geek !! I am yellow color Alert
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will learn about classes flash-error and flash-success to show red and green color alerts respectively
<!DOCTYPE html> <html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" />
</head>
<body>
<div>
<h1 style="color:green">GeeksforGeeks</h1>
<h3> Primer CSS Alerts Color </h3>
</div>
<div class="flash flash-success">
Hi Geek !! I am Green color Alert
</div>
<div class="flash flash-error">
Hi Geek !! I am Red color Alert
</div>
</body>
</html>
|
Output:
Reference: https://primer.style/css/components/alerts#colors