Sidenote

{% 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" data-rune-fields="{&quot;variant&quot;:&quot;sidenote&quot;}">
  <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-elevation="flush" data-rune="sidenote" data-density="full">
  <div data-name="body" class="rf-sidenote__body" data-section="body" data-reading="fine">
    <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>

{% 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" data-rune-fields="{&quot;variant&quot;:&quot;footnote&quot;}">
  <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-elevation="flush" data-rune="sidenote" data-density="full">
  <div data-name="body" class="rf-sidenote__body" data-section="body" data-reading="fine">
    <p>This appears as a footnote, typically rendered at the bottom of the content section with a separator line.</p>
  </div>
</aside>

{% sidenote variant="tooltip" %}
This appears as a tooltip-style callout with a subtle border and background.
{% /sidenote %}

<aside data-rune="sidenote" data-rune-fields="{&quot;variant&quot;:&quot;tooltip&quot;}">
  <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-elevation="flush" data-rune="sidenote" data-density="full">
  <div data-name="body" class="rf-sidenote__body" data-section="body" data-reading="fine">
    <p>This appears as a tooltip-style callout with a subtle border and background.</p>
  </div>
</aside>