Regsoft design system

Image

The Reg.image component renders an accessible <img> tag with built-in support for lazy loading, decorative image handling, and layout stability through explicit dimensions.

Attributes

Attribute	Type	Required	Default	Description
src	string	Yes	-	The URL of the image to display.
description	string	Yes	-	Alt text for the image. Used for accessibility.
is_decorative	boolean	Yes	-	When true, sets aria-hidden so screen readers skip the image.
width	string	No	nil	Image width. Recommended for lazy-loaded images to prevent layout shift.
height	string	No	nil	Image height. Recommended for lazy-loaded images to prevent layout shift.
lazy	boolean	No	true	Enables lazy loading. A warning is logged if width/height are not set.
class	string	No	nil	Additional CSS class(es) to apply alongside reg-img.

Basic image

A standard image with alt text, width, and height specified.

Decorative image

When is_decorative is set to true, the image is hidden from screen readers via aria-hidden. Use this for images that are purely visual and add no informational value.

Custom CSS class

Additional classes can be applied using the class attribute. The component always includes the reg-img base class.

Without explicit dimensions

Omitting width and height on a lazy-loaded image will trigger a warning in the server logs about potential layout instability.