Links
Links lead users to a different page or further information. In contrast, buttons are used to signal actions. Users should be able to identify links without relying on color or styling alone.
Code Source
-
cf-core
Links in Capital Framework
Behavior
Default links
In general, links should default to opening in the same page or browser tab.
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.
Style
Body text and lists
Links that appear in body text or link lists are underlined.
Links should be Regular weight if inline with other text (e.g., within a paragraph), but should be Medium weight when standing alone (e.g., in a call to action or list of links).
Inline links
Lorem ipsum dolor sit amet, default link style. Vestibulum orci ante, sagittis quis dolor a, fringilla dapibus nunc. Hover link style venenatis suscipit. Nulla in purus nisi. Curabitur vel odio et est auctor tincidunt. Focused link style, et ultricies erat pellentesque nec. Suspendisse quis active link style faucibus nec eu justo. Nulla ut massa eget dolor vehicula bibendum. We’ve all been to the visited link style.
Standalone links
States
Default
- Pacific Blue
- 1px dotted bottom border
Hover
- Dark Pacific Blue
- 1px solid bottom border
Focus
- Pacific Blue
- 1px dotted bottom border
- Thin dotted outline
Active
- Navy Blue
- 1px solid bottom border
Visited
- Teal
- 1px solid bottom border
Variations
Links in headers
- No underline
Header 2 link style
Lorem ipsum dolor sit amet. Vestibulum orci ante, sagittis quis dolor a, fringilla dapibus nunc. Nulla in purus nisi. Curabitur vel odio et est auctor tincidunt. Et ultricies erat pellentesque nec. Suspendisse quis faucibus nec eu justo. Nulla ut massa eget dolor vehicula bibendum.
Links in navigation
- No underline
- No visited link style
Links used in interactive tools, forms, and search filters
These links should open in a new tab.
Set them to target="_blank" rel="noopener noreferrer".
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.
Links with icons
Use icons when a link needs extra emphasis. Use icons consistently, or don’t use them at all. Each icon should be used exclusively for one action.
Icons appear to the right of the link text. The color and font-size of icons should be the same as the adjacent text, including state changes. Icons are never underlined.
External links
Use the external link minicon (glyph E610) to emphasize a non-CFPB webpage.
External links should open in the same browser window (i.e., do not set them to target="_blank"). This allows the user to choose whether they want to open an additional window in order to view the content.
Email links
Use the Email link minicon (glyph E302) to emphasize a mailto link.
Document links
Documents minicons can emphasize a link that contains a file or document.
Document links should open in the same browser window (i.e., do not set them to target="_blank"). This allows the user to choose whether they want to open an additional window in order to view the content.