Split #

The Split utility in the aFP Design System provides a flexible layout for distributing elements evenly along a single axis, either horizontally or vertically. It’s ideal for sections where you want two or more items separated with consistent spacing and alignment.

By default, Split uses display: flex with wrapping enabled, aligns items in the center along the cross axis, and spaces children evenly with the system’s medium gap.

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

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

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

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

Modifiers #

You can control the direction of the layout by adding class suffixes:

Combining Utilities #

Split can be combined with alignment, gap, and layout utilities for more control. For example, you can use alignment classes from the aFP Design System to adjust vertical alignment or modify spacing with additional gap utilities.

Examples #

Direction #

By adding the :row or :column modifier to the afp-split class, items can be arranged horizontally or stacked vertically.

<div class="afp-flank afp-align-start">
  <div class="afp-split:column">
    <div></div>
    <div></div>
  </div>
  <div class="afp-split:row">
    <div></div>
    <div></div>
  </div>
</div>

<div class="afp-flank afp-align-start">
  <div class="afp-split:column">
    <div></div>
    <div></div>
  </div>
  <div class="afp-split:row">
    <div></div>
    <div></div>
  </div>
</div>

<div class="afp-flank afp-align-start">
  <div class="afp-split:column">
    <div></div>
    <div></div>
  </div>
  <div class="afp-split:row">
    <div></div>
    <div></div>
  </div>
</div>

<div class="afp-flank afp-align-start">
  <div class="afp-split:column">
    <div></div>
    <div></div>
  </div>
  <div class="afp-split:row">
    <div></div>
    <div></div>
  </div>
</div>