Section
A heading, an optional supporting line, an optional action, and the content below — spaced by one decision instead of by every caller.
The component
Sources
Every upstream layer feeding this council's fabric.
The section's own gap holds this away from the heading, so the content never sets a top margin.
Three sections, and picking the wrong one fails silently
GdSection— a section of an application PAGE. A real heading, a supporting line, spacing.GdPanelSection— a labelled block inside a SIDE PANEL. Its label is an eyebrow, not a heading, and it takeslabel— nottitle.GdDocsSection— docs chassis. It takes anidbecause the contents rail links to it.
The heading level is a prop because only the page knows
h2 is correct under a page header's h1. A section nested inside another section needs h3. A component that hardcoded one would force every consumer into a single depth or into an incorrect document outline — and the outline is what a screen-reader user navigates by, so getting it wrong is not cosmetic.
The size deliberately does not follow the element. A nested section is structurally deeper, not visually smaller, and shrinking type per level produces a page whose fourth section is unreadable.
When not to use it
When something else already names the section. A tab panel whose tab reads Status does not want a heading that also reads Status — that is two names for one thing, and the second is noise a screen reader reads aloud. Space the panel and skip the heading.