Skip to main content
USWDS + Tailwind

Link

A link connects users to a different page or further information.

Example

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

This is a text link on a light background.

This is a visited link.

This is a link that opens in the current tab External and goes to an external website.

This is a link that opens in a new tab External, opens in a new tab and goes to an external website.

This is a text link on a dark background.

This is a visited link on a dark background.

This is an external text link External, opens in a new tab on a dark background.

HTML
<div class="space-y-12">
<div class="space-y-4">
<p>This is
<a
href="#"
class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline-4 focus:outline-blue-40v underline"
>a text link</a>
on a light background.
</p>
<p>This is
<a
href
class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline-4 focus:outline-blue-40v underline"
>a visited link</a>.
</p>
</div>
<div class="space-y-4">
<p>This is
<a
href="#"
rel="noreferrer"
class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline-4 focus:outline-blue-40v underline after:icon-[material-symbols--open-in-new] after:size-4 after:align-middle after:ml-px"
>
a link that opens in the current tab
<span class="sr-only">External</span>
</a>
and goes to an external website.
</p>
<p>This is
<a
href="#"
rel="noreferrer"
target="_blank"
class="text-blue-60v visited:text-violet-70v hover:text-blue-70v focus:outline-4 focus:outline-blue-40v underline after:icon-[material-symbols--open-in-new] after:size-4 after:align-middle after:ml-px"
>
a link that opens in a new tab
<span class="sr-only">External, opens in a new tab</span>
</a>
and goes to an external website.
</p>
</div>
<div class="bg-gray-90 space-y-4 p-4 text-white">
<p>This is
<a
href="#"
class="text-gray-10 hover:text-gray-5 focus:outline-4 focus:outline-blue-40v underline"
>a text link</a>
on a dark background.
</p>
<p>This is
<a
href
class="text-gray-10 hover:text-gray-5 focus:outline-4 focus:outline-blue-40v underline"
>a visited link</a>
on a dark background.
</p>
<p>This is
<a
href="#"
rel="noreferrer"
target="_blank"
class="text-gray-10 hover:text-gray-5 focus:outline-4 focus:outline-blue-40v underline after:icon-[material-symbols--open-in-new] after:size-4 after:align-middle after:ml-px"
>
an external text link
<span class="sr-only">External, opens in a new tab</span>
</a>
on a dark background.
</p>
</div>
</div>