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.

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" layout="split" %}
![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">
  <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>
  <meta content="knightly order" data-field="faction-type">
  <meta content="lawful" data-field="alignment">
  <meta content="large" data-field="size">
  <meta content="" data-field="tags">
  <meta content="split" data-field="layout">
  <meta content="1 1" data-field="ratio">
  <meta content="top" data-field="valign">
  <div data-name="content">
    <p>A prestigious order of knights sworn to protect the realm.</p>
    <div>
      <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>
  </div>
</article>

Type:knightly orderAlignment:lawfulSize:large

The Silver Order

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 rf-faction--split" data-faction-type="knightly order" data-alignment="lawful" data-size="large" data-layout="split" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="faction" 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-faction__badge" data-section="header">
    <span data-name="type-badge" data-meta-type="category" data-meta-rank="primary" class="rf-faction__type-badge">
      <span data-meta-label="">Type:</span>
      <span data-meta-value="">knightly order</span>
    </span>
    <span data-name="alignment-badge" data-meta-type="category" data-meta-rank="primary" data-meta-sentiment="neutral" class="rf-faction__alignment-badge">
      <span data-meta-label="">Alignment:</span>
      <span data-meta-value="">lawful</span>
    </span>
    <span data-name="size-badge" data-meta-type="quantity" data-meta-rank="secondary" class="rf-faction__size-badge">
      <span data-meta-label="">Size:</span>
      <span data-meta-value="">large</span>
    </span>
  </div>
  <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>
  <span data-name="name" property="name" class="rf-faction__name" data-section="title">The Silver Order</span>
  <div data-name="content" class="rf-faction__content">
    <p>A prestigious order of knights sworn to protect the realm.</p>
    <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">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">
  <span data-name="name" property="name">The Whispering Hand</span>
  <meta content="thieves guild" data-field="faction-type">
  <meta content="chaotic" data-field="alignment">
  <meta content="medium" data-field="size">
  <meta content="" data-field="tags">
  <meta content="stacked" data-field="layout">
  <div data-name="content">
    <p>An underground network of spies and thieves operating across the port cities.</p>
    <div>
      <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>
  </div>
</article>

Type:thieves guildAlignment:chaoticSize:medium

The Whispering Hand

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 rf-faction--stacked" data-faction-type="thieves guild" data-alignment="chaotic" data-size="medium" data-layout="stacked" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="faction" 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-faction__badge" data-section="header">
    <span data-name="type-badge" data-meta-type="category" data-meta-rank="primary" class="rf-faction__type-badge">
      <span data-meta-label="">Type:</span>
      <span data-meta-value="">thieves guild</span>
    </span>
    <span data-name="alignment-badge" data-meta-type="category" data-meta-rank="primary" data-meta-sentiment="caution" class="rf-faction__alignment-badge">
      <span data-meta-label="">Alignment:</span>
      <span data-meta-value="">chaotic</span>
    </span>
    <span data-name="size-badge" data-meta-type="quantity" data-meta-rank="secondary" class="rf-faction__size-badge">
      <span data-meta-label="">Size:</span>
      <span data-meta-value="">medium</span>
    </span>
  </div>
  <span data-name="name" property="name" class="rf-faction__name" data-section="title">The Whispering Hand</span>
  <div data-name="content" class="rf-faction__content">
    <p>An underground network of spies and thieves operating across the port cities.</p>
    <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">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

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

Faction

Basic usage

Different faction types

Attributes

Common attributes