Badge

Badges highlight new functionality or features for the user, just like a notification would.

Example

Badge are mostly used for notifications in different organisms like avatar or menu. It can also be a link.

75
<div class="nj-badge nj-badge--blue-corporate">75</div>

Color Variation

75
75
75
75
75
75
75
75
75
75
75
75
75
75
75
75
75
75
<div class="d-flex flex-wrap">
<div class="nj-badge nj-badge--white">75</div>
<div class="nj-badge nj-badge--blue-corporate">75</div>
<div class="nj-badge nj-badge--blue-allports">75</div>
<div class="nj-badge nj-badge--blue-venice">75</div>
<div class="nj-badge nj-badge--green-java">75</div>
<div class="nj-badge nj-badge--green-pine">75</div>
<div class="nj-badge nj-badge--green">75</div>
<div class="nj-badge nj-badge--orange">75</div>
<div class="nj-badge nj-badge--red">75</div>
<div class="nj-badge nj-badge--blue-bigstone">75</div>
<div class="nj-badge nj-badge--blue-rhino">75</div>
<div class="nj-badge nj-badge--green-fun">75</div>
<div class="nj-badge nj-badge--green-riogrande">75</div>
<div class="nj-badge nj-badge--yellow">75</div>
<div class="nj-badge nj-badge--purple">75</div>
<div class="nj-badge nj-badge--violet">75</div>
<div class="nj-badge nj-badge--violet-eggplant">75</div>
<div class="nj-badge nj-badge--cerise">75</div>
</div>