Link

.link makes elements look like a link.

Applicable Elements

a
button

Basic Usage

Click the following link to navigate to Introduction Page.
The next element but is actually a button that shows an alert.

<p>
  Click the following link to navigate to <a class="link" href="/">Introduction Page</a>.<br/>
  The next element <button class="link" onclick="alert('hello')">looks like a link</button> but is actually a button that shows an alert.
</p>

Variants

Here is a standard link.
And the following link sits seamlessly in the text.
The passive variant is suitable for secondary links such as Privacy Policy.

<p>
  Here is a <a class="link" href="">standard link</a>.<br/>
  And the following link <a class="link seamless" href="">sits seamlessly</a> in the text. <br/>
  The passive variant is suitable for secondary links such as <a class="link passive" href="">Privacy Policy</a>.
</p>

Combination

.icon pairs 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>