Badges

Badges are displayed on apps and folder icons on your Home screen to notify you of something.

Icon with badge

4
4
4
                
                    <div class="badge-icon badge-wrapper">
                        <i class="fa fa-shopping-cart"></i>
                        <span class="badge-number primary-bgcolor">4</span>
                    </div>
                    <div class="badge-icon badge-wrapper">
                        <i class="fa fa-envelope"></i>
                        <span class="badge-number primary-bgcolor">4</span>
                    </div>
                    <div class="badge-icon badge-wrapper">
                        <i class="fa fa-user-circle-o"></i>
                        <span class="badge-number primary-bgcolor">4</span>
                    </div>
                
            

Circular and square avatar with image and badge

avatar
avatar
avatar
avatar
                
                    <div class="avatar avatar-lg-size badge-wrapper">
                        <img src="https://picsum.photos/200?random=5" class="img-responsive img-round" alt="avatar">
                        <div class="badge-status-circle badge-status-online badge-lg-circle badge-lg"></div>
                    </div>
                    <div class="avatar-square avatar-md-size badge-wrapper">
                        <img src="https://picsum.photos/200?random=6" class="img-responsive img-square" alt="avatar">
                        <div class="badge-status-circle badge-status-offline badge-md"></div>
                    </div> 
                    <div class="avatar avatar-sm-size badge-wrapper">
                        <img src="https://picsum.photos/200?random=7" class="img-responsive img-round" alt="avatar">
                        <div class="badge-status-circle badge-status-ideal badge-sm-circle badge-sm"></div>
                    </div> 
                    <div class="avatar-square avatar-xs-size badge-wrapper">
                        <img src="https://picsum.photos/200?random=8" class="img-responsive img-square" alt="avatar">
                        <div class="badge-status-circle badge-status-away badge-xs"></div>
                    </div>
                
            

Circular and square avatar with text and badge

TS
TS
TS
TS
                
                    <div class="avatar-square avatar-lg-size avatar-text badge-wrapper avatar-primary">TS
                        <div class="badge-status-circle badge-status-online badge-lg"></div>
                    </div>
                    <div class="avatar avatar-md-size avatar-text badge-wrapper avatar-primary">TS
                        <div class="badge-status-circle badge-status-offline badge-md-circle badge-md"></div>
                    </div>
                    <div class="avatar-square avatar-sm-size avatar-text badge-wrapper avatar-primary">TS
                        <div class="badge-status-circle badge-status-away badge-sm"></div>
                    </div>
                    <div class="avatar avatar-xs-size avatar-text badge-wrapper avatar-primary">TS
                        <div class="badge-status-circle badge-status-ideal badge-xs-circle badge-xs"></div>
                    </div>
                
            

Text badge

Badge with h1 heading

New

Badge with h2 heading

New

Badge with h3 heading

Updated

Badge with h4 heading

New
Badge with h5 heading
Update

Badge with p heading

New
                
                    <div class="badge-wrapper">
                        <h1 class="wrap-inline">Badge with h1 heading</h1>
                        <span class="badge-text badge-box-square fire-bgcolor">New</span>
                    </div>
                    <div class="badge-wrapper">
                        <h2 class="wrap-inline">Badge with h2 heading</h2>
                        <span class="badge-text badge-box-square secondary-bgcolor">New</span>
                    </div>
                    <div class="badge-wrapper">
                        <h3 class="wrap-inline">Badge with h3 heading</h3>
                        <span class="badge-text badge-box-round success-bgcolor">Updated</span>
                    </div>
                    <div class="badge-wrapper">
                        <h4 class="wrap-inline">Badge with h4 heading</h4>
                        <span class="badge-text badge-box-square primary-bgcolor">New</span>
                    </div>
                    <div class="badge-wrapper">
                        <h5 class="wrap-inline">Badge with h5 heading</h5>
                        <span class="badge-text badge-box-square fire-bgcolor">Update</span>
                    </div>
                    <div class="badge-wrapper">
                        <p class="wrap-inline">Badge with p heading</p>
                        <span class="badge-text badge-box-round secondary-bgcolor">New</span>
                    </div>
                
            

Badge over image

New
                
                    <div class="badge-wrapper">
                        <span class="badge-text badge-box-square fire-bgcolor badge-over-image">New</span>
                        <img src="https://picsum.photos/200" class="img-responsive">
                    </div>