refrakt.mdFigure
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">
<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>
<meta content="large" data-field="size">
<meta content="center" data-field="align">
</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">
<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>
<meta content="medium" data-field="size">
</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>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 |
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 |