footer frontend

<footer class="footer">
    <div class="footer__container footer-newsletter">
        <div class="footer__type-description">Nyhetsbrev</div>

        <div class="footer-newsletter__email">
            {{> input.input type="email" id="newsletter-email" placeholder="anders.andersson@gmail.com" }}
        </div>

        <div class="footer-newsletter__postal">
            {{> input.input type="text" id="newsletter-postal" placeholder="302 00" }}
        </div>

        <div class="footer-newsletter__button">{{> button-redone.primary text="Skicka" }}</div>
    </div>

    <div class="footer__container footer-retail">
        <div class="footer__type-description">Hitta återförsäljare</div>

        <div class="footer-retail__search">
            {{> input.input type="text" id="retail-search" placeholder="Sök på stad eller postnummer" }}
        </div>

        <div class="footer-retail__button">{{> button.action class="js-footer-retail"}}</div>
    </div>

    <div class="footer__container footer-social">
        <div class="footer__type-description">Följ oss</div>

        <div class="footer-social__links">
            <a href="#0" class="footer-social__link">
                <svg width="22" height="47" viewBox="0 0 22 47" xmlns="http://www.w3.org/2000/svg">
                    <path
                        d="M21.989 0c-.009.15-.032 5.276-.017 7.69.002.336-.099.42-.425.417a135.161 135.161 0 0 0-3.948.013 8.132 8.132 0 0 0-1.34.16c-.83.156-1.435.827-1.47 1.76-.065 1.7-.057 3.401-.087 5.102-.006.31.202.257.382.257 2.143.002 6.916.001 6.916.001l-.854 8.092H14.71L14.691 47H5.888l.009-23.497H.03s-.016-5.262-.03-7.69c-.002-.335.099-.42.426-.417 1.68.015 3.36-.005 5.04.013.36.004.435-.115.437-.45.01-2.176-.001-4.354.077-6.528.057-1.583.389-3.124 1.124-4.554.807-1.57 2.063-2.639 3.73-3.167.925-.293 2.506-.613 3.48-.635"
                        fill="#B6B6B6"
                        fill-rule="evenodd"
                    />
                </svg>
            </a>

            <a href="#0" class="footer-social__link">
                <svg
                    width="47"
                    height="47"
                    viewBox="0 0 47 47"
                    xmlns="http://www.w3.org/2000/svg"
                    xmlns:xlink="http://www.w3.org/1999/xlink"
                >
                    <defs><path id="a" d="M0 0h47v47H0z" /></defs>
                    <g fill="none" fill-rule="evenodd">
                        <mask id="b" fill="#fff"><use xlink:href="#a" /></mask>
                        <path
                            d="M23.47 5.061c-2.86 0-5.718-.01-8.577.008-.627.004-1.265.05-1.88.17-4.745.93-7.96 4.86-7.96 9.7v17.297c.001 5.365 4.359 9.714 9.733 9.715 5.742 0 11.484.004 17.227-.007.615 0 1.237-.05 1.845-.144 4.526-.7 8.067-4.843 8.067-9.42 0-5.865.009-11.73-.003-17.594-.006-2.879-1.108-5.292-3.232-7.222-1.846-1.678-4.05-2.482-6.533-2.499-2.896-.019-5.792-.004-8.687-.004m.023-5.049h8.577c7.382 0 13.51 5.165 14.726 12.432.114.68.17 1.377.172 2.067.013 5.928.07 11.856-.01 17.783-.08 5.748-2.743 10.054-7.708 12.912C37.075 46.458 34.686 47 32.176 47H14.687C7.673 47 1.517 41.88.267 34.978a15.699 15.699 0 0 1-.253-2.727C-.008 26.435.003 20.619.003 14.802c0-6.87 4.693-12.828 11.386-14.375A16.666 16.666 0 0 1 14.804.03C17.7-.025 20.597.012 23.493.012"
                            fill="#B6B6B6"
                            mask="url(#b)"
                        />
                        <path
                            d="M29.589 22.762c.006-3.702-3.055-6.799-6.682-6.856-3.734-.059-6.971 2.918-6.999 6.792-.026 3.788 3.03 6.861 6.827 6.89 3.735.03 6.847-3.07 6.854-6.826m4.911.018c-.002 6.45-5.267 11.702-11.748 11.72-6.503.018-11.781-5.286-11.752-11.856.03-6.546 5.492-11.794 12.033-11.64 6.229.145 11.482 5.263 11.467 11.776M33 11.468A2.466 2.466 0 0 1 35.467 9a2.494 2.494 0 0 1 2.48 2.467 2.485 2.485 0 0 1-2.496 2.48A2.456 2.456 0 0 1 33 11.467"
                            fill="#B6B6B6"
                            mask="url(#b)"
                        />
                    </g>
                </svg>
            </a>
        </div>
    </div>

    <div class="footer-navigation">
        {{#each footerNavigation.items}}
        <div class="footer-navigation__item">
            <div class="footer-navigation__toggle js-footer-navigation-toggle">{{ this.name }}</div>

            <div class="footer-navigation__links">
                {{#each this.items}} <a href="{{{this.url}}}" class="footer-navigation__link">{{ this.name }}</a> {{/each}}
            </div>
        </div>
        {{/each}}
    </div>

    <div class="footer-slogan">
        <img src="/assets/toolkit/images/b-y-b.png" alt="footer-slogan__image" />

        <span class="footer-slogan__copyright"> Copyright © 2018 New Wave Profile </span>
    </div>
</footer>