Links

Text link

Just your standard inline text link with no modifiers. Font family, size, weight, etc are inherited from the parent.

A sentence of text with an example link in the middle. 
A sentence of text with
<a href="https://example.com">an example link</a> in the
middle.

Notes

Links can appear in a number of states: unvisited, visited, hovered, active, and focused. It’s hard to display these states visually while keeping this component accurate to reality, so we’ve set up a separate demo page to show all the link states in one place.

Tips

  • Keep link text short, just a few words.
  • The text in a link should be descriptive of the destination or offer some clear indication of where the link leads.
  • You can use the light-links mixin for dark background where links require higher text contrast.

No-nos

  • Don’t use “click here” as link text.
  • Don‘t use text links (the a element) to trigger scripted actions unless the link also has a real destination in case JavaScript isn’t available. The href attribute should have a real URL, not # or javascript:void(0). For script-only actions use a button element. Buttons do things; links go places.
  • Don’t use rel="nofollow" for internal links

A call to action link that can be used in number of different components, such as a billboard or card.

Learn more about us 
<a class="mzp-c-cta-link" href="https://example.com">Learn more about us</a>