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