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 =
< 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 >
< 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 >
< span class = "c-badge c-badge--warning" >
Simple Badge 1
</ span >
< span class = "c-badge c-badge--success" >
Simple Badge 2
</ span >
< 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/
Share your thoughts in the comments
Please Login to comment...