Section

Overview

The Section is the standard way to group a block of related content on a page. It adds a title, a soft surface, and an optional description — giving the eye an obvious target without the heavyweight chrome of a card. Reach for it on long-form pages where a heading alone wouldn't carry enough visual separation, but a card would feel boxed-in.

Emphasis levels

Four neutral levels of presence on a 0–3 scale. Pick by how much surface the section needs to claim against its neighbours, not by colour preference. emphasis={0} is the default and the right answer most of the time — the heading and the spacing already do the grouping work.

Admin

The single accent exception: admin renders the section on background.accent.yellow.subtlest with the matching deep yellow text colour. Reserve it for surfaces only Flatpay staff see in the portal — refund overrides, internal notes, ledger adjustments. The colour announces the audience, not the tone.

Collapsible

Set collapsible to make the section a disclosure. The title becomes a role="button" with aria-expanded; the description and body collapse into a region governed by aria-controls. Use it for FAQs, advanced-options blocks, and content the user usually skips but might want to peek at.

Composition

The body is anything you want — prose, a list, a small grid, a card rail. The Section provides the framed surface and the heading; what sits inside is your call.

Anatomy

Four named parts. The container carries the surface; the title and description belong to the header; the body is opt-in.

Behavior

• 01No nesting. A Section never sits inside another Section. Two layers of titled, padded, tinted surfaces is the design-system equivalent of nested cards — read flatten the hierarchy.
• 02Sibling sections sit spacing.14 / spacing.16 apart. spacing.14 (56 px) on mobile, spacing.16 (64 px) on desktop. Apply as the top margin on each section after the first — the Tailwind shape is mt-14 md:mt-16 (or gap-14 md:gap-16 on the parent flex / grid). Don't reach for spacing.12 or spacing.20 — the page rhythm depends on this beat being constant.
• 03Heading level is an h3. Sections sit one level under the page's h2 sections — they group within a section, not above it. Don't override.
• 04Collapsible default is open. defaultOpen={true} — start expanded so the user sees the description on first paint. Pass {false} when the body is genuinely optional or rarely-needed (FAQ items, advanced settings).
• 05Description hides when collapsed. When collapsible sections are closed, only the title stays visible — the description and body live in the disclosed region together.

Accessibility

• Disclosure pattern. Collapsible sections render as a <button> with aria-expanded and aria-controls. The disclosed region is a role="region" with aria-labelledby pointing at the title.
• Keyboard: the trigger activates on Enter and Space. Tab order continues into the disclosed region when expanded.
• Color contrast.Description text sits at 60% of the foreground colour. On every surface — including the accent pastels — that pairing meets WCAG AA. Body text uses the variant's inherent foreground (mirrored from the accent token system).
• Heading semantics. The title renders as an h3. Don't skip heading levels — Section sits one level under the page's h2 blocks, never at the top of a page on its own.

Code

Import from @flatpay-dk/ui. Title is required; description and children are optional.

import { Section } from "@flatpay-dk/ui";

// Default — emphasis 0, the quietest tier
<Section
  title="Section title"
  description="Section description that explains what this group of content is for."
/>

// Outlined tile — emphasis 1, a defined object on the page
<Section
  emphasis={1}
  title="Daily settlements"
  description="Funds settle into the merchant's bank account every day."
>
  <SettlementsTable />
</Section>

// Heavier in-flow fill — emphasis 2 or 3
<Section
  emphasis={2}
  title="Advanced options"
  description="Softens the section so neighbours can take the eye."
>
  <AdvancedOptions />
</Section>

// Collapsible — disclosure that starts closed
<Section
  emphasis={1}
  collapsible
  defaultOpen={false}
  title="What's a flat rate?"
  description="A predictable percentage on every transaction."
>
  <FlatRateExplainer />
</Section>

// Admin — staff-only surface, yellow-subtlest with yellow text
<Section
  admin
  title="Refund override"
  description="Bypasses the standard 30-day window. Logs to Pulse."
>
  <RefundOverrideForm />
</Section>

Best practices

Three rules cover almost every Section decision.

Props

Related