Links

Links

Links are used for navigation and to reference external resources. They provide a way for users to move between pages, sections, or to external content.

Usage

The base .Link class provides core link styling. Add variant classes to change appearance.

Default Link Subtle Muted

Links within body text should be clearly distinguishable but not disruptive.

For more information about our services, please visit our documentation or contact customer support. You can also check out our getting started guide for beginners.

---

Different visual styles for various contexts.

---

Links that stand alone as navigation elements.

View all products
Read the full article ---

Add icons for visual context or to indicate behavior.

View Documentation
Open in new tab

Learn more on the official website for complete details.

---

Control link size for different contexts.

---

Visited State

Indicate links that have been visited.

### CSS for Visited State ```css .Link:visited { color: oklch(50% 0.12 300); /* Muted purple */ } ```

Style for links that are temporarily unavailable.

Currently unavailable ---

Common patterns for grouping related links.

---

Accessibility pattern for keyboard navigation.

Skip to main content

(Tab to this preview to see the skip link appear)

---

Style for downloadable resources.

---

Common Patterns

Getting Started Guide

Learn the basics of setting up your first project with our step-by-step tutorial.

Read more
### Help Text with Link
Having trouble? Reset your email
Your subscription expires in 7 days. Renew now to avoid interruption.

No results found

We couldn't find anything matching your search. Try browsing all items or adjusting your filters.

Customization

Override link styles using CSS custom properties:

/* Custom link color */
.Link {
  --link-color: oklch(55% 0.2 250);
  --link-hover: oklch(50% 0.2 250);
  color: var(--link-color);
}

.Link:hover {
  color: var(--link-hover);
}

/* Custom underline style */
.Link--fancy {
  text-decoration: underline wavy;
  text-underline-offset: 4px;
}

/* Custom nav link */
.Link--nav {
  --nav-active-color: oklch(55% 0.2 150);
}

.Link--nav.Link--active {
  color: var(--nav-active-color);
}

API Reference

Base Classes

Class Description
.Link Base link styles (required)

Variant Classes

Class Description
.Link--subtle Inherits text color, accent on hover
.Link--muted Secondary text color
.Link--underline Always shows underline
.Link--standalone Standalone navigation link (bolder)
.Link--external External link (with icon styling)

Size Classes

Class Description
.Link--small Smaller font size (0.875rem)
.Link--large Larger font size (1.125rem)

Modifier Classes

Class Description
.Link--disabled Disabled/unavailable state
.Link--visited Explicit visited styling
Class Description
.Link--nav Navigation link (for menus)
.Link--active Active/current navigation state
.Link--skip Skip-to-content accessibility link

Icon Classes

Class Description
.Link-icon Icon inside link

Attributes

Attribute Description
href Required. The link destination
target="_blank" Open in new tab (use with rel="noopener")
rel="noopener noreferrer" Security attributes for external links
download Trigger file download
aria-label Accessible name when text isn't descriptive
aria-disabled="true" For disabled links (use with span)

CSS Custom Properties

Property Default Description
--accent-primary — Default link color
--text-primary — Subtle variant color
--text-secondary — Muted variant color
--space-1 0.25rem Icon gap

CSS Reference

/* Base Link */
.Link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s, text-decoration 0.15s;
}

.Link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.Link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Link Icon */
.Link-icon {
  font-size: 0.9em;
  flex-shrink: 0;
}

/* Variants */
.Link--subtle {
  color: var(--fg);
}

.Link--subtle:hover {
  color: var(--accent);
}

.Link--muted {
  color: var(--fg-3);
}

.Link--muted:hover {
  color: var(--fg);
}

.Link--underline {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Standalone */
.Link--standalone {
  font-weight: 500;
}

/* External */
.Link--external .Link-icon:last-child {
  opacity: 0.7;
}

/* Sizes */
.Link--small {
  font-size: 0.875rem;
}

.Link--large {
  font-size: 1.125rem;
}

/* Disabled */
.Link--disabled {
  color: var(--fg-3);
  cursor: not-allowed;
  opacity: 0.6;
}

.Link--disabled:hover {
  text-decoration: none;
}

/* Navigation Links */
.Link--nav {
  color: var(--fg-3);
  font-weight: 500;
}

.Link--nav:hover {
  color: var(--fg);
  text-decoration: none;
}

.Link--nav.Link--active {
  color: var(--accent);
}

/* Visited State */
.Link:visited {
  color: oklch(50% 0.12 300);
}

.Link--subtle:visited,
.Link--muted:visited {
  color: var(--fg-3);
}

/* Skip Link */
.Link--skip {
  position: absolute;
  left: -9999px;
  top: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background-color: var(--bg);
  border: 1px solid var(--bd-s);
  border-radius: var(--r-s);
  font-weight: 500;
}

.Link--skip:focus {
  left: var(--space-4);
}

/* Link in dark text (ensure contrast) */
p .Link,
.Card-text .Link,
.FormField-helper .Link {
  font-weight: 500;
}

Accessibility

Keyboard Support

Key Action
Enter Activates the link
Tab Moves focus to the next link
Shift + Tab Moves focus to the previous link

Descriptive Text

<!-- Good: Descriptive link text -->
<a href="/pricing" class="Link">View pricing plans</a>

<!-- Bad: Vague link text -->
<a href="/pricing" class="Link">Click here</a>

<!-- Indicate external links open in new tab -->
<a href="https://example.com" 
   class="Link" 
   target="_blank" 
   rel="noopener noreferrer"
   aria-label="Example website (opens in new tab)">
    Example website
    <i class="ph ph-arrow-square-out" aria-hidden="true"></i>
</a>

<!-- Provide skip navigation for keyboard users -->
<a href="#main-content" class="Link Link--skip">
    Skip to main content
</a>

<!-- Indicate file type and size for downloads -->
<a href="/report.pdf" class="Link" download>
    <i class="ph ph-file-pdf" aria-hidden="true"></i>
    Annual Report (PDF, 2.4 MB)
</a>

<!-- Link: Navigation to new page/resource -->
<a href="/about" class="Link">About Us</a>

<!-- Button: Triggers an action on the current page -->
<button class="Button Button--primary">Submit Form</button>

Best Practices

Do

  • ✓ Use descriptive text — “View pricing” not “Click here”
  • ✓ Indicate external links — Use icon and/or aria-label
  • ✓ Provide skip links — Essential for keyboard navigation
  • ✓ Use links for navigation — To pages or resources
  • ✓ Include file info — For downloads, show type and size

Don’t

  • ✗ Use “click here” — Link text should be meaningful alone
  • ✗ Open everything in new tabs — Only for external links
  • ✗ Style links as buttons — Use actual buttons for actions
  • ✗ Hide links in walls of text — Make them visually distinct
  • ✗ Remove focus indicators — Critical for accessibility