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, or added manually by adding the class has-external-icon.

I open in a new tab I open in a new tab, but have my icon disabled I don't open in a new tab, but I have an icon

<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>
<a href="#" class="link has-external-icon">
  I don't open in a new tab, but I have an icon
</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, or added manually by adding the class has-download-icon.

I download a file I download a file, but have my icon disabled I don't download a file, but I have an icon

<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>
<a href="#" class="link has-download-icon">
  I don't download a file, but I have an icon
</a>