Figures

Images wrapped in figure elements with captions

Figures

Figures wrap images in semantic <figure> elements with optional captions. Use them when an image needs a visible description below it.

Basic Figure

A sample placeholder image
This is the caption text that appears below the image.

Syntax:

:::figure
![Alt text](image-url.jpg)
Caption text here.
:::
Markdown

Figure with Title

System architecture
Figure 1: Architecture Diagram The system architecture showing the relationship between components.
:::figure[Figure 1: Title]
![Alt text](image.jpg)
Caption text.
:::
Markdown

Best Practices

  • Always include descriptive alt text for accessibility
  • Use captions to explain what the image shows, not just repeat the alt text
  • Use numbered figure titles for technical documentation that references images in the text
  • Store images in the assets/ directory of your course