Image

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

Sandstone plateau, Hisma Desert - NEOM, Saudi Arabia

---
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"
  height="300"
  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.

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

<Image
  src="/neom2-600x400.webp"
  alt="Sandstone plateau, Hisma Desert - NEOM, Saudi Arabia"
  width="600"
  height="400"
  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.

CSS API

---
import "@gemini-ui-css/components/image.css";
---

<img
  class="gx-image"
  src="/neom-400x300.webp"
  alt="Sandstone plateau, Hisma Desert - NEOM, Saudi Arabia"
  width="600"
  style="max-width: 85vw"
/>

---
import "@gemini-ui-css/components/image.css";
---

<figure class="gx-figure">
  <img
    class="gx-image"
    src="/neom2-600x400.webp"
    alt="Sandstone plateau, Hisma Desert - NEOM, Saudi Arabia"
    width="600"
    style="max-width: 85vw"
  />
  <figcaption class="gx-figure-caption">
    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.
  </figcaption>
</figure>