Splits

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

Split is a set of layout utility classes to help you organize content that can adapt to any device or screen size. 

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

Examples

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

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

<style>
  .placeholder {
    min-block-size: 300px;
    background-color: var(--hds-color-bg-neutral-subtle);
    border: dashed var(--hds-border-width-1) var(--hds-color-border);
    border-radius: var(--hds-border-radius-l);
  }
</style>

Sign Up Log In 
<div class="hds-stack">
  <div class="hds-split">
    <sl-icon name="web-awesome" label="HUB Design System" class="hds-font-size-xl"></sl-icon>
    <div class="hds-cluster">
      <sl-button>Sign Up</sl-button>
      <sl-button appearance="outlined">Log In</sl-button>
    </div>
  </div>
  <div class="placeholder"></div>
</div>

<style>
  .placeholder {
    min-block-size: 300px;
    background-color: var(--sl-color-neutral-fill-quiet);
    border: dashed var(--hds-border-width-1) var(--hds-color-border);
    border-radius: var(--sl-border-radius-l);
  }
</style>

Direction

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

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

Align Items

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

  • hds-align-items-start
  • hds-align-items-end
  • hds-align-items-center
  • hds-align-items-stretch
  • hds-align-items-baseline

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

<div class="hds-stack">
  <div class="hds-split hds-align-items-start" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="hds-split hds-align-items-end" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="hds-split hds-align-items-center" style="height: 8rem;">
    <div></div>
    <div></div>
  </div>
  <div class="hds-split hds-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 --sl-space-m from your theme. You can add any of the following hds-gap-* classes to an element with hds-split to specify the gap between items:

  • hds-gap-0
  • hds-gap-xs
  • hds-gap-sm
  • hds-gap-base
  • hds-gap-lg
  • hds-gap-xl
<div class="hds-stack">
  <div class="hds-split hds-gap-xs">
    <div></div>
    <div></div>
  </div>
  <div class="hds-split hds-gap-xl">
    <div></div>
    <div></div>
  </div>
</div>