Frame components

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.

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

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

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

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

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

<Divider />

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

A divider contributes nothing to agent text.

Catalog

Recipes

Block

Header

Section

Footer

Divider

​Block

​Header

​Section

​Footer

​Divider

Block

Header

Section

Footer

Divider