Content
Communicate to users what they’ll find on the other side of a click. Vague or repetitive language fails that purpose. “Learn more” is the new “Click here” - with a little effort, transform this filler copy into descriptive labels that help users confidently predict what the next page will be.
Copy guidelines
- No more than 40 characters (due to wrapping issues)
- Doesn’t wrap on any screen size, so be mindful of where you put it on the page
- Sentence case
- Usually doesn’t include punctuation
- Avoid phrases like “Learn more” or “Click here”. Instead, be specific about what lies behind that link.
- Clear, concise language that’s transparent about what’s on the other side of that linked text.
Icons
An icon is optional. Use it:
- External link: always use the “External Link” icon following the content of the link when leading outside of Homebase (opening a new tab or window)
- Clarify an action: if text alone is not enough to explain its functionality.


Icons in Freestanding links vs. Inline links
Icons are not available in the web inline link component but ok for freestanding links. An engineer could manually add the icon after an inline link, but it would not have the same hover/pressed/focus states.


Types
External link
When a link opens a new tab or a window, indicate this to the user via the “External Link.” This icon appears to the right of the link.

Placement
Use mostly within or directly:
- following a sentence,
- under the input field,
- as an action on cards or other elements



Best practices
If the link will lead to an instruction that is reasonably concise and crucial, consider using a tooltip instead.
Resources
(internal only)