Primer CSS Boxes with Flash 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. 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 Box is used to display the content in the simple rounded corner box. Primer CSS Boxes with Flash Alerts are used to put the flash alerts below the box header and above the box body. We can have different colors of flash alerts and can be used with icons and buttons. In this article, we will discuss Primer CSS Boxes with Flash Alerts.

Primer CSS Boxes with Flash Alerts Class:

• flash-full: This class is used to create the flash alert.

Syntax:

<div class="Box">
 <div class="flash flash-full">
 ...
 </div>
</div>

Example 1: The following code demonstrates the Primer CSS Boxes with Flash Alerts.

Output:

👁 Image

Example 2: The following code demonstrates the Primer CSS Boxes with Flash Alerts with different colors of flash alerts.

Output:

👁 Image

Reference: https://primer.style/#boxes-with-flash-alerts