Skip to content
Nexus Application Design nadesign

ContentSection

<ContentSection> is a titled body section — heading + optional description + optional right-aligned actions, with the section content below. Use as the structural unit inside PageContent.

import from "@na/ui/components/ContentSection" ▶ Open in Storybook packages/ui/src/components/ContentSection.tsx

When to use

  • Any titled chunk inside <PageContent> — System variables, Tools, Members, Activity.
  • The default “section” wrapper before reaching for Card or CollapsibleSection.

Don’t use ContentSection for: the page-level title (PageHeader / DetailPageBar), settings rows (ToggleRow etc.), or a section that needs its own collapse state (CollapsibleSection).

Default

System variables

Read-only environment variables.
(table or list goes here)
 
<ContentSection
  title="System variables"
  description="Read-only environment variables."
  actions={<Button size="sm" variant="outline">Manage</Button>}
>
  <Table>…</Table>
</ContentSection>

API

Prop Type Default Description
title string — Renders as <H3>.
description string — Optional muted helper paragraph.
actions ReactNode — Right-aligned actions next to the title (one or two Buttons).
children ReactNode — Section body.
className string — Forwarded.

Design guidelines

✓ Do

  • Order children by what the user wants to see first — typically the data, then the meta.
  • Use a single primary action in the actions slot, secondary as outline variant.
  • Stack ContentSections vertically inside PageContent. The spacing comes from the wrapper.

✗ Don't

  • Add a border or shadow. Borders belong on Cards; sections are just spacing + heading.
  • Render an H1 or H2 inside the body — the H3 in the header is the section heading.
  • Pad ContentSection with custom margins. Let PageContent's spacing rhythm work.

Accessibility

  • Title renders as <H3> — semantic heading hierarchy.
  • Description is a <p> linked visually to the heading.

▶ Open ContentSection stories in Storybook