---
title: Link (Vanilla) - USWDS + Tailwind
description: Connect visitors to another page or more information with link
  styles and usage examples.
---

# Link

Connect visitors to another page or more information with link styles and usage examples.

## Example

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