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. Find more information about how these calls to action work when you check out the basic buttons component.
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. Check out more guidelines for this link design choice in the tooltips pattern.
Info links with guidance tooltips
To offer users a bit more help, a link can open a guidance tooltip. Check out more guidelines for this link design in the guidance tooltip pattern.
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 are not engaging ways of guiding users to more content. And such copy usually doesn’t give users a clear idea of where they’re going to go with the link.
Some alternative examples: Explore Online Bill Pay now, Check out the FAQs, Read more about tax changes, Get started now
- 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.
- 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
- Recommended voice and tone attributes: straightforward, encouraging, experienced