Link

Navigational reference.

html

<a class="link" href="https://example.com/docs" style="--accent:#BFD9F2;" >
  Read the documentation
</a>
<style>
.link { font: 14px system-ui, sans-serif; color: #241430; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.link:hover { color: var(--accent); }
.link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.link__icon { margin-left: 3px; font-size: 12px; text-decoration: none; }
.link__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
</style>

tailwind

<a class="link-tw font-sans text-sm text-[#241430] underline underline-offset-2 decoration-2 hover:text-[color:var(--accent)]" href="https://example.com/docs" style="--accent:#BFD9F2; text-decoration-color: #BFD9F2;" >
  Read the documentation
</a>
<style>
.link-tw:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

react

export function Link({
  label = "Read the documentation",
  href = "https://example.com/docs",
  external = false,
  accent = "#BFD9F2",
}) {
  return (
    <a
      href={href}
      target={external ? "_blank" : undefined}
      rel={external ? "noopener noreferrer" : undefined}
      style={{ fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430", textDecoration: "underline", textDecorationColor: accent, textDecorationThickness: 2, textUnderlineOffset: 2 }}
    >
      {label}
      {external && (
        <>
          <span aria-hidden="true" style={{ marginLeft: 3, fontSize: 12, textDecoration: "none" }}>&#8599;</span>
          <span style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)", whiteSpace: "nowrap" }}> (opens in a new tab)</span>
        </>
      )}
    </a>
  );
}