Primer CSS Alerts Color

Last Updated : 12 Apr, 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. 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

HTML

<!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

HTML

<!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

Primer CSS Alerts Flash Banner

akshitsaxenaa09

Improve

Article Tags :

Primer CSS Alerts Color

Similar Reads

Thank You!

What kind of Experience do you want to share?