- Folder
- src/components/Link/
- Props
- kind: prose | arrow | arrow-small | large | social (default prose)
- href: next/link for site pages, a plain anchor for files such as /Tony_CJ_Resume.pdf, #, mailto: and external
- external: opens in a new tab
- className: extra classes appended last (the experience row adds its whole-row hit area)
- Tokens
- Prose: text-fg, medium weight, Tangerine underline on hover and focus
- Arrow: text-title, Accent Text on hover and focus; 4 px padding above and after, so the focus ring holds the moved arrow
- Arrow small: text-small at medium weight, Text, Accent Text on hover and focus; the same arrow and padding as arrow (the colophon's workshop link)
- Large: text-headline, text-headline-phone on phone, Tangerine underline, Accent Text on hover and focus
- Social: mono label, uppercase, Text Muted, Text on hover and focus
- Motion
- Prose and social fade their colour over 150 ms; arrow, arrow small and large change colour at once; both arrow kinds 75 ms translate; under reduced motion the arrow jumps to its hover position at once, and the prose and social fades stay
- Accessibility
- External links open in a new tab with rel noopener noreferrer
- Pressed equals hover
- Underline on hover and focus for prose
- Arrow is hidden from screen readers