---
title: Section
description: Organize a page into named or unnamed regions.
---

A section block organizes part of a page without adding a bounded surface. It gives its
content a common heading and spacing. Use a panel when the content must read as one
bounded item.

A section has a main content region and an optional aside region. The renderer decides
if these regions appear beside each other or in sequence.

## API

```ts
section(title?: string): SectionBuilder
```

| Method           | Input                     | Result                                     |
| ---------------- | ------------------------- | ------------------------------------------ |
| `setDescription` | `string`                  | Adds supporting text under the title.      |
| `setContent`     | `Producer[]`              | Sets the main content region.              |
| `setAside`       | `Producer[]`              | Sets the secondary content region.         |
| `setFilters`     | `StateBinding<FilterBar>` | Places a filter bar in the section header. |

Calling `setContent` or `setAside` again replaces the previous content for that region.

## Basic section

Pass a title to `section` and add the main region with `setContent`.

<BacklitExample path="section/basic" view="detail" />

## Untitled section

Omit the title when the content already reads as one region without a heading.

<BacklitExample path="section/untitled" view="detail" />

## Description

Add a description when the title does not give sufficient context.

<BacklitExample path="section/description" view="detail" />

## Content

The content region accepts multiple blocks and preserves their order.

<BacklitExample path="section/content" view="detail" />

## Aside

Use `setAside` for related content that is secondary to the main region. The protocol
defines the relationship, not the screen layout.

<BacklitExample path="section/aside" view="detail" />

## Nested section

Place a section inside another section to divide a region into smaller named parts.

<BacklitExample path="section/nested" view="detail" />

## Filters

Pass the filter binding from the current view or zone. The renderer places the filter
controls in the section header.

<BacklitExample path="section/filters" view="detail" />

## All options

You can use a title, description, filters, main content, and aside content in one
section.

<BacklitExample path="section/all_options" view="detail" />

## Actions and conditions

`setActions([visitTo(...), submitTo(...)])` replaces the header controls.
Each control requires text or an icon. These blocks have no row, so supply
fixed argument values. See [Targets](/reference/targets).
`revealWhen(condition)` controls the block inside a form. It has no enable
condition. See [Form conditions](/reference/forms/conditions).