Super UI
Badges
Badges are being used to display a notification count or status information
Example of Badges
We have 2 types of status badges that can be integrated with Avatars. You can show colors to show the online status of user. And to show cart or notification count, you can use number badge. Check code below to copy the html part as is.
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="badge-container"> | |
| <img | |
| class="avatar avatar-xl" | |
| src="./assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| <span | |
| class="badge badge-xl position-abs badge-status-online border-radius-xl" | |
| ></span> | |
| </div> | |
| <div class="badge-container"> | |
| <img | |
| class="avatar avatar-lg" | |
| src="./assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| <span | |
| class="badge badge-lg position-abs badge-status-offline border-radius-lg" | |
| ></span> | |
| </div> | |
| <div class="badge-container"> | |
| <img | |
| class="avatar avatar-md" | |
| src="./assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| <span | |
| class="badge badge-md position-abs badge-status-online border-radius-md" | |
| ></span> | |
| </div> | |
| <div class="badge-container"> | |
| <img | |
| class="avatar avatar-sm" | |
| src="./assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| <span | |
| class="badge badge-sm position-abs badge-status-offline border-radius-sm" | |
| ></span> | |
| </div> | |
| <div class="badge-container"> | |
| <img | |
| class="avatar avatar-xs" | |
| src="./assests/Images/example_image2.jpg" | |
| alt="avatar" | |
| /> | |
| <span | |
| class="badge badge-xs position-abs badge-status-offline border-radius-xs" | |
| ></span> | |
| </div> | |
| <a class="badge-container"> | |
| <i class="fas fa-shopping-cart badge-link"></i> | |
| <span | |
| class="badge-icon top-0 left-100 position-abs translate-topright badge-status-offline border-radius-xl"> | |
| 2 | |
| </span> | |
| </a> |