Links

Links connect users to a different page or further information.

This is a text link on a light background.

This is a visited link.

This is a link that goes to an external website.

This is a text link on a dark background.

1
2
3
4
5
6
7
8
9

<p><a class="usa-link" href="javascript:void(0);">This</a> is a text link on a light background.</p>

<p><a class="usa-link usa-color-text-visited" href="javascript:void(0);">This</a> is a visited link.</p>

<p>This is a link that goes to an <a class="usa-link usa-link--external" href="https://i.giphy.com/media/WPzQF6ruiIIVzHNlwX/source.gif">external website</a>.</p>

<div class="usa-dark-background">
  <p><a class="usa-link" href="javascript:void(0);">This</a> is a text link on a dark background.</p>
</div>

Accessibility

  • Users should be able to tab to navigate between links.
  • Users should be able to activate a link when pressing ‘Enter’ on their keyboard.
  • Users should be able to identify links without relying on color alone.
  • Users should be able to activate hover and focus states with both a mouse and a keyboard.

Package information

  • Package usage: @import global
  • Requires: required