Sheet section

Named wrapper for a content block inside a Sheet. Pairs a section title with locked vertical rhythm.

SheetSection is the only structural wrapper you should need inside a Sheet body. Pairs a section title with content and locks the spacing between sections. Replaces the ad-hoc flex-column + raw <h3> + detail.sectionHeading patterns.

Use it for

Each logical grouping of fields inside a Sheet body
Lead paragraphs at the top of a sheet (title omitted, description-only)
Section breaks between Brand Identity / Color / Typography blocks in a brand sheet

Import

import { SheetSection } from '@brikdesigns/bds';

Variants

Title + content

<SheetSection title="Color Primitives">
  <FieldGrid columns={4}>
    <Field label="Gold">#c49a2f</Field>
    <Field label="Gray">#b0b0b0</Field>
    <Field label="White">#ffffff</Field>
    <Field label="Black">#000000</Field>
  </FieldGrid>
</SheetSection>

Title + description

<SheetSection
  title="Brand Voice"
  description="Confident, direct, occasionally playful. Never corporate."
>
  <Field label="Approved CTAs">
    <BulletList items={['Book a consultation', 'Start your project']} />
  </Field>
</SheetSection>

Description-only

When title is omitted, the section renders as an intro paragraph. Use as the first SheetSection inside a sheet to introduce the content.

<SheetSection description="Birdwell & Mutlak presents a bold, editorial identity grounded in legal-industry trust signals." />

Empty shell

children is optional. Use to reserve a slot when content is loading or conditionally rendered.

<SheetSection title="Activity" spacing="md">
  {activity.length ? <ActivityList items={activity} /> : <EmptyState title="No activity yet" />}
</SheetSection>

Spacing

spacing="md" for tighter rhythm in dense sheets; spacing="lg" (default) elsewhere.

Nested sections and the size ramp

titleAs drives both the rendered element and its visual size — h2/h3/h4 → --heading-md/--heading-sm/--heading-tiny. An h3 super-group can wrap h4 sub-groups so the nesting reads as a visible hierarchy, not just a DOM-level change.

<SheetSection title="Color Primitives" titleAs="h3">
  <SheetSection title="Light Mode" titleAs="h4">
    ...
  </SheetSection>
  <SheetSection title="Dark Mode" titleAs="h4">
    ...
  </SheetSection>
</SheetSection>

Pattern: full sheet layout

The canonical "Brand Identity" sheet — lead description followed by named sections.

<Sheet title="Brand Identity">
  <SheetSection description="Birdwell & Mutlak presents a bold, editorial identity..." />

  <SheetSection title="Color Primitives">
    <FieldGrid columns={4}>
      <Field label="Gold">#c49a2f</Field>
      <Field label="Gray">#b0b0b0</Field>
      <Field label="White">#ffffff</Field>
      <Field label="Black">#000000</Field>
    </FieldGrid>
  </SheetSection>

  <SheetSection title="Typography">
    <Table columns={typographyCols} rows={typographyRows} />
  </SheetSection>

  <SheetSection title="Mode Recommendations">
    <Field label="Spacing">Comfortable</Field>
    <Field label="Density">Relaxed</Field>
  </SheetSection>
</Sheet>

Rules

title is a real heading, not an uppercase label. Default <h3> keeps the Sheet's own <h2> title as the outline root; use titleAs="h4" for a sub-group nested under another SheetSection.
No raw <h3> / <h4> inside a Sheet body. Use SheetSection's title prop or Field's label prop.

Accessibility

Renders a <section> with the title as an <h3> semantic by default.

API

Prop	Type	Default
`title`	`string`	—
`heading`	`string`	—
`titleAs`	`'h2' \| 'h3' \| 'h4'`	`'h3'`
`headingLevel`	`'h2' \| 'h3' \| 'h4'`	—
`description`	`ReactNode`	—
`children`	`ReactNode`	—
`spacing`	`'md' \| 'lg'`	`'lg'`

heading / headingLevel are @deprecated — renamed title / titleAs; title/titleAs win when both are passed.

Plus standard <section> HTML attributes (excluding title).

Sheet — parent container
Field / FieldGrid — common content
Field — locked label/value primitive for inline labels and values
Storybook playground

Sheet section

On this page