Badges

Highlight new or unread items by adding a <span class="badge"> to links, buttons, nav elements, and more. You can use color modifiers with 5 predefined colors by adding additional class .success, .important, .info, .warning or .inverse. Example:

Inbox Items14

Elements with class .badge and animated appearance. Add class badges animated to the required navigation element, then to the same element add data-buble field with needed value (eg data-bubble="10"). Example:

Items 10Items 15Items 20Items 30

Code:

<a class="badges animated info" data-bubble="10" href="#">Items 10</a>
<a class="badges animated success" data-bubble="15" href="#">Items 15</a>
<a class="badges animated inverse" data-bubble="20" href="#">Items 20</a>
<a class="badges animated important" data-bubble="30" href="#">Items 30</a>

This page has been viewed: 1023 time(s)