refrakt.md

Docs Runes Plan Blog Changelog

note

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.

Bond

Relationships and connections between characters or entities. Content within the rune describes the nature and history of the relationship.

Basic usage

Define a relationship between two entities with a type and status.

{% bond from="Aragorn" to="Legolas" type="fellowship" status="active" %}
Forged during the Council of Elrond, their bond was tested through the War of the Ring. Despite their different backgrounds, they developed a deep mutual respect.
{% /bond %}
<div data-rune="bond">
  <span data-name="from">Aragorn</span>
  <div data-name="connector">
    <span data-name="arrow"></span>
  </div>
  <span data-name="to">Legolas</span>
  <meta content="fellowship" data-field="bond-type">
  <meta content="active" data-field="status">
  <meta content="true" data-field="bidirectional">
  <div data-name="body">
    <p>Forged during the Council of Elrond, their bond was tested through the War of the Ring. Despite their different backgrounds, they developed a deep mutual respect.</p>
  </div>
</div>
Aragorn
Legolas

Forged during the Council of Elrond, their bond was tested through the War of the Ring. Despite their different backgrounds, they developed a deep mutual respect.

<div class="rf-bond rf-bond--fellowship rf-bond--active rf-bond--true" data-bond-type="fellowship" data-status="active" data-bidirectional="true" data-rune="bond" data-density="full">
  <span data-name="from" class="rf-bond__from">Aragorn</span>
  <div data-name="connector" class="rf-bond__connector">
    <span data-name="arrow" class="rf-bond__arrow"></span>
  </div>
  <span data-name="to" class="rf-bond__to">Legolas</span>
  <div data-name="body" class="rf-bond__body" data-section="body">
    <p>Forged during the Council of Elrond, their bond was tested through the War of the Ring. Despite their different backgrounds, they developed a deep mutual respect.</p>
  </div>
</div>

One-directional bonds

Set bidirectional to false for one-way relationships like mentorship or unrequited feelings.

{% bond from="Gandalf" to="Frodo" type="mentorship" status="active" bidirectional=false %}
Gandalf chose Frodo as the ring-bearer, guiding him with wisdom and trust throughout the quest.
{% /bond %}
<div data-rune="bond">
  <span data-name="from">Gandalf</span>
  <div data-name="connector">
    <span data-name="arrow"></span>
  </div>
  <span data-name="to">Frodo</span>
  <meta content="mentorship" data-field="bond-type">
  <meta content="active" data-field="status">
  <meta content="false" data-field="bidirectional">
  <div data-name="body">
    <p>Gandalf chose Frodo as the ring-bearer, guiding him with wisdom and trust throughout the quest.</p>
  </div>
</div>
Gandalf
Frodo

Gandalf chose Frodo as the ring-bearer, guiding him with wisdom and trust throughout the quest.

<div class="rf-bond rf-bond--mentorship rf-bond--active rf-bond--false" data-bond-type="mentorship" data-status="active" data-bidirectional="false" data-rune="bond" data-density="full">
  <span data-name="from" class="rf-bond__from">Gandalf</span>
  <div data-name="connector" class="rf-bond__connector">
    <span data-name="arrow" class="rf-bond__arrow"></span>
  </div>
  <span data-name="to" class="rf-bond__to">Frodo</span>
  <div data-name="body" class="rf-bond__body" data-section="body">
    <p>Gandalf chose Frodo as the ring-bearer, guiding him with wisdom and trust throughout the quest.</p>
  </div>
</div>

Attributes

AttributeTypeDefaultDescription
fromstring—Origin entity name (required)
tostring—Target entity name (required)
typestring—Relationship type (e.g. fellowship, romantic, antagonistic, familial, mentorship)
statusstringactiveRelationship status (e.g. active, broken, dormant)
bidirectionalbooleantrueWhether the bond is mutual

Common attributes

All block runes share these attributes for layout and theming.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration