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>

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>

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

<Figure caption={"Figure 1.1 A dinosaur that helps users write great documentation websites."} subcaption={"More detail about the dinosaur. Avocado can be blended with fresh bagel, also try decorating the mousse with iced tea."}>

<img src={dinosaur} alt={"dinosaur"} />

</Figure>

Result

Loading...