# Image comparison

### Section overview

The image comparison section showcases before/after images with an interactive slider that allows customers to compare differences between two images.

#### Common use cases

* Demonstrating product transformations or results
* Showcasing renovation or restoration projects
* Displaying different versions or states of a product
* Highlighting effects of treatments, services, or product usage

#### Usage tips

* Use high-quality images with the same dimensions for best results
* Choose images that have a clear visual difference to make the comparison meaningful
* Consider adding descriptive labels for each image to clarify what viewers are seeing
* For mobile responsiveness, ensure the comparison is still effective on smaller screens

### Section settings

| Setting         | Description                                                                         |
| --------------- | ----------------------------------------------------------------------------------- |
| Before image    | The image to display in the "before" state                                          |
| Before label    | Text label for the "before" image (default: "Before")                               |
| After image     | The image to display in the "after" state                                           |
| After label     | Text label for the "after" image (default: "After")                                 |
| Heading         | Section title that appears above the comparison                                     |
| Content         | Rich text description to provide context for the comparison                         |
| Button label    | Text to display on the optional call-to-action button                               |
| Button url      | Destination URL when the button is clicked                                          |
| Top spacing     | Amount of space above the section (0-300px)                                         |
| Bottom spacing  | Amount of space below the section (0-300px)                                         |
| Color scheme    | Background and text color combination for the section                               |
| Border color    | Color style for section borders                                                     |
| Button color    | Style and color variant for the call-to-action button                               |
| Border position | Where borders appear around the section (none, top, bottom, or both)                |
| Aspect ratio    | Proportional relationship between width and height (1:1, 16:9, or 4:3)              |
| Text alignment  | Horizontal alignment of text content (left, center, or right)                       |
| Enable margin   | Toggle horizontal margin on or off                                                  |
| Enable split    | Toggle layout between stacked and side-by-side arrangement                          |
| Visibility      | Control which device types can view the section (all, mobile only, or desktop only) |

### Block settings

This section does not contain any blocks.