Skip to content
Related Articles

Related Articles

Blaze UI Badges Rounded

Improve Article
Save Article
  • Last Updated : 20 Apr, 2022
Improve Article
Save Article

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=
    <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=
    <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>


Output:

 

Reference: https://www.blazeui.com/components/badges/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!