Examples

The only base HTML element the design system applies styling to is the <a> element. You can also use .ds-c-link and .ds-c-link--inverse for styling links.

On light background

<p>
  <a href="javascript:void(0);">This is a text link</a>
  on a light background.
</p>
<p>
  <a href="https://design.cms.gov/">This is a visited link</a>
  .
</p>

On dark background

<div class="ds-base ds-base--inverse ds-u-padding--1">
  <p>
    <a href="javascript:void(0);">This is a text link</a>
    on a dark background.
  </p>
  <p>
    <a href="https://design.cms.gov/">This is a visited link</a>
    on a dark background.
  </p>
</div>

Code

Styles

The following Sass variables can be overridden to change the type sizes:

• $font-size-5xl
• $font-size-4xl
• $font-size-3xl
• $font-size-2xl
• $font-size-xl
• $font-size-lg
• $font-size-md, uses $font-size-base
• $font-size-sm

Guidance

Your link should always describe where it will take users. Users tend to scan text online, and elements that stand out (like links) grab attention. Clear links can help users navigate more quickly.

For example, instead of:

Learn more

Use:

Learn how to reset your passphrase

Never use a link to say “click here.” A nondescript link forces users to backtrack and read the surrounding text for more context. This is even more problematic for those who rely on screen readers, which can list links for quicker navigation. A list of “click here” isn’t helpful for anyone.

When to use

• Navigating to a new page or view in your application
• Navigating to a different web page, e.g. external documentation
• Note: Warn the user if links open a new window or downloads a file (PDF, for example).

When to consider alternatives

• Opening or closing a modal or dialog
• Triggering a dropdown menu
• Submitting data to the server

Accessibility

• Users should be able to tab to navigate between links.
• Users should be able to activate a link when pressing ‘Enter’ on their keyboard.
• Users should be able to identify links without relying on color alone.
• Users should be able to activate hover and focus states with both a mouse and a keyboard.