The heading block that opens a section of a Southleft page: a mono rule carrying an index and label, an accent kicker, a heading, an optional lead, and an optional trailing link.
CODE — HTML
Guidance
The rule that opens a section inside a page: an optional ordinal, a label, the section heading, an optional dek, and an optional link out. It is the punctuation between a page's parts.
WHEN TO USE
- A page has several distinct sections and a reader needs to see where one ends and the next begins.
- The section has somewhere to go in full, an archive or a listing page, which becomes the
link-hrefandlink-labelpair.
WHEN NOT TO USE
- You need the heading band at the very top of an interior page rather than a divider between sections.USE PAGE-HERO →
- All you actually want is space between two blocks. Spacing is arrangement and belongs to the layout primitive, not to a component.USE LAYOUT →
DO
- Number sections with
indexonly when the order is meaningful; an ordinal on an unordered set implies a sequence that does not exist. - Keep
heading-tagconsistent down a page so the section headings form one flat level rather than a drifting hierarchy.
DON’T
- Do not repeat the page title as the first section heading. The band above already said it, and the repetition reads as a rendering bug.
- Do not use the dek for body copy; it is a one-line orientation, and anything longer belongs in the section itself.
ACCESSIBILITY IN PRACTICE
- The link is a real anchor with its own label, so
link-labelhas to make sense read on its own. A screen-reader user may reach it out of context in a list of links.
CONTENT GUIDELINES
- The label is the section's kind; the heading is what this particular section says. Do not collapse the two into one string.
WHERE THIS CAME FROM
libs/sl-web-components/components/section-header/section-header.tsThe component this guidance describes.
Each line above names a file and a literal string that must still appear in it.pnpm gate:guidance re-reads them from this built page, so guidance that has stopped being true fails a check rather than misleading you.
FIGMA PARITY
Code and the Figma component set matched at the last confirmed sync, and neither has changed since.
- DECIDED BY
- CONTRACT DIFF
- FIGMA SIDE
- OBSERVED
- LAST CONFIRMED SYNC
- 2026-08-28
- PUBLIC SURFACE
- 8 ATTR · 1 SLOT · 0 EVENT · 5 PART
The component’s public surface — attributes and their value sets, slots, events, CSS parts and custom properties, from the manifest — compared against the Figma set’s property definitions.
ACCESSIBILITY
Measured by axe on this documentation site’s own preview of the default story — @southleft/sl-web-components has no Storybook in the measured set.
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 1 STORIES.
INSTALL
import '@southleft/sl-web-components/components/section-header';
API — 8 PROPS
SLOTS
EVENTS
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
CSS PARTS
CSS CUSTOM PROPERTIES
SOURCE — components/section-header/section-header.ts · Molecules/Section Header