# Block reveal

### Section overview

The Block Reveal section is a dynamic content display that reveals different content blocks when a user hovers, clicks, or scrolls through a list of titles. It creates an interactive experience by seamlessly transitioning between content blocks.

#### Common use cases

* Product feature showcases where each title reveals detailed information about a specific feature
* FAQ sections where clicking on questions reveals the answers
* Step-by-step guides or processes where each step is revealed in sequence
* Portfolio showcases where different projects can be browsed through titles

#### Usage tips

* Keep title text concise for better readability, especially on mobile devices
* Ensure content blocks have similar heights for a consistent user experience
* Consider using the hover reveal option for desktop but rely on click actions for mobile
* Use complementary colors for titles and content to create visual hierarchy
* For scroll-based reveals, ensure the section has sufficient vertical space to properly trigger transitions

### Section settings

| Setting                | Description                                                                        |
| ---------------------- | ---------------------------------------------------------------------------------- |
| Enable hover reveal    | When enabled, hovering over a title will reveal its content (default: disabled)    |
| Top spacing            | Sets the padding at the top of the section (default: 100px)                        |
| Bottom spacing         | Sets the padding at the bottom of the section (default: 100px)                     |
| Color scheme           | Controls the background color of the section (default: body)                       |
| Custom color           | Sets a custom background color when custom color scheme is selected                |
| Text color             | Forces text to be light or dark, or uses the default based on the background       |
| Border color           | Controls the color of the section border (options: subtle or strong)               |
| Enable color fade      | Enables smooth color transitions as user scrolls through the section               |
| Border position        | Controls where borders appear on the section (options: none, top, bottom, or both) |
| Column width           | Sets the width of the content column as a percentage (default: 50%)                |
| Enable margin          | Applies horizontal margin from global theme settings (default: enabled)            |
| Enable swapped columns | Reverses the position of the titles and content columns (default: disabled)        |
| Visibility             | Controls whether the section appears on all devices, mobile only, or desktop only  |

### Block settings

#### Content

The Content block represents each individual item in the reveal section, consisting of a title that triggers the display of its associated content.

* Block limit: 50 blocks

| Setting                  | Description                                                                  |
| ------------------------ | ---------------------------------------------------------------------------- |
| Title                    | The title text shown in the list of clickable/hoverable items                |
| Heading                  | The heading text displayed in the content area                               |
| Content                  | Rich text content to display when this block is selected                     |
| Button label             | Text for the optional button                                                 |
| Url                      | Link destination for the button                                              |
| Image                    | Optional image to display with the content                                   |
| Show image as background | Displays the image as a background instead of inline                         |
| Video                    | Optional video to display with the content                                   |
| Enable autoplay          | Automatically plays the video when the block is revealed (default: enabled)  |
| Enable mute toggle       | Shows a mute/unmute button for videos (default: enabled)                     |
| Enable loop              | Continuously loops the video playback (default: enabled)                     |
| Minimum height           | Sets the minimum height for the content area in pixels (default: 250px)      |
| Enable padding           | Adds padding inside the content block (default: enabled)                     |
| Color scheme             | Controls the background color of the content block                           |
| Border color             | Controls the color of the content block border                               |
| Text color               | Forces text to be light or dark, or uses the default based on the background |
| Button color             | Selects from various button styles (primary, secondary, outline, etc.)       |
| Enable gradient          | Applies a gradient effect to the block background                            |
| Title size               | Controls the font size of the title in the list                              |
| Text position            | Positions text above or below media (image/video)                            |
| Vertical alignment       | Aligns content vertically (top, middle, bottom)                              |
| Horizontal alignment     | Aligns content horizontally (left, center, justify, right)                   |


---

# 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/space/sections/content-and-media/block-reveal.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.