Sheet section

Named wrapper for a content block inside a Sheet. Pairs uppercase heading with locked vertical rhythm.

SheetSection is the only structural wrapper you should need inside a Sheet body. Pairs an uppercase section heading 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 (heading omitted, description-only)
Section breaks between Brand Identity / Color / Typography blocks in a brand sheet

Import

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

Variants

Heading + content

<SheetSection heading="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>

Heading + description

<SheetSection
  heading="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 (sheet lead)

When heading 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 heading="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.

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 heading="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 heading="Typography">
    <Table columns={typographyCols} rows={typographyRows} />
  </SheetSection>

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

Rules

Headings are uppercase labels, not headings. They read as "this is the label for the block below."
Don't nest SheetSections. If you need sub-structure, use Field or FieldGrid inside one section.
No raw <h3> / <h4> inside a Sheet body. Use SheetSection's heading prop or Field's label prop.

Accessibility

Renders a <section> with the heading as a <h3> semantic by default.
Uppercase styling is visual only — screen readers receive the original case.

API

Prop	Type	Default
`heading`	`string`	—
`description`	`ReactNode`	—
`children`	`ReactNode`	—
`spacing`	`'md' \| 'lg'`	`'lg'`

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

Sheet — parent container
Field / FieldGrid — common content
Sheet typography — modern alternative for inline labels and values
Storybook playground

Sheet section

On this page