Adding images

Images often feature within article content so our themes contain various ways to style them.

By default images will appear without any borders or other styles applied.

Borders, with or without a border radius, can be applied using utility classes:

<img class="img-fluid border border-radius" src="image.jpg" alt="An image with a rounded border" />

Shadows too:

<img class="img-fluid border shadow-md" src="image.jpg" alt="An image with a shadow" />

Adding an overlay can be achieved using color and opacity utilities:

<div class="relative">
  <img class="img-fluid" src="image.jpg" alt="An image with an overlay" />
  <div class="absolute-center w-full h-full opacity-25 bg-green-500"></div>

You can also present one or more images within a lightbox using our integrated Lightboxes extension.

<a href="image.jpg" data-fancybox data-caption="An image within a lightbox">
  <img src="thumbnail.jpg" alt="An image within a lightbox" />

Questions or feedback about this article? Let us know