> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-blocks/basic/image-comparison.md).

# Image comparison

A before-and-after pair of images with a draggable handle, for showing a transformation — retouching, restoration, or a product with and without an effect.

| Setting                    | Description                                                                                                       |
| -------------------------- | ----------------------------------------------------------------------------------------------------------------- |
| Comparison style           | **Slider** — one image reveals the other behind a draggable handle. **Side by side** — both images shown at once. |
| Initial position           | Where the handle sits when the block first appears.                                                               |
| Handle icon                | **Bars** or **Compare**.                                                                                          |
| Direction                  | Split the images **Horizontal** or **Vertical**.                                                                  |
| Image ratio                | Crop ratio — Original, Square, Portrait, or Landscape variants. Set separately for mobile.                        |
| Show image first on mobile | Move the block above other blocks on mobile.                                                                      |
| Separate images            | Adds a gap between the two images in the Side by side style.                                                      |
| Desktop width              | **Fill** the container, or a **Custom** percentage, with an optional **Limit width** / **Max width** cap.         |
| Before image / After image | The two images, each with an optional separate **Mobile** image and a **Label**.                                  |
| Typography                 | **Font**, **Font size**, and **Letter spacing** of the labels, plus **Show text background**.                     |
| Corner radius              | Rounding of the image corners, with a **Custom corner radius** value when set to Custom.                          |
| Color                      | Handle icon and background colors, and text and text-background colors for the labels.                            |
| Padding                    | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**.                            |