Onsen UI Notification CSS Components

Last Updated : 21 Jul, 2022

Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop.

Onsen UI Notification CSS Component is a CSS component that we can use to display the number of notifications/messages or anything similar to that. This feature is mostly used in social media sites, email systems, and back-ends of applications.

Onsen UI Notification CSS Components Classes:

notification: This class is mainly added to create a notification icon/badge. When it is added to a span or paragraph element, it is transformed into a notification. This can take a number or text as a value which will be shown in the notification.
notification–material: This class is used to create the material notification.

Note: We can add a notification badge to images and many other components.

Syntax:

<span class="notification">...</span>

Example 1: The following example demonstrates the Onsen UI Notification CSS Components.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <strong> 
            Onsen UI Notification CSS Components 
        </strong> <br> <br> 
      
        <span class="notification">1</span> 
        <span class="notification">50</span> 
        <span class="notification">geeks</span>    
    </center> 
</body> 
  
</html>

Output:

Example 2: The following example demonstrates the Onsen UI Notification CSS Components.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <!-- CDN links of Onsen UI library -->
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsenui.css"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/onsenui/css/onsen-css-components.min.css"> 
    <script src= 
"https://unpkg.com/onsenui/js/onsenui.min.js"> 
    </script> 
</head> 
  
<body> 
    <center> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <strong> 
            Onsen UI Notification CSS Components 
        </strong> <br> <br> 
      
        <span class="notification notification--material"> 
            1 
        </span> 
        <span class="notification notification--material"> 
            50 
        </span> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210214171643/logo.png" 
             width="100px"> 
        <span class="notification notification--material" 
              style="margin-left: -1rem"> 
            5 
        </span> 
    </center> 
</body> 
  
</html>