Skip to main content

Hyperlink

Hyperlinks are contextual links that navigate the user to another page on the site, or to a different part within the same page or elsewhere on the web. The main intent behind hyperlink is to take the user to another resource. It is intended to be clicked on in the middle of a workflow, rather than the end of a workflow (as in the case of button).

Example

Hyperlink on a default theme

Best practices

Use a hyperlink when you need to navigate the user to more information about the text that was selected. Hyperlinks are best used for tertiary actions outside the main work flow.

Do

  • Hyperlinks may appear as standalone elements (on a line by themselves), or inline elements (in the middle of regular text).
  • Use inline hyperlinks within the context of a sentence or a paragraph.
  • Within a paragraph, hyperlinks should inherit the same formatting as the neighboring text as far as font size and font weight. Inline links will appear underlined.
  • Two hyperlinks can appear consecutively on separate lines of text and wrap.
  • Hyperlinks text must be clear and unique.
  • Multiple links to same location should have identicle link text.

Don’t

  • Don’t use hyperlink to initiate actions (Ex. to download a file). Instead, consider using action trigger.
  • Don’t use hyperlink for calls to action (Ex. "buy". Consider using call to action instead.
  • Don’t use hyperlink for the final action in a workflow. (Ex. "save" settings.) Consider using button instead.
  • Don’t hyperlink entire sentences. Instead keep hyperlinks to just a few words, 4-5 max.
  • Don’t include the period in the hyperlink if at the end of a sentence.

Also known as

Hypertext
Links
Navigation links

Related

Button
Action trigger
Call to action

Accessibility

  • A hyperlink is required to have two points of visual distinction when inline. The underline and visual state colors are both required for accessibility.

Development

  • Schema definition: The hyperlink schema defines the acceptable configurations, requirements, and options for each component.

Code and preview

Default Hyperlink

<a href="http://www.getmwf.com" class="c-hyperlink">Hyperlink</a>