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

Props

Field	Data Type	Requirement	Description	Note
Orientation	String	Optional	The layout orientation of the image and its caption.	Options: landscape, portrait. Defaults to landscape. Use portrait when the image is taller than it is wide and the caption should appear beside it.
Component ID	String	Optional	An ID for the component, useful for in-page anchor linking.

Slots

Field	Data Type	Requirement	Description	Note
Image	Media Image URL	Required	The image to display. Uses object-fit: cover, so the image is cropped to fill the selected aspect ratio.
Image Alt Text	String	Required	Alt text for the image.
Image Caption	WYSIWYG	Optional	A caption displayed below the image. The alt text is not shown automatically — write a caption separately if needed.	Use the text format: Basic HTML. Supports links, bold, and italic.