v0.9.8defuss-shadcn
Theme
Design your own

defuss-shadcn / Primitives / heading-anchor

Built with: CSS

Heading AnchorATM

A quiet § permalink on any heading - visible on hover, copyable as a deep link. Placed before or after the heading text. No JavaScript required.

On this page (4)
Component Skill — components/heading-anchor/component-skill.md

Native basis

<a> element containing the section glyph §, placed as the first or last child of the heading it links to. The browser's native fragment navigation does the work.

Web Platform APIs

<a>:targetaria-label

Classes

.heading-anchor

Placements (data-placement)

beforemargin-right - the default slotaftermargin-left - trailing the text

Sizes (data-size)

xs0.75rem - fine print, captionssm0.875rem - small headingsmd1rem - default heading sizelg1.125rem - section headingsxl1.25rem - page titles

§Before the heading (default)

The anchor rides the heading's baseline, quiet until hovered.

§After the heading

data-placement='after' swaps the margin side.

§Sizes

data-size pins the glyph size explicitly; without it the glyph inherits the heading's own font size (recommended - it then tracks the heading automatically). The glyph always inherits the heading's font family - var(--font-sans), var(--font-serif) and var(--font-mono) all work.

§CSS view file

/* -- Heading Anchor component ------------------------------- */
@layer components {
  .heading-anchor {
    color: var(--muted-foreground);
    text-decoration: none;
    font-weight: 400;
    margin-right: 0.375rem;
    &[data-placement="after"] {
      margin-right: 0;
      margin-left: 0.375rem;
    }
    &[data-size="xs"] { font-size: 0.75rem; }
    &[data-size="sm"] { font-size: 0.875rem; }
    &[data-size="md"] { font-size: 1rem; }
    &[data-size="lg"] { font-size: 1.125rem; }
    &[data-size="xl"] { font-size: 1.25rem; }
    &:hover {
      color: var(--primary);
      text-decoration: underline;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .heading-anchor {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    .heading-anchor { color: LinkText; }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub