note
This rune is part of @refrakt-md/docs. Install with npm install @refrakt-md/docs and add "@refrakt-md/docs" to the plugins array in your refrakt.config.json.
Changelog
Version history and release notes. Headings with a v1.0.0 - date pattern are automatically converted into release entries.
Heading-based changelog
Headings are parsed into version and date parts, with list items below becoming the release notes.
{% changelog %}
## v1.2.0 - January 2025
- Added timeline and changelog runes
- Added breadcrumb navigation rune
- Fixed grid column spanning on mobile
## v1.1.0 - December 2024
- Added testimonial and compare runes
- Improved pricing tier card styling
- Fixed tab panel content not rendering
{% /changelog %}<section data-rune="changelog" data-rune-fields="{"project":""}">
<div data-name="releases">
<section data-rune="changelog-release" data-field="release">
<h3 data-name="version">1.2.0</h3>
<time data-field="date">January 2025</time>
<div data-name="body">
<ul>
<li>Added timeline and changelog runes</li>
<li>Added breadcrumb navigation rune</li>
<li>Fixed grid column spanning on mobile</li>
</ul>
</div>
</section>
<section data-rune="changelog-release" data-field="release">
<h3 data-name="version">1.1.0</h3>
<time data-field="date">December 2024</time>
<div data-name="body">
<ul>
<li>Added testimonial and compare runes</li>
<li>Improved pricing tier card styling</li>
<li>Fixed tab panel content not rendering</li>
</ul>
</div>
</section>
</div>
</section>1.2.0
- Added timeline and changelog runes
- Added breadcrumb navigation rune
- Fixed grid column spanning on mobile
1.1.0
- Added testimonial and compare runes
- Improved pricing tier card styling
- Fixed tab panel content not rendering
<section class="rf-changelog" data-elevation="flush" data-rune="changelog" data-density="full">
<div data-name="releases" class="rf-changelog__releases">
<section class="rf-changelog-release" data-field="release" data-rune="changelog-release" data-density="full">
<h3 data-name="version" class="rf-changelog-release__version">1.2.0</h3>
<time data-field="date">January 2025</time>
<div data-name="body" class="rf-changelog-release__body">
<ul>
<li>Added timeline and changelog runes</li>
<li>Added breadcrumb navigation rune</li>
<li>Fixed grid column spanning on mobile</li>
</ul>
</div>
</section>
<section class="rf-changelog-release" data-field="release" data-rune="changelog-release" data-density="full">
<h3 data-name="version" class="rf-changelog-release__version">1.1.0</h3>
<time data-field="date">December 2024</time>
<div data-name="body" class="rf-changelog-release__body">
<ul>
<li>Added testimonial and compare runes</li>
<li>Improved pricing tier card styling</li>
<li>Fixed tab panel content not rendering</li>
</ul>
</div>
</section>
</div>
</section>Release titles
Give a release a title by putting it after the version, separated by a middle dot (·). The date still follows a dash. The title renders inside the release heading, after the version.
{% changelog %}
## v1.3.0 · Faster builds - March 2025
Builds reuse their cache, and the CLI reports what it skipped.
## v1.2.0 - January 2025
- Added timeline and changelog runes
{% /changelog %}<section data-rune="changelog" data-rune-fields="{"project":""}">
<div data-name="releases">
<section data-rune="changelog-release" data-field="release">
<h3 data-name="version">
1.3.0
<span data-name="title">Faster builds</span>
</h3>
<time data-field="date">March 2025</time>
<div data-name="body">
<p>Builds reuse their cache, and the CLI reports what it skipped.</p>
</div>
</section>
<section data-rune="changelog-release" data-field="release">
<h3 data-name="version">1.2.0</h3>
<time data-field="date">January 2025</time>
<div data-name="body">
<ul>
<li>Added timeline and changelog runes</li>
</ul>
</div>
</section>
</div>
</section>1.3.0 Faster builds
Builds reuse their cache, and the CLI reports what it skipped.
1.2.0
- Added timeline and changelog runes
<section class="rf-changelog" data-elevation="flush" data-rune="changelog" data-density="full">
<div data-name="releases" class="rf-changelog__releases">
<section class="rf-changelog-release" data-field="release" data-rune="changelog-release" data-density="full">
<h3 data-name="version" class="rf-changelog-release__version">
1.3.0
<span data-name="title" class="rf-changelog-release__title">Faster builds</span>
</h3>
<time data-field="date">March 2025</time>
<div data-name="body" class="rf-changelog-release__body">
<p>Builds reuse their cache, and the CLI reports what it skipped.</p>
</div>
</section>
<section class="rf-changelog-release" data-field="release" data-rune="changelog-release" data-density="full">
<h3 data-name="version" class="rf-changelog-release__version">1.2.0</h3>
<time data-field="date">January 2025</time>
<div data-name="body" class="rf-changelog-release__body">
<ul>
<li>Added timeline and changelog runes</li>
</ul>
</div>
</section>
</div>
</section>After a title, the dash before the date needs a space on each side, so a title can contain a hyphen (render-stack) but not -. Both the title and the date are optional.
Explicit releases
Use {% changelog-release %} tags for more control over version and date values.
{% changelog %}
{% changelog-release version="2.0.0" date="March 2025" %}
- Complete rewrite of the rendering engine
- New plugin API for custom runes
{% /changelog-release %}
{% changelog-release version="1.0.0" date="January 2025" %}
- Initial stable release
{% /changelog-release %}
{% /changelog %}<section data-rune="changelog" data-rune-fields="{"project":""}">
<div data-name="releases">
<section data-rune="changelog-release" data-field="release">
<h3 data-name="version">2.0.0</h3>
<time data-field="date">March 2025</time>
<div data-name="body">
<ul>
<li>Complete rewrite of the rendering engine</li>
<li>New plugin API for custom runes</li>
</ul>
</div>
</section>
<section data-rune="changelog-release" data-field="release">
<h3 data-name="version">1.0.0</h3>
<time data-field="date">January 2025</time>
<div data-name="body">
<ul>
<li>Initial stable release</li>
</ul>
</div>
</section>
</div>
</section>2.0.0
- Complete rewrite of the rendering engine
- New plugin API for custom runes
1.0.0
- Initial stable release
<section class="rf-changelog" data-elevation="flush" data-rune="changelog" data-density="full">
<div data-name="releases" class="rf-changelog__releases">
<section class="rf-changelog-release" data-field="release" data-rune="changelog-release" data-density="full">
<h3 data-name="version" class="rf-changelog-release__version">2.0.0</h3>
<time data-field="date">March 2025</time>
<div data-name="body" class="rf-changelog-release__body">
<ul>
<li>Complete rewrite of the rendering engine</li>
<li>New plugin API for custom runes</li>
</ul>
</div>
</section>
<section class="rf-changelog-release" data-field="release" data-rune="changelog-release" data-density="full">
<h3 data-name="version" class="rf-changelog-release__version">1.0.0</h3>
<time data-field="date">January 2025</time>
<div data-name="body" class="rf-changelog-release__body">
<ul>
<li>Initial stable release</li>
</ul>
</div>
</section>
</div>
</section>Attributes
changelog
| Attribute | Type | Required | Description |
|---|---|---|---|
project | string | — | Project name displayed in the changelog header. |
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) |
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) |
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 |
|---|---|
| dropcap, reading | this rune declares no prose body |
| frame | this rune declares neither a `frameTarget` nor a media section |
changelog-release
| Attribute | Type | Required | Description |
|---|---|---|---|
version | string | — | |
title | string | — | |
date | 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) |
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) |
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 |
|---|---|
| dropcap, reading | this rune declares no prose body |
| frame | this rune declares neither a `frameTarget` nor a media section |
| prominence | this rune has no page-section header |
Release attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
version | string | — | Version number |
title | string | — | Release title, shown after the version |
date | string | — | Release date |
Section header
Changelog supports an optional eyebrow, headline, and blurb above the section above entries. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.