Link

Primary Link

<!-- primary link -->
<!-- by default, icons are aligned right of the link -->
<a class="ui-link" href="#">
  Forward link
  <i class="ui-icon ui-icon--arrow-right ui-icon--primary"></i>
</a>

<!-- primary link - icon aligned left -->
<!-- use the class "ui-link--left" to align the icon on the left -->
<a class="ui-link ui-link--left" href="#">
  Back link
  <i class="ui-icon ui-icon--arrow-left ui-icon--primary"></i>
</a>

<!-- secondary link -->
<a class="ui-link ui-link--secondary" href="#">
  Back link
  <i class="ui-icon ui-icon--arrow-left ui-icon--medium"></i>
</a>

<!-- icons -->
<a class="ui-link" href="#">
  Play
  <i class="ui-icon ui-icon--play"></i>
</a>

Basic Link

<!-- default -->
<a href="#" class="ui-link">...</a>
<a href="#" class="ui-link ui-link--underline">...</a>

<!-- white -->
<a href="#" class="ui-link ui-link--white">...</a>
<a href="#" class="ui-link ui-link--underline ui-link--white">...</a>

<!-- red -->
<a href="#" class="ui-link ui-link--white">...</a>
<a href="#" class="ui-link ui-link--underline ui-link--white">...</a>

Inline Link

By default, inline links have underline to differentiate from surrounding text

<!-- inline (within text) -->
<!-- no class required, styles applied to <a> tag automatically, which helps if -->
<!-- links come from external source where extra classes can't be added -->
Some text with an anchor tag <a href="#">...</a> in the middle...

Button link

Deprecated
Button link was not designed by UX team and is now deprecated. Please follow guidence in button section.

If you need a link (href) that looks like a button. All the variants of the buttons can be used on <a> anchor links.

<!-- links styled as buttons -->
<a class="ui-btn ui-btn--small" href="...">...</a>
<a class="ui-btn ui-btn--small ui-btn--secondary" href="...">...</a>
<a class="ui-btn ui-btn--small ui-btn--red" href="...">...</a>