badges

notification badges extra small

                
                <div class='badge-size-xs bg-success brd-full'></div>
                <div class='badge-size-xs bg-err brd-full'></div>
                <div class='badge-size-xs bg-warn brd-full'></div>
                
            

notification badges small

                
                <div class='badge-size-s bg-success brd-full'></div>
                <div class='badge-size-s bg-err brd-full'></div>
                <div class='badge-size-s bg-warn brd-full'></div>
                
            

text only badges

                
                <div class='badge-size-md txt-md flx flx-center brd-full txt-secondary bg-secondary'>4</div>
                <div class='badge-size-lg txt-ucase txt-s txt-600 flx flx-center brd-s bg-warn'>offer</div>
                <div class='badge-size-xxlg txt-ucase txt-md txt-600 flx flx-center brd-s bg-warn'>offer</div>
                
            

badge on icon

                
                <div class='badge-size-s flx flx-center brd-full bg-success pos-absolute tl-60'></div>
                <div class='dis-inblock pos-relative'>
                    <span class='material-icons'>account_balance</span>
                    <div class='badge-size-s txt-s flx flx-center brd-full bg-secondary txt-secondary pos-absolute tl-60'>1</div>
                </div>
                
            

badge css

                
                .badge-size-xs {
                    width: 0.5rem;
                    height: 0.5rem;
                }
                    
                .badge-size-s {
                    width: 1rem;
                    height: 1rem;
                }
                    
                .badge-size-md {
                    width: 1.5rem;
                    height: 1.5rem;
                }
                    
                .badge-size-lg {
                    width: 2rem;
                    height: 2rem;
                }