Stacks 1.2.2

Shorthand flex layout helpers — .velin-stack-v for vertical stacks and .velin-stack-h for horizontal stacks with automatic gap spacing. Deutsch: stacks-de

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

Stack children vertically or horizontally with consistent gaps — handy for form field groups.

When not

Do not use stacks where a semantic list or table is more appropriate.

Vertical stack

First item

Second item

Third item

<div class="velin-stack-v">
  <div class="velin-p-2 border rounded">First item</div>
  <div class="velin-p-2 border rounded">Second item</div>
  <div class="velin-p-2 border rounded">Third item</div>
</div>

Horizontal stack

Left

Center

Right (auto-margin)

<div class="velin-stack-h">
  <div class="velin-p-2 border rounded">Left</div>
  <div class="velin-p-2 border rounded">Center</div>
  <div class="velin-p-2 border rounded ms-auto">Right</div>
</div>