Section

A screen section: a heading at the right level and an anchor that sits on the section, not on the heading.

When to use it

The screen has several parts and the reader should be able to jump between them. The section heading is what a screen reader navigates by.
Something links to the section from a table of contents. id is on the section, so the anchor lands above the heading rather than in the middle of the text.

When not to use it

You only want a bold line above a paragraph. A heading that structures nothing lies to a screen reader about the page outline — and the outline is one of the few things read blind.
It is the title of the whole screen. That is IngotPageHeader, with an <h1>.

Properties

title: ReactNode — The section heading — already translated.
children: ReactNode — The section body.
id: string — The anchor. Without it nothing can link to the section.
level: 2 | 3 — MUST match how deeply the section sits, not font size. Defaults to 2.
testId: string — data-testid of the section.