refrakt.md

Docs Runes Plan Blog Changelog

Page sections

Many runes support an optional section header — a short combination of eyebrow, headline, blurb, and image that introduces the content block. No extra tags are needed; the rune reads these from the Markdown you write at the top of the block.

The slots

SlotWhat it is
EyebrowA small label displayed above the headline — a short phrase, category tag, or badge link
HeadlineThe main heading for the section
BlurbA supporting paragraph that follows the headline
ImageAn image placed alongside or above the header content

Syntax

Headline only

A single heading becomes the headline.

{% accordion %}
## Frequently asked questions

## What is refrakt.md?
A content framework built on Markdoc.
{% /accordion %}

Paragraph eyebrow + headline

A paragraph placed before the first heading becomes the eyebrow. This is the recommended pattern for badge links and short category labels.

{% accordion %}
[What's new →](#changelog)

## Frequently asked questions

## What is refrakt.md?
A content framework built on Markdoc.
{% /accordion %}

{% hero %}
New in v2.0

# Build with refrakt.md

A content framework for semantic Markdown.
{% /hero %}

Heading eyebrow + headline

Two consecutive headings: the first becomes the eyebrow, the second becomes the headline.

{% hero %}
## What's new in v2

# Build with refrakt.md

A content framework for semantic Markdown.
{% /hero %}

Headline + blurb

A paragraph placed after the headline becomes the blurb.

{% accordion %}
## Frequently asked questions

Browse our most common questions below.

## What is refrakt.md?
A content framework built on Markdoc.
{% /accordion %}

Full example: eyebrow + headline + blurb

{% accordion %}
[What's new →](#)

## Frequently asked questions

Browse our most common questions below.

## What is refrakt.md?

A content framework built on Markdoc that extends Markdown with semantic runes.

## How do runes work?

Runes create interpretation contexts for Markdown content.

## Do I need to learn new syntax?

No. Runes use standard Markdoc tag syntax.
{% /accordion %}
<section data-field="content-section" data-rune="accordion" typeof="FAQPage">
  <header>
    <p data-name="blurb">
      <a href="#">What's new →</a>
    </p>
  </header>
  <div data-name="items">
    <details data-field="item" data-rune="accordion-item" typeof="Question" property="mainEntity">
      <summary data-field="name" property="name">Frequently asked questions</summary>
      <div typeof="Answer" data-name="body" property="acceptedAnswer">
        <div property="text">
          <p>Browse our most common questions below.</p>
        </div>
      </div>
    </details>
    <details data-field="item" data-rune="accordion-item" typeof="Question" property="mainEntity">
      <summary data-field="name" property="name">What is refrakt.md?</summary>
      <div typeof="Answer" data-name="body" property="acceptedAnswer">
        <div property="text">
          <p>A content framework built on Markdoc that extends Markdown with semantic runes.</p>
        </div>
      </div>
    </details>
    <details data-field="item" data-rune="accordion-item" typeof="Question" property="mainEntity">
      <summary data-field="name" property="name">How do runes work?</summary>
      <div typeof="Answer" data-name="body" property="acceptedAnswer">
        <div property="text">
          <p>Runes create interpretation contexts for Markdown content.</p>
        </div>
      </div>
    </details>
    <details data-field="item" data-rune="accordion-item" typeof="Question" property="mainEntity">
      <summary data-field="name" property="name">Do I need to learn new syntax?</summary>
      <div typeof="Answer" data-name="body" property="acceptedAnswer">
        <div property="text">
          <p>No. Runes use standard Markdoc tag syntax.</p>
        </div>
      </div>
    </details>
  </div>
</section>

What's new →

Frequently asked questions

Browse our most common questions below.

What is refrakt.md?

A content framework built on Markdoc that extends Markdown with semantic runes.

How do runes work?

Runes create interpretation contexts for Markdown content.

Do I need to learn new syntax?

No. Runes use standard Markdoc tag syntax.

<section data-field="content-section" typeof="FAQPage" class="rf-accordion" data-rune="accordion" data-density="full">
  <header data-name="preamble" class="rf-accordion__preamble" data-section="preamble">
    <p data-name="blurb" class="rf-accordion__blurb" data-section="description">
      <a href="#">What's new →</a>
    </p>
  </header>
  <div data-name="items" class="rf-accordion__items">
    <details data-field="item" typeof="Question" class="rf-accordion-item" property="mainEntity" data-rune="accordion-item" data-density="full" data-state="closed">
      <summary data-field="name" property="name" data-name="header" class="rf-accordion-item__header">Frequently asked questions</summary>
      <div typeof="Answer" data-name="body" property="acceptedAnswer" class="rf-accordion-item__body">
        <div property="text">
          <p>Browse our most common questions below.</p>
        </div>
      </div>
    </details>
    <details data-field="item" typeof="Question" class="rf-accordion-item" property="mainEntity" data-rune="accordion-item" data-density="full" data-state="closed">
      <summary data-field="name" property="name" data-name="header" class="rf-accordion-item__header">What is refrakt.md?</summary>
      <div typeof="Answer" data-name="body" property="acceptedAnswer" class="rf-accordion-item__body">
        <div property="text">
          <p>A content framework built on Markdoc that extends Markdown with semantic runes.</p>
        </div>
      </div>
    </details>
    <details data-field="item" typeof="Question" class="rf-accordion-item" property="mainEntity" data-rune="accordion-item" data-density="full" data-state="closed">
      <summary data-field="name" property="name" data-name="header" class="rf-accordion-item__header">How do runes work?</summary>
      <div typeof="Answer" data-name="body" property="acceptedAnswer" class="rf-accordion-item__body">
        <div property="text">
          <p>Runes create interpretation contexts for Markdown content.</p>
        </div>
      </div>
    </details>
    <details data-field="item" typeof="Question" class="rf-accordion-item" property="mainEntity" data-rune="accordion-item" data-density="full" data-state="closed">
      <summary data-field="name" property="name" data-name="header" class="rf-accordion-item__header">Do I need to learn new syntax?</summary>
      <div typeof="Answer" data-name="body" property="acceptedAnswer" class="rf-accordion-item__body">
        <div property="text">
          <p>No. Runes use standard Markdoc tag syntax.</p>
        </div>
      </div>
    </details>
  </div>
</section>

Supported runes

The following runes support the eyebrow / headline / blurb / image pattern:

Core

@refrakt-md/marketing

@refrakt-md/learning

@refrakt-md/docs

@refrakt-md/business

@refrakt-md/places

@refrakt-md/media

  • Music Playlist