Link.
Goes somewhere to read more. Four kinds, each with one job: a text link closes a block, an inline link sits in a sentence, a card link makes a whole card the target, and a nav link moves between pages.
Playground.
import { TextLink } from "#/ui/site/text-link";
<TextLink href="/spaceium-x-drafter-...">Read the Spaceium story</TextLink>Text link.
Redline, 14px medium, with an arrow that travels on hover. It closes a block (a section, a quote, a card) and never sits inside a sentence. Its default top margin is mt-5; passing any className replaces it, so pass mt-0 for none.
Show codeHide code
import { TextLink } from "#/ui/site/text-link";
<TextLink href="/spaceium-x-drafter-...">Read the Spaceium story</TextLink>Inline link.
Ink with a hairline underline, so it reads as part of the sentence until you reach for it; hover takes the redline. In long-form posts the prose style sets its own, redline with a light underline, because a post is read for its references.
Every default says where it came from, and the sources are listed under the math.
Show codeHide code
<a href="#sources" className="text-ink underline decoration-hairline underline-offset-4 transition-colors hover:text-redline hover:decoration-redline">
sources are listed
</a>Card link.
When the whole card is the target, the card is the a and the label inside it is TextLinkLabel: the text link’s look on a span, so there is never a link inside a link.
Show codeHide code
import { TextLinkLabel } from "#/ui/site/text-link";
<a href="/redliner" className="group block border border-hairline ...">
...
<TextLinkLabel>Try the Redliner</TextLinkLabel>
</a>Navigation.
Graphite at rest, ink on hover and for the current page. No underline and no redline: the nav is furniture, and the redline is saved for what the page wants you to do.
Show codeHide code
<a href="/product-features" className="text-graphite transition-colors hover:text-ink">Product</a>Best practices.
Do
- Name the destination: Read the Spaceium story, not Learn more.
- Use a text link to close a block and an inline link inside a sentence.
- Make a whole card the link when the card is one destination, with TextLinkLabel inside.
- Let the site's focus outline show; it is set once for every link.
Don't
- Do not put a text link inside a sentence, or an inline link at the end of a block.
- Do not nest a link inside a card that is already a link.
- Do not color nav links redline.
- Do not underline in redline at rest, except in long-form prose.