Primitive contract

Container

Centers content, applies safe logical inline gutters, and selects an evidence-backed maximum measure without preventing full-bleed composition.

Bounded page or region measure · @sanchika/primitives

Purpose and semantics

Centers content, applies safe logical inline gutters, and selects an evidence-backed maximum measure without preventing full-bleed composition.

Recommended semantic: Choose the region element that matches the content, commonly div, main, section, article, or nav.

Anatomy

root

The semantic region whose inline measure is bounded.

Finite variants and important states

Variant · width: reading, content, wide, full
Required states: default
Class hooks: .sk-container · .sk-container-width-reading · .sk-container-width-content · .sk-container-width-wide · .sk-container-width-full

Composed synthetic exemplar

Rendered state matrix

Container: 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

Container adds no keyboard behavior.
Container adds no role; the consumer chooses the correct landmark or section semantics.

Consumer owns

Choose the semantic element
Keep full-bleed content outside the bounded child instead of using negative margins

Mobile

Remains fluid
Retains safe inline gutters
Must not create horizontal overflow

Reduced motion and forced colors

No override is needed because the primitive adds no motion.

Container adds no authored color or boundary.

Compact API reference

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