Text link
Body SemiBold with a 1px underline. Hover and press change the underline to 2px and shift the color. The target is 32px tall.
View HTML
<a class="link" href="#">
<span class="link__text">Read the case study</span>
</a>
<a class="link" href="#" target="_blank" rel="noopener">
<span class="link__text">Open the resume</span>
<!-- icon: open_in_new -->
<span class="visually-hidden">(opens in new tab)</span>
</a>External links
A link that opens a new tab shows the external-link icon and carries hidden "(opens in new tab)" text for screen readers. It uses rel="noopener".
On a blue surface
On the brand band, add link--on-brand. It keeps the same shape: underlined, 32px tall. The colors come from the interactive/link/on-brand roles. Hover thickens the underline to 2px, press changes the color, and the focus ring is the on-brand ring. Hover, press and tab to the first link to see each state; the second is a static disabled example.
View HTML
<a class="link link--on-brand" href="#">
<span class="link__text">Get in touch</span>
</a>
<a class="link link--on-brand" aria-disabled="true">
<span class="link__text">Not available yet</span>
</a>A disabled link has aria-disabled="true" and no href, so it is not a link to activate and it does not take focus.
Using links
Do
- Say where the link goes: "Read the case study", not "Click here".
- Keep the underline.
Don't
- Remove the underline and rely on color.
- Open a new tab without saying so.
Up next
Menu item
One link in the menu dropdown, with its type size set by the breakpoint.