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.

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">
  <span data-name="name" property="name">Veshra</span>
  <meta content="antagonist" data-field="role" property="jobTitle">
  <meta content="alive" data-field="status">
  <meta content="The Bone Witch" data-field="aliases">
  <meta content="magic-user" data-field="tags">
  <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>

Role:antagonistStatus:alive

Veshra

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="badge" class="rf-character__badge" data-section="header">
    <span data-name="role-badge" data-meta-type="category" data-meta-rank="primary" class="rf-character__role-badge">
      <span data-meta-label="">Role:</span>
      <span data-meta-value="">antagonist</span>
    </span>
    <span data-name="status-badge" data-meta-type="status" data-meta-rank="primary" data-meta-sentiment="positive" class="rf-character__status-badge">
      <span data-meta-label="">Status:</span>
      <span data-meta-value="">alive</span>
    </span>
  </div>
  <div data-name="content" class="rf-character__content" data-section="body">
    <span data-name="name" property="name" class="rf-character__name" data-section="title">Veshra</span>
    <meta content="antagonist" data-field="role" property="jobTitle" />
    <meta content="alive" data-field="status" />
    <meta content="The Bone Witch" data-field="aliases" />
    <meta content="magic-user" data-field="tags" />
    <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>
</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">
  <span data-name="name" property="name">Elena</span>
  <meta content="protagonist" data-field="role" property="jobTitle">
  <meta content="alive" data-field="status">
  <meta content="" data-field="aliases">
  <meta content="" data-field="tags">
  <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>

Role:protagonistStatus:alive

Elena

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-rune="character" data-density="full">
  <div data-name="badge" class="rf-character__badge" data-section="header">
    <span data-name="role-badge" data-meta-type="category" data-meta-rank="primary" class="rf-character__role-badge">
      <span data-meta-label="">Role:</span>
      <span data-meta-value="">protagonist</span>
    </span>
    <span data-name="status-badge" data-meta-type="status" data-meta-rank="primary" data-meta-sentiment="positive" class="rf-character__status-badge">
      <span data-meta-label="">Status:</span>
      <span data-meta-value="">alive</span>
    </span>
  </div>
  <div data-name="content" class="rf-character__content" data-section="body">
    <span data-name="name" property="name" class="rf-character__name" data-section="title">Elena</span>
    <meta content="protagonist" data-field="role" property="jobTitle" />
    <meta content="alive" data-field="status" />
    <meta content="" data-field="aliases" />
    <meta content="" data-field="tags" />
    <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>
</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">
  <span data-name="name" property="name">Lord Ashford</span>
  <meta content="supporting" data-field="role" property="jobTitle">
  <meta content="dead" data-field="status">
  <meta content="" data-field="aliases">
  <meta content="" data-field="tags">
  <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>

Role:supportingStatus:dead

Lord Ashford

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-rune="character" data-density="full">
  <div data-name="badge" class="rf-character__badge" data-section="header">
    <span data-name="role-badge" data-meta-type="category" data-meta-rank="primary" class="rf-character__role-badge">
      <span data-meta-label="">Role:</span>
      <span data-meta-value="">supporting</span>
    </span>
    <span data-name="status-badge" data-meta-type="status" data-meta-rank="primary" data-meta-sentiment="negative" class="rf-character__status-badge">
      <span data-meta-label="">Status:</span>
      <span data-meta-value="">dead</span>
    </span>
  </div>
  <div data-name="content" class="rf-character__content" data-section="body">
    <span data-name="name" property="name" class="rf-character__name" data-section="title">Lord Ashford</span>
    <meta content="supporting" data-field="role" property="jobTitle" />
    <meta content="dead" data-field="status" />
    <meta content="" data-field="aliases" />
    <meta content="" data-field="tags" />
    <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>
</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

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan