Link

Links let users know there is more information, another page, or a different website they can navigate to. We make the ability to select a link clear through style choices and use link labels that indicate the destination it will take you to.

The styles and guidelines provided here apply to links in body text and generally within the content of a site (such as breadcrumbs). While the overall principles still apply, styles in places like the main site menu and local navigation may vary.

Use links for standard navigation from one page or website to another.

If you need to communicate actions a user can take (such as download, save, or submit), use a button instead.

Our link styles reflect long-standing conventions and an attention to accessibility.

Links within body text are teal-400 and underlined by default. Underlining is the expected indicator of a link and color is used to help the links stand out (but should never be used alone).

On hover, a text-decoration of 2px thickness appears for the underline. The focus state adds a maize box around the link text. See the code example at the bottom of the page for details.

In addition, we offer a visited link color in Matthaei Violet (#575294). This is from U-M’s secondary color palette, but is not included in our color tokens.

In some cases, links can be neutral-400 and have the underline removed, except on hover. This style is often used when many links are presented together, such as with list items where repeated underlines impede readability. Contact the Design System team with questions about when to use this style.

Your link text should be descriptive, meaningful and clearly indicate the destination of the link. See link text with our grammar and style guidance for details.

By default, links should open in the same tab. This gives all users the ability to decide if they want to stick with the default or manually open the link in a new tab or window. Opening in the same tab also maintains the browser's back button functionality, provides a consistent overall experience, and supports mobile users who may find multiple tabs harder to navigate.

There are some scenarios where it can make sense to default to opening a link in a new tab or window instead of the same one. One example is a link to help documentation where opening in the same tab would break a workflow or cause the user to lose work (such as a populated form fields).

If you determine opening in a new window or tab is appropriate, you must either identify that the link opens in a new window as part of link text or include "Opens in a new window" as visually hidden text and use an icon to indicate the new window. Our code example illustrates both options.

Relevant WCAG guidelines

Code example

See example pen by U-M Library Design System (@umlibrary-designsystem) on CodePen.