Section

The Section block wraps a group of content blocks in a full-width background band. It bleeds edge-to-edge regardless of the document's content width, while the blocks inside remain constrained to a configurable inner content width. Use it to create visual separation between page zones — hero areas, feature bands, CTA strips, and footers.

What it is

A Section is a layout container, not a content block. It has no editable text of its own. Instead, it holds other blocks — paragraphs, headings, images, carousels, and so on — and controls the visual environment those blocks live in: the background color or gradient, vertical spacing, grid lines, and inner content width.

On the published page, the Section stretches full-viewport-width using negative margin offsets (margin-left: calc(-50vw + 50%)), so it always bleeds to the browser edge regardless of how narrow the document content column is.

Adding a Section block

When added, the Section appears as a dashed-border control bar in the editor. Blocks placed inside the section (using the Add block to section button that appears at the bottom of the section) become children of that section and inherit its background.

The control bar

In the editor, the Section renders as a thin control bar with a Layout icon, the label “Section”, an expand/collapse toggle, and a delete button. The full background preview only shows once the section has child blocks inside it.

Background

The section background is controlled by Background mode — three options that determine how the background color fills the band:

Solid

A flat, single color. Choose from 6 preset swatches (transparent, white, light gray, dark gray, near-black, black) or use the custom color picker for any color. Transparent renders no background — the page background shows through.

Gradient

A two-color linear gradient. Set the From and To colors using the color pickers, then choose an angle: 0°, 45°, 90°, 135°, or 180°.

Fade

A gradient from a color to transparent — fading into the page background. Choose the direction: Top (transparent at top, solid at bottom), Bottom (solid at top, transparent at bottom), or Both (solid in the middle, transparent at both edges).

Image

Uploads or links an image as the section background. The image is rendered as a CSS background-image and fills the section according to the size setting. An optional color overlay sits between the image and the content.

Section height

By default the section height is Auto — it grows to fit its child blocks. When using an image background you often want a fixed height independent of content. Four viewport-relative presets are available plus a custom pixel value:

Grid lines

Grid lines draw thin structural lines over the section background. They use the section's theme (light sections get dark lines, dark sections get light lines) and are purely decorative — they don't affect layout.

Grid columns

When Grid lines is set to Grid, a column picker appears with four options: 4, 6, 8, or 12 columns. The columns divide the inner content width evenly using calc(100% / N). Default is 8 columns.

Spacing

Padding

Vertical padding inside the section — the space between the section's top/bottom borders and the first/last child block. Four levels, each a fluid clamp() that scales with viewport width rather than a fixed pixel value — the number shown is the value at large viewport widths:

Margin

Vertical margin outside the section — the gap between the section band and the blocks above and below it on the page. Four levels, also fluid clamp() values rather than fixed pixels:

Content width

While the section background always bleeds edge-to-edge, the blocks inside are constrained by independent left and right insets, stored as a percentage of the section's width (not pixels — this keeps the proportions correct at any screen size). Three presets set both sides symmetrically; editing either inset input directly switches to a custom (unlabeled) state automatically.

Sections inside column layouts

Sections can be placed inside a two-column layout (a row block). When a section occupies one column in a row, it fills the full height of that column rather than the full page width. This lets you create asymmetric layouts — a dark section on the left, a light section on the right, for example.

In this case, the section does not bleed full-width — it fills its column only. Grid lines and padding still apply within that column area.

Publishing behaviour

On the published page, the section is rendered by the BlockRenderer server component as a <div> with the computed background, padding, margin, and grid line styles applied inline. The inner content div is centered with margin: auto and constrained by the content width setting.

• The background (solid, gradient, or fade) is applied as a CSS background property on the outer full-width div.
• Grid lines are applied using CSS backgroundImage with repeating-linear-gradient, layered over the main background.
• The inner content area renders child blocks inside a position: relative; z-index: 1 wrapper so they sit above the grid lines.
• Deleting a section server-side (via the × button) re-inserts all child blocks at the section's original position in the document.

Settings reference