Skip to main content

Link

Description​

Links use descriptive text to provide navigation to content and features. Unlike buttons, links do not invite the user to take an action. Rather, they take the user somewhere in or outside the site.

For accessibility purposes, links will normally be a color that contrasts strongly with its surface and any surrounding text or UI elements. Links also use a heavier font weight than regular text.

Sizes​

Link size options are the same as body text size options. The base size (1 rem, 16px) is the default. Smaller sizes may be used in dense data displays or legal copy.

Link size example(s)coming soon

Usage​

Users scan web pages and look for clues about where they should go next. As links help the user navigate they should stand out both visually and contextually.

Content​

Links should use salient, descriptive text to help guide the user to the desired content or function.

Links should have clearly explain where they will take users.

Good links are unique and easy to understand. When writing, use the link text to answer this question: ”What will the user get or where will they go when they clink this link?”

Poor link text hurts usability, accessibility, and SEO. Even when links stand out, they need to be meaningful. Never use generic text like “Click here”.

Link text should begin with a verb (e.g., “View details”).

Link text do/do not example(s) coming soon

Icons​

Links may have an optional left or right icon, but not both. The optional icon must be the same size and color as the text.

Decoration​

The high contrast color of a link provides sufficient affordance when it stands alone in a layout. However, when a link is presented within body text it should be underlined to provide additional visual distinction. Links also use a heavier font weight than regular text.

Example coming soon

Visited State​

Visited state styling should be used when it is likely to help a user recall that content has been viewed. However, since this can also be distracting in certain contexts (e.g., a search results page with many links). Developers please note: visited styling can be suppressed in favor of other cues.