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
You use inline links when you want to provide a hyperlink within a block of text. Some common situations include providing additional information, referencing a source, promoting a product or service, or creating a call-to-action.
Anatomy
1. Inline link
2. Icon (optional)
Icon Sizing
16px icons
- Use a 16px icon for text that is 16px Regular or smaller.
- This size ensures visual balance and a clean look for body text, captions, and supplementary information.
24px icons
- Use a 24px icon for text that is 16px Bold or larger.
- This size complements headings, buttons, and call-to-actions, providing clear visual emphasis.
Best Practices
- Clearly identify 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.
States
Default State Hover State Focus State Visited State
Examples
<div class="ucla-prose">
<p><small><a href="#" class="ucla-link__has-icon ucla-link__has-icon--link-external">small text</a></small></p>
<p><a href="#" class="ucla-link__has-icon ucla-link__has-icon--link-external">body text</a></p>
<h3><a href="#" class="ucla-link__has-icon ucla-link__has-icon--link-external">Heading</a></h3>
<h2><a href="#" class="ucla-link__has-icon ucla-link__has-icon--link-external">Heading</a></h2>
<h1 class="mt-8">Want to make the world better? Let's go.</h1>
<p>You’re idealistic, driven and creative. You love learning and hearing different points of view. You feel empathy for others and believe everyone deserves a fair shot. You see obstacles as a chance to grow. You are a changemaker, just like us. Together? <a href="#" class="ucla-link__has-icon ucla-link__has-icon--link-external">We’re unstoppable</a>.</p>
<div class="ucla-has-background-ucla-blue p-8 mb-4">
<h2>Discover answers to Questions that matter</h2>
<p>We know we must dig for the truth. Work tirelessly to <a href="#" class="ucla-link__has-icon ucla-link__has-icon--link-external">overcome obstacles</a>. And keep trying until we create change. Like giving hope to the homeless. Shedding light on the climate crisis. And inspiring inclusiveness through art. And knowledge is where it all begins.</p>
</div>
<h3><a href="#" class="ucla-link__has-icon ucla-link__has-icon--link-external">Find yourself moving in the right direction</a></h3>
<p><a href="#" class="ucla-link__has-icon ucla-link__has-icon--link-external">Love helping others</a>? Or maybe you’re captivated by the arts and culture. Our range of majors and minors is always evolving and we encourage cross-pollination among different fields. This approach helps you tailor your education to build on your strengths, explore your passions and bring your goals to life.</p>
</div>