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.
Lore
In-world knowledge entries for worldbuilding — myths, prophecies, historical records, legends, or encyclopedia articles. Content is rendered directly as the lore body, with optional spoiler protection.
Basic usage
Wrap any in-world knowledge in a lore entry with a title and category.
{% lore title="The Prophecy of the Chosen One" category="prophecy" spoiler=true %}
An ancient text found in the ruins of the First Temple.
> *When darkness covers the land and the last star fades,
> one shall rise from forgotten blood to forge the world anew.*
The prophecy has been interpreted differently by various factions throughout history.
{% /lore %}<article data-field="content-section" data-rune="lore" typeof="Article" data-rune-fields="{"category":"prophecy","spoiler":"true","tags":""}">
<span data-name="title" property="headline">The Prophecy of the Chosen One</span>
<meta content="prophecy" property="articleSection">
<div data-name="body">
<p>An ancient text found in the ruins of the First Temple.</p>
<blockquote>
<p>
<em marker="*">
When darkness covers the land and the last star fades,
one shall rise from forgotten blood to forge the world anew.
</em>
</p>
</blockquote>
<p>The prophecy has been interpreted differently by various factions throughout history.</p>
</div>
</article>An ancient text found in the ruins of the First Temple.
When darkness covers the land and the last star fades, one shall rise from forgotten blood to forge the world anew.
The prophecy has been interpreted differently by various factions throughout history.
<article data-field="content-section" typeof="Article" class="rf-lore rf-lore--prophecy rf-lore--true" data-category="prophecy" data-spoiler="true" data-tags="" data-elevation="flat" data-rune="lore" data-density="full">
<span data-name="title" property="headline" class="rf-lore__title" data-section="title">The Prophecy of the Chosen One</span>
<div data-name="metadata" data-zone="metadata" data-zone-layout="bar" class="rf-lore__metadata">
<span class="rf-badge" data-meta-type="category">prophecy</span>
</div>
<div data-name="body" class="rf-lore__body" data-section="body" data-reading="prose">
<p>An ancient text found in the ruins of the First Temple.</p>
<blockquote>
<p>
<em marker="*">
When darkness covers the land and the last star fades,
one shall rise from forgotten blood to forge the world anew.
</em>
</p>
</blockquote>
<p>The prophecy has been interpreted differently by various factions throughout history.</p>
</div>
<meta content="prophecy" property="articleSection" />
</article>Categories
Use the category attribute to classify different types of lore.
{% lore title="The Founding of Ironhold" category="history" %}
In the third age, a band of dwarven exiles discovered rich veins of mithril beneath the Grey Peaks. They established Ironhold, which grew into the greatest forge-city the world had ever seen.
{% /lore %}<article data-field="content-section" data-rune="lore" typeof="Article" data-rune-fields="{"category":"history","spoiler":"false","tags":""}">
<span data-name="title" property="headline">The Founding of Ironhold</span>
<meta content="history" property="articleSection">
<div data-name="body">
<p>In the third age, a band of dwarven exiles discovered rich veins of mithril beneath the Grey Peaks. They established Ironhold, which grew into the greatest forge-city the world had ever seen.</p>
</div>
</article>In the third age, a band of dwarven exiles discovered rich veins of mithril beneath the Grey Peaks. They established Ironhold, which grew into the greatest forge-city the world had ever seen.
<article data-field="content-section" typeof="Article" class="rf-lore rf-lore--history rf-lore--false" data-category="history" data-spoiler="false" data-tags="" data-elevation="flat" data-rune="lore" data-density="full">
<span data-name="title" property="headline" class="rf-lore__title" data-section="title">The Founding of Ironhold</span>
<div data-name="metadata" data-zone="metadata" data-zone-layout="bar" class="rf-lore__metadata">
<span class="rf-badge" data-meta-type="category">history</span>
</div>
<div data-name="body" class="rf-lore__body" data-section="body" data-reading="prose">
<p>In the third age, a band of dwarven exiles discovered rich veins of mithril beneath the Grey Peaks. They established Ironhold, which grew into the greatest forge-city the world had ever seen.</p>
</div>
<meta content="history" property="articleSection" />
</article>Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
title | string | ✓ | Heading displayed for this lore entry. |
category | string | — | Grouping label used to organize lore entries (e.g. history, magic, culture). |
spoiler | boolean | — | Enable/disable spoiler protection that hides content until revealed. |
Inherited from the storytelling taxonomy preset
| Attribute | Type | Required | Description |
|---|---|---|---|
tags | string | — | Comma-separated keywords for filtering and cross-referencing. |
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) |
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 |
| Not available | Why |
|---|---|
| frame | this rune declares neither a `frameTarget` nor a media section |