To include a badge to the right of a primary navigation item, refer to this markup:
<a href="#" class="pxh-navigation__link pxh-navigation__link--active">
<i class="fa fa-table pxh-navigation__item-icon"></i>
<span class="pxh-navigation__item-text">Nav Item Three</span><span class="pxh-badge pxh-badge--navigation"></span>
</a>
A number of modifier classes are available to changing the color of the badge. For instance, add the modifier class pxh-badge--important
to make the badge red.
<span class="pxh-badge">123</span>
<span class="pxh-badge pxh-badge--primary">123</span>
<span class="pxh-badge pxh-badge--info">123</span>
<span class="pxh-badge pxh-badge--healthy-black">123</span>
<span class="pxh-badge pxh-badge--healthy-white">123</span>
<span class="pxh-badge pxh-badge--error">123</span>
<span class="pxh-badge pxh-badge--warning">123</span>
<span class="pxh-badge pxh-badge--important">123</span>
<span class="pxh-badge pxh-badge--navigation">123</span>