{{#> web/layout/default title="Stack" parentPageName="Components" }}

{{setVar "blocks" "Block 1" "Block 2" "Block 3" }}

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Form Fields</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <div class="Stack Stack--hasSpacing">
        <div class="TextField">
          <label for="textfield-stack-1" class="TextField__label TextField__label--required">Label</label>
          <input type="text" id="textfield-stack-1" class="TextField__input" placeholder="Placeholder" />
        </div>
        <div class="TextField">
          <label for="textfield-stack-2" class="TextField__label TextField__label--required">Label</label>
          <input type="text" id="textfield-stack-2" class="TextField__input" placeholder="Placeholder" />
        </div>
      </div>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Blocks</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul class="Stack">
        {{#each @root.blocks as |block|}}
        <li>
          <div class="docs-Box">
            {{block}}
          </div>
        </li>
        {{/each}}
      </ul>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Blocks with Vertical Spacing</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul class="Stack Stack--hasSpacing">
        {{#each @root.blocks as |block|}}
        <li>
          <div class="docs-Box">
            {{block}}
          </div>
        </li>
        {{/each}}
      </ul>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Blocks with Inner Dividers and Vertical Spacing</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul class="Stack Stack--hasIntermediateDividers Stack--hasSpacing">
        {{#each @root.blocks as |block|}}
        <li>
          <div class="docs-Box">
            {{block}}
          </div>
        </li>
        {{/each}}
      </ul>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Blocks with Inner and Outer Dividers and Vertical Spacing</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul class="Stack Stack--hasIntermediateDividers Stack--hasEndDivider Stack--hasStartDivider Stack--hasSpacing">
        {{#each @root.blocks as |block|}}
        <li>
          <div class="docs-Box">
            {{block}}
          </div>
        </li>
        {{/each}}
      </ul>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Blocks with Inner Dividers without Vertical Spacing</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul class="Stack Stack--hasIntermediateDividers">
        {{#each @root.blocks as |block|}}
        <li>
          <div class="docs-Box">
            {{block}}
          </div>
        </li>
        {{/each}}
      </ul>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Blocks with Custom Spacing</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-1200)">
        {{#each @root.blocks as |block|}}
        <li>
          <div class="docs-Box">
            {{block}}
          </div>
        </li>
        {{/each}}
      </ul>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Blocks with Custom Spacing from Tablet Breakpoint</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul class="Stack Stack--hasSpacing" style="--stack-spacing-tablet: var(--spirit-space-1200)">
        {{#each @root.blocks as |block|}}
        <li>
          <div class="docs-Box">
            {{block}}
          </div>
        </li>
        {{/each}}
      </ul>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Blocks with Custom Spacing for Each Breakpoint</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-100);--stack-spacing-tablet: var(--spirit-space-1000);--stack-spacing-desktop: var(--spirit-space-1200)">
        {{#each @root.blocks as |block|}}
        <li>
          <div class="docs-Box">
            {{block}}
          </div>
        </li>
        {{/each}}
      </ul>

    </div>

  </div>

</section>

<section class="UNSTABLE_Section">

  <div class="Container">

    <h2 class="docs-Heading">Stacked Blocks with Custom Spacing and Inner and Outer Dividers</h2>

    <div class="docs-Stack docs-Stack--stretch">

      <ul
        class="Stack Stack--hasSpacing Stack--hasStartDivider Stack--hasEndDivider Stack--hasIntermediateDividers"
        style="--stack-spacing: var(--spirit-space-800)"
      >
        {{#each @root.blocks as |block|}}
        <li>
          <div class="docs-Box">{{block}}</div>
        </li>
        {{/each}}
      </ul>

    </div>

  </div>

</section>

{{/web/layout/default }}