Skip to main content

Media

Use media components to add images, GIFs, or videos to your documentation. These files need to be added to the "media" folder in your documentation repository.

Images​

Use the <Image> component to visually enhance your content by adding relevant images. You can easily include images by specifying the source file with the src attribute. This example shows an image located at media/customers.png.

The image component also allows you to control the images size, and add a different image for darkmode. Use the following properties for each:

  • srcDark (optional): This property allows you to add another image to be loaded when the site is in darkmode.
  • size(optional): This property gives you control of the images presentation. Defining its size in pixels or percentage.
Code for Images
<Image src="media/customers.gif" size="300px"/>

// or

<Image 
  src="https://image-directory.com/customers.png" 
  srcDark="https://image-directory.com/customers-dark.png"
  size="80%"
/>

Videos​

The <Video> component is used to embed videos within your documentation. You can include videos from external sources like YouTube or from local files by specifying the source with the src attribute. Additionally, you can adjust the video size with the width attribute.

Code for Videos
<Video src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="500px" />

//or

<Video src="media/paylink1.mp4" width="500px" />