Links, or hyperlinks, give users the ability to navigate to another destination, such as help content. In some designs, we can use links for a call to action.
Links are why the Internet is so cool. At Intuit, we use links in ways that keep customers moving forward.
Links are distinguished from body text by color. Links are not underlined in their default state, but an underline appears on hover. The weight, size, and case remain the same as the original style of the link. The color changes only after the link has been visited.
- Use links for actions where users don’t affect the website’s back- or front-end; users are only clicking and viewing content.
- Use links to navigate to sections (anchors) on the same page or different pages on the site.
- Use links to offer less important, or secondary, calls to action. A button will usually be the primary call to action in this case.
In some instances, secondary action buttons, not links, appear with primary action buttons. In marketing pages, these secondary buttons often provide additional offers. On product screens, they offer alternative actions to the ideal path to completion. Learn more about basic buttons
Appearance and behavior
Information links appear like standard links, with a little variation to indicate different behavior. A dotted underline appears by default. On hover, the link turns blue, and a standard dismissible tooltip displays on click as the link turns darker blue.
Info links with standard tooltips
Here’s an example of a link that opens a standard tooltip. Learn more about tooltip patterns
Info links with guidance tooltips
To offer users a bit more help, a link can open a guidance tooltip. Learn more about guidance tooltips
Show more/less links
With the show/hide link, users select a link label (typically “Show more” but sometimes just an icon), and the content organized beneath that label slides down from the control. At the same time, the label changes to “Show less.”
Conversely, when users select Show less, the content slides up beneath the control, and the label changes to “Show more.”
- Font: AvenirNextforINTUIT, Medium
- Disabled: #0077c5, 40% opacity
- Default: #0077c5
- Hover: #0077c5 plus underline
- Focus, Active = #055393 plus underline
Content guidelines for links
- The best structure for a link is a verb followed by a direct object. This structure help users understand where they’re likely to go and encourages them to take action.
Examples: Add customers, Send invoice, Join our mailing list, Get your report, Update your info, Connect your bank, Discover all our tips and tricks
- Don’t link from too little. Be direct, but not too brief. We need to make sure the user has a large enough target to select.
- Don’t link from too much. The ink label has about a 6- to 8-word maximum. Try not to exceed 55 characters.
- Avoid linking from these terms: Learn more, More, Click here, Here. These don’t give users a clear idea of where they’re going to end up.
Some alternative examples: Explore Online Bill Pay now, Check out the FAQs, Read more about tax changes, Get started now
- Avoid inline links (words or phrases within a sentence that are hyperlinked). Inline links: aren’t accessible, make translation difficult, and encourage users to click away from a page before reading all info.
- Consider what linked word or phrase a user is most likely to select. Which word appears more often in search engines? What word or phrase would a user type into Google?
- Labels are sentence case. No period at the end of a text link.
- Be specific and let users know where they’re going after they click the link.
Examples: Connect your bank, Check out the FAQs, Get help with reconciliation, Set up Online Bill Pay now