Links

Links navigate to other pages or additional information.

Variations

Default (Underlined)

Use underlined links in most cases.

Default
Hover
Focus
Visited
<a href="#" class="mds-link">Link Text</a>
  • 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.

Default
Hover
Focus
Visited
<a href="#" class="mds-link mds-link--no-underline">Link Text</a>
  • 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

Do use no underline links in Data Tables.
Do use no underline links in Data Tables.
Don‘t use underlined links.
Don‘t use underlined links.
Do use no underline links in List Groups.
Do use no underline links in List Groups.
Don‘t use underlined links.
Don‘t use underlined links.
Do use no underline links when paired with an icon that affords interaction, i.e., an expandable section with a caret icon.
Do use no underline links when paired with an icon that affords interaction, i.e., an expandable section with a caret icon.
Don‘t use underlined links.
Don‘t use underlined links.

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

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

Class
Applies to
Outcome

.mds-link

Any link element

Adds default, visited, hover, and focus styles to a link.

.mds-link--no-underline

.mds-link

Removes the underline from link styles.

.mds-link--no-visited

.mds-link

Prevents visited styles from being applied after a link is visited.

Mixin Reference

@include mds-link($underline: true, $visited-styles: true)

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.

©2017 Morningstar, Inc. All rights reserved. Terms of Use