CONTENT DISPLAY

Section heading

Draft

A typographic heading used to label and separate sections of content within a page or panel.

Usage

Account settings

Common alternative names

Section title, Group header, Subheader

---

Anatomy

A section heading consists of a heading label, an optional sub heading, and an optional trailing content slot that supports multiple configurations.

Heading
(Required)

Sub heading
(Optional)

Section title

Supporting description text

Trailing content
(Optional)

Trailing content

Section title

Supporting text

None

No trailing content displayed.

Section title

Supporting text

Text button

A tertiary text button for in-context actions.

Section title

Supporting text

Icon button

A single icon button for compact actions.

Section title

Supporting text

Value

Detail

Label + paragraph

A label with supporting paragraph for displaying metadata.

Usage guidelines coming soon.

Specs

Specs coming soon.

Content

Content guidelines coming soon.

Status & changelog

Status & changelog coming soon.

Code

---

Usage

import { SectionHeading } from '@arch-ui/components';

<SectionHeading>Account settings</SectionHeading>

With description

<SectionHeading description="Manage your personal information and preferences">
  Profile
</SectionHeading>

---

With end action

<SectionHeading endEnhancer={<Button kind="tertiary" size="compact">Edit</Button>}>
  Notifications
</SectionHeading>

---

Heading levels

Adjust the semantic heading level to match your document outline.

<SectionHeading as="h2">Top-level section</SectionHeading>
<SectionHeading as="h3">Nested subsection</SectionHeading>

---

Expected props

Prop	Type	Default	Description
children	ReactNode	required	Heading text content.
description	ReactNode	--	Supporting text rendered below the heading.
endEnhancer	ReactNode	--	Action or content aligned to the right.
as	'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'	'h3'	Semantic heading level.
className	string	--	Additional CSS class names.

---

Accessibility

• Renders a semantic heading element (<h2>, <h3>, etc.) so screen readers can navigate by heading level.
• Avoid skipping heading levels in the document outline (e.g. jumping from h2 to h4).
• If the section heading includes an action via endEnhancer, ensure the action itself is focusable and labelled.