Blaze UI Badges Ghost

Last Updated : 25 Apr, 2022

Blaze CSS is 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 a version of the software 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 Badges Ghost. The Badges Ghost component provides us with the functionality of removing the body of the badge.

Blaze UI Badges Ghost Classes:

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

Syntax:

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

Example 1: The following example demonstrates the use of the c-badge–ghost class to create a ghost 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 Ghost </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
        <div class="c-heading__sub"> 
            Blaze UI Badges Ghost 
        </div> 
    </h1> 
    <br> 
    <span class="c-badge c-badge--ghost "> 
        <!--Ghost Badge-->
        Ghost Badge 1 
    </span> 
    <span class="c-badge c-badge--ghost "> 
        Ghost Badge 2 
    </span> 
    <span class="c-badge c-badge--ghost "> 
        Ghost Badge 3 
    </span> 
</body> 
  
</html>

Output:

Example 2: The following example demonstrates the difference between a simple basic badge and a ghost 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 Ghost </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <h1 style="color:green"> 
        GeeksforGeeks 
        <div class="c-heading__sub"> 
            Blaze UI Badges Ghost 
        </div> 
    </h1> 
    <br> 
    <span class="c-badge"> 
        <!--Basic Badge-->
        Basic Badge 1 
    </span> 
    <span class="c-badge"> 
        Basic Badge 2 
    </span> 
    <span class="c-badge c-badge--ghost "> 
        <!--Ghost Badge-->
        Ghost Badge 1 
    </span> 
    <span class="c-badge c-badge--ghost "> 
        Ghost Badge 2 
    </span> 
</body> 
  
</html>