Link

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

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>