Badge

A small inline indicator for notification counts or short status values. Place it alongside the label it relates to, such as a navigation item or a heading.

          
<span class="drdr-badge">3</span>
          
        

Live example:

Accessibility

On its own a badge only communicates a number visually. When the count carries meaning, give it context with visually hidden text so it is announced by assistive technology:

          
<a href="/messages">Messages <span class="drdr-badge">3</span><span class="sr-only"> unread</span></a>
          
        

Do not rely on the badge alone to convey important state.

Classes

drdr-badge

The badge itself. Apply to an inline element (e.g. a span) wrapping the count or short status text.