> ## Documentation Index
> Fetch the complete documentation index at: https://developers.reintersect.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Frame components

> Block, Header, Section, Footer and Divider: the outer structure of every block.

> Reintersect apps are in developer preview. Names and limits can still change before general
> release.

## Block

The root of every block view. Use it once, at the top of every view you render. It holds the required
`summary`, which Reintersect shows wherever the full block can't appear.

Every block has the same anatomy, in this order: an optional `Header`, the body, an optional
`Actions` row, and an optional `Footer`. A block can be just a header, which makes a compact status
card, but a header and footer with nothing between them is rejected.

```tsx theme={null}
<Block summary="Launch v2.4: 5 go, 1 no go">
  <Header>Launch v2.4</Header>
  <Text>Shipping Thursday if nobody objects.</Text>
  <Actions>
    <Button label="Ship it" action={actions.ship} />
  </Actions>
  <Footer>
    <Text>
      Updated <Time datetime={updatedAt} format="relative" />
    </Text>
  </Footer>
</Block>
```

| Prop | Type | Required | Description |
| - | - | - | - |
| `summary` | `string` | Yes | Plain text with visible characters, at most 280. Used in notifications, Slack peers of connected circles, search and as the agent's fallback text. |
| `children` | JSX | No | The block's content, in anatomy order. |

Every block also shows a quiet attribution line with your app's icon and name. You can't remove or
restyle it. Blocks from a development install also carry a "Dev" label.

## Header

The title row of a block. Use it to name what the block is about. The children are the title, and
`leading` and `trailing` hold one small piece of content before and after it.

```tsx theme={null}
<Header
  href="https://vercel.com/acme/web/dpl_123"
  leading={<Icon name="rocket" />}
  trailing={<Status state="running" label="Building" />}
>
  web: Production deployment
</Header>
```

| Prop | Type | Required | Description |
| - | - | - | - |
| `children` | JSX | Yes | The title, up to 80 characters of plain text or inline content. It wraps to two lines. |
| `href` | `string` | No | An `https://` URL. The title becomes a link, so the title itself can't hold links. |
| `leading` | JSX | No | One `Icon`, `Person` or `Status`, drawn as a single glyph: a person shows their avatar and a status shows its state glyph, each with its name for screen readers. |
| `trailing` | JSX | No | One `Time`, `Status`, `Badge` or `Duration`, or plain text of up to 24 characters. |

Agent text puts the leading content, title and trailing content on one line.

## Section

A group of content with an optional title. Use it to group related content, or to keep detail
collapsed until a viewer opens it. With a handle, a `Button type="toggle"` can open and close it.

Sections sit at the block, tab or form level, one deep: a section can't hold another section. A
section can hold `Columns`, `Tabs` and a `Form`, but not an `Actions` row, so its buttons go in the
block's root `Actions`.

```tsx theme={null}
<Section handle={sections.history} title="History" collapsed>
  <Steps>
    <Step label="Built" state="success" />
    <Step label="Promoted to staging" state="success" />
    <Step label="Promote to production" state="queued" />
  </Steps>
</Section>
```

| Prop | Type | Required | Description |
| - | - | - | - |
| `children` | JSX | Yes | The section's content. |
| `title` | `string` | No | Up to 60 characters, shown above the content. Collapsed sections show only this row. |
| `handle` | `SectionHandle` | No | From `sections` in the render context. Needed for a toggle button to open it. |
| `collapsed` | `boolean` | No | Start collapsed. A collapsed section needs a `title` or a toggle button that targets its handle, so viewers can open it. |
| `audience` | `Audience` | No | Limit who sees the section. See [Audience](/blocks/audience-and-lifecycle#audience). |

Reintersect puts group spacing around a section, so it needs no divider. Each viewer's open or
closed state is local to their browser. Read-only views keep a collapsed section collapsed. Agent
text starts with the title, followed by the content, including collapsed content. See
[Sections and forms](/blocks/sections-and-forms).

## Footer

A quiet line at the bottom of a block. Use it for secondary details, such as when the data was last
synced. It holds one `Text` of up to 120 characters or one `MetaList`, and Reintersect draws either
in its quiet meta style. The attribution line Reintersect adds comes after it.

```tsx theme={null}
<Footer>
  <Text>
    Synced <Time datetime={syncedAt} format="relative" />
  </Text>
</Footer>
```

| Prop | Type | Required | Description |
| - | - | - | - |
| `children` | JSX | Yes | One `Text` or one `MetaList`. |

## Divider

A horizontal rule. Use it to separate groups of content that mean different things. Reintersect
draws a divider only between two siblings: one at the start or end of a container, or next to
another divider, is skipped.

```tsx theme={null}
<Divider />
```

| Prop | Type | Required | Description |
| - | - | - | - |
| `audience` | `Audience` | No | Limit who sees the divider. |

A divider contributes nothing to agent text.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.