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.

Character

Character profiles for worldbuilding and storytelling. Headings within the rune are automatically converted into named sections, and the first image becomes the character portrait.

Basic usage

Headings become character sections, and the first image (if any) is extracted as a portrait.

{% character name="Veshra" role="antagonist" status="alive" aliases="The Bone Witch" tags="magic-user" %}
## Backstory

Raised in the shadow of the Ashen Spire, Veshra discovered her gift for necromancy at a young age.

## Abilities

- Bone conjuration
- Spirit binding
- Plague whisper
{% /character %}

<article data-field="content-section" data-rune="character" typeof="Person" data-rune-fields="{&quot;role&quot;:&quot;antagonist&quot;,&quot;status&quot;:&quot;alive&quot;,&quot;aliases&quot;:&quot;The Bone Witch&quot;,&quot;tags&quot;:&quot;magic-user&quot;}">
  <meta content="antagonist" property="jobTitle">
  <span data-name="name" property="name">Veshra</span>
  <div data-name="sections">
    <div data-field="section" data-rune="character-section">
      <span data-name="name">Backstory</span>
      <div data-name="body">
        <p>Raised in the shadow of the Ashen Spire, Veshra discovered her gift for necromancy at a young age.</p>
      </div>
    </div>
    <div data-field="section" data-rune="character-section">
      <span data-name="name">Abilities</span>
      <div data-name="body">
        <ul>
          <li>Bone conjuration</li>
          <li>Spirit binding</li>
          <li>Plague whisper</li>
        </ul>
      </div>
    </div>
  </div>
</article>

Veshra

Role: antagonist
Status: alive

Backstory

Raised in the shadow of the Ashen Spire, Veshra discovered her gift for necromancy at a young age.

Abilities

Bone conjuration
Spirit binding
Plague whisper

<article data-field="content-section" typeof="Person" class="rf-character rf-character--antagonist rf-character--alive rf-character--The Bone Witch rf-character--magic-user" data-role="antagonist" data-status="alive" data-aliases="The Bone Witch" data-tags="magic-user" data-rune="character" data-density="full">
  <div data-name="content" class="rf-character__content">
    <header data-name="preamble" class="rf-character__preamble" data-section="preamble">
      <span data-name="name" property="name" class="rf-character__name" data-section="title">Veshra</span>
    </header>
    <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-character__metadata">
      <div data-name="row" data-field="role" class="rf-character__row">
        <dt data-meta-label="">Role</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">antagonist</span>
        </dd>
      </div>
      <div data-name="row" data-field="status" class="rf-character__row">
        <dt data-meta-label="">Status</dt>
        <dd>
          <span class="rf-badge" data-meta-type="status" data-meta-sentiment="positive">alive</span>
        </dd>
      </div>
    </dl>
    <div data-name="sections" class="rf-character__sections">
      <div data-field="section" class="rf-character-section" data-rune="character-section" data-density="full">
        <span data-name="name" class="rf-character-section__name">Backstory</span>
        <div data-name="body" class="rf-character-section__body">
          <p>Raised in the shadow of the Ashen Spire, Veshra discovered her gift for necromancy at a young age.</p>
        </div>
      </div>
      <div data-field="section" class="rf-character-section" data-rune="character-section" data-density="full">
        <span data-name="name" class="rf-character-section__name">Abilities</span>
        <div data-name="body" class="rf-character-section__body">
          <ul>
            <li>Bone conjuration</li>
            <li>Spirit binding</li>
            <li>Plague whisper</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
  <meta content="antagonist" property="jobTitle" />
</article>

Roles

The role attribute controls visual styling to distinguish character importance.

{% character name="Elena" role="protagonist" status="alive" %}
## Background

The hero of the story — a wandering scholar searching for lost texts.
{% /character %}

<article data-field="content-section" data-rune="character" typeof="Person" data-rune-fields="{&quot;role&quot;:&quot;protagonist&quot;,&quot;status&quot;:&quot;alive&quot;,&quot;aliases&quot;:&quot;&quot;,&quot;tags&quot;:&quot;&quot;}">
  <meta content="protagonist" property="jobTitle">
  <span data-name="name" property="name">Elena</span>
  <div data-name="sections">
    <div data-field="section" data-rune="character-section">
      <span data-name="name">Background</span>
      <div data-name="body">
        <p>The hero of the story — a wandering scholar searching for lost texts.</p>
      </div>
    </div>
  </div>
</article>

Elena

Role: protagonist
Status: alive

Background

The hero of the story — a wandering scholar searching for lost texts.

<article data-field="content-section" typeof="Person" class="rf-character rf-character--protagonist rf-character--alive" data-role="protagonist" data-status="alive" data-aliases="" data-tags="" data-rune="character" data-density="full">
  <div data-name="content" class="rf-character__content">
    <header data-name="preamble" class="rf-character__preamble" data-section="preamble">
      <span data-name="name" property="name" class="rf-character__name" data-section="title">Elena</span>
    </header>
    <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-character__metadata">
      <div data-name="row" data-field="role" class="rf-character__row">
        <dt data-meta-label="">Role</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">protagonist</span>
        </dd>
      </div>
      <div data-name="row" data-field="status" class="rf-character__row">
        <dt data-meta-label="">Status</dt>
        <dd>
          <span class="rf-badge" data-meta-type="status" data-meta-sentiment="positive">alive</span>
        </dd>
      </div>
    </dl>
    <div data-name="sections" class="rf-character__sections">
      <div data-field="section" class="rf-character-section" data-rune="character-section" data-density="full">
        <span data-name="name" class="rf-character-section__name">Background</span>
        <div data-name="body" class="rf-character-section__body">
          <p>The hero of the story — a wandering scholar searching for lost texts.</p>
        </div>
      </div>
    </div>
  </div>
  <meta content="protagonist" property="jobTitle" />
</article>

Status tracking

Track whether a character is alive, dead, unknown, or missing.

{% character name="Lord Ashford" role="supporting" status="dead" %}
## Legacy

Once the warden of the Eastern March, Lord Ashford fell during the Siege of Thornwall.
{% /character %}

<article data-field="content-section" data-rune="character" typeof="Person" data-rune-fields="{&quot;role&quot;:&quot;supporting&quot;,&quot;status&quot;:&quot;dead&quot;,&quot;aliases&quot;:&quot;&quot;,&quot;tags&quot;:&quot;&quot;}">
  <meta content="supporting" property="jobTitle">
  <span data-name="name" property="name">Lord Ashford</span>
  <div data-name="sections">
    <div data-field="section" data-rune="character-section">
      <span data-name="name">Legacy</span>
      <div data-name="body">
        <p>Once the warden of the Eastern March, Lord Ashford fell during the Siege of Thornwall.</p>
      </div>
    </div>
  </div>
</article>

Lord Ashford

Role: supporting
Status: dead

Legacy

Once the warden of the Eastern March, Lord Ashford fell during the Siege of Thornwall.

<article data-field="content-section" typeof="Person" class="rf-character rf-character--supporting rf-character--dead" data-role="supporting" data-status="dead" data-aliases="" data-tags="" data-rune="character" data-density="full">
  <div data-name="content" class="rf-character__content">
    <header data-name="preamble" class="rf-character__preamble" data-section="preamble">
      <span data-name="name" property="name" class="rf-character__name" data-section="title">Lord Ashford</span>
    </header>
    <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-character__metadata">
      <div data-name="row" data-field="role" class="rf-character__row">
        <dt data-meta-label="">Role</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">supporting</span>
        </dd>
      </div>
      <div data-name="row" data-field="status" class="rf-character__row">
        <dt data-meta-label="">Status</dt>
        <dd>
          <span class="rf-badge" data-meta-type="status" data-meta-sentiment="negative">dead</span>
        </dd>
      </div>
    </dl>
    <div data-name="sections" class="rf-character__sections">
      <div data-field="section" class="rf-character-section" data-rune="character-section" data-density="full">
        <span data-name="name" class="rf-character-section__name">Legacy</span>
        <div data-name="body" class="rf-character-section__body">
          <p>Once the warden of the Eastern March, Lord Ashford fell during the Siege of Thornwall.</p>
        </div>
      </div>
    </div>
  </div>
  <meta content="supporting" property="jobTitle" />
</article>

Attributes

Attribute	Type	Default	Description
`name`	`string`	—	Character name (required)
`role`	`string`	`supporting`	Character role: `protagonist`, `antagonist`, `supporting`, or `minor`
`status`	`string`	`alive`	Character status: `alive`, `dead`, `unknown`, or `missing`
`aliases`	`string`	—	Comma-separated list of aliases or nicknames
`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

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan