Images

The Image Component comes with robust responsive features ready right out of the box. At the page template level, the design dialog can be used to define the default widths of the image asset. The Image Component will then automatically load the correct width to display depending on the size of the browser window.

Responsive Image

Responsive Images are the images that work well on devices with widely differing screen sizes. To make your image responsive add '.responsive-image' class to your image element and you can also use paddings and margins utility classes for adding spacing.

Round Image

To make your image responsive and round add '.responsive-image' and '.round-image' class to your image element and you can also use paddings and margins utility classes for adding spacing.

Responsive Images with Size Variant

Responsive Images are the images that work well on devices with widely differing screen sizes. To make your image responsive add '.responsive-image' class to your image element and for size variant you can use '.xl-image', '.lg-image' or '.sm-image' and you can also use paddings and margins utility classes for adding spacing.

Round Images with size Variant

To make your image responsive and round add '.responsive-image' and '.round-image' class to your image element and for size variant you can use '.xl-image', '.lg-image' or '.sm-image' and you can also use paddings and margins utility classes for adding spacing.