Link
Sourcecomponents/Link.astro
Overview
3 sizes × 4 states, on light, dark & image — the whole link system. No underline; the colour and trailing arrow carry it.
On light
default
hover
focus
visited
Body 1
Body 2
Body 3
On dark
default
hover
focus
visited
Body 1
Body 2
Body 3
On image
default
hover
focus
visited
Body 1
Body 2
Body 3
Anatomy
The link’s internal spacing — label, then the gap to the trailing arrow. No underline.
- Text — body size · Medium 500 (matches the copy)
- Label ↔ arrow gap —
--space-xs(8px) - Arrow — 1em, tracks the text size · nudges 3px right on hover
- No underline — colour + arrow mark it as a link
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
href | string | — | Destination. Required. |
size | 'body-1' | 'body-2' | 'body-3' | 'body-2' | Matches the body text it sits next to. |
surface | 'light' | 'dark' | 'light' | Violet on white; 'dark' turns it white for dark sections and imagery. |
external | boolean | false | Opens in a new tab and swaps the forward arrow for an up-right one. |
Usage
Match size to the surrounding text. It's always a standalone, forward link with the arrow — for a mid-sentence link use Inline Link.
<!-- Standalone forward action -->
<Link href="/services">Learn more</Link>
<Link href="/work" size="body-1">See the work</Link>
<!-- On a dark section or image -->
<Link href="/work" surface="dark">See the work</Link>
<!-- Off-site -->
<Link href="https://…" external>Read the case study</Link>Rules
Do
Use it as a standalone, forward link — "Learn more →", "See the work →".
Switch to surface="dark" on dark sections and imagery.
Don't
Drop it inside a sentence — that's Inline Link (no arrow).
Use it for menu or footer navigation — that's Nav Item.