Link

{% link %} is a link written as a tag. Inside a line of text it is an ordinary <a>, the same as [text](url), useful when the target is a variable. Around blocks it makes the whole region a link — a figure, a hint, a heading and its paragraph — and works out how to do that without nesting one link inside another.

Inline

In a line of text the tag renders a plain <a>. Its main use is in templates, where the target comes from a variable:

Read {% link href=$item.url %}{% $item.data.title %}{% /link %} next.

Around blocks

{% link href="/runes/card" %}
## Card

A generic content card with an optional whole-card link.
{% /link %}

<div data-link-href="/runes/card">
  <h2 id="card">Card</h2>
  <p>A generic content card with an optional whole-card link.</p>
</div>

<div data-link-href="/runes/card">
  <h2 id="card">Card</h2>
  <p>A generic content card with an optional whole-card link.</p>
</div>

How the region becomes a link depends on what it holds:

• Nothing interactive inside — the region is wrapped in a real <a data-link="wrap">.
• Links or controls inside — an <a> around them would nest interactive content, which is invalid HTML. A stretched <a data-link="stretch"> is laid over the region instead, and the inner links stay clickable above it. This is the same overlay a card with href uses.

{% link href="/runes/figure" %}
	{% hint type="note" %}
	The whole hint opens the figure page, and [this link](/runes/hint) still opens the hint page.
	{% /hint %}
{% /link %}

<div data-link-href="/runes/figure">
  <section data-rune="hint" data-rune-fields="{&quot;hintType&quot;:&quot;note&quot;}">
    <div data-name="body">
      <p>
        The whole hint opens the figure page, and
        <a href="/runes/hint">this link</a>
        still opens the hint page.
      </p>
    </div>
  </section>
</div>

<div data-link-href="/runes/figure">
  <section class="rf-hint rf-hint--note" data-hint-type="note" data-elevation="sunken" data-rune="hint" data-density="compact">
    <div data-name="header" data-zone="header" data-zone-layout="bar" class="rf-hint__header" data-section="header">
      <span>
        <span data-icon-group="hint" data-icon="note"></span>
        <span data-meta-value="">note</span>
      </span>
    </div>
    <div data-name="body" class="rf-hint__body">
      <p>
        The whole hint opens the figure page, and 
        <a href="/runes/hint">this link</a>
         still opens the hint page.
      </p>
    </div>
  </section>
</div>

The choice is made when the page is rendered, after the cross-page build has run, so links added late — entity cross-links, resolved xrefs — are taken into account.

Links, buttons, form controls, details, embedded media and interactive runes such as tabs all count as interactive.

Accessible name

The link is a real, focusable link with one tab stop. It is named, in order:

1. by aria-label, when you give one;
2. else by the content's title — its title, headline or name slot, or else its first heading — through aria-labelledby;
3. else by the content's text, up to 120 characters.

A wrapped link reads its content as its name already; the order above matters for the stretched link, which has no text of its own.

Empty href

An empty href renders the content unchanged, with no link. A template can write {% link href=$item.url %} around a block without first checking that the entry has a URL.

Structured data

link adds no data-rune of its own, so it is not a boundary for the structured data inside it. A character inside a link still publishes as a Person.

Output contract

Wrapped:

<a href="/guide" data-link="wrap">
  <h2>The guide</h2>
  <p>Read it first.</p>
</a>

Stretched over one rune, inside its root with the rune's BEM element class:

<section class="rf-hint …" data-rune="hint">
  …
  <a href="/post" data-name="link" data-link="stretch" class="rf-hint__link" aria-label="…"></a>
</section>

Stretched over anything else, inside a host element:

<div data-link="host">
  <h2 id="the-guide">The guide</h2>
  <p>See <a href="/index">the index</a>.</p>
  <a href="/guide" data-name="link" data-link="stretch" aria-labelledby="the-guide"></a>
</div>

Themes style these through [data-link]: the skeleton positions the stretched link over its host, and Lumina resets the wrapped link's colour and underline and draws the focus ring.

Attributes