layout · Normal DOM + Twenty Remote DOM

Section

Uppercase section title + bordered content area. Hierarchy level below PanelHeader.

Breaks a Modal body or panel into labelled chunks ("Company", "Deal", "Line items"). The title row sits OUTSIDE the bordered card and accepts an optional actions cluster on the right. Replaces the SectionTitle + Box border="light" pattern that repeated four times in the DocumentHub CRM-snapshot view.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Section } from '@8maverik8/twenty-design';

Examples

Basic — title + meta items

Company
NameAcme Manufacturing Ltd.
Address14 Harcourt Road, Dublin D02 X285, Ireland
tsx
<Section title="Company">
  <MetaItem orientation="row" icon={<IconBuilding size={14} />} label="Name">Acme Manufacturing Ltd.</MetaItem>
  <MetaItem orientation="row" icon={<IconBuilding size={14} />} label="Address">14 Harcourt Road, Dublin D02 X285, Ireland</MetaItem>
</Section>

With actions on the right

Deal
PeriodApr 2025 – Mar 2026 · 12 months
CurrencyEUR
Discount10%
OwnerMarta Lindgren
tsx
<Section title="Deal" actions={<Button size="sm" variant="tertiary">Edit</Button>}>
  …
</Section>

Stacked sections — typical Modal body

How DocumentHub renders the CRM snapshot: stack with gap="5", each chunk titled, bordered.

Company
NameAcme Manufacturing Ltd.
Deal
CurrencyEUR
tsx
<Stack gap="5">
  <Section title="Company">…</Section>
  <Section title="Deal">…</Section>
  <Section title="Line items" padding="0">…</Section>
</Stack>

Variants

bordered
truedefaultWraps children in a bordered card with padding.
falseTitle only — children render flush.
padding
"0"No padding (for table/list slots that own their own padding).
"2"Tight (sp2).
"3"defaultDefault (sp3).
"4"Loose (sp4).

Guidelines

✓
Use Section for meta groups inside a Modal or read-only snapshot.The title strip + bordered box read as one labelled chunk and stack cleanly in a Stack gap="5".
✓
Set padding="0" when the child is a table or a list that should sit flush against the border.Tables paint their own padding; doubling it leaves an awkward inner gap.
✕
Use Section as the top-level header of a panel.That role belongs to PanelHeader (sm, semibold, primary). Section is the subordinate label.