Image
Note that you can also use markdown syntax for images. This component is useful when you need to customize the dimensions or styling of the image.
The Image
component allows you to add responsive and styled images to your markdown pages. This component is useful for embedding images with optional alignment, width, and height settings, and includes accessibility features through the description attribute.
Examples
Custom size
<Image
url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
description="Sample placeholder image"
height=80
/>
Aligned Left
<Image
url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
description="Sample placeholder image"
height=80
align="left"
/>
With Border & Custom Padding
<Image
url="https://raw.githubusercontent.com/evidence-dev/media-kit/refs/heads/main/png/wordmark-gray-800.png"
description="Sample placeholder image"
height=80
border=true
class="p-4"
/>
Options
Required
The URL of the image.
The description of the image for accessibility purposes.
The width of the image (in pixels)
- Options:
- number
The height of the image (in pixels)
- Options:
- number
Pass custom classes to control the styling of an accordion item. Supports tailwind classes.