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.

Faction

Organizations, guilds, orders, and groups for worldbuilding. Headings within the rune become named sections for ranks, holdings, goals, and more.

Basic usage

Describe a faction with sections that break down its structure.

{% faction name="The Silver Order" type="knightly order" alignment="lawful" size="large" media-position="start" %}
![The Silver Order](https://assets.refrakt.md/faction-the-silver-order.png)

A prestigious order of knights sworn to protect the realm.

## Ranks

- Initiate
- Knight
- Commander
- Grand Master

## Holdings

Their fortress overlooks the capital city from the northern cliffs.
{% /faction %}

<article data-field="content-section" data-rune="faction" typeof="Organization" data-rune-fields="{&quot;factionType&quot;:&quot;knightly order&quot;,&quot;alignment&quot;:&quot;lawful&quot;,&quot;size&quot;:&quot;large&quot;,&quot;tags&quot;:&quot;&quot;,&quot;media-position&quot;:&quot;start&quot;}">
  <div data-name="scene">
    <img src="https://assets.refrakt.md/faction-the-silver-order.png" alt="The Silver Order" property="image">
  </div>
  <span data-name="name" property="name">The Silver Order</span>
  <div data-name="body">
    <p>A prestigious order of knights sworn to protect the realm.</p>
  </div>
  <div data-name="sections">
    <div data-field="section" data-rune="faction-section">
      <span data-name="name">Ranks</span>
      <div data-name="body">
        <ul>
          <li>Initiate</li>
          <li>Knight</li>
          <li>Commander</li>
          <li>Grand Master</li>
        </ul>
      </div>
    </div>
    <div data-field="section" data-rune="faction-section">
      <span data-name="name">Holdings</span>
      <div data-name="body">
        <p>Their fortress overlooks the capital city from the northern cliffs.</p>
      </div>
    </div>
  </div>
</article>

The Silver Order

Type: knightly order
Alignment: lawful
Size: large

A prestigious order of knights sworn to protect the realm.

Ranks

Initiate
Knight
Commander
Grand Master

Holdings

Their fortress overlooks the capital city from the northern cliffs.

<article data-field="content-section" typeof="Organization" class="rf-faction rf-faction--knightly order rf-faction--lawful rf-faction--large" data-faction-type="knightly order" data-alignment="lawful" data-size="large" data-tags="" data-media-position="start" data-rune="faction" data-density="full">
  <div data-name="scene" class="rf-faction__scene" data-section="media" data-media="cover">
    <img src="https://assets.refrakt.md/faction-the-silver-order.png" alt="The Silver Order" property="image" />
  </div>
  <div data-name="content" class="rf-faction__content">
    <header data-name="preamble" class="rf-faction__preamble" data-section="preamble">
      <span data-name="name" property="name" class="rf-faction__name" data-section="title">The Silver Order</span>
    </header>
    <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-faction__metadata">
      <div data-name="row" data-field="factionType" class="rf-faction__row">
        <dt data-meta-label="">Type</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">knightly order</span>
        </dd>
      </div>
      <div data-name="row" data-field="alignment" class="rf-faction__row">
        <dt data-meta-label="">Alignment</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category" data-meta-sentiment="neutral">lawful</span>
        </dd>
      </div>
      <div data-name="row" data-field="size" class="rf-faction__row">
        <dt data-meta-label="">Size</dt>
        <dd data-meta-type="quantity">large</dd>
      </div>
    </dl>
    <div data-name="body" class="rf-faction__body">
      <p>A prestigious order of knights sworn to protect the realm.</p>
    </div>
    <div data-name="sections" class="rf-faction__sections">
      <div data-field="section" class="rf-faction-section" data-rune="faction-section" data-density="full">
        <span data-name="name" class="rf-faction-section__name">Ranks</span>
        <div data-name="body" class="rf-faction-section__body">
          <ul>
            <li>Initiate</li>
            <li>Knight</li>
            <li>Commander</li>
            <li>Grand Master</li>
          </ul>
        </div>
      </div>
      <div data-field="section" class="rf-faction-section" data-rune="faction-section" data-density="full">
        <span data-name="name" class="rf-faction-section__name">Holdings</span>
        <div data-name="body" class="rf-faction-section__body">
          <p>Their fortress overlooks the capital city from the northern cliffs.</p>
        </div>
      </div>
    </div>
  </div>
</article>

Different faction types

Use type and alignment to classify organizations.

{% faction name="The Whispering Hand" type="thieves guild" alignment="chaotic" size="medium" %}
An underground network of spies and thieves operating across the port cities.

## Operations

- Smuggling
- Information brokering
- Blackmail
{% /faction %}

<article data-field="content-section" data-rune="faction" typeof="Organization" data-rune-fields="{&quot;factionType&quot;:&quot;thieves guild&quot;,&quot;alignment&quot;:&quot;chaotic&quot;,&quot;size&quot;:&quot;medium&quot;,&quot;tags&quot;:&quot;&quot;,&quot;media-position&quot;:&quot;top&quot;}">
  <span data-name="name" property="name">The Whispering Hand</span>
  <div data-name="body">
    <p>An underground network of spies and thieves operating across the port cities.</p>
  </div>
  <div data-name="sections">
    <div data-field="section" data-rune="faction-section">
      <span data-name="name">Operations</span>
      <div data-name="body">
        <ul>
          <li>Smuggling</li>
          <li>Information brokering</li>
          <li>Blackmail</li>
        </ul>
      </div>
    </div>
  </div>
</article>

The Whispering Hand

Type: thieves guild
Alignment: chaotic
Size: medium

An underground network of spies and thieves operating across the port cities.

Operations

Smuggling
Information brokering
Blackmail

<article data-field="content-section" typeof="Organization" class="rf-faction rf-faction--thieves guild rf-faction--chaotic rf-faction--medium" data-faction-type="thieves guild" data-alignment="chaotic" data-size="medium" data-tags="" data-media-position="top" data-rune="faction" data-density="full">
  <div data-name="content" class="rf-faction__content">
    <header data-name="preamble" class="rf-faction__preamble" data-section="preamble">
      <span data-name="name" property="name" class="rf-faction__name" data-section="title">The Whispering Hand</span>
    </header>
    <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-faction__metadata">
      <div data-name="row" data-field="factionType" class="rf-faction__row">
        <dt data-meta-label="">Type</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category">thieves guild</span>
        </dd>
      </div>
      <div data-name="row" data-field="alignment" class="rf-faction__row">
        <dt data-meta-label="">Alignment</dt>
        <dd>
          <span class="rf-badge" data-meta-type="category" data-meta-sentiment="caution">chaotic</span>
        </dd>
      </div>
      <div data-name="row" data-field="size" class="rf-faction__row">
        <dt data-meta-label="">Size</dt>
        <dd data-meta-type="quantity">medium</dd>
      </div>
    </dl>
    <div data-name="body" class="rf-faction__body">
      <p>An underground network of spies and thieves operating across the port cities.</p>
    </div>
    <div data-name="sections" class="rf-faction__sections">
      <div data-field="section" class="rf-faction-section" data-rune="faction-section" data-density="full">
        <span data-name="name" class="rf-faction-section__name">Operations</span>
        <div data-name="body" class="rf-faction-section__body">
          <ul>
            <li>Smuggling</li>
            <li>Information brokering</li>
            <li>Blackmail</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</article>

Attributes

Attribute	Type	Default	Description
`name`	`string`	—	Faction name (required)
`type`	`string`	—	Faction type (e.g. `guild`, `cult`, `government`, `knightly order`)
`alignment`	`string`	—	Alignment descriptor (e.g. `lawful`, `chaotic`, `neutral`)
`size`	`string`	—	Size or scope descriptor (e.g. `small`, `medium`, `large`)
`tags`	`string`	—	Comma-separated metadata tags

Layout attributes

A faction'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.

Attribute	Type	Default	Description
`media-position`	`string`	`top`	Where the scene sits: `top`, `bottom`, `start` (left), `end` (right)
`media-ratio`	`string`	—	Scene's share of the row when beside content (`start`/`end`): `1/3`, `2/5`, `1/2`, `3/5`, `2/3`
`valign`	`string`	—	Cross-axis alignment when scene is beside content: `top`, `center`, `bottom`, `stretch`
`collapse`	`string`	—	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.

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