Link

Links are key elements for the navigation. Thanks to underscoring, they can easily be spotted by users. Different colors from our design system can be used to highlight different categories of links. If the link results in an action, then a button should be used.

Example

  • If you want fancy links, add the class .nj-link
  • If you want to add an icon after add the class .nj-link-icon
  • If you want to add an icon before, you will need the modifier class .nj-link-icon--before
<a href="#" class="nj-link">A text link</a><br><br>
<a href="#" class="nj-link nj-link-icon"><span>Here is a text link</span><i class="material-icons">chevron_right</i></a><br><br>
<a href="#" class="nj-link nj-link-icon"><span>Here is a text link</span><i class="material-icons">phone</i></a><br><br>
<a href="#" class="nj-link nj-link-icon nj-link-icon--before"><i class="material-icons">add</i><span>Here is a text link</span></a>

For link with target=_blank, please use the open_in_new material icon.

<a href="#" target="_blank" class="nj-link nj-link-icon"><span>External link</span><i class="material-icons">open_in_new</i></a>

Theme color

<a href="#" class="nj-link nj-link--primary">primary text link</a><br>

<a href="#" class="nj-link nj-link--success">success text link</a><br>

<a href="#" class="nj-link nj-link--danger">danger text link</a><br>

<a href="#" class="nj-link nj-link--warning">warning text link</a><br>

<div class="bg-blue-corporate p-1 mt-1">
  <a href="#" class="nj-link nj-link--light">light text link</a>
</div>