Links

Variations

Default (Underlined)

Use underlined links in most cases.

• Use in body text, ordered, and unordered lists.
• Never use when horizontal rules separate multiple links, i.e., Data Tables and List Groups. Instead, use the no underline link.

No Underline

Use to avoid visual clutter. No-underline links don't meet all accessibility benchmarks, so MDS is evaluating alternatives. In the interim, teams can still use no-underline links in production.

• Never use in body text, ordered ,and unordered lists. Instead, use the default (underlined) link.
• Always use in cases where horizontal rules separate multiple links, i.e., Data Tables and List Groups.
• Use when a link is paired with an icon that affords interaction, i.e., an expandable section with a caret icon.
• Never display a visited state for links in List Groups or as titles of expandable sections.

Guidelines

Use When

• Leading a user to another page.
• Signaling email functionality by styling the address itself.

Don’t Use When

• Submitting or confirming an action. Instead, use a Button.

Visual Language

Behaviors

• Always open links in the same window unless requirements dictate otherwise, for example:
  • Opening a PDF document.
  • When opening a link in the same window will interrupt a user’s workflow.

Editorial

• Link copy should convey what we will deliver once the link is clicked, for example:
  • Morningstar Advisory Agreement
  • Details on How We Manage Your Plan
• Links can be questions that we will answer, or they can be declarative, for example:
  • What’s Included in the Overall Savings Rate?
  • How’s This Calculated?
• When a link opens a Modal or secondary workspace, consider using the words in the link as the header for the modal.
• Underline just the relevant words in a sentence or paragraph, for example:
  • Want to see our Privacy Policy?
• Don’t use “click here,” “tap this link,” etc., inside link copy. Link copy should be device agnostic—a user may not have a mouse with which to click or the capability to tap.

Accessibility

• Never apply the mds-link class or mixin to an element other than <a>.
• Always include focus styles for a link.
• Always include an href attribute for a link.

Code Reference

CSS Class References

Mixin Reference

Use this mixin to add link styles to any element. Set $underline to false to hide underlines. Set $visited-styles to false to prevent a color change after a link is visited.