refrakt.mdAccordion
Collapsible accordion sections. Use explicit {% accordion-item %} tags, or write headings directly and they will be automatically converted into accordion panels.
Basic usage
Wrap each section in an {% accordion-item %} tag with a name.
{% accordion %}
{% accordion-item name="What is refrakt.md?" %}
A content framework built on Markdoc that extends Markdown with semantic runes. You write standard Markdown — runes decide how it's interpreted.
{% /accordion-item %}
{% accordion-item name="How do runes work?" %}
Runes are Markdoc tags that wrap ordinary Markdown. The same list renders as navigation links, a feature grid, or action buttons — depending on which rune contains it.
{% /accordion-item %}
{% accordion-item name="Do I need to learn a new syntax?" %}
No. Runes use standard Markdoc tag syntax, and the content inside is regular Markdown.
{% /accordion-item %}
{% /accordion %}<section data-field="content-section" data-rune="accordion" typeof="FAQPage">
<div data-name="items">
<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. You write standard Markdown — runes decide how it's interpreted.</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 are Markdoc tags that wrap ordinary Markdown. The same list renders as navigation links, a feature grid, or action buttons — depending on which rune contains it.</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 a new syntax?</summary>
<div typeof="Answer" data-name="body" property="acceptedAnswer">
<div property="text">
<p>No. Runes use standard Markdoc tag syntax, and the content inside is regular Markdown.</p>
</div>
</div>
</details>
</div>
</section>What is refrakt.md?
A content framework built on Markdoc that extends Markdown with semantic runes. You write standard Markdown — runes decide how it's interpreted.
How do runes work?
Runes are Markdoc tags that wrap ordinary Markdown. The same list renders as navigation links, a feature grid, or action buttons — depending on which rune contains it.
Do I need to learn a new syntax?
No. Runes use standard Markdoc tag syntax, and the content inside is regular Markdown.
<section data-field="content-section" typeof="FAQPage" class="rf-accordion" data-rune="accordion" data-density="full">
<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">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. You write standard Markdown — runes decide how it's interpreted.</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 are Markdoc tags that wrap ordinary Markdown. The same list renders as navigation links, a feature grid, or action buttons — depending on which rune contains it.</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 a 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, and the content inside is regular Markdown.</p>
</div>
</div>
</details>
</div>
</section>Heading conversion
Headings are automatically converted into accordion items — no explicit tags needed.
{% accordion %}
## What is refrakt.md?
A content framework built on Markdoc.
## How do runes work?
Runes create interpretation contexts for Markdown content.
{% /accordion %}<section data-field="content-section" data-rune="accordion" typeof="FAQPage">
<div data-name="items">
<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.</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>
</div>
</section>What is refrakt.md?
A content framework built on Markdoc.
How do runes work?
Runes create interpretation contexts for Markdown content.
<section data-field="content-section" typeof="FAQPage" class="rf-accordion" data-rune="accordion" data-density="full">
<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">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.</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>
</div>
</section>Section header
Accordion supports an optional eyebrow, headline, and blurb above the panels. Place a short paragraph or heading before your content heading to use them. See Page sections for the full syntax.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
multiple | boolean | true | Allow multiple panels to be open simultaneously |
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |