Blaze UI Badges
Blaze UI is a free open-source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.
A badge is an essential component of a website. It is useful when you want to add additional information such as software version numbers or for status messages that display a particular text to the user. Blaze UI provides a lot of varieties of badges, in this article we will see each and every variety of badges briefly.
Blaze UI Badges:
- Blaze UI Badges Colors: This type of badge is used to define the color of the badge, we can use c-badge–color_class for that.
- Blaze UI Badges Rounded: This type of badge is used to make the badge’s corner rounded, we can use c-badge–rounded class for that.
- Blaze UI Badges Ghost: This type of badge is used when you want to remove the body part of any badge, we can use c-badge–ghost for that.
Note: Remember that these classes can be combined and used in a single badge which can be colored and rounded with corners with a ghost body type.
Syntax:
<span class="c-badge c-badge--badge-type"> ... </span>
Below are examples illustrating the Blaze UI Badges:
Example 1: This example demonstrates the Blaze UI Badges.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title > Blaze UI Badges </ title > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css" > < style > html{ font-family: sans-serif; } </ style > </ head > < body > < div class = "u-centered" > < h2 style = "color: green;" > w3wiki </ h2 > < h3 > Blaze UI Badges </ h3 > </ div > < div class = "u-window-box-large" > < h4 > Blaze UI Badges Colors: </ h4 > < span class = "c-badge c-badge--warning" > ! Are you Sure </ span > < span class = "c-badge c-badge--success" > Uploaded </ span > < span class = "c-badge c-badge--error" > Delete File </ span > </ div > < div class = "u-window-box-large" > < h4 > Blaze UI Badges Rounded: </ h4 > < span class = "c-badge c-badge--rounded" > ! Are you Sure </ span > < span class = "c-badge c-badge--rounded" > Uploaded </ span > < span class = "c-badge c-badge--rounded" > Delete File </ span > </ div > < div class = "u-window-box-large" > < h4 > Blaze UI Badges Ghost: </ h4 > < span class = "c-badge c-badge--ghost" > ! Are you Sure </ span > < span class = "c-badge c-badge--ghost" > Uploaded </ span > < span class = "c-badge c-badge--ghost" > Delete File </ span > </ div > </ body > </ html > |
Output:
Example 2: This example demonstrates the Blaze UI Badges.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title >Blaze UI Badges</ title > < link rel = "stylesheet" href = "https://unpkg.com/@blaze/css@10.0.4/dist/blaze/blaze.css" > < style > html{ font-family: sans-serif; } </ style > </ head > < body > < div class = "u-centered" > < h2 style = "color: green;" > w3wiki </ h2 > < h3 > Blaze UI Badges </ h3 > </ div > < div class = "u-window-box-large" > < h4 > Blaze UI Badges Combined: </ h4 > < span class="c-badge c-badge--warning c-badge--rounded c-badge--ghost"> ! Are you Sure </ span > < span class="c-badge c-badge--success c-badge--rounded c-badge--ghost"> Uploaded </ span > < span class="c-badge c-badge--error c-badge--rounded c-badge--ghost"> Delete File </ span > </ div > </ body > </ html > |
Output:
Reference: https://www.blazeui.com/components/badges/