Region rhythm
Stable Available in release assets
Apply consistent theme-driven block spacing to major authored page regions without coupling spacing to viewport breakpoints.
Region rhythm primary example
<main>
<section class="thin-region-rhythm" aria-labelledby="region-one">
<div class="thin-container">
<h1 id="region-one">Primary region</h1>
<p>Theme spacing creates consistent section rhythm.</p>
</div>
</section>
<section class="thin-region-rhythm" data-density="compact" aria-labelledby="region-two">
<div class="thin-container">
<h2 id="region-two">Compact supporting region</h2>
<p>Compact density is explicit and still content-driven.</p>
</div>
</section>
</main>Show code
<main>
<section class="thin-region-rhythm" aria-labelledby="region-one">
<div class="thin-container">
<h1 id="region-one">Primary region</h1>
<p>Theme spacing creates consistent section rhythm.</p>
</div>
</section>
<section class="thin-region-rhythm" data-density="compact" aria-labelledby="region-two">
<div class="thin-container">
<h2 id="region-two">Compact supporting region</h2>
<p>Compact density is explicit and still content-driven.</p>
</div>
</section>
</main>Variant gallery
Each authored example uses the production assets and includes copyable markup.
Default rhythm
Adjacent regions receive theme-driven block spacing.
<main>
<section class="thin-region-rhythm" aria-labelledby="region-one">
<div class="thin-container">
<h1 id="region-one">Primary region</h1>
<p>Theme spacing creates consistent section rhythm.</p>
</div>
</section>
<section class="thin-region-rhythm" aria-labelledby="region-two">
<div class="thin-container">
<h2 id="region-two">Supporting region</h2>
<p>Adjacent regions keep predictable spacing.</p>
</div>
</section>
</main>Show code
<main>
<section class="thin-region-rhythm" aria-labelledby="region-one">
<div class="thin-container">
<h1 id="region-one">Primary region</h1>
<p>Theme spacing creates consistent section rhythm.</p>
</div>
</section>
<section class="thin-region-rhythm" aria-labelledby="region-two">
<div class="thin-container">
<h2 id="region-two">Supporting region</h2>
<p>Adjacent regions keep predictable spacing.</p>
</div>
</section>
</main>Compact density
Compact density is explicit through data-density and remains content-driven.
<section class="thin-region-rhythm" data-density="compact" aria-labelledby="compact-region">
<div class="thin-container">
<h2 id="compact-region">Compact region</h2>
<p>Supporting detail uses tighter spacing.</p>
</div>
</section>Show code
<section class="thin-region-rhythm" data-density="compact" aria-labelledby="compact-region">
<div class="thin-container">
<h2 id="compact-region">Compact region</h2>
<p>Supporting detail uses tighter spacing.</p>
</div>
</section>Local --thin-region-space override
Reassign region spacing locally without restyling descendants.
<section class="thin-region-rhythm" style="--thin-region-space: var(--thin-space-l)" aria-labelledby="custom-region">
<div class="thin-container">
<h2 id="custom-region">Custom spacing</h2>
<p>Local custom properties tune rhythm per region.</p>
</div>
</section>Show code
<section class="thin-region-rhythm" style="--thin-region-space: var(--thin-space-l)" aria-labelledby="custom-region">
<div class="thin-container">
<h2 id="custom-region">Custom spacing</h2>
<p>Local custom properties tune rhythm per region.</p>
</div>
</section>Anatomy
- Semantic section or region
- Optional intrinsic container
- Authored heading and content
Variants and sizes
- Default rhythm — shown above
- Compact density — shown above
- Local --thin-region-space override — shown above
States and difficult content
Rendered fixtures exercise authored content and constrained layouts with the same production assets.
- Adjacent regions
- Nested content
- Long localized content
- Right-to-left content
Structured state fixtures are not published for this item yet.
Interaction and keyboard behavior
This composition owns no JavaScript behavior. Links, controls, scrolling, landmarks, and focus retain native behavior.
Accessibility
Use the appropriate landmarks and heading hierarchy, preserve logical source order, and ensure any independently scrolling sidebar remains keyboard reachable through its native interactive content.
- Contract
COMPOSE- Basis
- Composition of native landmarks, headings, lists, links, and forms; no APG widget
API
Use .thin-region-rhythm on a semantic region. Select compact density explicitly or override --thin-region-space locally.
Behavior tier: css-only
Custom properties
--thin-region-spacevar(--thin-space-xl)Block padding applied to the authored region.Fallback
Landmarks and content remain in ordinary document order when layout styles are unavailable.
Assets and dependencies
/layouts.css
Dependencies: None
Source: packages/ui/src/style/layouts.ts
Stability evidence
- Semantic regions, compact density, and adjacent section rhythm without scripts:
test:tests/unit/library/page-shell-patterns.test.ts - Complete item-specific API, fallback, variant coverage, and difficult-state documentation:
test:tests/unit/library/page-shell-patterns.test.ts - Recorded cross-theme and environmental review protocol:
review:site/src/pages/quality/foundation-layout.astro#review-protocol
Composition
Derived from the examples and style specs, not authored.