note
This rune is part of @refrakt-md/business. Install with npm install @refrakt-md/business and add "@refrakt-md/business" to the plugins array in your refrakt.config.json.
Timeline
Chronological events. Headings with a date - label pattern are automatically converted into timeline entries.
Heading-based timeline
Headings are parsed into date and label parts, with content below becoming the description.
{% timeline %}
## 2023 - Founded
The company was founded with a mission to simplify content authoring for developer teams.
## 2024 - Public launch
Released v1.0 with support for 15 semantic runes and two themes. Open-sourced the core framework.
## 2025 - Community growth
Reached 10,000 users and launched the plugin marketplace for custom runes.
{% /timeline %}<section data-field="content-section" data-rune="timeline" typeof="ItemList" data-rune-fields="{"direction":"vertical"}">
<ol data-name="entries">
<li data-field="entry" data-rune="timeline-entry" typeof="ListItem" property="itemListElement">
<time data-name="date" property="description">2023</time>
<span data-name="label" property="name">Founded</span>
<div data-name="body">
<p>The company was founded with a mission to simplify content authoring for developer teams.</p>
</div>
<meta property="position" content="1">
</li>
<li data-field="entry" data-rune="timeline-entry" typeof="ListItem" property="itemListElement">
<time data-name="date" property="description">2024</time>
<span data-name="label" property="name">Public launch</span>
<div data-name="body">
<p>Released v1.0 with support for 15 semantic runes and two themes. Open-sourced the core framework.</p>
</div>
<meta property="position" content="2">
</li>
<li data-field="entry" data-rune="timeline-entry" typeof="ListItem" property="itemListElement">
<time data-name="date" property="description">2025</time>
<span data-name="label" property="name">Community growth</span>
<div data-name="body">
<p>Reached 10,000 users and launched the plugin marketplace for custom runes.</p>
</div>
<meta property="position" content="3">
</li>
</ol>
</section>- Founded
The company was founded with a mission to simplify content authoring for developer teams.
- Public launch
Released v1.0 with support for 15 semantic runes and two themes. Open-sourced the core framework.
- Community growth
Reached 10,000 users and launched the plugin marketplace for custom runes.
<section data-field="content-section" typeof="ItemList" class="rf-timeline rf-timeline--vertical" data-direction="vertical" data-elevation="flat" data-rune="timeline" data-density="full">
<ol data-name="entries" class="rf-timeline__entries" data-sequence="connected" data-sequence-direction="vertical">
<li data-field="entry" typeof="ListItem" class="rf-timeline-entry" property="itemListElement" data-rune="timeline-entry" data-density="full">
<time data-name="date" property="description" class="rf-timeline-entry__date">2023</time>
<span data-name="label" property="name" class="rf-timeline-entry__label">Founded</span>
<div data-name="body" class="rf-timeline-entry__body">
<p>The company was founded with a mission to simplify content authoring for developer teams.</p>
</div>
<meta property="position" content="1" />
</li>
<li data-field="entry" typeof="ListItem" class="rf-timeline-entry" property="itemListElement" data-rune="timeline-entry" data-density="full">
<time data-name="date" property="description" class="rf-timeline-entry__date">2024</time>
<span data-name="label" property="name" class="rf-timeline-entry__label">Public launch</span>
<div data-name="body" class="rf-timeline-entry__body">
<p>Released v1.0 with support for 15 semantic runes and two themes. Open-sourced the core framework.</p>
</div>
<meta property="position" content="2" />
</li>
<li data-field="entry" typeof="ListItem" class="rf-timeline-entry" property="itemListElement" data-rune="timeline-entry" data-density="full">
<time data-name="date" property="description" class="rf-timeline-entry__date">2025</time>
<span data-name="label" property="name" class="rf-timeline-entry__label">Community growth</span>
<div data-name="body" class="rf-timeline-entry__body">
<p>Reached 10,000 users and launched the plugin marketplace for custom runes.</p>
</div>
<meta property="position" content="3" />
</li>
</ol>
</section>Explicit entries
Use {% timeline-entry %} tags for more control over date and label values.
{% timeline %}
{% timeline-entry date="Q1 2024" label="Alpha release" %}
Initial release to early testers.
{% /timeline-entry %}
{% timeline-entry date="Q3 2024" label="Beta release" %}
Public beta with full documentation.
{% /timeline-entry %}
{% /timeline %}<section data-field="content-section" data-rune="timeline" typeof="ItemList" data-rune-fields="{"direction":"vertical"}">
<ol data-name="entries">
<li data-field="entry" data-rune="timeline-entry" typeof="ListItem" property="itemListElement">
<time data-name="date" property="description">Q1 2024</time>
<span data-name="label" property="name">Alpha release</span>
<div data-name="body">
<p>Initial release to early testers.</p>
</div>
<meta property="position" content="1">
</li>
<li data-field="entry" data-rune="timeline-entry" typeof="ListItem" property="itemListElement">
<time data-name="date" property="description">Q3 2024</time>
<span data-name="label" property="name">Beta release</span>
<div data-name="body">
<p>Public beta with full documentation.</p>
</div>
<meta property="position" content="2">
</li>
</ol>
</section>- Alpha release
Initial release to early testers.
- Beta release
Public beta with full documentation.
<section data-field="content-section" typeof="ItemList" class="rf-timeline rf-timeline--vertical" data-direction="vertical" data-elevation="flat" data-rune="timeline" data-density="full">
<ol data-name="entries" class="rf-timeline__entries" data-sequence="connected" data-sequence-direction="vertical">
<li data-field="entry" typeof="ListItem" class="rf-timeline-entry" property="itemListElement" data-rune="timeline-entry" data-density="full">
<time data-name="date" property="description" class="rf-timeline-entry__date">Q1 2024</time>
<span data-name="label" property="name" class="rf-timeline-entry__label">Alpha release</span>
<div data-name="body" class="rf-timeline-entry__body">
<p>Initial release to early testers.</p>
</div>
<meta property="position" content="1" />
</li>
<li data-field="entry" typeof="ListItem" class="rf-timeline-entry" property="itemListElement" data-rune="timeline-entry" data-density="full">
<time data-name="date" property="description" class="rf-timeline-entry__date">Q3 2024</time>
<span data-name="label" property="name" class="rf-timeline-entry__label">Beta release</span>
<div data-name="body" class="rf-timeline-entry__body">
<p>Public beta with full documentation.</p>
</div>
<meta property="position" content="2" />
</li>
</ol>
</section>Attributes
timeline
| Attribute | Type | Required | Description |
|---|---|---|---|
direction | string | — | Axis along which entries are laid out (vertical or horizontal). |
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 |
timeline-entry
| Attribute | Type | Required | Description |
|---|---|---|---|
date | string | — | Date or time shown on this entry (e.g. "2024-03", "Q1 2025"). |
label | string | — | Short title or milestone name for the entry. |
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 |
Entry attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
date | string | — | Date or time period |
label | string | — | Entry label |
Section header
Timeline 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.