Components

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.

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.

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.

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.

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 .

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.

Jump link with icon on left

Jump links can also have icons before the text, like icon links.

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.

Latest Updates

Page last edited: