Skip to main content
Logo 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.

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