Block-layout

Single-column container with constrained measure. The most common section primitive — wrap any content that should read at a comfortable column width, centered on the page.

Per the answered design question (container queries-first): no global @media queries. The measure is a fixed value selected via data-size; the surrounding context (a centered Section, a sidebar region) constrains naturally.

When to use

Article body, documentation page content.
A single column of stacked elements with controlled measure.
Any section that benefits from centered content.

Variants

Variant	Class / data	Use for
Default	`.block-layout`	64rem max-inline-size
Narrow	`data-size="narrow"`	40rem (~ article body)
Wide	`data-size="wide"`	80rem
Full	`data-size="full"`	No measure cap
On raised	`.-on-raised`	Raised surface background
On canvas	`.-on-canvas`	Canvas surface background

Anatomy

<section class="block-layout">
  <h1>Article title</h1>
  <p>Body content...</p>
</section>

<section class="block-layout" data-size="narrow">
  <h1>Narrower measure</h1>
  <p>For long-form prose.</p>
</section>

Tokens used

From semantic tier

--space-inset-section-m — padding
--space-gap-elements-m — child gap

Component-tier (generated)

--block-layout-measure — default max-inline-size (64rem)
--block-layout-measure-narrow — narrow size (40rem)
--block-layout-measure-wide — wide size (80rem)

Accessibility

<section> is the semantic landmark. No additional ARIA required.