Text Links
Purpose
Use text links that are distinct, descriptive and consistent to help customers navigate the site.
Discoverability
Your links should:
Be blue and underlined: This acts as a strong visual cue that the text is a link. Color and underline together are needed to be inclusive, we cannot rely on color as the only way to communicate information.
Have dedicated active and hover styles: Differentiating the link style on hover or on click provides visual feedback that enhances usability.
Start with keywords: Keep link text short and consise. Inform users of where they will go e.g. the page title or heading of the destination.
End a sentence: Adding text links at the end of a sentence helps users to take action more quickly. Only use punctuation for complete sentences and do not include the punctuation in your text link.
Links for Accessibility
Usage
Links should make sense out of context and be clear in their purpose/destination. Links are semantically different to buttons and should always be identified as a link regardless of how users consume them. Take a look at our accessibility guide for more details.
Text Avoidances in Links
To make links more accessible, avoid these common wording pitfalls.
- Don’t use verbiage such as “link to,” “click here,” or “learn more.” This doesn’t provide enough context.
- Don’t use a URL as a link.
- Don’t use all caps except for the purposes stated in the Guidelines section.
Example - Text for Links
| Requirement | Do this. | Don't do this. |
|---|---|---|
| Context | Edit email address | Edit |
| Context and Purpose | Update marketing preferences | wwww.marketingsettings.com/update |
| Important Information First | Products (opens in a new tab) | Link opens in new tab: Products |
| Readability | Readable link | NOT A READABLE LINK |
Links Do’s and Don’ts
Do this.
- Use non-empty href attributes to provide context.
- Use alt text for links that are just images or icons.
- Use title attributes appropriately, to clarify the purpose of a link.
- Give identical labels to links that serve the same purpose.
Don't do this.
- Don't use negative tabindex anywhere, including links, as this makes elements less accessible.
- Don't directly link to new tabs or downloads.
Inline Text Links
Usage
Inline text links live within a body of copy and should clearly describe the target destination, rather than say something generic (e.g. “Click here”, “Learn more”). As Inline text links are inline, they are the exception to our 44xx44px target size accessibility requirement. Take a look at our accessibility guide for more details.
Example - Light Background
If you suspect fraud, please call 1-800-528-4800 immediately for assistance. If your Card has been lost or stolen, please request a replacement Card.
<div class="row">
<div class="col-md-8">
<p>
If you suspect fraud, please call 1-800-528-4800 immediately
for assistance. If your Card has been lost or stolen, please
<a class="link-underlined" href="#example">request a replacement Card</a>.
</p>
</div>
</div>Example - Dark Background
If you suspect fraud, please call 1-800-528-4800 immediately for assistance. If your Card has been lost or stolen, please request a replacement Card.
<div class="row">
<div class="col-md-8">
<p class="inverted pad">
If you suspect fraud, please call 1-800-528-4800 immediately
for assistance. If your Card has been lost or stolen, please
<a class="link-underlined-light focus-light" href="#example">request a replacement Card</a>.
</p>
</div>
</div>Standalone Text Links
Usage
Standalone links can be placed in either an isolated, stacked vertical, or horizontal list view. They should not be mistaken for tertiary buttons, which also lack visible containers.
Example - Standalone Link
<div class="row">
<div class="col-md-8">
<a class="text-link link-underlined" href="#example"><span>Text Link</span></a>
</div>
</div>Vertical Links List
Example
<ul class="list-links">
<li><a class="text-link display-block link-underlined" href="#example"><span>Text Link 1</span></a></li>
<li><a class="text-link display-block link-underlined" href="#example"><span>Text Link 2</span></a></li>
<li><a class="text-link display-block link-underlined" href="#example"><span>Text Link 3</span></a></li>
</ul>Horizontal Links List
Example
<ul class="list-links-inline">
<li><a class="text-link link-underlined" href="#example"><span>Text Link 1</span></a></li>
<li><a class="text-link link-underlined" href="#example"><span>Text Link 2</span></a></li>
<li><a class="text-link link-underlined" href="#example"><span>Text Link 3</span></a></li>
</ul>Horizontal Links List with Pipe
Example
<ul class="list-links-inline-separator">
<li><a class="text-link link-underlined" href="#example"><span>Text Link 1</span></a></li>
<li><a class="text-link link-underlined" href="#example"><span>Text Link 2</span></a></li>
<li><a class="text-link link-underlined" href="#example"><span>Text Link 3</span></a></li>
<li><a class="text-link link-underlined" href="#example"><span>Text Link 4</span></a></li>
</ul>Text Links with Icon
Usage
Similar to Icon Buttons, text links may also have an icon associated with it to improve the customer’s ability to quickly scan the page and find relevant actions or content.
Example - Stacked Links with Icons
<div class="flex flex-column">
<a href="#example" class="text-link display-block link-underlined flex-inline">
<i class="valign-top flex-inline" data-dls-icon="feedback" data-dls-icon-size="sm"
data-dls-icon-role="decorative"></i>
<span class="pad-1-l">Feedback</span>
</a>
<a href="#example" class="text-link display-block link-underlined flex-inline">
<i class="valign-top flex-inline" data-dls-icon="info" data-dls-icon-size="sm"
data-dls-icon-role="decorative"></i>
<span class="pad-1-l">About</span>
</a>
</div>Example - Download
<a href="#example" class="text-link display-block icon-hover link-underlined flex-inline">
<i class="valign-top flex-inline" data-dls-icon="download" data-dls-icon-size="sm"
data-dls-icon-role="decorative"></i>
<span class="pad-1-l">Download</span>
</a>Example - Print
<a href="#example" class="text-link display-block icon-hover link-underlined flex-inline">
<i class="valign-top flex-inline" data-dls-icon="print" data-dls-icon-size="sm"
data-dls-icon-role="decorative"></i>
<span class="pad-1-l">Print</span>
</a>