Badges

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 or bottom-right corners.

<link rel="stylesheet" href="https://paperui.netlify.app/components/badge/style.css">

Profile Badge

These are used to show the activity status generally. You can access Profile Badges using class names success, danger, and warning.

Examples

                
                    <div class="badge">
                        <img class="avatar" src="../../images/avatars/profile3.jpg">
                        <div class="badge-icon success"></div>
                    </div>
                    <div class="badge">
                        <img class="avatar" src="../../images/avatars/profile2.jpg">
                        <div class="badge-icon danger"></div>
                    </div>
                    <div class="badge">
                        <img class="avatar" src="../../images/avatars/profile1.jpg">
                        <div class="badge-icon warning"></div>
                    </div>

Heading Badge

Headings are used to tell the user about the status of a particular item.

Examples

Heading

New

Heading

New

Heading
New
New
New
                
                    <div class="badge-h">
                        <h1>Heading</h1>
                        <h1 class="head-badge">New</h1><h1>
                    </h1></div>
                    <div class="badge-h">
                        <h4>Heading</h4>
                        <h4 class="head-badge">New</h4><h4>
                    </h4></div>
                    <div class="badge-h">
                        <h6>Heading</h6>
                        <h6 class="head-badge">New</h6><h6>
                    </h6></div>
                    <div class="badge-h">
                        <img class="avatar" src="../../images/avatars/profile3.jpg">
                        <h6 class="head-badge card-badge">New</h6>
                    </div>
                    <div class="badge-h">
                        <img class="avatar" src="../../images/avatars/profile3.jpg">
                        <h6 class="head-badge card-badge-rt">New</h6>
                    </div>

Background colors

Different background colours for the badges can be used too.

Examples

primary

secondary

success

danger

warning

dark

                
                    <p class="badge bg primary">primary</p>
                    <p class="badge bg secondary">secondary</p>
                    <p class="badge bg success">success</p>
                    <p class="badge bg danger">danger</p>
                    <p class="badge bg warning">warning</p>
                    <p class="badge bg dark">dark</p>

Number Badge

Number Badges are used to tell the user the number of items present.

Examples

shopping_cart
5
email
7
                
                    <div class="badge">
                        <i class="material-icons badge-ico">shopping_cart</i>
                        <div class="badge-icon badge-num warning">5</div>
                    </div>
                    <div class="badge">
                        <i class="material-icons badge-ico">email</i>
                        <div class="badge-icon badge-num danger">7</div>
                    </div>