Figure
Enhanced image display with caption, sizing, and alignment controls.
With caption attribute
Set the caption directly on the rune.
{% figure caption="A coral reef teeming with life beneath turquoise waters" size="large" align="center" %}
{% /figure %}<figure data-rune="figure" typeof="ImageObject" data-rune-fields="{"size":"large","align":"center"}">
<img src="https://assets.refrakt.md/figure-coral-reef.jpg" alt="Coral reef" property="contentUrl">
<figcaption data-name="caption" property="caption">A coral reef teeming with life beneath turquoise waters</figcaption>
</figure>
<figure typeof="ImageObject" class="rf-figure rf-figure--large rf-figure--center" data-size="large" data-align="center" data-rune="figure" data-density="compact">
<img src="https://assets.refrakt.md/figure-coral-reef.jpg" alt="Coral reef" property="contentUrl" />
<figcaption data-name="caption" property="caption" class="rf-figure__caption" data-section="description">A coral reef teeming with life beneath turquoise waters</figcaption>
</figure>With paragraph caption
If no caption attribute is provided, the first paragraph inside the rune is used as the caption.
{% figure size="medium" %}
Steam rising from volcanic hot springs in the Icelandic highlands.
{% /figure %}<figure data-rune="figure" typeof="ImageObject" data-rune-fields="{"size":"medium"}">
<img src="https://assets.refrakt.md/figure-hot-springs.jpg" alt="Hot springs" property="contentUrl">
<figcaption data-name="caption" property="caption">
<p>Steam rising from volcanic hot springs in the Icelandic highlands.</p>
</figcaption>
</figure>
Steam rising from volcanic hot springs in the Icelandic highlands.
<figure typeof="ImageObject" class="rf-figure rf-figure--medium rf-figure--center" data-size="medium" data-align="center" data-rune="figure" data-density="compact">
<img src="https://assets.refrakt.md/figure-hot-springs.jpg" alt="Hot springs" property="contentUrl" />
<figcaption data-name="caption" property="caption" class="rf-figure__caption" data-section="description">
<p>Steam rising from volcanic hot springs in the Icelandic highlands.</p>
</figcaption>
</figure>Elevation & frame
A figure is a frame around its image, so it sets frameTarget: "self" (surface model): frame chrome lands on the figure itself. elevation floats the figure as a box (box-shadow); frame-shadow is the image's silhouette drop-shadow; frame-aspect crops it to a ratio.
{% figure elevation="lg" frame-aspect="4/3" caption="Framed at 4/3 with a lifted figure" %}
{% /figure %}<figure data-rune="figure" typeof="ImageObject" elevation="lg">
<img src="https://assets.refrakt.md/figure-coral-reef.jpg" alt="Coral reef" property="contentUrl">
<figcaption data-name="caption" property="caption">Framed at 4/3 with a lifted figure</figcaption>
<meta data-field="frame-aspect" content="4/3">
</figure><figure typeof="ImageObject" class="rf-figure rf-figure--default rf-figure--center" data-size="default" data-align="center" data-elevation="lg" data-rune="figure" data-density="compact" style="--frame-aspect: 4/3">
<img src="https://assets.refrakt.md/figure-coral-reef.jpg" alt="Coral reef" property="contentUrl" />
<figcaption data-name="caption" property="caption" class="rf-figure__caption" data-section="description">Framed at 4/3 with a lifted figure</figcaption>
</figure>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
caption | string | — | Caption text (falls back to first paragraph) |
size | string | — | One of small, medium, large, full |
align | string | — | One of left, center, right |
elevation | string | — | Self-surface box-shadow: none, sm, md, lg |
frame-* | string | — | Media-surface chrome (aspect, shadow, …) — see surfaces |
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 |