Pattern Library

<footer class="bg-black text-white __js-root py-4 xl:py-24 pb-8 xl:pb-24">
  <ui-app inline-template>
    <div
      class="
        container--wide gap-16 grid grid-cols-1
        lg:grid-cols-2 lg:gap-2
      "
    >
      <section class="text-white md:flex md:flex-col md:justify-between gap-8">
        {% for item in collapsible_items %}
          <div class="py-4 xl:py-0">
            <ui-footer-collapsible label="{{ item.label }}">
              <ul
                class="
                  text-white py-8 max-w-max text-xl flex flex-col gap-3

                  md:text-base md:grid md:grid-cols-2 md:auto-rows-auto md:gap-y-5 md:gap-x-14
                "
              >
                {% for item in item.menu_items %}
                  <li>
                    <a href="{{ item.url }}">{{ item.name }}</a>
                  </li>
                {% endfor %}
              </ul>
            </ui-footer-collapsible>
          </div>
        {% endfor %}
      </section>

      <section class="flex flex-col xl:items-end">
        <div class="flex flex-col gap-12">
          {% include 'patterns/molecules/contact/contact_footer_box.html' %}
          {% include 'patterns/molecules/contact/contact_footer_box.html' %}
        </div>
      </section>
    </div>
  </ui-app>

  <div class="container--wide flex flex-col gap-8 pt-16 xl:pt-8">
    <section>
      <div
        class="
          flex flex-col items-start gap-y-4
          xl:flex-row xl:items-center xl:gap-x-8
        "
      >
        {% for social_media in social_media_links %}
          <a
            href="{{ social_media.url }}"
            class="flex gap-2 items-center hover:no-underline"
          >
            <i class="{{ social_media.icon }}"></i>
            <span class="text-sm">{{ social_media.name }}</span>
          </a>
        {% endfor %}
      </div>
    </section>

    <section>
      <span class="text-xs text-grey-350">
        <span class="-scale-x-100 inline-block">{{ copyleft_sign }}</span>
        {{ copyleft_text|safe }}
        <a href="{{ privacy_url }}" class="underline">{{ privacy_text }}</a>
      </span>
    </section>
  </div>
</footer>