Link

Standard Links

Default blue links with hover and visited states

<a href="/path" class="elv-link elv-link--md">Link text</a>

With Underline

Add underline for emphasis or to meet accessibility requirements

<a href="/path" class="elv-link elv-link--md elv-link--underline">Link text</a>

Subtle Links

Gray links for secondary navigation or less prominent actions

<a href="/path" class="elv-link elv-link--md elv-link--subtle">Subtle link</a>

Interactive States

Hover, focus, and visited states

/* States are automatic via CSS pseudo-classes */
.elv-link:hover { color: #005bc2; }
.elv-link:visited { color: #2e90ff; }
.elv-link:focus-visible { outline: 2px solid #5746b2; }

Link as Button

For actions that don't navigate (use button semantics with link styling)

<button class="elv-link elv-link--md elv-link-button">
  Action text
</button>

In Context

Common usage patterns

Usage Guidelines

• Standard vs Subtle: Use standard (blue) for primary navigation, subtle (gray) for footer or secondary links
• Underlines: Add underlines in dense text to improve scannability and accessibility
• Size Selection: Match link size to surrounding text (md = body, sm = small text, xs = captions/footers)
• Semantics: Use <a> for navigation, <button class="elv-link-button"> for actions
• External Links: Add rel="noopener noreferrer" for security when using target="_blank"

Accessibility Notes

• Focus Indicators: 2px purple outline appears on keyboard focus (never remove it!)
• Color Independence: Consider adding underlines when color alone conveys link status
• Descriptive Text: Link text should make sense out of context (avoid "click here" or "learn more")
• External Links: Consider indicating external links with an icon or text "(opens in new tab)"
• Skip Links: For accessibility, add skip-to-content links at the top of pages

Design System Specs