Inline Link
Sourcecomponents/InlineLink.astro
In text
A link set inside a sentence — no arrow, just underlined text. It inherits the size and line-height of the copy around it, so it never breaks the flow.
Every brand we build gets a full identity system — you can see the work or read a case study to get a feel for it, then find us on Instagram .
States
Underlined at rest, hover deepens to ink and solidifies the underline, focus shows the ring.
…you can see the work here.
Default…you can see the work here.
Hover…you can see the work here.
FocusOn dark
On a dark section the link turns white and dims on hover — surface="dark".
Every brand we build gets a full identity system — you can see the work to get a feel for it.
Anatomy
No arrow and no fixed size — the underline is the whole affordance, and the type is inherited from the sentence.
- Text — inherits the paragraph’s size & line-height · Medium 500
- Underline — 1.5px, offset 3px below the text
- No arrow — nothing added inline; only
externaladds a small ↗ - No horizontal padding — sits flush in the flow of words
Props
| Prop | Type | Default | Notes |
|---|---|---|---|
href | string | — | Destination. Required. |
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 adds a small up-right arrow. |
Usage
Wrap the linked words in place. No size prop — it takes the font size of the paragraph it lives in.
<p>
Every brand we build gets a full identity system — you can
<InlineLink href="/work">see the work</InlineLink> to get a feel for it.
</p>
<!-- On a dark section -->
<InlineLink href="/about" surface="dark">about the studio</InlineLink>
<!-- Off-site -->
<InlineLink href="https://…" external>our Instagram</InlineLink>