Skip to content

Split

Stable Available in release assets

Place two authored regions side by side when space permits and return them to logical source order in narrow containers.

Split primary example

Show code
<section class="thin-split" aria-labelledby="split-title">
  <div>
    <p>Field collection</p>
    <h1 id="split-title">Built for everyday routes</h1>
    <p>The content remains first in source order at every width.</p>
    <p><a href="/collections/field">Explore the collection</a></p>
  </div>
  <figure>
    <img src="field-pack.jpg" alt="Field pack beside a bicycle">
    <figcaption>Field pack in slate blue</figcaption>
  </figure>
</section>

Each authored example uses the production assets and includes copyable markup.

Semantic split

Content precedes the supporting figure in source order.

Show code
<section class="thin-split" aria-labelledby="split-title">
  <div>
    <p>Field collection</p>
    <h1 id="split-title">Built for everyday routes</h1>
    <p>The content remains first in source order at every width.</p>
    <p><a href="/collections/field">Explore the collection</a></p>
  </div>
  <figure>
    <img src="field-pack.jpg" alt="Field pack beside a bicycle">
    <figcaption>Field pack in slate blue</figcaption>
  </figure>
</section>

Local minimum

A local minimum and gap alter the intrinsic reflow threshold.

Show code
<section class="thin-split" style="--thin-split-min: 18rem; --thin-split-space: 2rem" aria-labelledby="split-title">
  <div>
    <p>Field collection</p>
    <h1 id="split-title">Built for everyday routes</h1>
    <p>The content remains first in source order at every width.</p>
    <p><a href="/collections/field">Explore the collection</a></p>
  </div>
  <figure>
    <img src="field-pack.jpg" alt="Field pack beside a bicycle">
    <figcaption>Field pack in slate blue</figcaption>
  </figure>
</section>

Anatomy

  • Semantic split wrapper
  • Primary region
  • Supporting content or media

Variants and sizes

  • Semantic two-region split — shown above
  • Local minimum-size override — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Long content and missing media

Long localized text and broken image resources retain text alternatives and durable links.

Show code
<section class="thin-split" aria-labelledby="split-title">
  <div>
    <p>Field collection</p>
    <h1 id="split-title">Ausrüstung für außergewöhnlich lange alltägliche Routen und unterschiedliche Anforderungen</h1>
    <p>The content remains first in source order at every width.</p>
    <p><a href="/collections/field">Explore the collection</a></p>
  </div>
  <figure>
    <img src="missing-image.jpg" alt="Field pack beside a bicycle">
    <figcaption>Field pack in slate blue</figcaption>
  </figure>
</section>

Narrow RTL container

Reflow is exercised without changing reading or link order.

Show code
<div dir="rtl">
  <section class="thin-split" aria-labelledby="split-title">
    <div>
      <p>Field collection</p>
      <h1 id="split-title">Built for everyday routes</h1>
      <p>The content remains first in source order at every width.</p>
      <p><a href="/collections/field">Explore the collection</a></p>
    </div>
    <figure>
      <img src="field-pack.jpg" alt="Field pack beside a bicycle">
      <figcaption>Field pack in slate blue</figcaption>
    </figure>
  </section>
</div>
  • Narrow container — shown above
  • Wide container — documented, example pending
  • Long localized content — shown above
  • Missing media — shown above
  • Right-to-left content — documented, example pending

Interaction and keyboard behavior

This composition owns no JavaScript behavior. Links, images, lists, reading order, scrolling, and focus retain native behavior.

Accessibility

Choose semantic wrappers for the content, preserve logical source order, provide meaningful image alternatives and captions, and keep every destination available as an ordinary link.

Contract
COMPOSE
Basis
Composition of native landmarks, headings, lists, links, and forms; no APG widget

API

Use .thin-split around exactly two semantic children. Override --thin-split-min or --thin-split-space locally. Preserve meaningful source order instead of visually reordering content.

Behavior tier: css-only

Custom properties

PropertyDefaultDescription
--thin-split-min24remMinimum intrinsic column size before the split stacks.
--thin-split-spacevar(--thin-space-xl)Gap between the two split regions.

Fallback

Semantic content, media, product links, and captions 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

  • 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