Splendid Labz

HTML Output

Image produces the following HTML when caption is not used.

<figure>
  <picture>
    <source srcset="..." type="image/avif" />
    <source srcset="..." type="image/webp" />
    <img
      src="..."
      srcset="..."
      alt="Alt Text"
      width="..."
      height="..."
      loading="lazy"
      decoding="async"
    />
  </picture>
</figure>

It produces the following HTML when caption is used.

<figure aria-label="Figcaption content">
  <picture>
    <source srcset="..." type="image/avif" />
    <source srcset="..." type="image/webp" />
    <img
      src="..."
      srcset="..."
      alt="Alt Text"
      width="..."
      height="..."
      loading="lazy"
      decoding="async"
    />
  </picture>
  <figcaption aria-hidden>Figcaption content</figcaption>
</figure>

Styling with CSS

We don’t provide basic styles for Image so you can use your own styles.

figure { /* ... your styles here ... */ }
figcaption { /* ... your styles here ... */ }
img { /* ... your styles here ... */ }

That said, we recommend adding the following to your reset.css file to ensure images are responsive. This, plus other reset styles, are provided in Splendid Styles

img {
  display: block;
  max-width: 100%;
  height: auto;
}

Styling with Tailwind

You can use the following properties to style Image with Tailwind:

Property	Description
`class`	Class for the `<figure>` element
`imageClass`	Class for the `<img>` element
`captionClass`	Class for the `<figcaption>` element

<Image
  class="..."
  imageClass="..."
  captionClass="..."
> ... </Image>