Blaze UI Badges Rounded

Last Updated : 20 Apr, 2022

Blaze CSS is a framework-free open source UI toolkit. It provides a great structure for building websites quickly with a scalable and maintainable foundation. It is responsive in nature, as all the components are developed mobile-first and work on any screen size.

A badge is an essential component of a website. It is useful when you want to add additional information such as software version number or for status messages that display a particular text to the user. Blaze UI provides a lot of varieties of badges and one such variety is known as Badge Rounded. The Badge Rounded component provides us the functionality of creating a rounded badge.

Blaze UI Badges Rounded Classes:

c-badge–rounded: This class is used to create a rounded badge.

Syntax:

<span class="c-badge c-badge--rounded">
   ...
</span>

Example 1: The following example demonstrates the use of the c-badge–rounded class to create a rounded badge.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0"> 
    <title> Blaze UI Badges Rounded </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
    <style>   
       body{ 
         margin-left:10px; 
         margin-right:10px; 
       } 
    </style> 
</head> 
<body> 
    <h1 class="c-heading" style="color:green"> GeeksforGeeks 
        <div class="c-heading__sub"> 
            Blaze UI Badges Rounded  
        </div> 
    </h1> 
    <br><!--Roounded Badge-->
    <span class="c-badge c-badge--rounded  
         c-badge--warning">  
        Rounded Badge 1 
    </span> 
    <span class="c-badge c-badge--rounded  
          c-badge--brand"> 
        Rounded Badge 2 
    </span> 
    <span class="c-badge c-badge--rounded  
         c-badge--error"> 
        Rounded Badge 3 
    </span> 
</body> 
</html>

Output:

Example 2: The following example demonstrates the difference between a simple basic badge and a rounded badge.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title> Blaze UI Badges Rounded </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
    <style>   
       body{ 
         margin-left:10px; 
         margin-right:10px; 
       } 
    </style> 
</head> 
<body> 
    <h1 class="c-heading" style="color:green"> 
        GeeksforGeeks 
        <div class="c-heading__sub"> 
            Blaze UI Badges Rounded  
        </div> 
    </h1> 
    <br><!--Simple Badge-->
    <span class="c-badge c-badge--warning">  
        Simple Badge 1 
    </span> 
    <span class="c-badge c-badge--success">  
        Simple Badge 2 
    </span><!--Rounded Badge-->
    <span class="c-badge c-badge--rounded c-badge--brand">  
        Rounded Badge 1 
    </span> 
    <span class="c-badge c-badge--rounded c-badge--error"> 
        Rounded Badge 2 
    </span> 
</body> 
</html> 