Split Content

Ready to use

Split Content is a layout primitive that places two pieces of content side by side on wide viewports and stacks them on narrow ones. It’s the building block behind hero-style modules and the Alternate Content module.

Wrap two direct children in .tng-split-content. Each pane gets a 50/50 flex-basis, but the rendered ratio is dictated by the pane content — a frame’s aspect ratio holds its shape, and the other pane fills the remaining space.

<div class="tng-split-content">
  <div class="tng-stack gap-2xl">
    <h3 class="tng-text-title is-5">Side-by-side from 1200px</h3>
    <p class="tng-text-body">
      This pane stacks below the frame on narrow viewports and sits
      beside it on wide ones. The pane's own content dictates the
      rendered ratio — the frame's aspect ratio holds the visual
      shape, the text pane fills the remaining space.
    </p>
    <button class="tng-button is-primary">Primary action</button>
  </div>
  <div>
    <div class="tng-frame">
      <div class="tng-slot"></div>
    </div>
  </div>
</div>

Neutral
Contrast

Side-by-side from 1200px

This pane stacks below the frame on narrow viewports and sits beside it on wide ones. The pane's own content dictates the rendered ratio — the frame's aspect ratio holds the visual shape, the text pane fills the remaining space.

Note .tng-frame is wrapped in an extra div. This is necessary because if you put an aspect ratio directly on a flex child the browser (especially Safari) will have a hard time figuring out how to render. This would result in quirky and inconsistent behavior.

<div>
  <div class="tng-frame">
    <!--  -->
  </div>
</div>

That wrapper is also what the inline padding below keys off: the rule targets > :not(:has(.tng-frame)), so a pane holding a frame stays flush while the other pane is inset.

Breakpoints

The layout switches on the system-default breakpoints using plain viewport media queries — not container queries — in three steps:

From	Layout
base	Stacked, 40px gap, 32px block padding and 20px inline padding.
`md` — 768px	Still stacked; the pane without a frame gains 80px of inline padding.
`xl` — 1200px	Side-by-side and vertically centred, 100px gap; the pane without a frame is inset 100px at the inline start and 0 at the inline end.

Variants

Full

Add the .is-full modifier when the layout sits inside a host that owns its own spacing, so it can be flush with its surrounding box. It drops the 20px inline padding at every width, and from xl (1200px) also drops the block padding and the inline-end padding. An element that carries .tng-modal gets the same treatment without needing .is-full.

<div class="tng-split-content is-full">
  <div class="tng-stack gap-2xl">
    <h3 class="tng-text-title is-5">Side-by-side from 1200px</h3>
    <p class="tng-text-body">
      This pane stacks below the frame on narrow viewports and sits
      beside it on wide ones. The pane's own content dictates the
      rendered ratio — the frame's aspect ratio holds the visual
      shape, the text pane fills the remaining space.
    </p>
    <button class="tng-button is-primary">Primary action</button>
  </div>
  <div>
    <div class="tng-frame">
      <div class="tng-slot"></div>
    </div>
  </div>
</div>

Neutral
Contrast

Side-by-side from 1200px

Figma