A layout control for visually grouping and aligning content within a responsive container.
Supports backgrounds (images, gradients, colors), parallax scrolling, padding control, and full-height layouts.
Key features:
- Responsive container sizing</li>
- Background images with parallax, blur, and wash effects</li>
- Full-height sections with vertical centering</li>
- Flexible padding control on all sides</li>
- Email-compatible rendering with table-based layout</li>
- Nesting support for complex layouts</li>
Container sizes and full-height behavior can be customized via
<templates:styles> in the theme's
<head>.
- `bgColor`
string
Background Color
Sets the section's background color.
Accepts any valid CSS color format (hex, rgb, rgba, named colors, CSS variables).
The background color is rendered in a separate layer beneath the background image, allowing blur effects to blend naturally instead of showing white.
Default: null (transparent/inherited)
- `bgImage`
string
Background Image
Sets the section's background image using a URL or media path.
Supports both external URLs (including Unsplash) and internal media uploads.
Behavior:
- Unsplash images are automatically optimized (max 1900px width, quality 80)
- Internal media is resized to 1900px width (1400px if blur is applied)
- Works with BgPosition, BgSize, BgParallax, and BgImageBlur
- Can be layered with BgColor and BgWashColor
Note: Mutually exclusive with
BgGradient - only one can be used as both apply
background-image.
If both are set,
BgImage will override
BgGradient.
Default: Empty (no background image)
- `bgImageBlur`
string
Background Image Blur
Applies a blur filter to the background image, specified in pixels.
Creates a frosted glass or depth-of-field effect.
Behavior:
- Value is applied as --section-background-blur CSS variable
- When blur > 0, background image is resized to max 1400px (vs 1900px) for performance
- Blur blends with BgColor layer instead of white background
- Common values: 0 (none), 5-10 (subtle), 20+ (heavy)
Default:
0 (no blur)
- `bgParallax`
boolean
Background Parallax
Enables parallax scrolling effect for the background image.
When enabled, the background moves at a different speed than the content during scroll, creating a depth effect.
Behavior:
- Parallax speed is controlled by BgParallaxSpeed
- Only applies to background images, not gradients or colors
- Not supported in email rendering
Default:
false (no parallax effect)
- `bgParallaxSpeed`
int
Background Parallax Speed
Controls the speed of the parallax scrolling effect as a percentage.
Only applies when
BgParallax is enabled.
Value interpretation:
- Lower values (e.g. 10-20) - Subtle parallax effect
- Medium values (e.g. 30-50) - Moderate parallax effect
- Higher values (e.g. 60-100) - Dramatic parallax effect
Default:
30
- `bgPosition`
string
Background Position
Controls where the background image is positioned within the section.
Accepts any valid CSS
background-position value.
Common values:
- center - Centered horizontally and vertically
- top, bottom, left, right - Edge alignment
- top left, bottom right, etc. - Corner alignment
- Percentage values like 50% 75%
- Pixel values like 10px 20px
Default:
center
- `bgSize`
string
Background Size
Controls how the background image is sized within the section.
Accepts any valid CSS
background-size value.
Common values:
- cover - Image covers entire section (may crop)
- contain - Image fits within section (may show gaps)
- auto - Image displays at original size
- Specific dimensions like 100px 200px or 50% auto
Default:
cover
- `bgWashColor`
string
Background Wash Color
Applies a semi-transparent color overlay on top of the background image.
Accepts any valid CSS color format (hex, rgb, rgba, named colors, CSS variables).
Used to darken or tint background images for improved text readability.
The opacity is controlled separately via
BgWashOpacity.
Common use cases:
- Dark wash (#000000) to improve light text contrast
- Light wash (#ffffff) to improve dark text contrast
- Brand color tint to unify image with design theme
Default: Empty (no wash overlay)
Note: Not supported in email rendering
- `bgWashOpacity`
string
Background Wash Opacity
Controls the opacity of the
BgWashColor overlay as a percentage (0-100).
Only applies when
BgWashColor is set.
Value interpretation:
- 0 - Fully transparent (no wash visible)
- 25-50 - Subtle tint, image still prominent
- 50-75 - Moderate overlay, balanced effect
- 75-100 - Heavy overlay, image mostly obscured
The value is converted to CSS opacity (divided by 100).
Default:
0 (no opacity)
- `contentSize`
string
Content Size
Controls the maximum width of the content container within the section.
Available sizes:
- sm - Small container (narrow content, ideal for text-heavy layouts)
- md - Medium container (balanced width for most content)
- lg - Large container (wide content, ideal for grids and media)
Default:
md
- `fullHeight`
bool
Full Height
Makes the section span at minimum the full viewport height.
Content within the section is automatically centered vertically.
Behavior:
- Adds .s8-templates-section-fullheight class to the section
- Section will be at least 100vh tall, but can grow if content exceeds viewport height
- Ideal for hero sections, landing pages, or splash screens
- Works in combination with all background and padding attributes
The full-height behavior can be customized via
<templates:styles>.
Default:
false (height determined by content)
- `height`
string
Height
Sets the height of the element. The default units are pixels. include the percentage symbol % to user percentage values.
- `id`
string
(Required) Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `paddingBottom`
string
Padding Bottom
Sets the bottom padding of the content container.
Accepts any valid CSS length value (px, rem, em, %, etc.).
In email rendering, rem values are automatically converted to px (1rem = 16px) for Outlook compatibility.
Default: 4rem
- `paddingLeft`
string
Padding Left
Sets the left padding of the content container.
Accepts any valid CSS length value (px, rem, em, %, etc.).
Behavior:
- Values > 15px add .s8-templates-section-content-paddingleft class
- Values > 150px add .s8-templates-section-content-paddingleft-lg class
- In email rendering, rem values are converted to px for Outlook
Default:
1rem
- `paddingRight`
string
Padding Right
Sets the right padding of the content container.
Accepts any valid CSS length value (px, rem, em, %, etc.).
Behavior:
- Values > 15px add .s8-templates-section-content-paddingright class
- Values > 150px add .s8-templates-section-content-paddingright-lg class
- In email rendering, rem values are converted to px for Outlook
Default:
1rem
- `paddingTop`
string
Padding Top
Sets the top padding of the content container.
Accepts any valid CSS length value (px, rem, em, %, etc.).
In email rendering, rem values are automatically converted to px (1rem = 16px) for Outlook compatibility.
Default: 4rem
- `width`
string
Width
Sets the width of the element. The default units are pixels. include the percentage symbol % to user percentage values.
- `bggradient`
string
Background Gradient
Applies a CSS gradient as the section's background.
Accepts any valid CSS gradient syntax (linear-gradient, radial-gradient, etc.).
The gradient is applied via background-image and will layer over BgColor if both are set.
Note: Mutually exclusive with BgImage - only one can be used as both apply background-image.
If both are set, BgImage will override BgGradient.
Default: Empty (no gradient)
