Skip to main content

Figure Component

The figure component is used for images or media that should be referenced.

Required Properties​

caption : A string describing the image or asset.​

Example Usage​

import Figure from "../../src/components/Figure";
<Figure caption={"Figure 1.1 A dinosaur that helps users write great documentation websites."}>

![Docusaurus Dinosaur](/img/docusaurus.png)

</Figure>

Docusaurus Dinosaur

Figure 1.1 A dinosaur that helps users write great documentation websites.

Sub captions​

import Figure from "../../src/components/Figure";
<Figure caption={"Figure 1.1 A dinosaur that helps users write great documentation websites."} subcaption={"More detail about the dinosaur. Blood oranges can be mixed with quartered ginger, also try garnishing the platter with sweet chili sauce."}>

![Docusaurus Dinosaur](/img/docusaurus.png)

</Figure>

Docusaurus Dinosaur

Figure 1.2 A dinosaur that helps users write great documentation websites.
More detail about the dinosaur. Shrimps can be flavored with ripe raspberries, also try covering the pie with iced tea.

Single Line Component​

With JSX you don't necessarily have to open and close html tags. The equivalent of <Figure></Figure> is </Figure>. You must provide a src and caption property.

import Figure from "../../src/components/Figure";
<Figure src={dinosaur} caption={"Figure 1.3 Example of short jsx figure component"} />
Figure 1.3 Example of short jsx figure component

Playground​

Try editing the properties of the <Figure> below for live changes!

Live Editor
Result
Loading...