The Stack

<stack-l layout="gap:2 recursive">...</stack-l>

The Stack is used to create vertical spacing between elements.

Instead of setting margins directly on individual elements, you define the spacing within the Stack container.

This approach decouples the spacing from the elements themselves and ties it to the container, offering greater flexibility and consistency in layout design.

When to use ?

You want to vertically space elements between them.

It’s a replacement for vertical margins.

Attributes

• gap : the space value between elements.
• recursive : whether the gap apply recursively (regardless of nesting level).

gap

You can modify the spacing by setting a value on the gap attribute.

You can use any kind of value (px, rem, em, …) but if you dont set any unit after the gap value an harmonic value will be used.

recursive

By adding the recursive attribute (without value) all elements inside will be spaced and their content too (as if they were stack too).