Section
Group a complete area of your page, with its own background, spacing and colour theme.
Code name: Section · Category: Layout
Registered in the live renderer. Website context and the limitations below still apply.
When to use it
Use a Section for a hero, services area or contact area. Put layout containers and content inside it so you can style the whole area together.
In the editor
- Select the section in Layers.
- Choose a theme for the whole section, or change only its background colour.
- Adjust spacing and minimum height, then check the page on a small screen.
Example
This example uses illustrative content. Media placeholders must be replaced with your own assets; data-backed blocks need the normal website context.
<Section minHeight="auto" backgroundColor="#f4f5f7">
<Container direction="column">
<Typography variant="h2">How we can help</Typography>
<Markdown>Practical advice for your next stage of growth.</Markdown>
</Container>
</Section>Behaviour and limitations
- backgroundColor overrides the background chosen by themeVariant. A background-only change should preserve the existing theme.
- themeVariant="none" inherits the base palette; it does not mean transparent.
- minHeight uses supported tokens, not arbitrary pixel values. Nested content still determines the space needed.
Property reference
Types below describe the editor controls and known choices, not every value accepted by the renderer. A renderer default is extracted from its parameter; an editor-only default does not prove the runtime default. “Not declared here” does not mean required. Preserve omitted values unless the requested edit needs them.
| Property | Editor value type | Default evidence | Guidance |
|---|---|---|---|
spacing | object | {"pt":{"xs":4,"sm":6,"md":6,"lg":9,"xl":10},"pb":{"xs":4,"sm":6,"md":6,"lg":9,"xl":10},"pl":{"xs":2,"sm":2,"md":4,"lg":8,"xl":8},"pr":{"xs":2,"sm":2,"md":4,"lg":8,"xl":8}} (renderer) | An object of spacing settings. Preserve existing responsive values when changing a single setting. |
src | string | "" (renderer) | Background Image. See the usage notes for this block. |
backgroundColor | string | Not declared here | Explicit background color override: accepts palette tokens such as "primary", "secondary", "light", "white", "black", or CSS colors such as "#ff0000" and "transparent". These are examples, not an exhaustive enum. The renderer adjusts text contrast for resolved opaque colors. Use this property for a background-only edit and preserve themeVariant and other existing props. |
minHeight | "auto", "small", "medium", "large" | "auto" (editor only) | Use one of the supported height tokens; arbitrary CSS or numeric values are not valid for this prop. |
themeVariant | string | "white" (renderer) | Section-wide palette preset, including background and text colors. The "none" token inherits the base palette; it does not make the background transparent. Use for a theme/palette change, not as a substitute for an explicit backgroundColor edit. Choose a supported renderer theme token; preserve any explicit backgroundColor unless its removal or change is requested. |
maxWidth | number | 4 (renderer) | Max Width. See the usage notes for this block. |
disablePadding | boolean | false (renderer) | Disable Padding. See the usage notes for this block. |
animationType | "none", "fade-up", "fade-down", "fade-left", "fade-right", "flip-up", "flip-down", "flip-left", "flip-right", "zoom-in", "zoom-left", "zoom-right" | "fade-up" (renderer) | Entrance animation setting. Use a supported editor value; preserve it for unrelated edits. |
sectionType | "hero", "stakes", "value", "authority", "plan", "proof", "services", "pricing", "objections", "cta", "team", "contact", "none" | "" (renderer) | Section Type. See the usage notes for this block. |
idAnchorName | string | "" (renderer) | ID (anchor). See the usage notes for this block. |
backgroundImageOpacity | number | 0.8 (renderer) | Image Color Opacity. See the usage notes for this block. |
alt | string | "background image" (renderer) | Background Image name (alt). See the usage notes for this block. |
videoSrc | See guidance | Not declared here | Background Video. See the usage notes for this block. |
screenList | string | "" (renderer) | Comma-separated device names to hide on: mobile, tablet, desktop. An empty string hides on none. |
hideElements | See guidance | Not declared here | Hide. See the usage notes for this block. |
isBlogSection | See guidance | false (renderer) | isBlogSection. See the usage notes for this block. |
enablePaddingTemplates | boolean | false (editor only) | Enable Responsive Padding. See the usage notes for this block. |
css | string | Not declared here | Custom CSS text. Preserve unrelated rules and prefer the dedicated property for supported edits. |
sectionPrompt (legacy) | string | Not declared here | Section Prompt. See the usage notes for this block. |
children | See guidance | Not declared here | Nested content between the opening and closing tags. Follow the block-specific example. |
Legacy compatibility
sectionPrompt are retained for compatibility. Preserve existing values unless the requested change requires migration; do not choose them for new content without checking the notes above.
