refrakt.mdDetails
Collapsible disclosure block for supplementary content. Renders as a native <details> element.
Basic usage
Content is hidden by default and revealed when the user clicks the summary.
{% details summary="Click to reveal more information" %}
This content is hidden by default. The details rune wraps content in a native disclosure element that the user can toggle open and closed.
{% /details %}<details data-rune="details">
<summary data-field="summary">Click to reveal more information</summary>
<div data-name="body">
<p>This content is hidden by default. The details rune wraps content in a native disclosure element that the user can toggle open and closed.</p>
</div>
</details>Click to reveal more information
This content is hidden by default. The details rune wraps content in a native disclosure element that the user can toggle open and closed.
<details class="rf-details" data-rune="details" data-density="full">
<summary data-field="summary" data-name="summary" class="rf-details__summary">Click to reveal more information</summary>
<div data-name="body" class="rf-details__body">
<p>This content is hidden by default. The details rune wraps content in a native disclosure element that the user can toggle open and closed.</p>
</div>
</details>Open by default
Use open=true to have the block expanded when the page loads.
{% details summary="This one starts open" open=true %}
Since `open=true` is set, this block is expanded when the page loads.
{% /details %}<details data-rune="details" open>
<summary data-field="summary">This one starts open</summary>
<div data-name="body">
<p>
Since
<code>open=true</code>
is set, this block is expanded when the page loads.
</p>
</div>
</details>This one starts open
Since open=true is set, this block is expanded when the page loads.
<details class="rf-details" open data-rune="details" data-density="full">
<summary data-field="summary" data-name="summary" class="rf-details__summary">This one starts open</summary>
<div data-name="body" class="rf-details__body">
<p>
Since
<code>open=true</code>
is set, this block is expanded when the page loads.
</p>
</div>
</details>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
summary | string | "Details" | The clickable summary text |
open | boolean | false | Whether the block is initially expanded |
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 |