refrakt.md

Docs

Runes

Themes

Extend

Project

Storytelling›Realm
note

This rune is part of @refrakt-md/storytelling. Install with npm install @refrakt-md/storytelling and add "@refrakt-md/storytelling" to the plugins array in your refrakt.config.json.

Realm

Location and place profiles for worldbuilding. Headings within the rune become named sections, and the first image is extracted as a scene illustration.

Basic usage

Describe a location with sections for geography, features, or history.

{% realm name="Rivendell" type="sanctuary" scale="settlement" parent="Eriador" media-position="start" %}
![Rivendell](https://assets.refrakt.md/realm-rivendell.png)

The Last Homely House East of the Sea.

## Geography

A hidden valley in the foothills of the Misty Mountains.

## Notable Features

- Hall of Fire
- Council chamber
- Extensive libraries
{% /realm %}
<article data-field="content-section" data-rune="realm" typeof="Place" data-rune-fields="{&quot;realmType&quot;:&quot;sanctuary&quot;,&quot;scale&quot;:&quot;settlement&quot;,&quot;tags&quot;:&quot;&quot;,&quot;parent&quot;:&quot;Eriador&quot;,&quot;media-position&quot;:&quot;start&quot;}">
  <div data-name="scene">
    <img src="https://assets.refrakt.md/realm-rivendell.png" alt="Rivendell" property="image">
  </div>
  <meta content="sanctuary" property="additionalType">
  <span data-name="name" property="name">Rivendell</span>
  <div data-name="body">
    <p>The Last Homely House East of the Sea.</p>
  </div>
  <div data-name="sections">
    <div data-field="section" data-rune="realm-section">
      <span data-name="name">Geography</span>
      <div data-name="body">
        <p>A hidden valley in the foothills of the Misty Mountains.</p>
      </div>
    </div>
    <div data-field="section" data-rune="realm-section">
      <span data-name="name">Notable Features</span>
      <div data-name="body">
        <ul>
          <li>Hall of Fire</li>
          <li>Council chamber</li>
          <li>Extensive libraries</li>
        </ul>
      </div>
    </div>
  </div>
</article>
Rivendell
Rivendell
Type
sanctuary
Scale
settlement

The Last Homely House East of the Sea.

Geography

A hidden valley in the foothills of the Misty Mountains.

Notable Features
  • Hall of Fire
  • Council chamber
  • Extensive libraries
<article data-field="content-section" typeof="Place" class="rf-realm rf-realm--sanctuary rf-realm--settlement rf-realm--Eriador" data-realm-type="sanctuary" data-scale="settlement" data-tags="" data-parent="Eriador" data-media-position="start" data-rune="realm" data-density="full">
  <div data-name="scene" class="rf-realm__scene" data-section="media" data-media="cover">
    <img src="https://assets.refrakt.md/realm-rivendell.png" alt="Rivendell" property="image" />
  </div>
  <div data-name="content" class="rf-realm__content">
    <header data-name="preamble" class="rf-realm__preamble" data-section="preamble">
      <span data-name="name" property="name" class="rf-realm__name" data-section="title">Rivendell</span>
    </header>
    <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-realm__metadata">
      <div data-name="row" data-field="realmType" class="rf-realm__row">
        <dt data-meta-label="">Type</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">sanctuary</span>
        </dd>
      </div>
      <div data-name="row" data-field="scale" class="rf-realm__row">
        <dt data-meta-label="">Scale</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">settlement</span>
        </dd>
      </div>
    </dl>
    <div data-name="body" class="rf-realm__body">
      <p>The Last Homely House East of the Sea.</p>
    </div>
    <div data-name="sections" class="rf-realm__sections">
      <div data-field="section" class="rf-realm-section" data-rune="realm-section" data-density="full">
        <span data-name="name" class="rf-realm-section__name">Geography</span>
        <div data-name="body" class="rf-realm-section__body">
          <p>A hidden valley in the foothills of the Misty Mountains.</p>
        </div>
      </div>
      <div data-field="section" class="rf-realm-section" data-rune="realm-section" data-density="full">
        <span data-name="name" class="rf-realm-section__name">Notable Features</span>
        <div data-name="body" class="rf-realm-section__body">
          <ul>
            <li>Hall of Fire</li>
            <li>Council chamber</li>
            <li>Extensive libraries</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <meta content="sanctuary" property="additionalType" />
</article>

Realm types

Use the type attribute to categorize your locations.

{% realm name="The Undercroft" type="dungeon" scale="complex" media-position="start" %}
![The Undercroft](https://assets.refrakt.md/realm-the-undercroft.png)

## Overview

A sprawling network of tunnels beneath the old city, home to smugglers and worse.

## Dangers

- Flooded passages
- Collapsing ceilings
- Cave spiders
{% /realm %}
<article data-field="content-section" data-rune="realm" typeof="Place" data-rune-fields="{&quot;realmType&quot;:&quot;dungeon&quot;,&quot;scale&quot;:&quot;complex&quot;,&quot;tags&quot;:&quot;&quot;,&quot;parent&quot;:&quot;&quot;,&quot;media-position&quot;:&quot;start&quot;}">
  <div data-name="scene">
    <img src="https://assets.refrakt.md/realm-the-undercroft.png" alt="The Undercroft" property="image">
  </div>
  <meta content="dungeon" property="additionalType">
  <span data-name="name" property="name">The Undercroft</span>
  <div data-name="sections">
    <div data-field="section" data-rune="realm-section">
      <span data-name="name">Overview</span>
      <div data-name="body">
        <p>A sprawling network of tunnels beneath the old city, home to smugglers and worse.</p>
      </div>
    </div>
    <div data-field="section" data-rune="realm-section">
      <span data-name="name">Dangers</span>
      <div data-name="body">
        <ul>
          <li>Flooded passages</li>
          <li>Collapsing ceilings</li>
          <li>Cave spiders</li>
        </ul>
      </div>
    </div>
  </div>
</article>
The Undercroft
The Undercroft
Type
dungeon
Scale
complex
Overview

A sprawling network of tunnels beneath the old city, home to smugglers and worse.

Dangers
  • Flooded passages
  • Collapsing ceilings
  • Cave spiders
<article data-field="content-section" typeof="Place" class="rf-realm rf-realm--dungeon rf-realm--complex" data-realm-type="dungeon" data-scale="complex" data-tags="" data-parent="" data-media-position="start" data-rune="realm" data-density="full">
  <div data-name="scene" class="rf-realm__scene" data-section="media" data-media="cover">
    <img src="https://assets.refrakt.md/realm-the-undercroft.png" alt="The Undercroft" property="image" />
  </div>
  <div data-name="content" class="rf-realm__content">
    <header data-name="preamble" class="rf-realm__preamble" data-section="preamble">
      <span data-name="name" property="name" class="rf-realm__name" data-section="title">The Undercroft</span>
    </header>
    <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-realm__metadata">
      <div data-name="row" data-field="realmType" class="rf-realm__row">
        <dt data-meta-label="">Type</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">dungeon</span>
        </dd>
      </div>
      <div data-name="row" data-field="scale" class="rf-realm__row">
        <dt data-meta-label="">Scale</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">complex</span>
        </dd>
      </div>
    </dl>
    <div data-name="sections" class="rf-realm__sections">
      <div data-field="section" class="rf-realm-section" data-rune="realm-section" data-density="full">
        <span data-name="name" class="rf-realm-section__name">Overview</span>
        <div data-name="body" class="rf-realm-section__body">
          <p>A sprawling network of tunnels beneath the old city, home to smugglers and worse.</p>
        </div>
      </div>
      <div data-field="section" class="rf-realm-section" data-rune="realm-section" data-density="full">
        <span data-name="name" class="rf-realm-section__name">Dangers</span>
        <div data-name="body" class="rf-realm-section__body">
          <ul>
            <li>Flooded passages</li>
            <li>Collapsing ceilings</li>
            <li>Cave spiders</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <meta content="dungeon" property="additionalType" />
</article>

Attributes

AttributeTypeDefaultDescription
namestring—Realm name (required)
typestringplaceRealm type (e.g. city, dungeon, plane, sanctuary)
scalestring—Size or scope descriptor (e.g. settlement, region, complex)
parentstring—Parent realm reference for hierarchical locations
tagsstring—Comma-separated metadata tags

Layout attributes

A realm's scene field (the image at the top of each section) is the media zone; media-position controls where it sits relative to the content. Beside layouts (start/end) collapse to a stack at narrow widths.

AttributeTypeDefaultDescription
media-positionstringtopWhere the scene sits: top, bottom, start (left), end (right)
media-ratiostring—Scene's share of the row when beside content (start/end): 1/3, 2/5, 1/2, 3/5, 2/3
valignstring—Cross-axis alignment when scene is beside content: top, center, bottom, stretch
collapsestring—Breakpoint at which beside layouts collapse to a stack: sm, md, lg, never

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