Browse Components
Links
Recognizable navigation with native browser behavior.
Basic
A persistent underline makes navigation recognizable before hover. Tab shows a focus ring; Enter follows the real destination.
View Code
<a class="link-underline" href="/docs">
Explore the Docs
</a>Animated underline
Optional for short standalone links: add link-animated. Hover or focus to reveal the underline over 300ms. Both standalone variants share the same underline position and thickness.
View Code
<div class="cluster">
<a class="link-underline" href="/docs">
Default Link
</a>
<a class="link-underline link-animated" href="/docs">
Animated Link
</a>
</div>Links in prose
Keep inline links underlined and phrase them naturally within the sentence. Descriptive text makes the destination understandable out of context.
Start with the AI project guide to give your assistant a clear brief and a shared design vocabulary.
View Code
<p>
Start with the
<a href="/docs/ai">
AI project guide
</a>
to give your assistant a clear brief and a shared design vocabulary.
</p>Long labels
Native underlines follow every line. Long words wrap without clipping text or keyboard focus.
View Code
<p style="max-inline-size:14rem">
<a href="/docs/ai">
Read the Complete Guide to Building Your Project with AI
</a>
</p>External destinations
Same-tab navigation is the default. When a new tab is useful, disclose it visibly and protect the opener.
View Code
<a
class="link-underline"
href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a"
target="_blank"
rel="noopener"
>
HTML Anchor Reference (opens in a new tab)
</a>Downloads
Identify the file before the click. The download attribute requests a download for this same-origin file; browser behavior can vary.
View Code
<a
class="link-underline"
href="/library/manifest.json"
download="layout-ui-manifest.json"
>
Download the Component Manifest (JSON)
</a>Right-to-left
Text flow and the shared underline follow Hebrew reading direction.
View Code
<p dir="rtl" lang="he">
<a class="link-underline" href="/docs">
עיינו במדריך השימוש
</a>
</p>Without motion
Color feedback changes immediately when motion is disabled. System reduced-motion preferences receive the same behavior.
View Code
<a class="link-underline link-animated" data-motion="none" href="/docs">
Read the Introduction
</a>Installation
Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/link.css">8,977 bytes CSS including base · 0 bytes runtime JavaScript
Usage
Make destinations clear
Use a real href and descriptive text. Keep regular text links underlined. Actions belong on buttons.
Choose an underline
Use .link-underline for short standalone links. Add .link-animated for the optional reveal. Leave these classes off long links in prose.
Preserve browser behavior
Keep native navigation, keyboard focus, and modifier-click. If a link opens a new tab, say so and add rel="noopener".
Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.