Primer CSS Alerts With Icon

Last Updated : 19 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 discuss Primer CSS Alerts with icons. Primer CSS Alerts with the icon to add an icon to the left of the flash message. It gives funky fresh attention.

Example 1: In this example, we will use SVG icons with alerts. We will create different SVG icons like a warning.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" 
         rel="stylesheet" />     
</head> 
  
<body> 
    <h1 style="color:green;">GeeksforGeeks</h1> 
    <h3> Alert With Icons</h3> 
      
      <div class="flash"> 
        <!-- <%= octicon "info" %> -->
        <svg class="octicon" 
             xmlns="http://www.w3.org/2000/svg" 
             viewBox="0 0 16 16" width="16" height="16"> 
            <path fill-rule="evenodd"
                d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5  
                  0 000-13zM0 8a8 8 0 1116 0A8 8 0 010  
                  8zm6.5-.25A.75.75 0 017.25 7h1a.75.75 0 
                  01.75.75v2.75h.25a.75.75 0 010 1.5h-2a.75.75 0 
                  010-1.5h.25v-2h-.25a.75.75 0 01-.75-.75zM8 6a1 1 0 
                  100-2 1 1 0 000 2z"> 
            </path> 
        </svg> 
        Hi Geek!! I am an informative Alert 
    </div> 
  
    <div class="flash flash-warn"> 
        <!-- <%= octicon "alert" %> -->
        <svg class="octicon" 
             xmlns="http://www.w3.org/2000/svg" 
             viewBox="0 0 16 16" width="16" height="16"> 
            <path fill-rule="evenodd"
                d="M8.22 1.754a.25.25 0 00-.44 0L1.698 
                13.132a.25.25 0 00.22.368h12.164a.25.25 0 
                00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 
                2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 
                0114.082 15H1.918a1.75 1.75 0  
                01-1.543-2.575L6.457 1.047zM9 11a1 1 0 
                11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 
                00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z"> 
            </path> 
        </svg> 
        Hi Geek!! I am an warning Alert 
    </div>    
</body> 
</html>

Output:

Example 2: In this example, we will use CSS icons as icons in alerts. We will display two types of alerts with icons i.e error and success

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://unpkg.com/@primer/css@^16.0.0/dist/primer.css" 
          rel="stylesheet" /> 
    <link rel="stylesheet" href= 
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
</head> 
  
<body> 
    <div> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <h3> Alert With Icons</h3> 
    </div> 
    <div class="flash flash-success"> 
        <i class="glyphicon glyphicon-thumbs-up"></i> 
         Hi Geek!! I am an Success Alert 
    </div> 
    <div class="flash flash-error"> 
        <i class="glyphicon glyphicon-remove" 
           style="color:red;"> 
        </i> 
        Hi Geek!! I am an Error Alert 
    </div>    
</body> 
</html>