Predix

Notifications
There are no new notifications.

Badges

pxh-badge — view demo

Add a badge to a primary navigation item

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.

123 <span class="pxh-badge">123</span>
123 <span class="pxh-badge pxh-badge--primary">123</span>
123 <span class="pxh-badge pxh-badge--info">123</span>
123 <span class="pxh-badge pxh-badge--healthy-black">123</span>
123 <span class="pxh-badge pxh-badge--healthy-white">123</span>
123 <span class="pxh-badge pxh-badge--error">123</span>
123 <span class="pxh-badge pxh-badge--warning">123</span>
123 <span class="pxh-badge pxh-badge--important">123</span>
123 <span class="pxh-badge pxh-badge--navigation">123</span>