---
title: "Section block"
description: "A full-width band with a color system, a background, padding and a region editor for its content."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/payload/blocks/section
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/llms.txt
---
> This page isn't translated yet. Showing English.


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.

![The section block fields in the Payload editor](./images/section.light.webp)

## Where it is offered

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 })`).

## Fields

<!-- generated:block-fields 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)         |

<!-- /generated -->

## Rendered output

Renders the [Section component](https://docs.systhema.app/ar/components/section.md) 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.

## Converter

`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.

## Customizing

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](https://docs.systhema.app/ar/payload/blocks.md#registering-blocks) for the configuration pattern and [Converters](https://docs.systhema.app/ar/payload/custom-blocks/converters.md) for the renderer contract. A project converter used in client-mode live preview also needs [browser registration](https://docs.systhema.app/ar/payload/frontend/live-preview/client-mode.md).

## Related

- [Section component](https://docs.systhema.app/ar/components/section.md)
- [Editor tiers](https://docs.systhema.app/ar/payload/editor/tiers.md)
- [Theme and background fields](https://docs.systhema.app/ar/payload/editor/field-patterns.md#theme--background-fields)