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.
Repository
-
cf-typography
Links in the Capital Framework
StyleView code
Body text and lists
Links that appear in body text or link lists are underlined. Links are underlined with the border-bottom property.
Georgia paragraph 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.
Avenir Next list links
- Lorem ipsum Default link style, consectetur adipiscing elit.
- Curabitur vel odio et est auctor, Hover link style.
- Aliquam mollis tellus in purus porta, Focused link style.
- Active link style.
- We’ve all been to the Visited link style.
StatesView code
Default
- Pacific Blue
- 1px dotted bottom border
Hover
- 50% Pacific Blue
- 1px solid bottom border
Focus
- Pacific Blue
- 1px dotted bottom border
- Thin dotted outline
Active
- Navy Blue
- 1px solid bottom border
Visited
- 50% Teal
- 1px solid bottom border
VariationsView code
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 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.
Internal links
Carets (minicon glyph EE02) can emphasize CFPB webpages, such as in a navigational list. Do not use them in expandables, or for links to an external, non-CFPB webpage.
External links
Use the external link (glyph E610) to emphasize a non-CFPB webpage. External links should open in a new window or tab.
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.