Skip to content
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