BADGE

The thing that pops up on your app's icon, when you recieve a message? Yes, that is known as a badge. Badges are small circles with numbers or some activity status positioned on the top-right corners.

Number Badge

Number Badges are used to tell the user the number of items present. Use the badge class for component and the classes num-notification, num-mail, num-cart and num-avatar according to your usecase. You can copy html part from below code snippet.

Number Code Example

<div class="badge num-notification">
                    <i class="fa fa-bell"></i>
                    <span class="badge-notification-count">1</span>
                </div>

Number Avatar Code Example

<div class="badge num-avatar">
                    <img class="avatar-badge-image" src="../assets/images/avatar.png" alt="avatar">
                    <div>
                        <span class="badge-avatar-count">1 </span>
                </div>

Profile Activity Badge

Profile ACtivity Badges are used to tell the user the activity of other users. Use the badge class for component and the classes profile-success, profile-error, profile-warning and profile-awol according to your usecase. You can copy html part from below code snippet.

Profile Activity Code Example

<div class="badge profile-success">
                    <img class="avatar-badge-image" src="../assets/images/avatar.png" alt="avatar">
                    <div class="badge-activity"></div>
                </div>