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 appear within a line of text or other inline elements. Inline links are underlined and retain a consistent appearance across all screen widths.
Here's the default inline link style.
HTML code snippet
<a href="#">Inline link</a>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.
Standalone link
Standalone links sit on their own line. At larger screen widths, standalone links are medium weight and underlined. At smaller screen widths, standalone links convert to full block links with top and bottom borders that have a finger-friendly touch area.
HTML code snippet
<p>
<a class="a-link a-link--jump" href="#"><span class="a-link__text">Standalone link</span>
</a>
</p>Link with icon
Each icon should be used exclusively and consistently for one action. An icon should appear after the text it represents. The only exception is a link that takes a user to a previous step or page, where the icon should appear before the link’s text. Icons should never be underlined.
Inline
The document icon is used to emphasize a link that contains a file or document . The external link icon is used to emphasize a link to a non-CFPB webpage .
Standalone
Go backContinue
External link
Document or file
HTML code snippet
<!-- Inline -->
<a class="a-link" href="#"><span class="a-link__text">file or document</span>
</a>
<!-- Standalone -->
<a class="a-link a-link--jump" href="#"> <span class="a-link__text">Go back</span>
</a>Implementation details
- To prevent the link’s underline from extending under the icon, wrap the link text with a
span.a-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.
List link
A list link is an item in a set of two or more stacked standalone links. Items in a link list are medium weight and are underlined at larger screen widths. At smaller screen widths, they convert to full block links with a top and bottom border.
HTML code snippet
<ul class="m-list m-list--links">
<li class="m-list__item">
<a class="a-link a-link--jump" href="#">
<span class="a-link__text">List item 1</span>
</a>
</li>
<li class="m-list__item">
<a class="a-link a-link--jump" href="#">
<span class="a-link__text">List item 2</span>
</a>
</li>
<li class="m-list__item">
<a class="a-link a-link--jump" href="#">
<span class="a-link__text">List item 3</span>
</a>
</li>
</a>
</li>
</ul>Implementation details
Standalone links are used in cards and info unit groups, among other places.
Destructive link
A destructive action is an action that will lead to data loss, for example, deleting data from a form or removing a file that was previously uploaded. Although a destructive action can be styled as a button, we recommend using the destructive link style (shown below) to ensure consistency across cf.gov products.
HTML code snippet
<a class="a-btn a-btn--link a-btn--warning" href="#">
Destructive link
</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.