Image

The Image component is used to display images. It can be used to display static images and have a caption .

---
import { Image } from "@gemini-ui-astro/components";
---

<Image
  class="neom-1"
  src="/neom-400x300.webp"
  alt="Sandstone plateau, Hisma Desert - NEOM, Saudi Arabia"
  width="400"
  dynamicGlow
/>

Usage

Caption

To add a caption to the image, toggle the caption prop. Then add a caption as a child of the Image component.

Figure 2: The vibrant waters of NEOM, are home to some of the most picturesque and pristine islands in the Red Sea | Islands of NEOM - NEOM, Saudi Arabia.

---
import { Image } from "@gemini-ui-astro/components";
---

<Image
  class="neom-1"
  src="/neom2-600x400.webp"
  alt="Sandstone plateau, Hisma Desert - NEOM, Saudi Arabia"
  width="600"
  caption
  dynamicGlow
  style="max-width: 85vw"
>
  Figure 2: The vibrant waters of NEOM, are home to some of the most picturesque
  and pristine islands in the Red Sea | Islands of NEOM - NEOM, Saudi Arabia.
</Image>

Props

Name	Type	Default	Description
dynamicGlow	boolean	false	A Gemini UI unique effect
class	string	-	Override or extend the styles applied to the component.