Figure

{% figure caption="A coral reef teeming with life beneath turquoise waters" size="large" align="center" %}
![Coral reef](https://assets.refrakt.md/figure-coral-reef.jpg)
{% /figure %}

<figure data-rune="figure" data-rune-fields="{&quot;size&quot;:&quot;large&quot;,&quot;align&quot;:&quot;center&quot;}" typeof="ImageObject">
  <img src="https://assets.refrakt.md/figure-coral-reef.jpg" alt="Coral reef" data-name="image" property="contentUrl">
  <figcaption data-name="caption" property="caption">A coral reef teeming with life beneath turquoise waters</figcaption>
</figure>

<figure class="rf-figure rf-figure--large rf-figure--center" typeof="ImageObject" data-size="large" data-align="center" data-elevation="flat" data-rune="figure" data-density="compact">
  <img src="https://assets.refrakt.md/figure-coral-reef.jpg" alt="Coral reef" data-name="image" property="contentUrl" class="rf-figure__image" />
  <figcaption data-name="caption" property="caption" class="rf-figure__caption" data-section="description">A coral reef teeming with life beneath turquoise waters</figcaption>
</figure>

{% figure size="medium" %}
![Hot springs](https://assets.refrakt.md/figure-hot-springs.jpg)

Steam rising from volcanic hot springs in the Icelandic highlands.
{% /figure %}

<figure data-rune="figure" data-rune-fields="{&quot;size&quot;:&quot;medium&quot;}" typeof="ImageObject">
  <img src="https://assets.refrakt.md/figure-hot-springs.jpg" alt="Hot springs" data-name="image" property="contentUrl">
  <figcaption data-name="caption" property="caption">
    <p>Steam rising from volcanic hot springs in the Icelandic highlands.</p>
  </figcaption>
</figure>

<figure class="rf-figure rf-figure--medium rf-figure--center" typeof="ImageObject" data-size="medium" data-align="center" data-elevation="flat" data-rune="figure" data-density="compact">
  <img src="https://assets.refrakt.md/figure-hot-springs.jpg" alt="Hot springs" data-name="image" property="contentUrl" class="rf-figure__image" />
  <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>

{% figure caption="The request handler and its retry policy" %}
```ts
export async function handler(req: Request) {
	return fetch(req, { retry: 3 });
}
```

| Option  | Default |
|---------|---------|
| `retry` | `3`     |
{% /figure %}

<figure data-rune="figure" data-rune-fields="{&quot;body&quot;:&quot;mixed&quot;}">
  <div class="rf-codeblock">
    <pre data-language="ts">
      <code data-language="ts">export async function handler(req: Request) {
	return fetch(req, { retry: 3 });
}
</code>
    </pre>
  </div>
  <div class="rf-table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Option</th>
          <th>Default</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <code>retry</code>
          </td>
          <td>
            <code>3</code>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <figcaption data-name="caption">The request handler and its retry policy</figcaption>
</figure>

export async function handler(req: Request) {
	return fetch(req, { retry: 3 });
}

<figure class="rf-figure rf-figure--default rf-figure--center" data-size="default" data-align="center" data-elevation="flat" data-rune="figure" data-density="compact">
  <div class="rf-codeblock">
    <pre data-language="ts"><code data-language="ts">export async function handler(req: Request) {
	return fetch(req, { retry: 3 });
}
</code></pre>
  </div>
  <div class="rf-table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Option</th>
          <th>Default</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <code>retry</code>
          </td>
          <td>
            <code>3</code>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <figcaption data-name="caption" class="rf-figure__caption" data-section="description">The request handler and its retry policy</figcaption>
</figure>

{% figure elevation="floating" frame-aspect="4/3" caption="Framed at 4/3 with a lifted figure" %}
![Coral reef](https://assets.refrakt.md/figure-coral-reef.jpg)
{% /figure %}

<figure data-rune="figure" typeof="ImageObject" elevation="floating">
  <img src="https://assets.refrakt.md/figure-coral-reef.jpg" alt="Coral reef" data-name="image" 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 class="rf-figure rf-figure--default rf-figure--center" typeof="ImageObject" data-size="default" data-align="center" data-elevation="floating" data-rune="figure" data-density="compact" style="--frame-aspect: 4/3">
  <img src="https://assets.refrakt.md/figure-coral-reef.jpg" alt="Coral reef" data-name="image" property="contentUrl" class="rf-figure__image" />
  <figcaption data-name="caption" property="caption" class="rf-figure__caption" data-section="description">Framed at 4/3 with a lifted figure</figcaption>
</figure>