Back to All Modules

Single Image

Search (CSOL) Single Image in the CMS

Jump to Guidelines and Use Cases

Theme Options:

Module Preview
Woman with iPad on street orange sweater
Orange you going to say anything?
Woman with iPad on street orange sweater
Orange you going to say anything?
Woman with iPad on street orange sweater
Orange you going to say anything?
Module Preview

FAQ's

How To Use This Module

Use this single image spot to illustrate something meaningful and complementary to the content of the page.

Use Cases

### Display Modes

Choose between contained (within section wrapper) or full-bleed (edge-to-edge) display modes.

### Responsive Sizing

Select from small (343px), medium (687px), or large (1080px) sizes for contained images. Full-bleed images have responsive heights across breakpoints.

### Caption with Truncation

Add an optional caption. For full-bleed images, captions longer than 200 characters are automatically truncated with "Read more" functionality using Component Library truncate behavior.

### Lazy Loading

Images support eager or lazy loading configuration for performance optimization.

Get on-brand assets for your module

Guidelines

Image Sizing

  • Choose between large, medium or small image sizes
  • For large images make sure no stretching occurs and be sure to optimize your image before upload! If you have any questions about this reach out to us on slack!
  • All images are stretched to fit the specific width set by the size you select on the CMS. Be mindful of tall images (like infographics or phone screenshots)

Things to Know

  • Unnecessarily large files (> 500kb) can slow down a page

Similar Modules

Photo Gallery

Display a collection of photos on your page.

What's New?

| v4.1.0 November 2025

  • There is now a field for Display As that allows to change between the default value (Contained) and the new Full-bleed value. Images with full-bleed display will now take the full viewport width

| v1.5.0 April 2023

  • There is now a field for Image Loading. This defaults to Browser default. "Lazy" loading defers loading this element until it's visible on the page. This may help improve site performance.