Actions
{% actions %} turns a plain list of links into a row of buttons. The first link of the whole row is the primary action and the rest are secondary, so a theme styles the rank rather than the list position. A fence becomes a copyable command line in the same row.
It is what hero and cta render their buttons with, and what a composed rune places to get buttons from a slot.
Basic usage
{% actions %}
- [Get started](/docs/getting-started)
- [View on GitHub](https://github.com/refrakt-md/refrakt)
{% /actions %}<div data-rune="actions">
<ul data-name="list">
<li data-rank="primary" data-name="action">
<a href="/docs/getting-started">
<span>Get started</span>
</a>
</li>
<li data-rank="secondary" data-name="action">
<a href="https://github.com/refrakt-md/refrakt">
<span>View on GitHub</span>
</a>
</li>
</ul>
</div><div class="rf-actions" data-rune="actions" data-density="full">
<ul data-name="list" class="rf-actions__list">
<li data-rank="primary" data-name="action" class="rf-actions__action">
<a href="/docs/getting-started">
<span>Get started</span>
</a>
</li>
<li data-rank="secondary" data-name="action" class="rf-actions__action">
<a href="https://github.com/refrakt-md/refrakt">
<span>View on GitHub</span>
</a>
</li>
</ul>
</div>With a command line
A fence is a command block, unranked, beside the buttons. On a narrow screen the row stacks, and the command line and the buttons share its width.
{% actions %}
```shell
npm create refrakt@latest
```
- [Read the docs](/docs/getting-started)
{% /actions %}<div data-rune="actions">
<div data-name="command">
<div class="rf-codeblock">
<pre data-language="shell">
<code data-language="shell">npm create refrakt@latest
</code>
</pre>
</div>
</div>
<ul data-name="list">
<li data-rank="primary" data-name="action">
<a href="/docs/getting-started">
<span>Read the docs</span>
</a>
</li>
</ul>
</div>npm create refrakt@latest
<div class="rf-actions" data-rune="actions" data-density="full">
<div data-name="command" class="rf-actions__command">
<div class="rf-codeblock">
<pre data-language="shell"><code data-language="shell">npm create refrakt@latest
</code></pre>
</div>
</div>
<ul data-name="list" class="rf-actions__list">
<li data-rank="primary" data-name="action" class="rf-actions__action">
<a href="/docs/getting-started">
<span>Read the docs</span>
</a>
</li>
</ul>
</div>Rank
Rank is positional over the whole row: the first link is primary, wherever it is. A row written as a list, a fence and another list has one primary action, the first link of the first list. Every other link is secondary.
In a composed rune
A composition places actions around a slot, so its authors keep writing a plain list:
{% section media-position=$attrs["media-position"] %}
{% slot name="media" /%}
---
{% slot name="headline" /%}
{% slot name="blurb" /%}
{% actions %}{% slot name="actions" /%}{% /actions %}
{% /section %}
Output contract
<div class="rf-actions" data-rune="actions">
<div data-name="command" class="rf-actions__command"><pre>…</pre></div>
<ul data-name="list" class="rf-actions__list">
<li data-name="action" data-rank="primary" class="rf-actions__action"><a href="…"><span>…</span></a></li>
<li data-name="action" data-rank="secondary" class="rf-actions__action"><a href="…"><span>…</span></a></li>
</ul>
</div>
The row's alignment comes from --actions-justify, which a host sets (hero from its align, cta to centre). Button size comes from --action-padding and --action-font-size. The primary button's text uses --rf-color-on-primary, so it follows the colour scheme, a cover scrim's included.
Attributes
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) |
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 |
| prominence | this rune has no page-section header |