Primer CSS Alerts Color

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

Output:

👁 Image

Example 2: In this example, we will learn about classes flash-error and flash-success to show red and green color alerts respectively

Output:

👁 Image

Reference: https://primer.style/#colors