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.

This is an alternate external text link on a dark background.

<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>

<div class="usa-dark-background">
  <p><a class="usa-link usa-link--alt usa-link--external" href="https://i.giphy.com/media/WPzQF6ruiIIVzHNlwX/source.gif">This</a> is an alternate external 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