Primer CSS Alerts

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. It is highly reusable and flexible. It is created with GitHub’s design system.

Alerts are used to signify an important message to the user. It alerts the user related to some pending items or new features on the web page. Users are informed beforehand through alerts before they interact with the web page. There are different ways of defining an alert. 

• Default: This is used to define a simple blue rounded flash using class flash.
• With colors: This is used to give different colors to flash using flash-warn, flash-error, and flash-success classes.
• With icon: This is used to add icons to alerts.
• With dismiss: This is used to add a closing icon to alerts using the flash-close class.
• With action button: This is used to add action buttons to alerts using the flash-action class.
• Full-width flash: This makes a full width no border alert using the flash-full class.
• Flash banner: This makes the alert fixed to the top of the page using the flash-banner class.

Syntax:

<div class="flash">
 ...
</div>

Example 1: This example demonstrates the different types of Primer CSS alerts using the flash class.

Output:

Example 2: This example demonstrates the different types of Primer CSS alerts using the flash class.

Output: