Section block

The heading that groups content inside a record or a settings screen. Two levels and no third: block (--h2) is the group, sec (--h3) is the section inside it — and only sec may carry a count. CSS apps/web/src/ds/section-block.css, React apps/web/src/components/SectionBlock.tsx (app-side). Headings are sentence case; no capitals anywhere (AD 19 Jul 2026).

When to use

  • Grouping fields, lists or cards inside a record, a settings page or a detail screen.
  • Anywhere a heading needs an action ("Přidat") or a count next to it.

When not to use

  • The bar above the whole screen — that is Section top bar.
  • A tab strip; a section is content, not navigation.
  • A third level of nesting: two levels are the floor plan.

Anatomy

  • Wrapper .sb-block or .sb-sec; blocks are separated by --sp-6.
  • Header .sb-h: title .t, count .cnt (sec only), collapse caret .caret, then actions. No icon in front of the title (AD 18 Sep 2026, ACRM-359): a heading is a word, the hierarchy comes from weight and colour; the icon slot in .sb-h stays empty on every record detail (meeting, project, deal, person…).
  • Action .a — a silent text link; several actions go into .sb-acts. The gear variant .sb-cfg is hidden until the header is hovered or focused. On a phone the gear is not drawn at all (a rare action should not sit on every section): LayoutMenu registers itself instead (layout-menu-store) and the page's ⋮ (RecordActionsMenu) offers „Rozložení sekcí" before its destructive group, opening a sheet of checked rows that toggle exactly like the gear (AD 28 Sep 2026, acrm !4111).
  • Collapsed preview .sb-peek shows what is inside without opening it.
  • headless keeps the block's rhythm without a heading.

Reading column — .sb-flow / .sb-full

For a detail whose content is read, not scanned as a grid — a document, a summary, a transcript — the section's blocks sit in a centred column instead of running the panel's full width (owner 26 Sep 2026, acrm !3998). .sb-flow on the block's container centres every child at max-width: calc(var(--sp-7) * 20) (800px) and spaces .sb-block children by --sp-6 + --sp-3 (32px, instead of the plain --sb-block rhythm). .sb-full marks a child that must keep the panel's full width — a control, not text (a player, a filter row) — and opts it back out of the centred measure.

Shipped on: project detail's own tab body and its Schůzky (meetings) tab (ProjectDetailPage.tsx, ProjectMeetingsTab.tsx — the tab returns bare content, the .sb-flow wrapper is drawn once by the page so it is never doubled), and the meeting detail's Minutes and Transcript tabs (SummaryTab.tsx, TranscriptTab.tsx; the transcript player and its sticky bar carry .sb-full since they are controls, not prose). Not on person, company or deal cards (P443, owner's explicit call 26 Sep 2026 — those stay full width) and not on the task detail's document body: UkolDetailPage.tsx deliberately omits .prj-content/.sb-flow on main — the task document (.tdl-doc, apps/web/src/ds/task-detail.css) measures and rhythms its own sections, so applying .sb-flow there would be a second, conflicting reading-column rule. The task detail's own error EmptyState was also stripped of .sb-flow for the same reason (review !3998) — an error block has no blocks to space.

Best practices

Do

  • Use sec inside block, never the other way round.
  • Show a count only where the number tells the user something (Schůzky 4), not on every section.
  • Keep the action a quiet text link; a section heading is not a place for a filled button.
  • Let an empty section say so in its body rather than disappearing — the heading tells the user the slot exists.

Don't

  • Capitals in headings.
  • An icon in front of the heading (Shrnutí, Rozhodnutí, Úkoly — never ✓ Rozhodnutí). Icons belong to rows and actions, not to section titles; the same applies to every detail screen (meeting, project, deal, person).
  • A third heading level; if the content needs one, the screen needs restructuring.
  • A count on a block.
  • A collapsible header where the content is one line — folding costs more than it saves.

Content

  • Titles are nouns in sentence case (Kontaktní údaje, Otevřené obchody).
  • Actions are verbs (Přidat, Skladba).
  • section-top-bar — the screen's bar, not this.
  • stat-tile, item-list, task-list — what usually sits inside.
  • Stories: components--section-block--default, --variants, --states, --composition.

Source: docs/section-block/section-block.usage.md · GitLab