Link

.link makes elements look like a link.

Applicable Elements

a
button

Basic Usage

Click the following link to navigate to Introduction Page.
And the next link is actually a button and when clicked.

<p>
  Click the following link to navigate to <a class="link" href="/">Introduction Page</a>.<br/>
  And the next link is actually a button and <button class="link" onclick="alert('hello')">shows an alert</button> when clicked.
</p>

Variants

Here is a normal link which is normal.
And the following link sits seamlessly in the text.
Passive link is suitable for sublinks like Privacy Policy.

<p>
  Here is a <a class="link" href="">normal link</a> which is normal.<br/>
  And the following link <a class="link seamless" href="">sits seamlessly</a> in the text. <br/>
  Passive link is suitable for sublinks like <a class="link passive" href="">Privacy Policy</a>. 
</p>

Combination

.icon suits well with .link.

GitHub.com

<a class="link" href="https://github.com" target="_blank">
  GitHub.com
  <svg class="icon"><use href="/open_in_new.svg#root" /></svg>
</a>