Footer

<footer>
    <div class="footer-top margin-top-xl">
        <div class="container newsletter__footer ">
            <div class="row">
                <div class="newsletter__content col-xs-12 col-md-6">
                    <div class="newsletter__footer--heading ">
                        <h2 class="newsletter__footer--title">
                            Wil je 10% korting op je volgende bestelling?
                        </h2>
                        <p class="newsletter__footer--subtitle">
                            Meld je nu aan voor de nieuwsbrief van Kappersmagazijn en ontvang 10% korting op je volgende aankoop.
                        </p>
                    </div>
                    <form class="newsletter__form newsletter__footer--form">
                        <div class="newsletter__footer--fields">
                            <div class="control">
                                <label for="newsletter">
                                    <span class="label">Abonneer u op onze nieuwsbrief</span>
                                    <div class="input newsletter__input">
                                        <label class="
            label
            input__label
                label--hidden
            newsletter__label
        " for="newsletterEmail">
                                            Email for newsletter subscription
                                        </label>
                                        <input class="input__field newsletter__field" id="newsletterEmail" name="newsletterEamil" type="" placeholder="Enter your email">
                                    </div>

                                </label>
                                <div class="newsletter__footer--agreements">
                                    <div class="checkbox newsletter__footer--checkbox">
                                        <input type="checkbox" id="newsletter" name="" class="checkbox__field ">
                                        <svg class="
            checkbox__icon
            checkbox__icon--checked
            
        " role="presentation">
                                            <use xlink:href="/images/icons-sprite.svg#checked"></use>
                                        </svg>
                                        <svg class="
            checkbox__icon
            checkbox__icon--unchecked
            
        " role="presentation">
                                            <use xlink:href="/images/icons-sprite.svg#unchecked"></use>
                                        </svg>
                                        <label for="newsletter" class="checkbox__label ">
                                            <span class="checkbox__text">
                                                <a href="#" title="Privacy Policy">Privacy Policy</a>
                                            </span>
                                        </label>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div class="newsletter__footer--button">
                            <button class="button button--secondary newsletter__button">
                                Sign Up
                            </button>

                        </div>
                    </form>
                </div>
                <div class="newsletter__image col-xs-12 col-md-6">
                    <div class="lazyload-wrapper ">
                        <img class="image lazyload " src="" data-src="https://www.kappersmagazijn.nl/media/blocks/footer/footer_nieuwsbrief.jpg" alt="">
                    </div>

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

    </div>

    <div class="footer-center">

        <div class="contact-bar__footer container">
            <div class="row">

                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#phone"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Bel gratis 0348 - 437811</span>
                        <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#envelope"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Stuur een mail</span>
                        <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#facebook-logo"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Via Facebook</span>
                        <span class="contact-bar__footer--description">Antwoord binnen 24 uur</span>
                    </div>
                </div>
                <div class="col-sm-3 flex--row">
                    <div class="contact-bar__footer--icon"><svg class="icon " role="img">
                            <use xlink:href="/images/icons-sprite.svg#chat"></use>
                        </svg>
                    </div>
                    <div class="contact-bar__footer--content flex--column">
                        <span class="contact-bar__footer--title">Via de Chat</span>
                        <span class="contact-bar__footer--description">Op werkdagen van 9:00 - 17:00 uur</span>
                    </div>
                </div>

            </div>
        </div>

    </div>
    <div class="footer margin-top-xl">
        <div class="footer__handler container">
            <button class="button button--icon footer__scroll-top" type="button" aria-label="scroll to top">
                <svg class="icon " role="presentation" focusable="false">
                    <title>Scroll to top</title>
                    <use xlink:href="/images/icons-sprite.svg#arrow-up"></use>
                </svg>

            </button>

            <section class="footer__links">
                <div id="dropdown-footer" class="dropdown-list dropdown-list--with-breakpoint">
                    <ul class="dropdown-list__list">
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-customers" aria-controls="dropdown-customers">
                                Customers

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="presentation" focusable="false">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-customers" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        footer__links-list
    ">
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 1
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Sign in">
                                                    Login to My Account
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Sign up">
                                                    Create an Account
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="My Orders">
                                                    My Orders
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 2
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="My Cart">
                                                    My Cart
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Checkout">
                                                    Checkout
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>
                        </li>
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-information" aria-controls="dropdown-information">
                                Information

                                <svg class="icon dropdown-list__icon dropdown-list__icon--inner" role="img">
                                    <title>Arrow down</title>
                                    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </button>

                            <div id="dropdown-information" class="dropdown-list__content " aria-hidden="true">
                                <ul class="
        list
        list__columns
        footer__links-list
    ">
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 1
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Hours">
                                                    Hours
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="About Us">
                                                    About Us
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Contact Us">
                                                    Contact Us
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 2
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Job Openings">
                                                    Job Openings
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Returns">
                                                    Returns
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Shipping">
                                                    Shipping
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 3
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Privacy Policy">
                                                    Privacy Policy
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Terms & Conditions">
                                                    Terms &amp; Conditions
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Site Map">
                                                    Site Map
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="
                list__item
                list__column
                list__column--hidden
            ">
                                        <a href="" class="
                    link
                    
                ">
                                            Column 4
                                        </a>
                                        <ul class="list">
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Reviews">
                                                    Reviews
                                                </a>
                                            </li>
                                            <li class="
                            list__item
                            list__column-item
                            
                        ">
                                                <a href="#" class="
                                link
                                footer__link
                            " title="Email Us!">
                                                    Email Us!
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>

                <script type="text/javascript">
                    new DropdownList(document.getElementById('dropdown-footer'));
                </script>

            </section>

            <div class="footer__social-handler ">
                <h3 class="footer__social-list-title">
                    Let&#x27;s get social!
                </h3>

                <ul class="list list--with-icon list--horizontal footer__social-list">
                    <li class="list__item ">
                        <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Go to Our Facebook Page">
                            <svg class="icon footer__social-icon" role="img">
                                <title>Facebook logo</title>
                                <use xlink:href="/images/icons-sprite.svg#facebook"></use>
                            </svg>

                        </a>
                    </li>
                    <li class="list__item ">
                        <a href="#" class="list__icon-link button button--icon button--icon-border" aria-label="Check Our on Twitter">
                            <svg class="icon footer__social-icon" role="img">
                                <title>Twitter logo</title>
                                <use xlink:href="/images/icons-sprite.svg#twitter"></use>
                            </svg>

                        </a>
                    </li>
                </ul>

            </div>
            <div class="footer__payments">
                <ul class="footer__payments-list list list--horizontal ">
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>AfterPay</title>
                            <use xlink:href="/images/icons-sprite.svg#afterpay"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>iDEAL</title>
                            <use xlink:href="/images/icons-sprite.svg#ideal"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
                            <title>PayPal</title>
                            <use xlink:href="/images/icons-sprite.svg#paypal"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon" role="img">
                            <title>American Express</title>
                            <use xlink:href="/images/icons-sprite.svg#american-express"></use>
                        </svg>

                    </li>
                    <li class="list__item">
                        <svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
                            <title>Visa</title>
                            <use xlink:href="/images/icons-sprite.svg#visa"></use>
                        </svg>

                    </li>
                </ul>
            </div>
        </div>

        <section class="footer__bottom-bar ">
            <div class="footer__bottom-bar-handler container">
                <div class="footer__copyright">
                    <small>
                        Copyright © 2019 Alpaca
                    </small>
                </div>

                <div class="footer__switchers">
                    <div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
                        <ul class="dropdown-list__list">
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
                                    German

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
                                    <ul class="list ">
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                    </ul>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        new DropdownList(document.getElementById('language-dropdown'));
                    </script>

                    <div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
                        <ul class="dropdown-list__list">
                            <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
                                    USD - US Dollar

                                    <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                        <title>Arrow Down</title>
                                        <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                    </svg>

                                </a>

                                <div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
                                    <ul class="list ">
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                        <li class="list__item ">
                                            Lorem ipsum

                                        </li>
                                    </ul>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <script type="text/javascript">
                        new DropdownList(document.getElementById('currency-dropdown'));
                    </script>

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

        <div class="cookie-message cookie-message" data-type="cookie" tabindex="0" aria-label="Cookie policy message">
            <div class="cookie-message__container">
                <p class="cookie-message__text">
                    <a href="#" class="link--invert">Example link</a> Find out more about their purpose and settings in your browser. By browsing the site you are agreeing to use cookies according to your browser settings.
                </p>

                <button class="
                button
                button--icon
                cookie-message__close
                cookie-message__button
                button--rotate-icon
            " type="button" aria-label="Close cookie message">
                    <svg class="icon button__icon cookie-message__button-icon" role="presentation" focusable="false">
                        <title>Close</title>
                        <use xlink:href="/images/icons-sprite.svg#close"></use>
                    </svg>

                </button>
            </div>
        </div>
        <script src="/components/raw/cookie-message/cookie-message.js"></script>

    </div>
</footer>

<script src="/components/raw/footer/footer.js"></script>
<footer>
    <div class="footer-top {{ class }}">
        {{ render '@newsletter--footer' }}
    </div>

    <div class="footer-center">
        {{ render '@contact-bar--footer' }}
    </div>
    <div class="footer {{ class }}" {{{ attributes }}}>
        {{#if handler }}
            <div class="footer__handler {{ handlerClass }}">
                {{ render '@button--icon' scrollToTop }}

                <section class="footer__links">
                    {{ render '@dropdown-list' linkList }}
                </section>

                <div class="footer__social-handler {{ socialHandlerClass }}">
                    <h3 class="footer__social-list-title">
                        {{ socialListTitle }}
                    </h3>

                    {{ render '@list--icon' socialIconList }}
                </div>
                <div class="footer__payments">
                    <ul class="footer__payments-list list list--horizontal {{ paymentsList.class }}">
                        {{#each paymentsList.elements as |element|}}
                            <li class="list__item">
                                {{ render '@icon' element }}
                            </li>
                        {{/each}}
                    </ul>
                </div>
            </div>
        {{/if}}

        {{#if bottomBar }}
            <section
                class="footer__bottom-bar {{ bottomBar.class }}"
                {{{ bottomBar.attributes }}}
            >
                <div class="footer__bottom-bar-handler {{ bottomBar.handlerClass }}">
                    <div class="footer__copyright">
                        <small>
                            {{ copyrightText }}
                        </small>
                    </div>


                    <div class="footer__switchers">
                        {{ render '@dropdown-list--detailed-content' language }}
                        {{ render '@dropdown-list--detailed-content' currency }}
                    </div>
                </div>
            </section>
        {{/if}}

        {{#if cookieMessage }}
            {{ render '@cookie-message' }}
        {{/if}}
    </div>
</footer>

{{#if script }}
    <script src="{{ static 'footer.js' }}"></script>
{{/if}}
{
  "script": true,
  "cookieMessage": true,
  "handler": true,
  "class": "margin-top-xl",
  "handlerClass": "container",
  "scrollToTop": {
    "tag": "button",
    "class": "footer__scroll-top",
    "attributes": "type=\"button\" aria-label=\"scroll to top\"",
    "icon": {
      "title": "Scroll to top",
      "id": "arrow-up",
      "hidden": true
    }
  },
  "socialListTitle": "Let's get social!",
  "socialHandlerClass": "",
  "socialIconList": {
    "listTag": "ul",
    "elementTag": "li",
    "class": "list--with-icon list--horizontal footer__social-list",
    "elements": [
      {
        "linkClass": "button button--icon button--icon-border",
        "icon": {
          "id": "facebook",
          "title": "Facebook logo",
          "class": "footer__social-icon"
        },
        "iconItemLink": "#",
        "linkAttributes": "aria-label=\"Go to Our Facebook Page\""
      },
      {
        "linkClass": "button button--icon button--icon-border",
        "icon": {
          "id": "twitter",
          "title": "Twitter logo",
          "class": "footer__social-icon"
        },
        "iconItemLink": "#",
        "linkAttributes": "aria-label=\"Check Our on Twitter\""
      }
    ]
  },
  "linkList": {
    "id": "dropdown-footer",
    "class": "dropdown-list--with-breakpoint",
    "dropdowns": [
      {
        "itemTag": "button",
        "itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-customers\"",
        "title": "Customers",
        "id": "dropdown-customers",
        "collapse": {
          "class": "dropdown-list__icon dropdown-list__icon--inner",
          "id": "angle-down",
          "title": "Arrow down",
          "hidden": true
        },
        "contentElement": "list--columns",
        "contentContext": {
          "listTag": "ul",
          "elementTag": "li",
          "class": "footer__links-list",
          "columns": [
            {
              "text": "Column 1",
              "class": "list__column--hidden",
              "elements": [
                {
                  "text": "Login to My Account",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Sign in\""
                },
                {
                  "text": "Create an Account",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Sign up\""
                },
                {
                  "text": "My Orders",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"My Orders\""
                }
              ]
            },
            {
              "text": "Column 2",
              "class": "list__column--hidden",
              "elements": [
                {
                  "text": "My Cart",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"My Cart\""
                },
                {
                  "text": "Checkout",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Checkout\""
                }
              ]
            }
          ]
        }
      },
      {
        "itemTag": "button",
        "itemAttributes": "aria-expanded=\"false\" aria-controls=\"dropdown-information\"",
        "title": "Information",
        "id": "dropdown-information",
        "collapse": {
          "class": "dropdown-list__icon dropdown-list__icon--inner",
          "id": "angle-down",
          "title": "Arrow down"
        },
        "contentElement": "list--columns",
        "contentContext": {
          "listTag": "ul",
          "elementTag": "li",
          "class": "footer__links-list",
          "columns": [
            {
              "text": "Column 1",
              "class": "list__column--hidden",
              "elements": [
                {
                  "text": "Hours",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Hours\""
                },
                {
                  "text": "About Us",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"About Us\""
                },
                {
                  "text": "Contact Us",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Contact Us\""
                }
              ]
            },
            {
              "text": "Column 2",
              "class": "list__column--hidden",
              "elements": [
                {
                  "text": "Job Openings",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Job Openings\""
                },
                {
                  "text": "Returns",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Returns\""
                },
                {
                  "text": "Shipping",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Shipping\""
                }
              ]
            },
            {
              "text": "Column 3",
              "class": "list__column--hidden",
              "elements": [
                {
                  "text": "Privacy Policy",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Privacy Policy\""
                },
                {
                  "text": "Terms & Conditions",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Terms & Conditions\""
                },
                {
                  "text": "Site Map",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Site Map\""
                }
              ]
            },
            {
              "text": "Column 4",
              "class": "list__column--hidden",
              "elements": [
                {
                  "text": "Reviews",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Reviews\""
                },
                {
                  "text": "Email Us!",
                  "linkClass": "footer__link",
                  "link": "#",
                  "linkAttributes": "title=\"Email Us!\""
                }
              ]
            }
          ]
        }
      }
    ]
  },
  "copyrightText": "Copyright © 2019 Alpaca",
  "bottomBar": {
    "handlerClass": "container"
  },
  "paymentsList": {
    "class": "",
    "elements": [
      {
        "id": "afterpay",
        "title": "AfterPay",
        "class": "footer__payments-list-icon"
      },
      {
        "id": "ideal",
        "title": "iDEAL",
        "class": "footer__payments-list-icon"
      },
      {
        "id": "paypal",
        "title": "PayPal",
        "class": "footer__payments-list-icon footer__payments-list-icon--paypal"
      },
      {
        "id": "american-express",
        "title": "American Express",
        "class": "footer__payments-list-icon"
      },
      {
        "id": "visa",
        "title": "Visa",
        "class": "footer__payments-list-icon footer__payments-list-icon--visa"
      }
    ]
  },
  "language": {
    "class": "dropdown-list--detailed-content footer__dropdown-switcher",
    "id": "language-dropdown",
    "dropdowns": [
      {
        "itemTag": "a",
        "itemAttributes": "href=\"#\" aria-expanded=\"false\"",
        "title": "German",
        "id": "dropdown-detailed-content1",
        "collapse": {
          "id": "angle-down",
          "title": "Arrow Down",
          "class": "dropdown-list__icon",
          "attributes": "aria-hidden=\"true\""
        },
        "contentElement": "list"
      }
    ]
  },
  "currency": {
    "class": "dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs",
    "id": "currency-dropdown",
    "dropdowns": [
      {
        "itemTag": "a",
        "itemAttributes": "href=\"#\" aria-expanded=\"false\"",
        "title": "USD - US Dollar",
        "id": "dropdown-detailed-content2",
        "collapse": {
          "id": "angle-down",
          "title": "Arrow Down",
          "class": "dropdown-list__icon",
          "attributes": "aria-hidden=\"true\""
        },
        "contentElement": "list"
      }
    ]
  }
}
  • Content:
    $footer__padding                                           : $spacer--medium !default;
    $footer__background                                        : $theme-gold !default;
    $footer__background-color                                  : transparent !default;
    $footer__border                                            : 0 !default;
    $footer__border-width                                      : 0 !default;
    $footer__background-color--email                           : $white !default;
    
    $footer__handler-padding                                   : $spacer--medium 0 !default;
    $footer__handler-padding\@medium                           : $spacer--medium $spacer--semi-large !default;
    $footer__handler-padding\@large                            : $spacer--medium 0 !default;
    
    $footer__newsletter-width\@large                           : 75% !default;
    $footer__newsletter-margin                                 : 0 $spacer--medium !default;
    $footer__newsletter-padding\@large                         : $spacer--medium $spacer--extra-large $spacer--extra-large $spacer--semi-medium !default;
    $footer__newsletter-margin\@large                          : 0 !default;
    $footer__newsletter-border                                 : 0 solid $gray-light !default;
    $footer__newsletter-border-width                           : 0 0 $spacer--extra-small 0 !default;
    
    $footer__link-font-size                                    : $font-size-medium !default;
    $footer__link-color                                        : $gray-darker !default;
    $footer__link-color-hover                                  : $color-primary !default;
    $footer__link-font-weight                                  : $font-weight-base !default;
    $footer__link-margin                                       : 0 !default;
    $footer__link-margin\@medium                               : 0 !default;
    
    $footer__links-width                                       : 100% !default;
    $footer__links-padding                                     : 0 !default;
    $footer__links-padding\@large                              : 0 0 $spacer--large !default;
    $footer__links-dropdown-background                         : $white !default;
    $footer__links-dropdown-padding\@medium                    : 0 !default;
    $footer__links-label-background                            : $white !default;
    $footer__links-label-color                                 : $color-primary !default;
    $footer__links-content-margin                              : 0 !default;
    
    $footer__links-dropdown-list-margin                        : 0 0 $spacer--semi-medium !default;
    $footer__links-dropdown-list-padding\@medium               : $spacer--large 0 0 !default;
    $footer__links-dropdown-list-padding\@large                : $spacer--large $spacer--extra-large 0 !default;
    $footer__links-dropdown-list-padding\@extra-large          : $spacer--large $spacer--semi-medium 0 !default;
    $footer__links-dropdown-list-border                        : $spacer--extra-small solid $gray-light !default;
    $footer__links-dropdown-list-border-width                  : 0 0 $spacer--extra-small 0 !default;
    $footer__links-dropdown-list-border-width\@large           : 0 !default;
    $footer__links-dropdown-list-item-width                    : 100% !default;
    $footer__links-dropdown-list-item-width-first-child\@medium: 50% !default;
    $footer__links-dropdown-list-item-border                   : $border-base !default;
    $footer__links-dropdown-icon-color                         : $color-secondary !default;
    $footer__links-dropdown-icon-color-hover                   : $color-primary !default;
    $footer__links-dropdown-icon-color-open                    : $color-primary !default;
    
    $footer__links-list-item-min-width\@medium                 : 204px !default;
    $footer__links-list-padding                                : 0 0 $spacer--medium 0 !default;
    
    $footer__social-handler-margin                             : $spacer 0 !default;
    $footer__social-handler-margin\@large                      : 0 !default;
    $footer__social-handler-padding                            : 0 $spacer--medium !default;
    $footer__social-handler-padding\@large                     : 56px $spacer--large !default;
    
    $footer__social-list-title-font-size                       : $font-size-large !default;
    $footer__social-list-title-font-family                     : $font-family-base !default;
    $footer__social-list-title-margin                          : 0 0 $spacer--medium 0 !default;
    $footer__social-list-title-margin\@medium                  : 0 $spacer--large 0 0 !default;
    $footer__social-list-title-margin\@large                   : 0 0 $spacer--large 0 !default;
    $footer__social-list-title-font-weight                     : $font-weight-bold !default;
    $footer__social-list-title-color                           : $color-primary !default;
    
    $footer__address--background-color                         : $gray-lighter !default;
    
    $footer__bottom-bar-background                             : $white !default;
    $footer__bottom-bar-color                                  : $theme-dark !default;
    $footer__bottom-min-height                                 : 80px !default;
    $footer__bottom-padding\@large                             : 0 $spacer--semi-large !default;
    $footer__bottom-padding\@xl                                : 0 !default;
    $footer__bottom-align                                      : center !default;
    $footer__bottom-border                                     : 2px solid $theme-second !default;
    
    $footer__copywrite-padding                                 : $spacer 0 !default;
    $footer__copywrite-padding\@medium                         : $spacer--medium 0 !default;
    $footer__copywrite-font-size                               : $font-size-medium !default;
    $footer__copywrite-color                                   : $theme-dark !default;
    
    $footer__payments-width                                    : 100% !default;
    $footer__payments-border-top                               : 1px solid $gray-light !default;
    $footer__payments-list-margin                              : 0 auto !default;
    $footer__payments-list-margin\@medium                      : 0 auto !default;
    $footer__payments-list-icon-width                          : 64px !default;
    $footer__payments-list-icon-height                         : 48px !default;
    $footer__payments-list-icon-width--visa                    : 68px !default;
    $footer__payments-list-icon-width--paypal                  : 96px !default;
    $footer__payments-list-icon-fill                           : $gray !default;
    $footer__payments-list-width                               : 90% !default;
    $footer__payments-list-width\@medium                       : 60% !default;
    
    $footer__scroll-top-top                                    : -49px !default;
    $footer__scroll-top-right                                  : 0 !default;
    $footer__scroll-top-before-transform                       : $button__before-transform-hover !default;
    $footer__scroll-top-icon-fill                              : $white !default;
    $footer__scroll-top-bg                                     : $color-primary !default;
    $footer__scroll-top-bg-hover                               : $color-primary !default;
    
    $footer__social-list__item-padding                         : 0 !default;
    $footer__social-list__item-margin                          : 0 $spacer 0 0 !default;
    $footer__social-list__item-margin-last-child               : 0 !default;
    
    $footer__social-list__icon-link-size                       : 48px !default;
    $footer__social-list__icon-link-padding                    : 0 !default;
    $footer__social-list__icon-link-margin\@large              : 0 0 $spacer !default;
    
    $footer__switchers-padding                                 : $spacer 0 !default;
    $footer__switchers-width\@small                            : 100% !default;
    $footer__switchers-width\@xl                               : auto !default;
    $footer__switchers-order                                   : 3 !default;
    
    $footer__switcher-background-color                         : transparent !default;
    
    $footer__switcher-label-background-color                   : $gray-darkest !default;
    $footer__switcher-label-padding                            : $spacer--small $spacer--semi-large $spacer--small $spacer--small !default;
    $footer__switcher-label-color                              : $white !default;
    
    $footer__switcher-content-bottom                           : 100% !default;
    $footer__switcher-content-width                            : 100% !default;
    $footer__switcher-content-padding                          : $spacer--small $spacer--small 0 !default;
    
    $footer__switcher-button-font-weight                       : $font-weight-normal !default;
    $footer__switcher-button-min-height                        : 0 !default;
    $footer__switcher-button-text-decoration                   : none !default;
    $footer__switcher-button-hover-text-decoration             : underline !default;
    
    // Footer Checkout variant
    $footer__bottom-bar-handler-padding--checkout              : $spacer--semi-medium 0 0 0 !default;
    
  • URL: /components/raw/footer/_footer-variables.scss
  • Filesystem Path: build/components/Organisms/footer/_footer-variables.scss
  • Size: 9 KB
  • Content:
    @import 'footer-variables';
    footer {
        background-color: $footer__background;
    }
    .footer {
        flex-shrink: 0;
        border: $footer__border;
        border-width: $footer__border-width;
        background-color: $footer__background-color;
    
        &--checkout {
            .footer__bottom-bar-handler {
                padding: $footer__bottom-bar-handler-padding--checkout;
    
                @include mq($screen-m) {
                    padding: 0;
                }
            }
        }
    
        &--email {
            background-color: $footer__background-color--email;
        }
    
        &__handler {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: $footer__handler-padding;
    
            @include mq($screen-m) {
                padding: $footer__handler-padding\@medium;
            }
    
            @include mq($screen-l) {
                flex-flow: row wrap;
                padding: $footer__handler-padding\@large;
            }
        }
    
        &__newsletter {
            border: $footer__newsletter-border;
            border-width: $footer__newsletter-border-width;
    
            @include mq($screen-l) {
                width: $footer__newsletter-width\@large;
                padding: $footer__newsletter-padding\@large;
                margin: $footer__newsletter-margin\@large;
            }
        }
    
        &__links {
            width: $footer__links-width;
            padding: $footer__links-padding;
    
            @include mq($screen-m) {
                max-width: 75%;
            }
            @include mq($screen-l) {
                padding: $footer__links-padding\@large;
            }
    
            .dropdown-list {
                background-color: $footer__links-dropdown-background;
    
                @include mq($screen-m) {
                    padding: $footer__links-dropdown-padding\@medium;
                }
    
                &__label {
                    background-color: $footer__links-label-background;
                    color: $footer__links-label-color;
    
                    &:hover,
                    &.focus-visible {
                        & > .dropdown-list__icon {
                            fill: $footer__links-dropdown-icon-color-hover;
                        }
                    }
    
                    &[aria-expanded="true"] {
                        & > .dropdown-list__icon {
                            fill: $footer__links-dropdown-icon-color-open;
                        }
                    }
                }
    
                &__content {
                    margin: $footer__links-content-margin;
                }
    
                &__list {
                    margin: $footer__links-dropdown-list-margin;
                    border: $footer__links-dropdown-list-border;
                    border-width: $footer__links-dropdown-list-border-width;
    
                    @include mq($screen-m) {
                        padding: $footer__links-dropdown-list-padding\@medium;
                    }
    
                    @include mq($screen-l) {
                        padding: $footer__links-dropdown-list-padding\@large;
                        border-width: $footer__links-dropdown-list-border-width\@large;
                    }
    
                    @include mq($screen-xl) {
                        padding: $footer__links-dropdown-list-padding\@extra-large;
                    }
                }
    
                &__item {
                    width: $footer__links-dropdown-list-item-width;
                    border-bottom: $footer__links-dropdown-list-item-border;
    
                    @include mq($screen-m) {
                        border: none;
                    }
    
                    &:first-child {
                        @include mq($screen-m) {
                            width: $footer__links-dropdown-list-item-width-first-child\@medium;
                        }
                    }
    
                    &:last-child {
                        border: none;
                    }
                }
    
                &__icon {
                    fill: $footer__links-dropdown-icon-color;
                }
            }
    
            .list__item  {
                @include mq($screen-m) {
                    min-width: $footer__links-list-item-min-width\@medium;
                }
            }
            .no-display {
                display: none;
            }
        }
    
        &__links-list {
            padding: $footer__links-list-padding;
        }
    
        &__link {
            display: block;
            margin: $footer__link-margin;
            font-size: $footer__link-font-size;
            font-weight: $footer__link-font-weight;
            color: $footer__link-color;
            text-decoration: none;
    
            @include mq($screen-m) {
                margin: $footer__link-margin\@medium;
            }
    
            &:hover {
                color: $footer__link-color-hover;
            }
        }
    
        &__social-handler {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            margin: $footer__social-handler-margin;
            order: 1;
    
            @include mq($screen-m) {
                align-items: center;
                flex-direction: row;
            }
    
            @include mq($screen-l) {
                flex-direction: column;
                flex: 1;
                order: 0;
                margin: $footer__social-handler-margin\@large;
                padding: $footer__social-handler-padding\@large;
                border-bottom: $footer__newsletter-border;
                position: relative;
    
                //&:before {
                //    content: '';
                //    position: absolute;
                //    left: 0;
                //    top: 0;
                //    width: 1px;
                //    height: 90%;
                //    background: $gray;
                //}
            }
        }
    
        &__social-list {
            @include mq($screen-l) {
                align-self: flex-start;
                justify-content: flex-start;
                flex-wrap: wrap;
            }
    
            .list__item  {
                padding: $footer__social-list__item-padding;
                margin: $footer__social-list__item-margin;
    
                &:last-child {
                    margin: $footer__social-list__item-margin-last-child;
                }
            }
    
            .list__icon-link {
                width: $footer__social-list__icon-link-size;
                height: $footer__social-list__icon-link-size;
                padding: $footer__social-list__icon-link-padding;
    
                @include mq($screen-l) {
                    margin: $footer__social-list__icon-link-margin\@large;
                }
            }
        }
    
        &__social-list-title {
            display: flex;
            align-items: center;
            color: $footer__social-list-title-color;
            font-family: $footer__social-list-title-font-family;
            font-size: $footer__social-list-title-font-size;
            font-weight: $footer__social-list-title-font-weight;
            margin: $footer__social-list-title-margin;
    
            @include mq($screen-m) {
                margin: $footer__social-list-title-margin\@medium;
            }
    
            @include mq($screen-l) {
                align-self: flex-start;
                margin: $footer__social-list-title-margin\@large;
            }
        }
        &__payments {
            width: $footer__payments-width;
            border-top: $footer__payments-border-top;
            &-list {
                justify-content: space-around;
                margin: $footer__payments-list-margin;
                width: $footer__payments-list-width;
    
                @include mq($screen-m) {
                    flex-flow: row wrap;
                    margin: $footer__payments-list-margin\@medium;
                    order: 2;
                    width: $footer__payments-list-width\@medium;
                }
            }
    
            &-list-icon {
                width: $footer__payments-list-icon-width;
                height: $footer__payments-list-icon-height;
                fill: $footer__payments-list-icon-fill;
    
                &--visa {
                    width: $footer__payments-list-icon-width--visa;
                }
    
                &--paypal {
                    width: $footer__payments-list-icon-width--paypal;
                }
            }
        }
    
        &__address {
            display: flex;
            flex-direction: column;
            padding: $spacer--2;
            background: $footer__address--background-color;
            @include mq($screen-s) {
                flex-direction: row;
                border-radius: 10px;
            }
        }
    
        &__store {
            display: flex;
            flex-direction: column;
            margin-right: $spacer--4;
            &--address {
                margin-bottom: $spacer--2;
                @include mq($screen-s) {
                    margin-bottom: 0;
                }
            }
            & span.day {
                margin-right: $spacer--25;
            }
        }
    
        &__bottom-bar {
            color: $footer__bottom-bar-color;
            background-color: $footer__bottom-bar-background;
            border-top: $footer__bottom-border;
        }
    
        &__bottom-bar-handler {
            display: flex;
            align-items: $footer__bottom-align;
            flex-direction: column;
            min-height: $footer__bottom-min-height;
    
            @include mq($screen-m) {
                justify-content: space-between;
                flex-direction: row;
                flex-wrap: wrap;
            }
    
            @include mq($screen-l) {
                padding: $footer__bottom-padding\@large;
            }
    
            @include mq($screen-xl) {
                padding: $footer__bottom-padding\@xl;
            }
        }
    
        &__copyright {
            display: block;
            order: 2;
            padding: $footer__copywrite-padding;
            text-align: center;
            color: $footer__copywrite-color;
    
            @include mq($screen-m) {
                order: 1;
                padding: $footer__copywrite-padding\@medium;
            }
    
            small {
                font-size: $footer__copywrite-font-size;
            }
        }
    
    
    
        &__scroll-top {
            position: absolute;
            right: $footer__scroll-top-right;
            top: $footer__scroll-top-top;
            background-color: $footer__scroll-top-bg;
    
            &:before {
                transform: $footer__scroll-top-before-transform;
                background: none;
            }
    
            &:hover {
                background-color: $footer__scroll-top-bg-hover;
            }
    
            .icon {
                fill: $footer__scroll-top-icon-fill;
            }
        }
    
        &__switchers {
            display: flex;
            align-items: center;
            flex-direction: column;
            padding: $footer__switchers-padding;
            order: $footer__switchers-order;
    
            @include mq($screen-s) {
                flex-direction: row;
                justify-content: center;
                width: $footer__switchers-width\@small;
            }
    
            @include mq($screen-xl) {
                width: $footer__switchers-width\@xl;
            }
        }
    
        &__dropdown-switcher {
            width: auto;
            background-color: $footer__switcher-background-color;
    
            .dropdown-list__label  {
                background-color: $footer__switcher-label-background-color;
                padding: $footer__switcher-label-padding;
                color: $footer__switcher-label-color;
                white-space: nowrap;
    
                &[aria-expanded=true] {
                    background-color: $footer__switcher-label-color;
                    color: $footer__switcher-label-background-color;
    
                    &:hover {
                        .dropdown-list__icon {
                            fill: $footer__switcher-label-background-color;
                        }
                    }
                }
    
                &:hover {
                    .dropdown-list__icon {
                        fill: $footer__switcher-label-color;
                    }
                }
            }
    
            .dropdown-list__content  {
                position: absolute;
                bottom: $footer__switcher-content-bottom;
                width: $footer__switcher-content-width;
                padding: $footer__switcher-content-padding;
                background-color: $footer__switcher-label-color;
    
                .button {
                    font-weight: $footer__switcher-button-font-weight;
                    min-height: $footer__switcher-button-min-height;
                    text-decoration: $footer__switcher-button-text-decoration;
    
                    &:hover,
                    &:focus,
                    &.focus-visible {
                        text-decoration: $footer__switcher-button-hover-text-decoration;
                    }
                }
            }
    
            .dropdown-list__icon {
                fill: $footer__switcher-label-color;
            }
        }
    }
    .belco-widget {
        .belco-activator-frame {
            z-index: 51;
            bottom: 5rem;
            right: 1rem;
        }
    }
    
  • URL: /components/raw/footer/_footer.scss
  • Filesystem Path: build/components/Organisms/footer/_footer.scss
  • Size: 12.1 KB
  • Content:
    'use strict';
    
    const scrollToTop = document.querySelector('.footer__scroll-top');
    
    scrollToTop.addEventListener('click', () => {
      window.scrollTo({
        top: 0,
        left: 0,
        behavior: 'smooth'
      });
    });
    
  • URL: /components/raw/footer/footer.js
  • Filesystem Path: build/components/Organisms/footer/footer.js
  • Size: 207 Bytes

There are no notes for this item.