Primitive contract

Section

Creates finite section-level block rhythm and an optional structural boundary without child-margin hacks.

Vertical rhythm region · @sanchika/primitives

Purpose and semantics

Creates finite section-level block rhythm and an optional structural boundary without child-margin hacks.

Recommended semantic: Prefer section only when it has an accessible heading; otherwise use div, header, footer, or the appropriate landmark.

Anatomy

root

The structural region.

heading

Optional heading that labels a semantic section.

Finite variants and important states

Variant · space: sm, md, lg
Variant · boundary: none, bordered
Required states: default
Class hooks: .sk-section · .sk-section-space-sm · .sk-section-space-md · .sk-section-space-lg · .sk-section-bordered

Composed synthetic exemplar

Rendered state matrix

Section: 1 required state

Each specimen starts from the package-owned example and contract state inventory. Simulated pointer and focus frames are labelled; consumers still verify real interaction in context.

defaultSettled and available for its documented job.

…

Accessibility and consumer responsibility

Keyboard and screen reader

Section adds no keyboard behavior.
Do not create an unnamed section landmark
Keep heading levels logical

Consumer owns

Choose the correct landmark or neutral element
Provide a visible heading for semantic section elements

Mobile

Token-driven block rhythm remains intentional without arbitrary mobile overrides.

Reduced motion and forced colors

No override is needed because the primitive adds no motion.

The optional structural boundary remains visible with system CanvasText.

Compact API reference

Package: @sanchika/primitives
CSS: @sanchika/primitives/styles.css
Contract: primitiveSpecs.find((contract) => contract.name === "Section")
Primary class: .sk-section