Badge

Badge normally appears in proximity to notifications or user avatars, typically displaying unread messages count or status information. In order to only use the Badge Component from Cascade UI in your project, copy and paste the below code in the head tag of your html document. 

                
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/css/foundation.css" />
    <link rel="stylesheet" href="https://cascadeui-robust.netlify.app/Components/Badge/badge.css" />

Badge on Avatars

Badges indicate the status of the user when used on avatars. Example-> Green: online | Red: Busy | Grey: offline. For using badge on avatars, you can add the class name badge to the parent tag along with the variation class on child, for instance: badge-online | badge-busy | badge-offline. 

                
                    
                        <div class="badge avatar avatar-lg-size">
                            <img class="rounded-avatar" src="/assets/avatar-male1.jpg">
                            <span class="badge-online"></span>
                        </div>
                        <div class="badge avatar avatar-lg-size">
                            <img class="rounded-avatar" src="/assets/avatar-female2.jpg">
                            <span class="badge-busy"></span>
                        </div>
                        <div class=" badge avatar avatar-lg-size">
                            <img class="rounded-avatar" src="/assets/avatar-male2.jpg">
                            <span class="badge-offline"></span>
                        </div>

Badge on Icons

Badges indicate the notification count on a particular item. For using badge on icons, you can add the class name badge to the parent tag along with the badge-number class name on child.

2
14
20
                    
                    <div class="badge avatar avatar-lg-size">
                        <i class="badge-icon fas fa-shopping-cart"></i>
                        <div class="badge-number badge-online semibold">2</div>
                    </div>
                    <div class="badge avatar avatar-lg-size">
                        <i class="badge-icon fas fa-heart"></i>
                        <div class="badge-number semibold">14</div>
                    </div>
                    <div class=" badge avatar avatar-lg-size">
                        <i class="badge-icon fas fa-envelope"></i>
                        <div class="badge-number badge-offline semibold">20</div>
                    </div>