Link
Links navigate between or within web pages and initiate simple actions. They can be used in paragraphs, in groups, or on their own.
Anatomy
Sizing
A link should inherit the size of its parent.
Color
All link variants are blue by default. Light and dark variants exist for use on colored backgrounds where the default blue does not meet the minimum contrast ratio of 4.5:1.
Dark Mode
Links must maintain proper contrast in order to be readable in both light and dark modes. If a link's background switches between modes, its color should too. If the background remains constant, the link color stays the same. In most cases, this means that primary blue links will change, while light and dark variants used on static colored backgrounds will not.
| Property | Light Mode (default) | Dark Mode |
|---|---|---|
default | asdfas | afda |
light | asdfasdf | asdfasdf |
dark | asdf | asdfasdf |
Variants
Default
Default links are within sentences or paragraphs, underlined, and blue with light and dark variations. They shouldn't stand alone; for that, use Quiet links. Apart from color and underline, links should match the surrounding text style.
For use with links on a white/off-white background. This color should be used in most cases.
<a href="/">Soltice Design System</a>
<a href="/" class="link-primary">Soltice Design System</a>
<BLink to="/">Soltice Design System</BLink>
<BLink to="/" class="link-primary">Soltice Design System</BLink>
Light
For use on dark, static backgrounds (such as purple).
<a href="/" class="link-light link-opacity-50 link-opacity-75-hover link-underline-opacity-50 link-underline-opacity-75-hover">
Soltice Design System
</a>
<BLink variant="light" class="link-opacity-50 link-opacity-75-hover link-underline-opacity-50 link-underline-opacity-75-hover">
Soltice Design System
</BLink>
Dark
For use on light, static backgrounds (such as gold or light gray).
<a href="/" class="link-dark link-opacity-75 link-opacity-75-hover link-underline-opacity-50 link-underline-opacity-75-hover">
Soltice Design System
</a>
<BLink variant="dark" class="link-opacity-75 link-opacity-75-hover link-underline-opacity-50 link-underline-opacity-75-hover">
Soltice Design System
</BLink>
Options
Quiet
Quiet links are standalone or in link groups, typically found in sidebars, footers, or "quick links" lists. They can be grouped horizontally or vertically, are not underlined, and are blue with light and dark variations.
Hello! Welcome to the Soltice Design System documentation website. This is a paragraph explaining how to use the quite link below:
Soltice Design System<a href="/" class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover">
Soltice Design System
</a>
<BLink to="/" class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover">
Soltice Design System
</BLink>
Icon
Icon links are similar to Quiet links but include a left icon. Use them only when an icon improves understanding of the link's purpose or destination (and not within sentences or paragraphs).
<a href="/" class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover">
<i class="bi bi-cloud-download me-1"></i>Download report
</a>
<BLink to="/" class="link-underline link-underline-opacity-0 link-underline-opacity-100-hover">
<i class="bi bi-cloud-download me-1"></i>Download report
</BLink>
Usage
Behavior
Links usually open in the same tab. If users hold the command/control key, links open in a new tab. Only set links to open in a new tab by default if they redirect users outside of the UW or interrupt the current workflow.
How to use links
Links can be used for:
- Navigating between websites, pages, or page sections.
- Downloading files like PDFs or software.
- Launching the default email client with preset details.
- Logging out of sites or apps.
Where to use links
Links can be within body text, by themselves, or in groups such as headers, footers, or "quick links" sections.
Maintain consistent styling to make links stand out
Use proper colors, underlines, and states to demarcate links as described in the Variants section. While links can have bold or italic styles based on context, don't replace standard color and underline styles. Avoid non-standard styles for links or using link styles on non-link text; it will make it harder for users to navigate.
Accessibility
Ensure proper contrast
Ensure default blue links have a 4.5:1 contrast ratio with the background, following the WCAG 2.1 AA standard. If the blue doesn't meet this standard on gold, purple, or certain gray backgrounds, use light or dark color variants.
Use clear text
- Use specific, purposeful link text that doesn't rely on surrounding text; screen reader users should be able to understand links without extensive context or additional labeling.*
- Link the main part of the phrase; avoid linking vague terms like "click here” and “learn more."
- Maintain consistent text for duplicate destinations within a page and distinct text for each unique link.
- Avoid distracting styling such as using all caps or displaying full URLs in link text.
*In cases where additional context is needed, use aria-label or aria-labelledby, ensuring they read naturally with surrounding text.
Keyboard functionality
All links must be accessible via keyboard and other devices, as not everyone uses a mouse or touchscreen. Ensure links can be navigated and activated using the tab and enter keys in the correct order. Also, keyboard navigation should trigger the appropriate focused states for links.
Implementation
lorem ipsum dolor sit amet consectetur adipisicing elit. Quos, mollitia, debitis delectus