Badges are generic inline containers for numerical content. Add them to headings, paragraphs, lists, buttons, anything really!
It is important to note that there is no coloring on the badge class. The background-color and color of the .badge class inherits from the elements parent but in a reverse order. So the parents color property becomes the badge's (child's) background-color property. It will default to gray bg and white text if those properties are not set. Here's an example of that in effect:
Bring attention to new items or highlight important datapoints by adding a span element with the class .badge.
You can use them in headings:
In paragraphs and in hyperlinks
Literally you can put these badges anywhere and its hard to get wrong!
When there are no new or unread items, badges will simply collapse (via CSS's :empty selector) provided no content exists within.
One final thing to remember: you can also put icons in badges to really push your badge game to the limit.