Image

Design File

Figma link

Introduction

The image component is used by content editors to embed images into their content in the layout builder. It provides a consistent way to display images across the Libraries site, ensuring that they adhere to the design system's standards for spacing, alignment, and aspect ratio.

Images should not be embedded directly into the content using the WYSIWYG editor. Instead, they should be added as separate components in the layout builder to maintain consistency and allow for better control over the image's display properties.

Component Structure

Variants

There are five variants, with the main difference being the aspect ratio of the image. The image will always take up the full width of the content area, and the height will adjust based on the selected aspect ratio. The default variant is Freeform, which is based on the image's original aspect ratio. The other variants are predefined aspect ratios that can be selected based on content needs.

1. 1/1

Aspect ratio 1:1

2. 4/3

Aspect ratio 4:3

3. 3/2

Aspect ratio 3:2

4. 16/9

Aspect ratio 16:9

5. Freeform

Aspect ratio auto

Slots

Field	Type	Requirement	Description
Image	Media Image URL	Required	The aspect ratio follows the selected variant, defaults to freeform, and uses object-fit: cover for proper display.
Image Alt Text	String	Required	The alt text for the image.
Image Caption	WYSIWYG	Optional	It is recommended to have a caption. The alt text will not be shown here automatically. The WYSIWYG editor is used for the image caption field, using the text format: Basic HTML. It can include links, bold, and italic.