We use badge notification when we work with E-commerce related web site. In that website we show shopping cart items using badge notifications.
Ex:
<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<style>
.item {
position:relative;
padding-top:20px;
display:inline-block;
}
.notify-badge{
position: absolute;
right:-10px;
top:15px;
background:red;
text-align: center;
border-radius: 30px 30px 30px 30px;
color:white;
padding:2px 5px;
font-size:10px;
}
</style>
</head>
<body>
<li aria-haspopup=”true”><div class=”item”><span class=”notify-badge”>0</span><img src=”https://furnitmart.in/assets/Images/furnitmart-shoppingcart.png” ui-sref=”ShowCartItems” style=”cursor:pointer”/></div> </li>
</body>
</html>
Op:
