3.0.0-alpha.7 Alpha
Default Default Classic Light Dark Light Dark System
Search /
Default Default Classic Light Dark Light Dark System
Style Utilities

Split

Use the wa-split class to distribute two or more items evenly across available space, either in a row or a column.

<div class="wa-split">
  <div></div>
  <div></div>
</div>

Examples

Splits are especially helpful for navigation, header, and footer layouts.

<div class="wa-flank">
  <div class="wa-split:column">
    <div class="wa-stack">
      <wa-icon-button name="house" label="Home"></wa-icon-button>
      <wa-icon-button name="calendar" label="Calendar"></wa-icon-button>
      <wa-icon-button name="envelope" label="Mail"></wa-icon-button>
    </div>
    <div class="wa-stack">
      <wa-divider></wa-divider>
      <wa-icon-button name="right-from-bracket" label="Sign Out"></wa-icon-button>
    </div>
  </div>
  <div class="placeholder">
  </div>
</div>

<style>
  .placeholder {
    min-block-size: 300px;
    background-color: var(--wa-color-neutral-fill-quiet);
    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-m);
  }
</style>

<div class="wa-stack">
  <div class="wa-split">
    <wa-icon name="web-awesome" label="Web Awesome" style="font-size: var(--wa-font-size-xl);"></wa-icon>
    <div class="wa-cluster">
      <wa-button>Sign Up</wa-button>
      <wa-button appearance="outlined">Log In</wa-button>
    </div>
  </div>
  <div class="placeholder">
  </div>
</div>

<style>
  .placeholder {
    min-block-size: 300px;
    background-color: var(--wa-color-neutral-fill-quiet);
    border: dashed var(--wa-border-width-s) var(--wa-color-neutral-border-normal);
    border-radius: var(--wa-border-radius-m);
  }
</style>

Direction

Items can be split across a row or a column by appending :row or :column to the wa-split class.

<div class="wa-flank wa-align-items-start" style="block-size: 16rem;">
  <div class="wa-split:column">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split:row">
    <div></div>
    <div></div>
  </div>
</div>

Align Items

By default, items are centered on the cross axis of the wa-split container. You can add any of the following wa-align-items-* classes to an element with wa-split to specify how items are aligned:

These modifiers specify how items are aligned in the block direction for wa-split:row and in the inline direction for wa-split:column.

<div class="wa-stack">
  <div class="wa-split wa-align-items-start" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split wa-align-items-end" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split wa-align-items-center" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split wa-align-items-stretch" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
</div>

Gap

A split's gap determines how close items can be before they wrap. By default, the gap between split items uses --wa-space-m from your theme. You can add any of the following wa-gap-* classes to an element with wa-split to specify the gap between items:

<div class="wa-stack">
  <div class="wa-split wa-gap-3xs">
    <div></div>
    <div></div>
  </div>
  <div class="wa-split wa-gap-3xl">
    <div></div>
    <div></div>
  </div>
</div>
    No results