Flow
Stable Available in release assets
Apply consistent block-flow vertical rhythm between siblings without converting the container to flex formatting context.
Flow primary example
<article class="thin-flow">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>Show code
<article class="thin-flow">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>Variant gallery
Each authored example uses the production assets and includes copyable markup.
Semantic adapter
Preserve the authored semantic wrapper.
<article class="thin-flow">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>Show code
<article class="thin-flow">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>Presentational host
Use the equivalent unregistered host around ordinary content.
<thin-flow>
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</thin-flow>Show code
<thin-flow>
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</thin-flow>Local spacing
Override the documented spacing property on the layout host.
<article class="thin-flow" style="--thin-flow-space: 2rem">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>Show code
<article class="thin-flow" style="--thin-flow-space: 2rem">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>Anatomy
- Block-flow container or semantic adapter
- Direct authored block children
Variants and sizes
- <thin-flow> — shown above
- class="thin-flow" — shown above
- --thin-flow-space override — shown above
States and difficult content
Rendered fixtures exercise authored content and constrained layouts with the same production assets.
Long localized content
Wrapping prose and native list structure in a constrained container.
<article class="thin-flow">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
<li>Weitere Informationen<ul>
<li>Nested information remains in reading order.</li>
</ul>
</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>Show code
<article class="thin-flow">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
<li>Weitere Informationen<ul>
<li>Nested information remains in reading order.</li>
</ul>
</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>RTL content
The same source order under an authored right-to-left direction.
<div dir="rtl">
<article class="thin-flow">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>
</div>Show code
<div dir="rtl">
<article class="thin-flow">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>
</div>- Mixed paragraphs and lists — documented, example pending
- Nested lists — shown above
- Long localized content — shown above
- Narrow container — documented, example pending
- Right-to-left content — shown above
- Print — documented, example pending
Interaction and keyboard behavior
Layout never changes semantic order. Links, landmarks, headings, and document scrolling remain browser-native.
Accessibility
Preserve DOM reading order, use semantic wrappers when landmarks or headings are required, and never rely on layout alone to communicate structure.
- Contract
PLATFORM- Basis
- Native CSS layout and document defaults over semantic HTML; no APG widget
API
Flow is a CSS-only layout host. Prefer it over Stack when children must remain block-level lists, tables, or prose sections. Use either host form; override spacing with --thin-flow-space.
Behavior tier: css-only
Hosts
Apply the class to the HTML element that supplies the appropriate landmark or content role.
<thin-flow>…</thin-flow><article class="thin-flow">…</article>
Custom properties
PropertyDefaultDescription
--thin-flow-spacevar(--thin-space-m)Block-start margin between adjacent siblings.Examples
Section title
First paragraph with enough text to wrap across multiple lines in a narrow column.
- List items keep native markers.
- Nested structure stays predictable for screen readers.
Following paragraph spacing comes from adjacent-sibling margin, not flex gap.
<article class="thin-flow">
<h2>Section title</h2>
<p>First paragraph with enough text to wrap across multiple lines in a narrow column.</p>
<ul>
<li>List items keep native markers.</li>
<li>Nested structure stays predictable for screen readers.</li>
</ul>
<p>Following paragraph spacing comes from adjacent-sibling margin, not flex gap.</p>
</article>Fallback
Normal document flow remains readable if CSS is unavailable.
Assets and dependencies
/layouts.css
Dependencies: None
Source: packages/ui/src/style/layouts.ts
Stability evidence
- Item-specific API, state and promotion contract:
test:tests/unit/library/layout-promotion.test.ts - No-JS/no-CSS fallback, semantic accessibility and asset-path contract:
test:tests/browser/layout-promotion.spec.ts - Cross-browser difficult-content geometry, print and forced-colors screenshots:
test:tests/browser/layout-promotion-stress.spec.ts
Composition
Derived from the examples and style specs, not authored.