# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.brickspacelab.com/paper/sections/content-and-media/image-comparison.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.