Image

The Image component is used to place full-bleed photos stretching to the edges of the browser or images that stretch to the edges of the current container. It is also used to place an image when a Rich Text area is unavailable.

Component Information

Benefits

The Image component is primarily used to place a large photo on the page.
There are two variations:
- Default: The image will stretch to the edges of the browser, ignoring the margins of the layout. This is similar in behavior to how a Hero image stretches across the browser window.
- Containerized: With this setting, the image is placed inside of the current container and will not stretch beyond that container.

Component Options and Limitations

Captions are optional.
When using an image with text, it may be beneficial to use a Rich Text component to place the image so that text flows around the image.
This component can also be used inside container and placeholder areas, such as those created by using the Column Splitter component.
The image can be linked to an internal or external page.

Accessibility Considerations

It is a best practice to avoid images of text, as screen readers are unable to read the text on the image.
All images should include alt text.

Image component fields

Content Tab

Image (file path selector)
- Used to select image
Image alt text (text)
- Alt text displays when images cannot load.
- Alt text is used by screen-reader technologies to assist the visually impaired.
- See the Digital Accessibility website for more information about proper use of alt text.
URL (link path)
- Used to create a link from the image
Link text (text)
- Controls the text describing the link
Caption (text)
- Caption text appearing below the image.
- Captions do not take the place of alt text.
- Optional.

Design Tab

Variant (droplist)
- Used to control the selected variant
- Available options:
  - Default
  - Containerized
Layout
- The layout options are used for advanced image controls and impact various settings related to image sizing and visibility at different screen sizes (controlled by breakpoints).
- Default settings are commonly all that is needed. Any changes impact active and higher breakpoints.
- Additional options available include:
  - Size
    - Default: Desktop Small
    - Click Override inheritance button to change and enable additional features related to size and column span
      - Column span (droplist)
        Numeric value from 1 to 12
        Default: 12
      - Auto-fit to full size (checkbox)
      - Auto-fit to content (checkbox)
  - Offset (droplist)
    - Numeric value from 0 to 11
    - Offsets the image by a number of columns
  - Order (numeric slider)
    - Number value from 0 to 5
  - First (checkbox)
  - Last (checkbox)
  - Component alignment
    - Align left
    - Align center
    - Align right
  - Display
    - None
    - Inline
    - Inline-block
    - Block
    - Table
    - Table-row
    - Table-cell
    - Flex
    - Inline-flex

Instructions for Use

In Page Builder:

Select the page in the Content Tree.
Click the “+” button in any Placeholder box below the Breadcrumb links.
Select the Image component from list.
Select desired variant from the Advanced Styling section of the Design tab in the component options panel.

Alternate method:

Click the Components tab at top of Content Tree.
Locate the Image component.
Drag the Image component to any empty placeholder area of the page or into the component that will contain the image below the Breadcrumb links.
Select desired variant from the Advanced Styling section of the Design tab in the component options panel.

*Images from Media Library and Content Hub should already have alt text.

The following examples are in a Two-Thirds Sublayout area.

An old fashioned lantern streetlight shines in front of a brick campus residence hall.

Above: a lantern in front of a residence hall in the West Circle neighborhood at Michigan State University. It is in a containerized variant of an Image component.

The following examples are in a full width layout area.

A photograph looking up from the base of Beaumont Tower

Above: Looking up at the facade of Beaumont Tower. This image is in a containerized variant Image component on a full width page area.

Documentation updated: June 4, 2026

Is there an issue with this documentation? Report it here.

Click on the thumbnail placeholder image.
Click on the Browse media library to open Media Library to search for or upload an image.

Alternatively, click the Content tab in the component options panel and use the Image section to choose an image file.
Click to select the desired image, and click Add selected.
Add appropriate alt text in the Image alt text field.
Adjust settings in the Layout section of the Design tab, if needed.

Click on the Caption text area at the bottom or side of the image. The placement of the caption in the layout will depend on the variant of the image component selected.

Alternatively, click the Content tab in the component options panel and use the Caption field.
Enter desired caption text.