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" %}

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="{"factionType":"knightly order","alignment":"lawful","size":"large","tags":"","media-position":"start"}">
<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>
A prestigious order of knights sworn to protect the realm.
- Initiate
- Knight
- Commander
- Grand Master
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="{"factionType":"thieves guild","alignment":"chaotic","size":"medium","tags":"","media-position":"top"}">
<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>An underground network of spies and thieves operating across the port cities.
- 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
| Attribute | Type | Required | Description |
|---|---|---|---|
name | string | ✓ | Display name shown in the faction header. |
type | string | — | Classification of the group (e.g. guild, kingdom, cult, order). |
alignment | string | — | Moral or political stance of the faction (e.g. lawful, chaotic, neutral). |
size | string | — | Approximate scale of the faction (e.g. small, medium, large, massive). |
tags | string | — | Comma-separated keywords for filtering and cross-referencing. |
Inherited from the split layout preset
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient 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-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional 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).
| Attribute | Type | Required | Description |
|---|---|---|---|
dropcap | boolean | — | Style 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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
frame | string | — | Named frame preset presenting this block's media surface |
frame-anchor | string | — | Crop focal point when the guest is cut (object-position) |
frame-aspect | string | — | Aspect 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-oversize | string | — | How far the guest exceeds its slot (scale factor) |
frame-place | string | — | Guest-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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade 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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color 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.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
faction-section
| Attribute | Type | Required | Description |
|---|---|---|---|
name | string | ✓ |
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient 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-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional 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).
| Attribute | Type | Required | Description |
|---|---|---|---|
dropcap | boolean | — | Style 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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade 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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
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.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color 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.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| frame | this rune declares neither a `frameTarget` nor a media section |
| prominence | this 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.
| 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 |