refrakt.md

Docs Runes Plan Blog Changelog

Sidenote

Margin notes, footnotes, or tooltips displayed alongside the main content. Useful for providing additional context without interrupting the reading flow.

Basic usage

A margin note that sits alongside the main text.

{% sidenote variant="sidenote" %}
This is a margin note that provides additional context without interrupting the main flow of the text. It can contain **rich formatting** and [links](/docs/getting-started).
{% /sidenote %}
<aside data-rune="sidenote">
  <meta content="sidenote" data-field="variant">
  <div data-name="body">
    <p>
      This is a margin note that provides additional context without interrupting the main flow of the text. It can contain
      <strong marker="**">rich formatting</strong>
      and
      <a href="/docs/getting-started">links</a>
      .
    </p>
  </div>
</aside>
<aside class="rf-sidenote rf-sidenote--sidenote" data-variant="sidenote" data-rune="sidenote" data-density="full">
  <div data-name="body" class="rf-sidenote__body" data-section="body">
    <p>
      This is a margin note that provides additional context without interrupting the main flow of the text. It can contain 
      <strong marker="**">rich formatting</strong>
       and 
      <a href="/docs/getting-started">links</a>
      .
    </p>
  </div>
</aside>

Footnote style

Use variant="footnote" for content that appears at the bottom of the section.

{% sidenote variant="footnote" %}
This appears as a footnote, typically rendered at the bottom of the content section with a separator line.
{% /sidenote %}
<aside data-rune="sidenote">
  <meta content="footnote" data-field="variant">
  <div data-name="body">
    <p>This appears as a footnote, typically rendered at the bottom of the content section with a separator line.</p>
  </div>
</aside>
<aside class="rf-sidenote rf-sidenote--footnote" data-variant="footnote" data-rune="sidenote" data-density="full">
  <div data-name="body" class="rf-sidenote__body" data-section="body">
    <p>This appears as a footnote, typically rendered at the bottom of the content section with a separator line.</p>
  </div>
</aside>

Tooltip style

Use variant="tooltip" for a subtle inline callout.

{% sidenote variant="tooltip" %}
This appears as a tooltip-style callout with a subtle border and background.
{% /sidenote %}
<aside data-rune="sidenote">
  <meta content="tooltip" data-field="variant">
  <div data-name="body">
    <p>This appears as a tooltip-style callout with a subtle border and background.</p>
  </div>
</aside>
<aside class="rf-sidenote rf-sidenote--tooltip" data-variant="tooltip" data-rune="sidenote" data-density="full">
  <div data-name="body" class="rf-sidenote__body" data-section="body">
    <p>This appears as a tooltip-style callout with a subtle border and background.</p>
  </div>
</aside>

Attributes

AttributeTypeDefaultDescription
variantstringsidenoteDisplay variant: sidenote, footnote, or tooltip

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