Stack #

The Stack utility in the aFP Design System provides a simple way to arrange elements vertically with consistent spacing. It’s ideal for lists, forms, card content, or any layout where elements should be stacked on top of each other.

By default, Stack uses display: flex with a vertical column direction, aligns items to stretch across the container, and applies the system’s medium gap between elements.

Example #

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

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

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

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