Default text links use the $brand-primary color and have default, hover, focus and active states.

Examples

The underlined link style adds additional affordance for links within their container or surrounding content by adding a bottom border to the link. The underlined style is ideal when a link is surrounded by other text where the underline provides additional visual affordance.

Examples

Telephone (tel:) links are for phone numbers. Visually they are the same as any other link, but the markup and accessibility considerations are different.

Examples

Usage

Rules

  • As a general rule, buttons do and links go
  • Link text should clearly and concisely describe what to expect when a user follows the link
  • Links should always leverage the underlined style when in a line of text, in which part of that text is not a link, and within paragraphs
  • External links (links that open a new window/tab or leave the context of the website) must use the external link pattern

Constraints

  • In general, links should not perform an action, but if it is necessary add role="button" to the anchor (a)

Principle

  • Links provide users with navigational cues and function to compelte tasks

Accessibility

  • A user should know, from the link text, what to expect when following the link, i.e. although “Learn More“ may seem appropriate visually in context, labels like these do not provide the specificity that would benefit most users
  • External links should be indicated as such for both screen reader users and sighted users. Out pattern requires that <span class="ext-ref">(external link)</span><span aria-hidden="true"></span> be placed within the anchor (a). The .ext-ref class does the same thing as .sr-only so that the “external link“ text is visually hidden but read, and it also uses a sibling selector for the span that follows so an arrow can be added to the end of the link for sighted users.
  • Underlined links provide additional affordance for text links that are within a paragraph or other layout where the color of the link does not have enough contrast with surrounding text or UI.
  • For tel: links it is recommended to use aria-label to ensure that it is clear that the link is a phone number. Note that the country calling code should be omitted from the aria-label for standard numbers (to mirror the displayed number), and the spaces between the “800“ should be omitted in the aria-label for 800 numbers (so the familiar “1-800“ is pronounced as such).

Class Names

link-reversed
Modifier

Use on the anchor (a) for links that should be lighter against a darker background
link-underlined
Modifier

Use on the anchor (a) or a parent container to style links with an underline
ext-ref
Modifier

Although technically a modifier, this is required on external text links. Add on a span within the anchor (a). The span should be immediately proceeded by <span aria-hidden="true"></span> to add the visual indication of an external link.
  • Last updated June 20, 2018
  • Authorable - The underlined style will be available after Core Framework‘s next release, other styles are currently authorable
  • Core - Links