Anchor

Link to a location, commonly within a page.

html

<div class="anchor-demo">
  <a class="anchor-skip" href="#anchor-demo-target" style="--accent:#BFD9F2;">Skip to main content</a>
  <p class="anchor-demo__body">Read the overview, then <a class="anchor-link anchor-link--underline" href="#pricing" style="--accent:#BFD9F2;">Jump to pricing</a> further down the page.</p>
  <div id="anchor-demo-target" class="anchor-demo__target" tabindex="-1">Main content landmark</div>
</div>
<style>
.anchor-demo { position: relative; padding-top: 4px; font: 14px system-ui, sans-serif; color: #241430; }
.anchor-skip { position: absolute; left: -9999px; top: 0; background: #241430; color: #FAF7F2; padding: 8px 14px; border-radius: 8px; text-decoration: none; font-weight: 600; z-index: 10; }
.anchor-skip:focus { left: 0; outline: 2px solid var(--accent); outline-offset: 2px; }
.anchor-demo__body { margin: 0 0 10px; line-height: 1.6; }
.anchor-link { color: #241430; }
.anchor-link--underline { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.anchor-link--pill { text-decoration: none; background: var(--accent); padding: 2px 8px; border-radius: 999px; }
.anchor-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.anchor-demo__target { padding: 10px; border: 1px dashed rgba(36,20,48,.3); border-radius: 8px; font-size: 12px; opacity: .6; }
</style>

tailwind

<div class="relative pt-1 font-sans text-sm text-[#241430]">
  <a class="anchor-tw-skip absolute -left-[9999px] top-0 bg-[#241430] text-[#FAF7F2] px-3.5 py-2 rounded-lg no-underline font-semibold z-10" href="#anchor-tw-target" style="--accent:#BFD9F2;">Skip to main content</a>
  <p class="m-0 mb-2.5 leading-relaxed">Read the overview, then <a class="anchor-tw-link anchor-tw-link--underline text-[#241430]" href="#pricing" style="--accent:#BFD9F2;">Jump to pricing</a> further down the page.</p>
  <div id="anchor-tw-target" class="p-2.5 border border-dashed border-[#241430]/30 rounded-lg text-xs opacity-60" tabindex="-1">Main content landmark</div>
</div>
<style>
.anchor-tw-skip:focus { left: 0; outline: 2px solid var(--accent); outline-offset: 2px; }
.anchor-tw-link--underline { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.anchor-tw-link--pill { text-decoration: none; background: var(--accent); padding: 2px 8px; border-radius: 999px; }
.anchor-tw-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style>

react

export function Anchor({
  skipLabel = "Skip to main content",
  sectionLabel = "Jump to pricing",
  accent = "#BFD9F2",
  style = "underline",
}) {
  const linkStyle = style === "pill"
    ? { textDecoration: "none", background: accent, padding: "2px 8px", borderRadius: 999 }
    : { textDecoration: "underline", textDecorationColor: accent, textDecorationThickness: 2 };
  return (
    <div style={{ position: "relative", paddingTop: 4, fontFamily: "system-ui, sans-serif", fontSize: 14, color: "#241430" }}>
      <a href="#anchor-target" style={{ position: "absolute", left: -9999, top: 0, background: "#241430", color: "#FAF7F2", padding: "8px 14px", borderRadius: 8, textDecoration: "none", fontWeight: 600 }}>{skipLabel}</a>
      <p style={{ margin: "0 0 10px", lineHeight: 1.6 }}>Read the overview, then <a href="#pricing" style={{ color: "#241430", ...linkStyle }}>{sectionLabel}</a> further down the page.</p>
      <div id="anchor-target" tabIndex={-1} style={{ padding: 10, border: "1px dashed rgba(36,20,48,.3)", borderRadius: 8, fontSize: 12, opacity: .6 }}>Main content landmark</div>
    </div>
  );
}