Image Caption Preview


This is a caption for the image above

Normal italic text remains styled as italic when not preceded by an image.

scss/canvas/component/_image-caption.scss

CSS Variables

CSS Variable Default
--image-caption-font-size var(--font-size-s) (0.85em)
scss/canvas/component/_image-caption.scss

Customization Example


Smaller caption with custom font size

---
style: |
  :root {
    --image-caption-font-size: 0.7em;
  }
---

Override the caption font size to make it smaller.

scss/canvas/component/_image-caption.scss

Side-by-side Images

Images without captions can be placed side by side as usual:

With captions, images become display: block, so each image is on its own line:


Caption A


Caption B

scss/canvas/component/_image-caption.scss