Primitive

Container

Tokenized page-width wrapper with responsive inline padding.

Use Container for page and landmark width constraints. It owns max measure and inline padding, not nested layout rhythm.
layout
DOM renderImage render
ContainerDefault

Registry

Foundations, primitives, components.

Render

DOM, JPEG, and deterministic states.

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Wide product measure with standard inline padding.

Registry

Foundations, primitives, components.

Render

DOM, JPEG, and deterministic states.
Render state

Content

Reading measure for editorial content.

Content measure

Research copy stays centered and readable without each route inventing a local width class.
Render state

Full

Full-width measure that still owns edge padding.
Full measureUseful for tool stages and wide generated UI.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
asContainerElementdivSemantic wrapper element.
measure'content' | 'wide' | 'full'wideMaximum inline measure recipe.
density'compact' | 'comfortable' | 'editorial'comfortableInline padding density.
childrenReactNode-Contained page or section content.