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:
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>