Links are navigational elements that direct visitors to other locations, either on the same page or to a different page or site. They can be inline or separate from the text flow. Since every link is a potential user interaction, too many links can be overwhelming. Be judicious with links to better identify necessary calls to action.
When to use
Linking between a site’s pages. Use regular links instead.
If the action is less popular or less important. Less popular or less important actions may be visually styled as links.
For longer inline text links, use descriptive language in place of generic links like “Learn More“ or “Click Here”.
Anatomy
1. Title (required)
2. Trailing Icon
3. Container (required)
Examples
<a class="ucla-related-link" href="#">
Lorem ipsum
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 16L2 16L2 2L9 2V0L2 0C0.89 0 0 0.9 0 2L0 16C0 17.1 0.89 18 2 18L16 18C17.1 18 18 17.1 18 16L18 9L16 9V16ZM11 0V2L14.59 2L4.76 11.83L6.17 13.24L16 3.41L16 7H18V0L11 0Z"
/>
</svg>
</a>
<a class="ucla-related-link" href="#">
Lorem ipsum
<svg
width="18"
height="18"
viewBox="0 0 18 18"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16 16L2 16L2 2L9 2V0L2 0C0.89 0 0 0.9 0 2L0 16C0 17.1 0.89 18 2 18L16 18C17.1 18 18 17.1 18 16L18 9L16 9V16ZM11 0V2L14.59 2L4.76 11.83L6.17 13.24L16 3.41L16 7H18V0L11 0Z"
/>
</svg>
</a>Best Practices
- Clearly identify external links.
- Provide required notification for non-federal external links.
- Use unique, meaningful link text.
- Simplify link placement in body text.
- Link directly to the most relevant page.
- Indicate nonpublic links that require authentication.
- If you use an external link indicator, use it consistently for all text links.
- Provide text context for external links.
- Show file type and size for links to non-HTML content.
- Identify jump links in body text.
- Write out email and phone links.
- Encode email and phone links.
- Check with your IT security department regarding email link best practices.
- Don’t rely on color alone to distinguish links.
- Don’t roadblock external links with a modal window or dialog box.
- Don’t use generic link text.
- Don’t use the same link text for different URLs on the same page.