> For the complete documentation index, see [llms.txt](https://help.brickspacelab.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.brickspacelab.com/paper/sections/content-and-media/image-comparison.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.