refrakt.md

Docs Runes Plan Blog Changelog

Table of Contents

Auto-generated table of contents from the headings on the current page.

Basic usage

Place the self-closing tag where you want the table of contents to appear.

The table of contents below is generated from this page's own headings:

{% toc /%}
<nav data-rune="table-of-contents">
  <meta content="3" data-field="depth">
  <meta data-field="ordered">
  <ul data-name="list">
    <li data-level="2">
      <a href="#basic-usage">Basic usage</a>
    </li>
    <li data-level="3">
      <a href="#attributes">Attributes</a>
    </li>
    <li data-level="3">
      <a href="#common-attributes">Common attributes</a>
    </li>
  </ul>
</nav>
<nav class="rf-toc" data-rune="table-of-contents" data-density="full">
  <meta content="3" data-field="depth" />
  <meta data-field="ordered" />
  <ul data-name="list" class="rf-toc__list">
    <li data-level="2">
      <a href="#basic-usage">Basic usage</a>
    </li>
    <li data-level="3">
      <a href="#attributes">Attributes</a>
    </li>
    <li data-level="3">
      <a href="#common-attributes">Common attributes</a>
    </li>
  </ul>
</nav>

Control how deep the heading hierarchy goes with depth:

{% toc depth=2 /%}

Attributes

AttributeTypeDefaultDescription
depthnumber3Maximum heading depth to include (e.g., 2 includes h2 and h3)
orderedbooleanfalseUse an ordered list instead of unordered

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration