Section block
A full-width band with a color system, a background, padding and a region editor for its content.
On this page
The Section block is the page-level band: it carries a color system, a layout background and padding, and holds its content in a region editor.
Where it is offeredLink to this section
Offered only in the root tier, so a Section sits directly in a page body and never inside another block. Its content field uses the region editor with Columns and Card enabled (regionLexicalEditor({ withColumns: true, withCard: true })).
FieldsLink to this section
| Field | Type | Label | Default | Notes |
|---|---|---|---|---|
content | richText | Content | ||
layoutBg | radio | Background Variant | main | Required; Options: main (Main), alternative (Alternative) |
padding | number | Padding | 2 | Required |
theme | radio | Color | default | Required; Options: default (Default), dark (Dark) |
Rendered outputLink to this section
Renders the Section component with the chosen theme, layoutBackground and padding, and the region content inside it. Adjacent sections with the same theme and background read as one band.
ConverterLink to this section
sectionConverter passes theme, background and padding to Section and converts content.root.children with nodesToJSX. theme: 'inherit' omits both theme and layout background. blockName supplies the wrapper's anchor ID and accessible label.
CustomizingLink to this section
Import SectionBlock from @systhemaui/payload/blocks as the starting schema for a project block. Register the definition and your renderer through customBlocks, using type: 'block' and the editor tiers you intend to support. A distinct slug creates a new block; a converter registered under the existing section slug takes precedence over the built-in converter. Keep the fields that renderer reads, including populated relationships and nested editor states.
See Registering blocks for the configuration pattern and Converters for the renderer contract. A project converter used in client-mode live preview also needs browser registration.