Back to all components

Image

A simple image control. Change the container from full screen (columns 12), half screen (columns 6) or if you want to fit 4 image in a row use columns 3.

MAX Desktop image : 1900 x 1300
Mobile image (optional) : N/A Uses the Desktop Image and reduces to fit in width.

Add Title (SEO alternative text).
Add URL (optional), if a URL is provided and the user clicks on the image, it will navigate to that page, if no URL is provided it will zooom in on the image instead.
Open in New Window (Yes/No): If you select YES, it will open the image in a new window.



My image
My image
My image

Images

The image and most of the web components for image card / icon card have the ability to set max height and manage image cover.

Use these custom CSS classes on the webpage component.

These will set the min/max height:

height100

height110

height120

height130

height140

height150

height160

height200

height250

height300

height350

height400

height450


height500

height550

height600

height650

height700

height750

This will make the image stretch to fill in all space

object-fit-cover

Then use these to zoom in left/right/top or bottom

object-fit-cover-left

object-fit-cover-right

object-fit-cover-top

object-fit-cover-bottom

This will make the image fit whole within the space

object-fit-contain

Next

Image Cards

Image cards are versatile components that combine images with text, buttons, or other elements in a neatly organised card layout. Each card includes an image at the top, followed by text like a title or description, and optional actions...

Read More