footer.html

<footer class="footer footer-clip bg-black text-white __js-root">
  <ui-app inline-template>
    <div>
      <div class="footer__main py-4 lg:py-16 container--wide">
        <section class="footer__social mb-5 mt-16 lg:text-right lg:mb-16 lg:mt-32">
          <div class="font-alt text-2xl mb-4">
             {{ footer_title }}
          </div>
          <div
            class="flex flex-col space-y-2 lg:flex-row lg:justify-end lg:space-y-0 lg:space-x-4">
            <a href="" class="flex items-center hover:no-underline">
              <i class="ico--facebook mr-1"></i>
              <span class="text-sm">{{ footer_facebook }}</span>
            </a>
            <a href="" class="flex items-center hover:no-underline">
              <i class="ico--twitter mr-1"></i>
              <span class="text-sm">{{ footer_twitter }}</span>
            </a>
            <a href="" class="flex items-center hover:no-underline">
              <i class="ico--instagram mr-1"></i>
              <span class="text-sm">{{ footer_instagram }}</span>
            </a>
            <a href="" class="flex items-center hover:no-underline">
              <i class="ico--youtube mr-1"></i>
              <span class="text-sm">{{ footer_youtube }}</span>
            </a>
          </div>
        </section>
        <section class="footer__main-links text-white lg:flex lg:justify-between gap-8">
          {% for item in collapsible_items %}
          <div class="py-4 lg:py-0">
            <ui-footer-collapsible label="{{ item.label }}">
              <ul class="text-white py-8">
              {% for item in item.menu_items %}
                <li>
                  <a href="#">{{ item }}</a>
                </li>
                 {% endfor %}
              </ul>
            </ui-footer-collapsible>
          </div>
          {% endfor %}
        </section>
      </div>
      <section class="bg-black py-8 xl:pb-36">
        <div class="container--wide flex flex-col lg:flex-row lg:justify-between lg:items-end">
          <div class="mb-10 flex flex-col lg:flex-row lg:flex-wrap lg:order-2 lg:mb-0">
              {% include 'patterns/molecules/contact/contact_footer_box.html' %}
              {% include 'patterns/molecules/contact/contact_footer_box.html' %}
          </div>
          <div class="max-w-xs">
            <span class="text-xs text-grey-350">
              <span class="-scale-x-100 inline-block">{{ copyleft_sign }}</span>
              {{ copyleft_text }}
            </span>
          </div>
        </div>
      </section>
    </div>
  </ui-app>
</footer>