StorytellingFaction
note

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
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" data-faction-type="knightly order" data-alignment="lawful" data-size="large" data-tags="" data-media-position="start" data-elevation="flat" data-rune="faction" data-density="full">
  <div data-name="scene" class="rf-faction__scene" data-section="media" data-media="cover" data-guest-fit="clip">
    <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" data-section="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" data-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" data-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

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-elevation="flat" 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" data-section="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" data-section="body">
          <ul>
            <li>Smuggling</li>
            <li>Information brokering</li>
            <li>Blackmail</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</article>

Attributes

faction

AttributeTypeRequiredDescription
namestringDisplay name shown in the faction header.
typestringClassification of the group (e.g. guild, kingdom, cult, order).
alignmentstringMoral or political stance of the faction (e.g. lawful, chaotic, neutral).
sizestringApproximate scale of the faction (e.g. small, medium, large, massive).
tagsstringComma-separated keywords for filtering and cross-referencing.

Inherited from the split layout preset

AttributeTypeRequiredDescription
media-position"top" | "bottom" | "start" | "end" | "cover"Where the media zone sits relative to the content: above (top), below (bottom), or beside (start/end)
media-ratio"1/3" | "2/5" | "1/2" | "3/5" | "2/3"Media zone’s share of the row width when media is beside content (start/end)
valign"top" | "center" | "bottom" | "stretch"Cross-axis alignment when media is beside content (start/end); applies to the shorter zone
collapse"sm" | "md" | "lg" | "never"Breakpoint at which side-by-side layouts collapse to a single stacked column

Universal attributes

bg

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

AttributeTypeRequiredDescription
bgstringBackground preset applied to this block
bg-fromstringGradient start colour — a semantic token name (→ var(--rf-color-*))
bg-gradient"to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl"Gradient direction (bounded named set)
bg-gradient-type"linear" | "radial" | "conic"Gradient type
bg-tostringGradient end colour — a semantic token name
bg-viastringOptional middle gradient stop — a semantic token name
scrim"top" | "bottom" | "left" | "right" | "none"Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
scrim-blur"none" | "sm" | "md" | "lg"Frost scrim blur amount
scrim-strength"sm" | "md" | "lg"Gradient scrim strength
scrim-tone"dark" | "light"Whether the scrim darkens (for light text) or lightens (for dark text)
scrim-type"gradient" | "frost"Scrim treatment: gradient (default) or frost (backdrop blur)
dropcap

Per-instance drop-cap opt-in (SPEC-108).

AttributeTypeRequiredDescription
dropcapbooleanStyle the opening letter of a prose body as a drop cap (SPEC-108). Honoured only when the body reads as prose; ignored otherwise.
elevation

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

AttributeTypeRequiredDescription
elevation"sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg"Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases
frame

Surface chrome (SPEC-086): a named preset from the theme registry with inline `frame-*` overrides layered on top.

AttributeTypeRequiredDescription
framestringNamed frame preset presenting this block's media surface
frame-anchorstringCrop focal point when the guest is cut (object-position)
frame-aspectstringAspect ratio of the framed media, e.g. "16/9"
frame-displace"top" | "bottom" | "end" | "bottom-end" | "top-end"Edge/corner the framed guest moves toward
frame-displace-mode"peek" | "bleed"How displacement renders: `peek` (default) translates the guest visually inside its frame target; `bleed` uses negative margin on the media zone so following layout pulls up — extends past a section like a hero without leaving a gap above
frame-offset"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"Displacement distance (non-linear named scale: sm…xl ride the block-spacing tokens, 2xl/3xl/4xl step up to section-spacing for bleed-mode displacements that clear a section edge)
frame-overflow"clip" | "bleed"How the frame handles a guest whose content is wider than it: `clip` (default) keeps it inside the rounded frame; `bleed` runs an overflowing guest out to the layout edge on a narrow viewport so it reads as cropped by the screen (a bleed host only — hero/feature)
frame-oversizestringHow far the guest exceeds its slot (scale factor)
frame-placestringGuest-box alignment in the slot (e.g. "left top")
frame-shadow"none" | "sm" | "md" | "lg"Silhouette drop-shadow strength for the framed media
inset

Internal padding override.

AttributeTypeRequiredDescription
inset"flush" | "tight" | "default" | "loose" | "breathe"Inner padding of this block
motion

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerbooleanCascade this block's items in as it reveals (no-op on single-child runes)
prominence

Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.

AttributeTypeRequiredDescription
prominence"quiet" | "normal" | "prominent" | "display"Section-header emphasis (only on page-section-header family runes)
reading

Editorial register for body text (SPEC-108). The author picks the register; the theme owns the magnitude.

AttributeTypeRequiredDescription
reading"fine" | "ui" | "prose"Reading register for this block’s body (SPEC-108): fine | ui | prose. The theme owns the editorial treatment.
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
spacing"flush" | "tight" | "default" | "loose" | "breathe"Vertical spacing above and below this block
substrate

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

AttributeTypeRequiredDescription
substrate"dots" | "grid" | "lines" | "cross" | "checker" | "none"Generated surface pattern
substrate-fill"inherit" | "inset"Surface fill the pattern sits on (full colour stays with tint)
substrate-opacity"sm" | "md" | "lg"Pattern ink strength
substrate-size"sm" | "md" | "lg"Pattern cell size
substrate-target"self" | "media"Which surface the pattern fills (overrides the rune/theme default)
tint

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

AttributeTypeRequiredDescription
tintstringColor tint preset applied to this block
tint-mode"auto" | "dark" | "light"Whether the tint adapts to auto, dark, or light mode
width

The track a block rune occupies.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"Maximum width constraint for this block

faction-section

AttributeTypeRequiredDescription
namestring

Universal attributes

bg

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

AttributeTypeRequiredDescription
bgstringBackground preset applied to this block
bg-fromstringGradient start colour — a semantic token name (→ var(--rf-color-*))
bg-gradient"to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl"Gradient direction (bounded named set)
bg-gradient-type"linear" | "radial" | "conic"Gradient type
bg-tostringGradient end colour — a semantic token name
bg-viastringOptional middle gradient stop — a semantic token name
scrim"top" | "bottom" | "left" | "right" | "none"Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
scrim-blur"none" | "sm" | "md" | "lg"Frost scrim blur amount
scrim-strength"sm" | "md" | "lg"Gradient scrim strength
scrim-tone"dark" | "light"Whether the scrim darkens (for light text) or lightens (for dark text)
scrim-type"gradient" | "frost"Scrim treatment: gradient (default) or frost (backdrop blur)
dropcap

Per-instance drop-cap opt-in (SPEC-108).

AttributeTypeRequiredDescription
dropcapbooleanStyle the opening letter of a prose body as a drop cap (SPEC-108). Honoured only when the body reads as prose; ignored otherwise.
elevation

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

AttributeTypeRequiredDescription
elevation"sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg"Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases
inset

Internal padding override.

AttributeTypeRequiredDescription
inset"flush" | "tight" | "default" | "loose" | "breathe"Inner padding of this block
motion

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

AttributeTypeRequiredDescription
reveal"none" | "fade" | "slide" | "scale" | "blur"Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography
staggerbooleanCascade this block's items in as it reveals (no-op on single-child runes)
reading

Editorial register for body text (SPEC-108). The author picks the register; the theme owns the magnitude.

AttributeTypeRequiredDescription
reading"fine" | "ui" | "prose"Reading register for this block’s body (SPEC-108): fine | ui | prose. The theme owns the editorial treatment.
spacing

Block-level rhythm override.

AttributeTypeRequiredDescription
spacing"flush" | "tight" | "default" | "loose" | "breathe"Vertical spacing above and below this block
substrate

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

AttributeTypeRequiredDescription
substrate"dots" | "grid" | "lines" | "cross" | "checker" | "none"Generated surface pattern
substrate-fill"inherit" | "inset"Surface fill the pattern sits on (full colour stays with tint)
substrate-opacity"sm" | "md" | "lg"Pattern ink strength
substrate-size"sm" | "md" | "lg"Pattern cell size
substrate-target"self" | "media"Which surface the pattern fills (overrides the rune/theme default)
tint

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

AttributeTypeRequiredDescription
tintstringColor tint preset applied to this block
tint-mode"auto" | "dark" | "light"Whether the tint adapts to auto, dark, or light mode
width

The track a block rune occupies.

AttributeTypeRequiredDescription
width"compact" | "narrow" | "content" | "wide" | "full"Maximum width constraint for this block
Not availableWhy
framethis rune declares neither a `frameTarget` nor a media section
prominencethis rune has no page-section header

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.

AttributeTypeDefaultDescription
media-positionstringtopWhere the scene sits: top, bottom, start (left), end (right)
media-ratiostringScene's share of the row when beside content (start/end): 1/3, 2/5, 1/2, 3/5, 2/3
valignstringCross-axis alignment when scene is beside content: top, center, bottom, stretch
collapsestringBreakpoint at which beside layouts collapse to a stack: sm, md, lg, never