refrakt.md

Docs Runes Plan Blog Changelog

Hint

Callouts and admonitions. Supports four types: note, warning, caution, and check.

Basic usage

Display supplementary information with a visual callout.

{% hint type="note" %}
This is a note with helpful information.
{% /hint %}
<section data-field="content-section" data-rune="hint">
  <meta content="note" data-field="hint-type">
  <div data-name="body">
    <p>This is a note with helpful information.</p>
  </div>
</section>
note

This is a note with helpful information.

<section data-field="content-section" class="rf-hint rf-hint--note" data-hint-type="note" data-rune="hint" data-density="compact">
  <div data-name="header" class="rf-hint__header" data-section="header">
    <span data-name="icon" class="rf-hint__icon"></span>
    <span data-name="title" class="rf-hint__title">note</span>
  </div>
  <div data-name="body" class="rf-hint__body">
    <p>This is a note with helpful information.</p>
  </div>
</section>

All hint types

Use different types to convey different levels of importance.

{% hint type="note" %}
This is a **note** — useful for supplementary information.
{% /hint %}

{% hint type="warning" %}
This is a **warning** — something to be careful about.
{% /hint %}

{% hint type="caution" %}
This is a **caution** — a serious potential issue.
{% /hint %}

{% hint type="check" %}
This is a **check** — a success or completion message.
{% /hint %}
<section data-field="content-section" data-rune="hint">
  <meta content="note" data-field="hint-type">
  <div data-name="body">
    <p>
      This is a
      <strong marker="**">note</strong>
      — useful for supplementary information.
    </p>
  </div>
</section>
<section data-field="content-section" data-rune="hint">
  <meta content="warning" data-field="hint-type">
  <div data-name="body">
    <p>
      This is a
      <strong marker="**">warning</strong>
      — something to be careful about.
    </p>
  </div>
</section>
<section data-field="content-section" data-rune="hint">
  <meta content="caution" data-field="hint-type">
  <div data-name="body">
    <p>
      This is a
      <strong marker="**">caution</strong>
      — a serious potential issue.
    </p>
  </div>
</section>
<section data-field="content-section" data-rune="hint">
  <meta content="check" data-field="hint-type">
  <div data-name="body">
    <p>
      This is a
      <strong marker="**">check</strong>
      — a success or completion message.
    </p>
  </div>
</section>
note

This is a note — useful for supplementary information.

warning

This is a warning — something to be careful about.

caution

This is a caution — a serious potential issue.

check

This is a check — a success or completion message.

<section data-field="content-section" class="rf-hint rf-hint--note" data-hint-type="note" data-rune="hint" data-density="compact">
  <div data-name="header" class="rf-hint__header" data-section="header">
    <span data-name="icon" class="rf-hint__icon"></span>
    <span data-name="title" class="rf-hint__title">note</span>
  </div>
  <div data-name="body" class="rf-hint__body">
    <p>
      This is a 
      <strong marker="**">note</strong>
       — useful for supplementary information.
    </p>
  </div>
</section>
<section data-field="content-section" class="rf-hint rf-hint--warning" data-hint-type="warning" data-rune="hint" data-density="compact">
  <div data-name="header" class="rf-hint__header" data-section="header">
    <span data-name="icon" class="rf-hint__icon"></span>
    <span data-name="title" class="rf-hint__title">warning</span>
  </div>
  <div data-name="body" class="rf-hint__body">
    <p>
      This is a 
      <strong marker="**">warning</strong>
       — something to be careful about.
    </p>
  </div>
</section>
<section data-field="content-section" class="rf-hint rf-hint--caution" data-hint-type="caution" data-rune="hint" data-density="compact">
  <div data-name="header" class="rf-hint__header" data-section="header">
    <span data-name="icon" class="rf-hint__icon"></span>
    <span data-name="title" class="rf-hint__title">caution</span>
  </div>
  <div data-name="body" class="rf-hint__body">
    <p>
      This is a 
      <strong marker="**">caution</strong>
       — a serious potential issue.
    </p>
  </div>
</section>
<section data-field="content-section" class="rf-hint rf-hint--check" data-hint-type="check" data-rune="hint" data-density="compact">
  <div data-name="header" class="rf-hint__header" data-section="header">
    <span data-name="icon" class="rf-hint__icon"></span>
    <span data-name="title" class="rf-hint__title">check</span>
  </div>
  <div data-name="body" class="rf-hint__body">
    <p>
      This is a 
      <strong marker="**">check</strong>
       — a success or completion message.
    </p>
  </div>
</section>

Attributes

AttributeTypeDefaultDescription
typestring"note"One of note, warning, caution, check

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