Link

An interactive text element used to navigate to a different page or external resource.

Basic Usage

Any element can be styled as a Link by applying the class link. Most of the time, this class should only be used on a elements.

This is a link. This is a span with the link class.

<a href="#" class="link">This is a link.</a>
<span class="link"
  >This is a span with the link class.</span
>

New Tab

Links that open in a new tab (i.e., have target='blank') will automatically have an icon appended to the text. This can be disabled by adding the class no-external-icon.

I open in a new tab I open in a new tab, but have my icon disabled

<a href="#" class="link" target="_blank"
  >I open in a new tab</a
>
<a href="#" class="link no-external-icon" target="_blank"
  >I open in a new tab, but have my icon disabled</a
>

Download

Links that download a file (i.e., have the download attribute) will automatically have an icon appended to the text. This can be disabled by adding the class no-download-icon.

I download a file I download a file, but have my icon disabled

<a href="/download.txt" download="Download.txt" class="link"
  >I download a file</a
>
<a
  href="/download.txt"
  download="Download.txt"
  class="link no-download-icon"
  >I download a file, but have my icon disabled</a
>