PF Next

Badge

Read Badge

Preview

7 24 240 999+
<span class="pf-c-badge pf-m-read">
    7
</span>
<span class="pf-c-badge pf-m-read">
    24
</span>
<span class="pf-c-badge pf-m-read">
    240
</span>
<span class="pf-c-badge pf-m-read">
    999+
</span>

Unread Badge

Preview

7 24 240 999+
<span class="pf-c-badge pf-m-unread">
    7
</span>
<span class="pf-c-badge pf-m-unread">
    24
</span>
<span class="pf-c-badge pf-m-unread">
    240
</span>
<span class="pf-c-badge pf-m-unread">
    999+
</span>

Documentation

Overview

Always add a modifier class. Never use the class .pf-c-badge on its own.

Usage

Class Applied To Outcome
.pf-c-badge <span> Initiates a badge. Always use with a modifier class.
.pf-m-read .pf-c-badge Applies read badge styling.
.pf-m-unread .pf-c-badge Applies unread badge styling.