Getting Started
Components
Badge
Badge Component Symbol to draw attention to another interface element or to display a notification. It enhances the component to which it is attached with additional information, disclosed to the user upon interacting with it.
Image Badge
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="p-rel"> | |
| <img src="/assets/images/profile2.jpg" alt="avatar" class="h-4 w-4 brd-round"> | |
| <span class="p-abs brd-round badge rgt bg-clr-green-600"></span> | |
| </div> | |
| <div class="p-rel"> | |
| <img src="/assets/images/profile2.jpg" alt="avatar" class="h-4 w-4 brd-round"> | |
| <span class="p-abs brd-round badge rgt bg-clr-red-600"></span> | |
| </div> | |
| <div class="p-rel"> | |
| <img src="/assets/images/profile2.jpg" alt="avatar" class="h-4 w-4 brd-round"> | |
| <span class="p-abs brd-round badge rgt bg-clr-gray-400"></span> | |
| </div> |
Letter Badge
S
S
S
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="p-rel"> | |
| <span class="brd-round bg-clr-blue-500 h-4 w-4 fx-row fx-jc-center fx-ai-center f-105">S</span> | |
| <span class="p-abs brd-round badge rgt bg-clr-green-600"></span> | |
| </div> | |
| <div class="p-rel"> | |
| <span class="brd-round bg-clr-blue-500 h-4 w-4 fx-row fx-jc-center fx-ai-center f-105">S</span> | |
| <span class="p-abs brd-round badge rgt bg-clr-red-600"></span> | |
| </div> | |
| <div class="p-rel"> | |
| <span class="brd-round bg-clr-blue-500 h-4 w-4 fx-row fx-jc-center fx-ai-center f-105">S</span> | |
| <span class="p-abs brd-round badge rgt bg-clr-gray-400"></span> | |
| </div> |
Notification Badge
2
7
7
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="p-rel"> | |
| <span class="brd-round bg-clr-yellow-500 h-3 w-3 fx-row fx-jc-center fx-ai-center f-105"><i | |
| class="fas fa-shopping-cart"></i></span> | |
| <span | |
| class="p-abs brd-round notification rgt top bg-clr-green-600 f-075 clr-gray-50 fx fx-jc-center fx-ai-center">2</span> | |
| </div> | |
| <div class="p-rel"> | |
| <span class="brd-round bg-clr-yellow-500 h-3 w-3 fx-row fx-jc-center fx-ai-center f-105"><i | |
| class="fas fa-bell"></i></span> | |
| <span | |
| class="p-abs brd-round notification rgt top bg-clr-gray-100 f-075 fx fx-jc-center fx-ai-center">7</span> | |
| </div> | |
| <div class="p-rel"> | |
| <span class="brd-round bg-clr-red-500 h-3 w-3 fx-row fx-jc-center fx-ai-center f-105"><i | |
| class="fas fa-flag"></i></span> | |
| <span | |
| class="p-abs brd-round notification rgt top bg-clr-red-800 clr-gray-50 f-075 fx fx-jc-center fx-ai-center">7</span> | |
| </div> |