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