Link
A link is a line that draws itself, left to right, on hover and focus, and stays until you leave. Nothing else on the link moves.
Variant
Controls
▾
Code
import { } from "app/globals.css (.link-line)";
<a href="/journal" className="link-line">Hover or tab to this link</a>Every state
A link is a line that draws itself. Hover or tab to this link and the underline runs left to right, then stays until you leave.
Forced states
Usage
Tokens it uses
| --ink | … |
|---|---|
| --dur-quick | … |
| --ease-out | … |
Values are read live from the stylesheet, so they follow the site theme.
Spec
- Trigger
- Duration
- --dur-quick 160ms
- Easing
- --ease-out cubic-bezier(0.16, 1, 0.3, 1)
- Reduced motion