Cmpnts

Menu

Layout

Split

Two panes side by side, a side pane at its preferred width and a main pane taking the rest.

The side pane, 16rem wide.

The main pane takes the rest, and the panes wrap when it would get too narrow.

Code
HTML
<div class="split split--xs">
  <div class="card"><p class="text">The side pane, 16rem wide.</p></div>
  <div class="card"><p class="text">The main pane takes the rest, and the panes wrap when it would get too narrow.</p></div>
</div>

Why it exists

Filters beside results, or notes beside an article: one pane has a width it wants, and the other should get everything else. When there isn’t room for both, they should simply stack.

A Split decides that from the space it actually has, so it needs no breakpoint and gives the right answer at any zoom, in any container. A breakpoint only knows about the screen.

It won’t reorder its panes. The order in the source is the order a keyboard and a screen reader follow, so moving a pane with CSS would make what people see and what they reach disagree. To put the side pane last, write it last.

When to use

  • For a side pane beside main content in a page, with no breakpoint.
  • For three panes, with --three.
  • Not for the page’s own Sidebar: that goes in the App Shell’s workspace as a Sidebar.
  • Not for a set of like items: that is a Grid.

Rules

  • Source order is reading order. Put the side pane first only when it is read first (navigation, filters); use --end otherwise. Don’t reorder with CSS.
  • A Split can’t be a pane of another split. A pane is sized from its Split’s side width, but a pane that is itself a Split reads its own instead (CSS can’t read a parent’s custom property past a redeclaration until inherit() is widely supported). Wrap the inner split in a plain <div>, which becomes the pane.

The Side Pane First, or Last

Ferns and hostas both like a shady corner.

Water them through their first summer.

Plant in autumn, while the soil is warm.

Code
HTML
<div class="split split--xs">
  <nav class="card" aria-label="Plant groups">
    <ul class="stack gap-xs" role="list">
      <li><a href="/ferns" class="link link--plain">Ferns</a></li>
      <li><a href="/hostas" class="link link--plain">Hostas</a></li>
    </ul>
  </nav>
  <div class="stack">
    <p class="text">Ferns and hostas both like a shady corner.</p>
    <p class="text">Water them through their first summer.</p>
  </div>
</div>

<div class="split split--end">
  <div class="stack">
    <p class="text">Plant in autumn, while the soil is warm.</p>
  </div>
  <aside class="card" aria-label="Planting notes"><p class="text">Planting notes: mulch after the first frost.</p></aside>
</div>

Three Panes

Start

Centre, which takes the rest

End

Code
HTML
<div class="split split--three">
  <div class="card"><p class="text">Start</p></div>
  <div class="card"><p class="text">Centre, which takes the rest</p></div>
  <div class="card"><p class="text">End</p></div>
</div>

Do and Don’t

DoDon’t
Let the Split wrap on its own.Add breakpoints, or look for an --auto variant.
Use --end when the side pane is read last.Reorder the panes with CSS.
Wrap an inner split in a plain <div>.Make a Split a pane of another split.
Set --align-items: stretch for equal-height panes.Set heights on the panes.

In Storybook

See also

  • Grid: Columns that fill the width and reflow on their own, or a row that scrolls and snaps.
  • App Shell: The page shell that places the Header, main and footer in rows, with side panes beside the main.
  • Sidebar: A side panel beside the main content, for section navigation, filters or tools.
  • Stack, Inline and Cluster: One-dimensional flows that space their children in a column, a row or a wrapping row.

Search the docs