# Stack

>***Layouts are NOT components! They are only a demo of the layout primitive for Storybook.  To use layout primitives in your own templates simply use the appropriate CSS Classes.  See documentation and code samples for more details.***

The purpose of the "Stack" is to establish vertical spacing as a property of the relationship between elements, rather than applying margins directly to elements without context. An example might be:
  - heading
  - body
  - button

Rather than placing margins on headings or buttons directly, we can wrap this collection of elements in a "Stack" to add spacing to the **body** in relation to the **heading** and the **button** in relation to the **body**, with appropriate spacing for this context.

<details>
  <summary>Inherited CSS Variables:</summary>
  - `--gap`: The space between elements.
</details>
