Links
Links are navigational elements that connect users to other locations, either on the current page or to a different page or site. In contrast, buttons are used to signal important actions.
Types
Inline link
Inline links are regular weight and appear within the text flow. They are regular weight and are used within paragraph of text.
Here's the default link style. For reference, here's the hover link style. Train your eyes on the focused link style. Jump to the active link style. We’ve all been to the visited link style.
HTML code snippet
<!--Note that the .visited, .hover, .focus, .active classes are for demonstration purposes only and should not be used in production.-->
<!--
<p>
<a href="#">Default</a>,
<a href="#" class="visited">Visited</a>,
<a href="#" class="hover">Hovered</a>,
<a href="#" class="focus">Focused</a>,
<a href="#" class="active">Active</a>
</p>
-->
<p>Here's the <a href="#">default link style</a>. For reference, here's the <a href="#" class="hover">hover link style</a>. Train your eyes on the <a href="#" class="focus">focused link style</a>. Jump to the <a href="#" class="active">active link style</a>. We’ve all been to the <a href="#" class="visited">visited link style</a>.</p>Implementation details
Links that appear in body text (p), link lists (li), or definitions (dd) are automatically underlined. To enable underlines elsewhere, e.g. to underline links in a nav element, simply add a border-bottom-width: 1px; to the link.
List link
List links (or call-to-action links) are standalone links that highlight a users’ next steps. They are medium weight and often used in unordered lists.
HTML code snippet
<ul class="m-list m-list--links">
<li class="m-list__item">
<a class="m-list__link" href="#">List link 1</a>
</li>
<li class="m-list__item">
<a class="m-list__link" href="#">List link 2</a>
</li>
</ul>Implementation details
Call-to-action links are used in cards and info unit groups, among other places.
Destructive link
Destructive links provide a visual warning to users that clicking them will perform a destructive action, such as clearing entries in a form.
HTML code snippet
<a class="a-btn a-btn--link a-btn--warning" href="#">
Destructive link
</a>Link with icon
When used, an icon should appear after the text it represents. Each icon should be used exclusively and consistently for one action. The color and font-size of an icon should be the same as the text it represents, including state changes. Icons should never be underlined.
The document icon should emphasize a link that contains a file or document . Use the external link icon to emphasize a non-CFPB webpage for further details.
HTML code snippet
<p>
The document icon should emphasize a link that contains a
<a class="a-link
a-link--icon"
href="#">
<span class="a-link__text">file or document</span>
</a>.
Use the external link icon to emphasize
<a class="a-link
a-link--icon"
href="#">
<span class="a-link__text">a non-CFPB webpage</span>
</a> for further details.
</p>Implementation details
- To prevent the link’s underline from extending under the icon, wrap the link text with a
span.icon-link_text. There can be no whitespace between the text and the opening and closing span tags. Include the icon either prior to or after thea-link__text. It is important the text and icon are siblings to correctly handle underlines.
Non-wrapping link with icon
Icons added to inline links can sometimes break onto the next line. If you want to prevent this, you can add the __no-wrap modifier to .a-link--icon.
The document icon should emphasize a link that contains a file or document .
HTML code snippet
<p>
The document icon should emphasize a link that contains a
<a class="a-link
a-link--icon
a-link--no-wrap"
href="#">
<span class="a-link__text">file or document</span>
</a>.
</p>Jump link
Jump links are standalone links that respond to small screens by converting to full block links that have a finger-friendly touch area. Reduce screen size to see these in action.
HTML code snippet
<a class="a-link
a-link--jump
a-link--icon-after-text"
href="#">
<span class="a-link__text">Jump link</span>
</a>Jump link with icon on left
Jump links can also have icons before the text, like icon links.
HTML code snippet
<a class="a-link
a-link--jump
a-link--icon-before-text"
href="#">
<span class="a-link__text">Jump link with icon on left</span>
</a>Printed links
When a page is printed from consumerfinance.gov, links should appear in the following style and include both the original link text as well as a shortened URL.
Here's the link style (cfpb.gov/about-us/blog) when printed.
HTML code snippet
Here's the <a href="#">link style</a> when printed.Implementation details
When a page is printed, cf.gov’s print stylesheet appends link URLs in parentheses next to their link text.
Behavior
Opening a link in the current tab (default)
In general, links should default to opening in the current page or browser tab. This allows the user to choose whether they want to open an additional window in order to view the content. This applies to document and external links.
Opening a link in a new tab
Links should open in a new tab in situations where users enter data or make selections that would be lost if they left the page. This includes interactive tools, search filters, and forms where the user has to enter and submit information.
Add target="_blank" rel="noopener noreferrer" to direct these links to securely open in a new tab.
Add an aria-label that includes the link text and informs users with visual impairments that the link will open in a new tab. An example would be aria-label="Learn why some county data are unavailable. (Link opens in new tab.)" This meets WCAG guideline 3.2 that webpages should work in a predictable way.
Accessibility
Link text should clearly describe where it will take the user if activated. If a screen reader user is cycling through the links on a page, link text such as “Read more” or “Click here” is not helpful for knowing where that link will take them.
Write the link with language clearly describing the link’s destination. In situations where that’s untenable, you can improve the situation for screen reader users by coding the link with the aria-label attribute and adding more descriptive link text, which will be read aloud by screen readers.