# Blank section

### Section overview

The Section component is Slab's general-purpose section container. It supports theme and app blocks, optional full-section linking, background media, and shared spacing, color, and display controls.

#### Common use cases

* Building custom page sections without creating a specialized section file.
* Grouping multiple theme or app blocks inside one configurable wrapper.
* Making an entire section clickable with a single URL setting.
* Applying reusable spacing and visibility behavior across many templates.

#### Usage tips

* Use this section when no specialized template section is required.
* Set a section URL only when every child element should share the same destination.
* Keep spacing and minimum height values consistent with surrounding sections.
* Test hide-on-scroll and overlap behaviors on both desktop and mobile.

### Section settings

| Setting                          | Description                                                 |
| -------------------------------- | ----------------------------------------------------------- |
| URL                              | Optional link for the entire section wrapper.               |
| Enable background image or video | Turns on background media rendering for the section.        |
| Image background desktop         | Background image used on desktop.                           |
| Image background mobile          | Optional background image override for mobile.              |
| Video background                 | Optional background video source.                           |
| Show video on mobile             | Enables background video playback on mobile devices.        |
| Show entire image                | Displays full image rather than cropping to fill.           |
| Top spacing                      | Adds top padding to the section container.                  |
| Bottom spacing                   | Adds bottom padding to the section container.               |
| Minimum height                   | Sets a minimum section height.                              |
| Gap size                         | Controls spacing between child layout elements.             |
| Color scheme                     | Sets section background and text color treatment.           |
| Color border                     | Sets section border color style.                            |
| Border position                  | Controls where borders appear.                              |
| Vertical alignment               | Aligns content vertically within the section.               |
| Enable margin                    | Applies global horizontal margin settings.                  |
| Show above                       | Raises section stacking order above neighboring sections.   |
| Enable hide on scroll            | Collapses section after scroll state is triggered.          |
| Enable header overlap            | Allows section to overlap the header when enabled globally. |
| Scroll snap align                | Applies scroll snap alignment when enabled globally.        |
| Visibility                       | Controls device visibility (all, mobile, or desktop).       |

#### Show advanced settings

The section includes **Show advanced settings** (checkbox, default off). When enabled, the theme editor shows additional controls: **Enable mobile margin**, **Mobile margin** (when **Enable mobile margin** is on), **Enable hide on scroll**, **Show above**, and the **Display** group with **Visibility** for the whole section.

### Block settings

This section supports both theme and app blocks:

* `@theme`
* `@app`