Notification Badge
Default notification badge
Use the class notif-badge in order to display a notification badge.
1
16
20+
Discussion20+
Discussion<span class="notif-badge">20+</span>
Notification badge with icon
Add the class .-with-icon to add an icon to the badge.
<i class="icon -bell"></i>
<span class="notif-badge -with-icon">16</span>
Notification badge without number
Add the class .-without-number to remove numbers from badges.
Counsel Confidential
<span class="label">
Counsel Confidential
<span class="notif-badge -without-number"></span>
</span>
<i class="icon -bell bell-notif">
<span class="notif-badge -without-number"></span>
</i>
Color variants
Use the following classes .-primary, .-success or .-warning to color notification badges.
1
16
20+
<span class="notif-badge -primary">1</span>
<span class="notif-badge -success">16</span>
<span class="notif-badge -warning">20+</span>
<i class="icon -bell"></i>
<span class="notif-badge -with-icon -primary">1</span>
<i class="icon -bell"></i>
<span class="notif-badge -with-icon -success">16</span>
<i class="icon -bell"></i>
<span class="notif-badge -with-icon -warning">20+</span>
Counsel Confidential
Investor Confidential
<span class="label">
Counsel Confidential
<span class="notif-badge -without-number -primary"></span>
</span>
<span class="label">
Investor Confidential
<span class="notif-badge -without-number -success"></span>
</span>
<i class="icon -bell bell-notif">
<span class="notif-badge -without-number -warning"></span>
</i>
Related mixin
@mixin notif-badge-color($gradient-color-top, $gradient-color-bottom, $border-color) {
background-image: linear-gradient($gradient-color-top 0, $gradient-color-bottom 100%);
border: 1px solid $border-color;
}
Example
Usage:
@include notif-badge-color($danger-color, $danger-color-dark-20, $danger-color-dark-40);
CSS Output:
background-image: linear-gradient(#c46345 0, #ab5136 100%);
border: 1px solid #8c422c;