refrakt.md

Docs

Runes

Themes

Extend

Project

Content›Hint

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" data-rune-fields="{&quot;hintType&quot;:&quot;note&quot;}">
  <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" 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>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" data-rune-fields="{&quot;hintType&quot;:&quot;note&quot;}">
  <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" data-rune-fields="{&quot;hintType&quot;:&quot;warning&quot;}">
  <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" data-rune-fields="{&quot;hintType&quot;:&quot;caution&quot;}">
  <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" data-rune-fields="{&quot;hintType&quot;:&quot;check&quot;}">
  <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" 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>
      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" data-zone="header" data-zone-layout="bar" class="rf-hint__header" data-section="header">
    <span>
      <span data-icon-group="hint" data-icon="warning"></span>
      <span data-meta-value="">warning</span>
    </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" data-zone="header" data-zone-layout="bar" class="rf-hint__header" data-section="header">
    <span>
      <span data-icon-group="hint" data-icon="caution"></span>
      <span data-meta-value="">caution</span>
    </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" data-zone="header" data-zone-layout="bar" class="rf-hint__header" data-section="header">
    <span>
      <span data-icon-group="hint" data-icon="check"></span>
      <span data-meta-value="">check</span>
    </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