refrakt.md

Docs Runes Plan Blog Changelog

Reveal

Progressive disclosure. Headings become reveal steps, with content shown one step at a time.

Basic usage

Headings automatically split content into reveal steps.

{% reveal %}
### Step 1: Install the package

Run the install command to add refrakt.md to your project.

### Step 2: Configure your theme

Set up the lumina theme in your config file.

### Step 3: Write content

Create Markdown files with runes and watch them transform.
{% /reveal %}
<section data-field="content-section" data-rune="reveal">
  <meta content="click">
  <div data-name="steps">
    <div data-field="step" data-rune="reveal-step">
      <span data-field="name">Step 1: Install the package</span>
      <div data-name="body">
        <p>Run the install command to add refrakt.md to your project.</p>
      </div>
    </div>
    <div data-field="step" data-rune="reveal-step">
      <span data-field="name">Step 2: Configure your theme</span>
      <div data-name="body">
        <p>Set up the lumina theme in your config file.</p>
      </div>
    </div>
    <div data-field="step" data-rune="reveal-step">
      <span data-field="name">Step 3: Write content</span>
      <div data-name="body">
        <p>Create Markdown files with runes and watch them transform.</p>
      </div>
    </div>
  </div>
</section>
Step 1: Install the package

Run the install command to add refrakt.md to your project.

Step 2: Configure your theme

Set up the lumina theme in your config file.

Step 3: Write content

Create Markdown files with runes and watch them transform.

<section data-field="content-section" class="rf-reveal rf-reveal--click" data-mode="click" data-rune="reveal" data-density="full">
  <meta content="click" />
  <div data-name="steps" class="rf-reveal__steps">
    <div data-field="step" class="rf-reveal-step" data-rune="reveal-step" data-density="full" data-state="closed">
      <span data-field="name">Step 1: Install the package</span>
      <div data-name="body" class="rf-reveal-step__body">
        <p>Run the install command to add refrakt.md to your project.</p>
      </div>
    </div>
    <div data-field="step" class="rf-reveal-step" data-rune="reveal-step" data-density="full" data-state="closed">
      <span data-field="name">Step 2: Configure your theme</span>
      <div data-name="body" class="rf-reveal-step__body">
        <p>Set up the lumina theme in your config file.</p>
      </div>
    </div>
    <div data-field="step" class="rf-reveal-step" data-rune="reveal-step" data-density="full" data-state="closed">
      <span data-field="name">Step 3: Write content</span>
      <div data-name="body" class="rf-reveal-step__body">
        <p>Create Markdown files with runes and watch them transform.</p>
      </div>
    </div>
  </div>
</section>

Section header

Reveal supports an optional eyebrow, headline, and blurb above the steps. Place a short paragraph or heading before your step headings to use them. See Page sections for the full syntax.

Attributes

AttributeTypeDefaultDescription
modestringclickTrigger mode: click, scroll, auto

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