Primitive

PageSection

Page-level rhythm primitive for hero, chapter, and standard content bands.

Use PageSection when a page needs full-width rhythm or a generic texture ground before composing Container and other layout primitives inside it.
layout
DOM renderImage render
PageSectionDefault

Registry band

PageSection owns rhythm before content chooses its own layout.

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

Standard page band for registry and catalog content.

Registry band

PageSection owns rhythm before content chooses its own layout.
Render state

Hero

Hero rhythm with a quiet field ground.

Concrete ships AI-native software.

The texture is structural and token-backed.
Render state

Inverse

Inverse depth band for agent and developer chapters.

Interface contract

Use inverse page sections sparingly for high-signal chapters.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
rhythm'standard' | 'hero' | 'chapter'-Section spacing and minimum block rhythm.
ground'plain' | 'field' | 'perspective' | 'depth'-Optional foundation-backed texture ground.
intent'default' | 'inverse'-Foreground and background intent.
separatedboolean-Adds a token-backed boundary after the section.
childrenReactNode-Page section content.