Accordion
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" data-section="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" data-section="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" data-section="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" data-section="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" data-section="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.
When the panels are not a FAQ
An accordion declares itself a FAQPage, with each panel a Question and its body an Answer. That is right for a genuine FAQ and wrong for every other use — a list of definitions, a set of options, the universal-attribute sections on these rune pages. Publishing questions that nobody asked is structured data asserting something untrue.
{% accordion schema="none" %}
Suppresses the whole subtree, panels included, and the JSON-LD with it. Nothing else changes — same markup, same classes, same behaviour.
"none" is the only value. FAQPage has no subtype to narrow to, and switching to another type (ItemList, say) would need the container's property renamed and each panel's type and properties changed, which an attribute on the container cannot reach.
Attributes
accordion
| Attribute | Type | Required | Description |
|---|---|---|---|
multiple | boolean | — | Allow multiple panels to be open at once |
schema | "none" | — | Set to "none" to emit no schema.org markup. Use it when the panels are not a FAQ — a list of definitions, say — so the page does not publish fabricated Question entries. Suppresses the items too, not just the container. |
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 |
accordion-item
| Attribute | Type | Required | Description |
|---|---|---|---|
name | 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) |
dropcap
Per-instance drop-cap opt-in (SPEC-108).
| Attribute | Type | Required | Description |
|---|---|---|---|
dropcap | boolean | — | Style the opening letter of a prose body as a drop cap (SPEC-108). Honoured only when the body reads as prose; ignored otherwise. |
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) |
reading
Editorial register for body text (SPEC-108). The author picks the register; the theme owns the magnitude.
| Attribute | Type | Required | Description |
|---|---|---|---|
reading | "fine" | "ui" | "prose" | — | Reading register for this block’s body (SPEC-108): fine | ui | prose. The theme owns the editorial treatment. |
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 |
|---|---|
| frame | this rune declares neither a `frameTarget` nor a media section |
| prominence | this rune has no page-section header |