This rune is part of @refrakt-md/storytelling. Install with npm install @refrakt-md/storytelling and add "@refrakt-md/storytelling" to the packages 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" layout="split" %}
![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">
  <div data-name="scene">
    <img src="https://assets.refrakt.md/realm-rivendell.png" alt="Rivendell" property="image">
  </div>
  <span data-name="name" property="name">Rivendell</span>
  <meta content="sanctuary" data-field="realm-type" property="additionalType">
  <meta content="settlement" data-field="scale">
  <meta content="" data-field="tags">
  <meta content="Eriador" data-field="parent">
  <meta content="split" data-field="layout">
  <meta content="1 1" data-field="ratio">
  <meta content="top" data-field="valign">
  <div data-name="content">
    <p>The Last Homely House East of the Sea.</p>
    <div>
      <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>
  </div>
</article>

Type:sanctuaryScale:settlement

Rivendell

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 rf-realm--split" data-realm-type="sanctuary" data-scale="settlement" data-parent="Eriador" data-layout="split" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="realm" data-density="full" data-media-position="top" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
  <div data-name="badge" class="rf-realm__badge" data-section="header">
    <span data-name="type-badge" data-meta-type="category" data-meta-rank="primary" class="rf-realm__type-badge">
      <span data-meta-label="">Type:</span>
      <span data-meta-value="">sanctuary</span>
    </span>
    <span data-name="scale-badge" data-meta-type="category" data-meta-rank="secondary" class="rf-realm__scale-badge">
      <span data-meta-label="">Scale:</span>
      <span data-meta-value="">settlement</span>
    </span>
  </div>
  <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>
  <span data-name="name" property="name" class="rf-realm__name" data-section="title">Rivendell</span>
  <div data-name="content" class="rf-realm__content">
    <p>The Last Homely House East of the Sea.</p>
    <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">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>
</article>

Realm types

Use the type attribute to categorize your locations.

{% realm name="The Undercroft" type="dungeon" scale="complex" layout="split" %}
![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">
  <div data-name="scene">
    <img src="https://assets.refrakt.md/realm-the-undercroft.png" alt="The Undercroft" property="image">
  </div>
  <span data-name="name" property="name">The Undercroft</span>
  <meta content="dungeon" data-field="realm-type" property="additionalType">
  <meta content="complex" data-field="scale">
  <meta content="" data-field="tags">
  <meta content="" data-field="parent">
  <meta content="split" data-field="layout">
  <meta content="1 1" data-field="ratio">
  <meta content="top" data-field="valign">
  <div data-name="content">
    <div>
      <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>
  </div>
</article>

Type:dungeonScale:complex

The Undercroft

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 rf-realm--split" data-realm-type="dungeon" data-scale="complex" data-layout="split" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="realm" data-density="full" data-media-position="top" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
  <div data-name="badge" class="rf-realm__badge" data-section="header">
    <span data-name="type-badge" data-meta-type="category" data-meta-rank="primary" class="rf-realm__type-badge">
      <span data-meta-label="">Type:</span>
      <span data-meta-value="">dungeon</span>
    </span>
    <span data-name="scale-badge" data-meta-type="category" data-meta-rank="secondary" class="rf-realm__scale-badge">
      <span data-meta-label="">Scale:</span>
      <span data-meta-value="">complex</span>
    </span>
  </div>
  <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>
  <span data-name="name" property="name" class="rf-realm__name" data-section="title">The Undercroft</span>
  <div data-name="content" class="rf-realm__content">
    <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">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>
</article>

Attributes

Attribute	Type	Default	Description
`name`	`string`	—	Realm name (required)
`type`	`string`	`place`	Realm type (e.g. `city`, `dungeon`, `plane`, `sanctuary`)
`scale`	`string`	—	Size or scope descriptor (e.g. `settlement`, `region`, `complex`)
`parent`	`string`	—	Parent realm reference for hierarchical locations
`tags`	`string`	—	Comma-separated metadata tags

Common attributes

All block runes share these attributes for layout and theming.

Attribute	Type	Default	Description
`width`	`string`	`content`	Page grid width: `content`, `wide`, or `full`
`spacing`	`string`	—	Vertical spacing: `flush`, `tight`, `default`, `loose`, or `breathe`
`inset`	`string`	—	Horizontal padding: `flush`, `tight`, `default`, `loose`, or `breathe`
`tint`	`string`	—	Named colour tint from theme configuration
`tint-mode`	`string`	`auto`	Colour scheme override: `auto`, `dark`, or `light`
`bg`	`string`	—	Named background preset from theme configuration

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Realm

Basic usage

Realm types

Attributes

Common attributes