refrakt.md

Docs Runes Plan Blog Changelog

note

This rune is part of @refrakt-md/business. Install with npm install @refrakt-md/business and add "@refrakt-md/business" to the packages 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">
  <meta content="vertical" data-field="direction">
  <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>
  1. Founded

    The company was founded with a mission to simplify content authoring for developer teams.

  2. Public launch

    Released v1.0 with support for 15 semantic runes and two themes. Open-sourced the core framework.

  3. 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-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">
  <meta content="vertical" data-field="direction">
  <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>
  1. Alpha release

    Initial release to early testers.

  2. Beta release

    Public beta with full documentation.

<section data-field="content-section" typeof="ItemList" class="rf-timeline rf-timeline--vertical" data-direction="vertical" 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

AttributeTypeDefaultDescription
directionstringverticalTimeline orientation

Entry attributes

AttributeTypeDefaultDescription
datestring—Date or time period
labelstring—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.

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