Sadrazam – Count Badge Showcase
Small rounded notification badge for displaying counts
Basic Usage
Wrap an icon (or any element) in .count-badge-anchor and add a .count-badge inside
Bell
3
.count-badge-anchor > .count-badge
Cart
5
.count-badge-anchor > .count-badge
Envelope
12
.count-badge-anchor > .count-badge
Chat
99
.count-badge-anchor > .count-badge
Font Size Variants
Control badge text size with Sadrazam font-size utilities: .fsi-9, .fsi-10, .fsi-11
fsi-9
7
.count-badge.fsi-9
fsi-10
7
.count-badge.fsi-10
fsi-11
7
.count-badge.fsi-11
Side-by-side comparison with multi-digit numbers
Comparison
24
24
24
fsi-9 / fsi-10 / fsi-11
Color Override
Default background is --color-sec-500. Override with utility classes like .bg-pri-500
Default (sec)
3
.count-badge
Primary
3
.count-badge.bg-pri-500
All icons with both color variants
Default
3
5
12
99
--color-sec-500
Primary
3
5
12
99
.bg-pri-500
Dynamic Visibility
Toggle badge visibility with .d-none utility class. Useful for hiding the badge when count is zero.
Visible
3
.count-badge
Hidden
0
.count-badge.d-none
Toggle Demo
3
classList.toggle('d-none')
HTML Structure
The anchor wrapper provides position: relative for the absolutely positioned badge
<!-- Basic structure -->
<span class="count-badge-anchor">
<i class="ph-bold ph-bell"></i>
<span class="count-badge">3</span>
</span>
<!-- With font size variant -->
<span class="count-badge-anchor">
<i class="ph-bold ph-bell"></i>
<span class="count-badge fsi-10">3</span>
</span>
<!-- With color override -->
<span class="count-badge-anchor">
<i class="ph-bold ph-bell"></i>
<span class="count-badge bg-pri-500">3</span>
</span>
<!-- Dynamic visibility (hidden when count is 0) -->
<span class="count-badge-anchor">
<i class="ph-bold ph-bell"></i>
<span class="count-badge d-none">0</span>
</span>
Dark Background
Badge appearance on a dark surface
Default
3
5
12
99
--color-sec-500
Primary
3
5
12
99
.bg-pri-500