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

<section class="UNSTABLE_Section">

  <div class="Container">
    <h2 class="docs-Heading">Basic Usage</h2>
  </div>

  <div class="docs-Stack">

    <footer class="bg-secondary pt-1400 pb-1200">
      <div class="Container">

        <!-- Grid with navigation links -->
        <div
          class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-6"
          style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000)"
        >

          <!-- Navigation links 1 -->
          <nav aria-labelledby="footer-navigation-section-1">
            <h3 class="typography-heading-xsmall-semibold mb-700" id="footer-navigation-section-1">
              Section headline
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

          <!-- Navigation links 2 -->
          <nav aria-labelledby="footer-navigation-section-2">
            <h3 class="typography-heading-xsmall-semibold mb-700" id="footer-navigation-section-2">
              Section headline
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

          <!-- Navigation links 3 -->
          <nav aria-labelledby="footer-navigation-section-3">
            <h3 class="typography-heading-xsmall-semibold mb-700" id="footer-navigation-section-3">
              Section headline
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

          <!-- Navigation links 4 -->
          <nav aria-labelledby="footer-navigation-section-4">
            <h3 class="typography-heading-xsmall-semibold mb-700" id="footer-navigation-section-4">
              Section headline
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

          <!-- Navigation links 5 -->
          <nav aria-labelledby="footer-navigation-section-5">
            <h3 class="typography-heading-xsmall-semibold mb-700" id="footer-navigation-section-5">
              Section headline
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

          <!-- Navigation links 6 -->
          <nav aria-labelledby="footer-navigation-section-5">
            <h3 class="typography-heading-xsmall-semibold mb-700" id="footer-navigation-section-6">
              Section headline
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

        </div>

        <!-- Divider -->
        <hr class="Divider my-1200" />

        <!-- Grid with product logo, social media links and language switch -->
        <div
          class="Grid Grid--cols-1 Grid--desktop--cols-3 Grid--alignmentXCenter Grid--desktop--alignmentXStretch Grid--alignmentYCenter"
          style="--grid-spacing-x: var(--spirit-space-1100); --grid-spacing-y: var(--spirit-space-1100)"
        >

          <!-- Product logo -->
          <div class="text-desktop-left">
            <a href="https://www.example.com">
              <div class="ProductLogo">
                {{> web/assets/jobBoardLogo }}
              </div>
            </a>
          </div>

          <!-- Flex with social media links -->
          <ul class="Flex Flex--row Flex--wrap Flex--alignmentXCenter Flex--alignmentYCenter">
            <li>
              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                <span class="accessibility-hidden">Facebook</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#logo-facebook" />
                </svg>
              </a>
            </li>
            <li>
              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                <span class="accessibility-hidden">X</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#logo-x" />
                </svg>
              </a>
            </li>
            <li>
              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                <span class="accessibility-hidden">YouTube</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#logo-youtube" />
                </svg>
              </a>
            </li>
            <li>
              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                <span class="accessibility-hidden">Google</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#logo-google" />
                </svg>
              </a>
            </li>
            <li>
              <a href="https://www.example.com" class="Button Button--tertiary Button--medium Button--symmetrical">
                <span class="accessibility-hidden">LinkedIn</span>
                <svg width="24" height="24" aria-hidden="true">
                  <use xlink:href="/assets/icons/svg/sprite.svg#logo-linkedin" />
                </svg>
              </a>
            </li>
          </ul>

          <!-- Language switch -->
          <div class="text-desktop-right">
            <div class="Select">
              <label for="select-language" class="Select__label Select__label--hidden">Language</label>
              <div class="Select__inputContainer">
                <select id="select-language" name="language" class="Select__input">
                  <option value="en">English</option>
                  <option value="cs">Čeština</option>
                </select>
                <div class="Select__icon">
                  <svg width="24" height="24" aria-hidden="true">
                    <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                  </svg>
                </div>
              </div>
            </div>
          </div>

        </div>

        <!-- Divider -->
        <hr class="Divider my-1200" />

        <!-- Flex with secondary links -->
        <nav aria-label="Secondary links">
          <ul
            class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
            style="--flex-spacing-x: var(--spirit-space-600); --flex-spacing-x-tablet: var(--spirit-space-900)"
          >
            <li>
              <a href="https://www.example.com" class="link-secondary">Legal notice</a>
            </li>
            <li>
              <a href="https://www.example.com" class="link-secondary">Terms of service</a>
            </li>
            <li>
              <a href="https://www.example.com" class="link-secondary">Privacy policy</a>
            </li>
            <li>
              <a href="https://www.example.com" class="link-secondary">Manage cookies</a>
            </li>
          </ul>
        </nav>

      </div>
    </footer>

  </div>
</section>

<section class="UNSTABLE_Section">

  <div class="Container">
    <h2 class="docs-Heading">Nested Link Blocks, Logo Only</h2>
  </div>

  <div class="docs-Stack">

    <footer class="bg-secondary pt-1400 pb-1200">
      <div class="Container">

        <!-- Grid with navigation links -->
        <div
          class="Grid Grid--cols-1 Grid--tablet--cols-2 Grid--desktop--cols-6"
          style="--grid-spacing-x: var(--spirit-space-1000); --grid-spacing-y: var(--spirit-space-1000)"
        >

          <!-- Navigation links 1 -->
          <nav aria-labelledby="footer-nested-links-navigation-section-1">
            <h3 class="typography-heading-xsmall-semibold mb-700">
              <a
                href="https://www.example.com"
                id="footer-nested-links-navigation-section-1"
              >
                Section headline
              </a>
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

          <!-- Navigation links 2 -->
          <nav aria-labelledby="footer-nested-links-navigation-section-2">
            <h3 class="typography-heading-xsmall-semibold mb-700">
              <a
                href="https://www.example.com"
                id="footer-nested-links-navigation-section-2"
              >
                Section headline
              </a>
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

          <!-- Navigation links 3 -->
          <nav aria-labelledby="footer-nested-links-navigation-section-3">
            <h3 class="typography-heading-xsmall-semibold mb-700">
              <a
                href="https://www.example.com"
                id="footer-nested-links-navigation-section-3"
              >
                Section headline
              </a>
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

          <!-- Navigation links 4 and 5 -->
          <div>
            <nav aria-labelledby="footer-nested-links-navigation-section-4" class="mb-1000">
              <h3 class="typography-heading-xsmall-semibold mb-700">
                <a
                  href="https://www.example.com"
                  id="footer-nested-links-navigation-section-4"
                >
                  Section headline
                </a>
              </h3>
              <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
                <li>
                  <a href="https://www.example.com">Link</a>
                </li>
                <li>
                  <a href="https://www.example.com">Link</a>
                </li>
                <li>
                  <a href="https://www.example.com">Link</a>
                </li>
              </ul>
            </nav>
            <nav aria-labelledby="footer-nested-links-navigation-section-4-1">
              <h3 class="typography-heading-xsmall-semibold mb-700">
                <a
                  href="https://www.example.com"
                  id="footer-nested-links-navigation-section-4-1"
                >
                  Section headline
                </a>
              </h3>
              <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
                <li>
                  <a href="https://www.example.com">Link</a>
                </li>
                <li>
                  <a href="https://www.example.com">Link</a>
                </li>
              </ul>
            </nav>
          </div>

          <!-- Navigation links 5 -->
          <nav aria-labelledby="footer-nested-links-navigation-section-5">
            <h3 class="typography-heading-xsmall-semibold mb-700">
              <a
                href="https://www.example.com"
                id="footer-nested-links-navigation-section-5"
              >
                Section headline
              </a>
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>

          <!-- Navigation links 6 -->
          <nav aria-labelledby="footer-nested-links-navigation-section-6">
            <h3 class="typography-heading-xsmall-semibold mb-700">
              <a
                href="https://www.example.com"
                id="footer-nested-links-navigation-section-6"
              >
                Section headline
              </a>
            </h3>
            <ul class="Stack Stack--hasSpacing" style="--stack-spacing: var(--spirit-space-600)">
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
              <li>
                <a href="https://www.example.com">Link</a>
              </li>
            </ul>
          </nav>
        </div>

        <!-- Divider -->
        <hr class="Divider my-1200" />

        <!-- Product logo -->
        <div class="text-center">
          <a href="https://www.example.com">
            <div class="ProductLogo">
              {{> web/assets/jobBoardLogo }}
            </div>
          </a>
        </div>

        <!-- Divider -->
        <hr class="Divider my-1200" />

        <!-- Flex with secondary links -->
        <nav aria-label="Secondary links">
          <ul
            class="Flex Flex--column Flex--tablet--row Flex--noWrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
            style="--flex-spacing-x: var(--spirit-space-600); --flex-spacing-x-tablet: var(--spirit-space-900)"
          >
            <li>
              <a href="https://www.example.com" class="link-secondary">Legal notice</a>
            </li>
            <li>
              <a href="https://www.example.com" class="link-secondary">Terms of service</a>
            </li>
            <li>
              <a href="https://www.example.com" class="link-secondary">Privacy policy</a>
            </li>
            <li>
              <a href="https://www.example.com" class="link-secondary">Manage cookies</a>
            </li>
          </ul>
        </nav>

      </div>
    </footer>
  </div>
</section>

<section class="UNSTABLE_Section">

  <div class="Container">
    <h2 class="docs-Heading">Minimalistic</h2>
  </div>

  <div class="docs-Stack">
    
    <footer class="bg-secondary pt-900 pb-900">
      <div class="Container">

        <!-- Grid with product logo, secondary links and language switch -->
        <div class="Grid Grid--cols-1 Grid--desktop--cols-12 Grid--alignmentYCenter Grid--desktop--alignmentXStretch Grid--alignmentXCenter" style="--grid-spacing-y: var(--spirit-space-1100)">
        
          <!-- Product logo -->
          <div class="GridItem text-desktop-left" style="--grid-item-column-start-desktop: 1; --grid-item-column-end-desktop: 4;">
            <a href="https://www.example.com">
              <div class="ProductLogo">
                {{> web/assets/jobBoardLogo }}
              </div>
            </a>
          </div>
        
          <!-- Secondary links -->
          <div class="GridItem text-center"  style="--grid-item-column-start-desktop: 4; --grid-item-column-end-desktop: 10;">
            <nav aria-label="Secondary links" class="text-center">
              <ul
                class="Flex Flex--column Flex--tablet--row Flex--wrap Flex--alignmentXStretch Flex--tablet--alignmentXCenter Flex--alignmentYStretch"
                style="--flex-spacing-x: var(--spirit-space-600); --flex-spacing-x-tablet: var(--spirit-space-900);"
              >
                <li>
                  <a href="https://www.example.com" class="link-secondary">Legal notice</a>
                </li>
                <li>
                  <a href="https://www.example.com" class="link-secondary">Terms of service</a>
                </li>
                <li>
                  <a href="https://www.example.com" class="link-secondary">Privacy policy</a>
                </li>
                <li>
                  <a href="https://www.example.com" class="link-secondary">Manage cookies</a>
                </li>
              </ul>
            </nav>
          </div>
        
          <!-- Language switch -->
          <div class="GridItem text-desktop-right" style="--grid-item-column-start-desktop: 11; --grid-item-column-end-desktop: 13;">
            <div class="Select Select--fluid">
              <label for="select-language" class="Select__label Select__label--hidden">Language</label>
              <div class="Select__inputContainer">
                <select id="select-language" name="language" class="Select__input">
                  <option value="en">English</option>
                  <option value="cs">Čeština</option>
                </select>
                <div class="Select__icon">
                  <svg width="24" height="24" aria-hidden="true">
                    <use xlink:href="/assets/icons/svg/sprite.svg#chevron-down" />
                  </svg>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>
    </footer>

  </div>
</section>

{{/web/layout/default }}