Split Content

Split Content is a layout primitive that places two pieces of content side by side at wide container widths and stacks them at narrow widths. It’s the building block behind modal panels, hero-style modules, and the Alternate Content module.

Styles

Wrap two direct children in .tng-split-content. Each child becomes a pane with 50/50 flex-basis. A container query flips between stacked and side-by-side layouts based on the container’s inline size — not the viewport.

<div class="tng-split-content">
  <div class="tng-stack gap-2xl">
    <h3 class="tng-text-title is-5">
      Side-by-side on desktop (≥1200px)
    </h3>
    <p class="tng-text-body">
      This pane stacks below the frame on narrow containers 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>

Default
Contrast

Side-by-side on desktop (≥1200px)

This pane stacks below the frame on narrow containers 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>

Schemes

Full

You can add an .is-full modifier to strip some of the spacings around the component for it to be more flush with its surrounding box.

<div class="tng-split-content is-full">
  <div class="tng-stack gap-2xl">
    <h3 class="tng-text-title is-5">
      Side-by-side on desktop (≥1200px)
    </h3>
    <p class="tng-text-body">
      This pane stacks below the frame on narrow containers 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>

Default
Contrast