<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
<header class="header">
    <div class="header__wrapper">
        <div class="container">
            <div class="header__top">
                <div class="header__top--logo">
                    <a class="logo " href="#" aria-label="Homepage">
                        <img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
                    </a>

                </div>
                <div class="header__top--header-buttons">
                    <div class="header__trustpilot desktop">
                        <div class="trustpilot-header">

                            <!-- TrustBox widget - Micro Star -->
                            <div class="trustpilot-widget" data-locale="nl-NL" data-template-id="5419b732fbfb950b10de65e5" data-businessunit-id="4d6fd8cf00006400050edf3a" data-style-height="24px" data-style-width="100%" data-theme="dark" data-font-family="Lato">
                                <a href="https://nl.trustpilot.com/review/vechtsportonline.nl" target="_blank" rel="noopener">Trustpilot</a>
                            </div>
                            <!-- End TrustBox widget -->
                        </div>

                    </div>
                    <a class="keurmerk" href="#" aria-label="Thuiswinkel Waarborg">
                        <img class="keurmerk__image" src="/images/logo/waarborg.png" alt="Thuiswinkel Waarborg" width="95" height="30" />
                    </a>

                    <a class="header-button button--gray phonenumber" href="#" aria-label="Phone number">
                        <svg class="icon button__icon" role="img">
                            <title>Phone</title>
                            <use xlink:href="/images/icons-sprite.svg#custom-tel"></use>
                        </svg>

                        <span class="header-button__text">
                            Contact
                        </span>
                    </a>
                    <a class="header-button button--gray customer-account" href="#" aria-label="Customer Account">
                        <svg class="icon button__icon" role="img">
                            <title>User&#x27;s account</title>
                            <use xlink:href="/images/icons-sprite.svg#custom-acc"></use>
                        </svg>

                        <span class="header-button__text">
                            Account
                        </span>
                    </a>

                    <div class="language-switch">
                        <button class="header-button button--white language-switch__link popup-trigger" data-popuptrigger="popup-language-switch" aria-label="vechtsportonline.nl">
                            NL
                            <svg class="icon icon button__icon" role="img">
                                <title>angle down</title>
                                <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                            </svg>

                        </button>
                        <dialog class="js--popup language-switch__dialog" data-popup="popup-language-switch" role="alertdialog">
                            <a class="language-switch__dialog--link" href="fightsportonline.com" aria-label="fightsportonline.com">
                                ENG
                            </a>
                            <a class="language-switch__dialog--link" href="kampfsportonline.de" aria-label="kampfsportonline.de">
                                DE
                            </a>
                        </dialog>
                    </div>

                    <div class="minicart">
                        <button class="header-button button--minicart minicart__link popup-trigger" data-popuptrigger="popup-minicart" aria-label="">
                            <svg class="icon button__icon" role="img">
                                <title>custom cart</title>
                                <use xlink:href="/images/icons-sprite.svg#custom-cart"></use>
                            </svg>

                            <span class="counter qty minicart__counter">
                                <span class="counter-number minicart__counter--qty">
                                    10
                                </span>
                            </span>
                        </button>
                    </div>

                </div>
            </div>

            <div class="header__bottom">
                <div class="side-menu ">
                    <button type="button" class="side-menu__trigger" aria-label="Side menu open">
                        <svg class="icon side-menu__trigger-icon" role="img">
                            <title>Mobile menu</title>
                            <use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
                        </svg>

                    </button>

                    <span class="side-menu__trigger-text">
                        Categorieën
                    </span>

                    <div class="side-menu__content">
                        <div class="side-menu__trigger-wrapper">
                            <button type="button" class="side-menu__trigger" aria-label="Side menu close">
                                <svg class="icon side-menu__trigger-icon" role="img">
                                    <title>Close</title>
                                    <use xlink:href="/images/icons-sprite.svg#close"></use>
                                </svg>

                                <span class="header-button__text">
                                    Menu
                                </span>
                            </button>
                        </div>

                        <div id="dropdown-side-menu" class="dropdown-list side-menu__dropdown">
                            <ul class="dropdown-list__list">
                                <li class="
                    dropdown-list__item
                ">
                                    <a class="dropdown-list__label " href="#">
                                        All

                                    </a>

                                </li>
                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                    <button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
                                        dropdown title

                                        <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>

                                    </button>

                                    <div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
                                        <div id="" class="dropdown-list dropdown-list--inner">
                                            <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-1-1">
                                                        Item name

                                                        <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-1-1" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <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-1-2">
                                                                        sublist item name

                                                                        <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-1-2" class="dropdown-list__content " aria-hidden="true">
                                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                                            <ul class="dropdown-list__list">
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sub sublist item name

                                                                                    </a>

                                                                                </li>
                                                                                <li class="
                    dropdown-list__item
                ">
                                                                                    <a class="dropdown-list__label " href="#">
                                                                                        sub sublist item name

                                                                                    </a>

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

                                                                    </div>
                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

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

                                                    </div>
                                                </li>
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
                                                        Item name

                                                        <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-2-2" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

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

                                                    </div>
                                                </li>
                                                <li class="
                    dropdown-list__item
                ">
                                                    <a class="dropdown-list__label " href="#">
                                                        Item name

                                                    </a>

                                                </li>
                                                <li class="
                    dropdown-list__item
                ">
                                                    <a class="dropdown-list__label " href="#">
                                                        Item name

                                                    </a>

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

                                    </div>
                                </li>
                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
                                        dropdown title

                                        <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-2" class="dropdown-list__content " aria-hidden="true">
                                        <div id="" class="dropdown-list dropdown-list--inner">
                                            <ul class="dropdown-list__list">
                                                <li class="
                    dropdown-list__item
                ">
                                                    <a class="dropdown-list__label " href="#">
                                                        Item name

                                                    </a>

                                                </li>
                                                <li class="
                    dropdown-list__item
                ">
                                                    <a class="dropdown-list__label " href="#">
                                                        Item name

                                                    </a>

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

                                    </div>
                                </li>
                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
                                        dropdown title

                                        <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-3" class="dropdown-list__content " aria-hidden="true">
                                        <div id="" class="dropdown-list dropdown-list--inner">
                                            <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-3-1">
                                                        Item name

                                                        <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-3-1" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

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

                                                    </div>
                                                </li>
                                                <li class="
                    dropdown-list__item
                ">
                                                    <a class="dropdown-list__label " href="#">
                                                        Item name

                                                    </a>

                                                </li>
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
                                                        Item name

                                                        <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-3-2" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

                                                                </li>
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

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

                                                    </div>
                                                </li>
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
                                                        Item name

                                                        <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-3-3" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

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

                                                    </div>
                                                </li>
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
                                                        item name

                                                        <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-3-4" class="dropdown-list__content " aria-hidden="true">
                                                        <div id="" class="dropdown-list dropdown-list--inner">
                                                            <ul class="dropdown-list__list">
                                                                <li class="
                    dropdown-list__item
                ">
                                                                    <a class="dropdown-list__label " href="#">
                                                                        sublist item name

                                                                    </a>

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

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

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

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

                    </div>
                    <div class="side-menu__overlay"></div>
                </div>

                <script src="/components/raw/side-menu/side-menu.js" defer></script>

                <div class="mega-menu">
                    <ul class="mega-menu__list">
                        <li class="mega-menu__item mega-menu__item--parent">
                            <a href="/furniture" class="mega-menu__link">
                                Furniture
                            </a>
                            <ul class="mega-menu__inner-list mega-menu__inner-list--level1">
                                <li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--image">
                                    <a class="mega-menu__inner-link" href="#">
                                        <div class="lazyload-wrapper ">
                                            <img class="image lazyload " src="" data-src="/images/megamenu/menu-image.jpg" alt="">
                                        </div>

                                        <button class="button button--category" type="button" aria-label="click to do something">
                                            Bekijk categorie
                                            <svg class="icon button__icon" role="img">
                                                <title>angle-right</title>
                                                <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
                                            </svg>

                                        </button>

                                    </a>
                                </li>
                                <li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
                                    <a href="/example" class="mega-menu__inner-link">
                                        Example
                                    </a>
                                    <ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category name
                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category long name
                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

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

                                </li>
                                <li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
                                    <a href="/example" class="mega-menu__inner-link">
                                        Example2
                                    </a>
                                    <ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category name
                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category long very name
                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category long very name
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                                <li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
                                    <a href="/example" class="mega-menu__inner-link">
                                        Example3
                                    </a>
                                    <ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category name
                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category long very name
                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category long very name
                                            </a>
                                        </li>
                                    </ul>

                                </li>
                                <li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
                                    <a href="/example" class="mega-menu__inner-link">
                                        Example long name
                                    </a>
                                    <ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category name
                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">
                                                Category long very name
                                            </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
                                            <a href="" class="link mega-menu__inner-link">

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

                                </li>
                            </ul>
                        </li>
                        <li class="mega-menu__item">
                            <a href="/accessories" class="mega-menu__link">
                                Accessories
                            </a>
                        </li>
                        <li class="mega-menu__item">
                            <a href="/world-of" class="mega-menu__link">
                                World of
                            </a>
                        </li>
                    </ul>
                </div>
                <script src="/components/raw/mega-menu/mega-menu.js"></script>

                <div class="header__search">
                    <dialog class="minicart-content js--popup " data-popup="popup-minicart" role="alertdialog">
                        <div class="minicart-content__bar"></div>

                        <div class="minicart-content__wrapper">
                            <div class="minicart-content__total">
                                <div class="minicart-content__total-text">
                                    2 producten in winkelwagen
                                </div>
                                <div class="minicart-content__total-close">
                                    <svg class="icon minicart-content__total-close__icon js--popup__close-button" role="img">
                                        <title>close</title>
                                        <use xlink:href="/images/icons-sprite.svg#close"></use>
                                    </svg>

                                </div>
                            </div>

                            <div class="minicart-content__products-list">
                                <div class="minicart-product">
                                    <div class="minicart-product__image">
                                        <div class="lazyload-wrapper ">
                                            <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/VENUM-CONTENDER2.jpg" alt="Venum (Kick)bokshandschoenen Contender 2.0">
                                        </div>

                                    </div>
                                    <div class="minicart-product__info">
                                        <h3 class="minicart-product__name">
                                            <a class="link link--invert minicart-product__link" href="#">
                                                UFC MMA Handschoenen zonder duim
                                            </a>
                                        </h3>
                                        <p class="minicart-product__description">
                                            Deze leren wedstrijdhandschoenen van UFC zijn de enige handschoenen die gedragen mogen worden door de UFC vechters in Octagon!
                                        </p>
                                        <div id="test-1" class="dropdown-list minicart-product__attributes">
                                            <ul class="dropdown-list__list">
                                                <li class="
                    dropdown-list__item
                ">
                                                    < class="dropdown-list__label " aria-expanded="false" aria-controls="see-details-1">

                                                    </>

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

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

                                        <div class="minicart-product__bottom">
                                            <div class="minicart-product__qty">
                                                <div class="quantity-update ">

                                                    <input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />

                                                    <div class="quantity-update__buttons">
                                                        <button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">

                                                            <svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
                                                                <title>Arrow up</title>
                                                                <use xlink:href="/images/icons-sprite.svg#angle-up"></use>
                                                            </svg>

                                                        </button>
                                                        <button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">

                                                            <svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
                                                                <title>Arrow down</title>
                                                                <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                            </svg>

                                                        </button>
                                                    </div>

                                                </div>
                                                <script src="/components/raw/button/../quantity-update/quantity-update.js"></script>

                                            </div>
                                            <div class="minicart-product__price">
                                                € 109,95
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="minicart-product">
                                    <div class="minicart-product__image">
                                        <div class="lazyload-wrapper ">
                                            <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/VENUM-CONTENDER2.jpg" alt="Venum (Kick)bokshandschoenen Contender 2.0">
                                        </div>

                                    </div>
                                    <div class="minicart-product__info">
                                        <h3 class="minicart-product__name">
                                            <a class="link link--invert minicart-product__link" href="#">
                                                Venum (Kick)bokshandschoenen Contender 2.0
                                            </a>
                                        </h3>
                                        <p class="minicart-product__description">
                                            Dit zijn de nieuwe bestsellers onder de kickboxhandschoenen van Venum! Betaalbare (kick)bokshandschoenen van Venum, zonder concessies aan kwaliteit!
                                        </p>
                                        <div id="test-1" class="dropdown-list minicart-product__attributes">
                                            <ul class="dropdown-list__list">
                                                <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                                                    <button class="dropdown-list__label minicart-product__attributes-button" aria-expanded="false" aria-controls="see-details" aria-controls="see-details">
                                                        Bekijk Details

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

                                                    </button>

                                                    <div id="see-details" class="dropdown-list__content minicart-product__attributes-button" aria-hidden="true">
                                                        <dl class="list list--description minicart-product__attributes-list">
                                                            <dt class="list__label">Maat</dt>
                                                            <dd class="list__value">12 oz</dd>
                                                            <dt class="list__label">Kleur</dt>
                                                            <dd class="list__value">Zwart/Grijs-Wit</dd>
                                                        </dl>

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

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

                                        <div class="minicart-product__bottom">
                                            <div class="minicart-product__qty">
                                                <div class="quantity-update ">

                                                    <input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />

                                                    <div class="quantity-update__buttons">
                                                        <button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">

                                                            <svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
                                                                <title>Arrow up</title>
                                                                <use xlink:href="/images/icons-sprite.svg#angle-up"></use>
                                                            </svg>

                                                        </button>
                                                        <button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">

                                                            <svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
                                                                <title>Arrow down</title>
                                                                <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
                                                            </svg>

                                                        </button>
                                                    </div>

                                                </div>
                                                <script src="/components/raw/button/../quantity-update/quantity-update.js"></script>

                                            </div>
                                            <div class="minicart-product__price">
                                                44,95
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            <div class="minicart-content__summary">
                                <div class="minicart-content__summary-label">
                                    Totaal
                                </div>
                                <div class="minicart-content__summary-value">
                                    € 219,90
                                </div>
                            </div>

                            <div class="minicart-content__actions">
                                <div class="row">
                                    <div class="col-xs-7">
                                        <button class="button button minicart-content__actions--button minicart-content__actions--button-showcart" type="button">
                                            Bekijk en bewerk Winkelwagen
                                            <svg class="icon button__icon minicart-content__actions--button-icon" role="img">
                                                <title>Arrow right</title>
                                                <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
                                            </svg>

                                        </button>

                                    </div>
                                    <div class="col-xs-5">
                                        <button class="button button minicart-content__actions--button minicart-content__actions--button-checkout" type="button">
                                            Ga naar afrekenen
                                            <svg class="icon button__icon minicart-content__actions--button-icon" role="img">
                                                <title>Arrow right</title>
                                                <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
                                            </svg>

                                        </button>

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

                    <form class="form minisearch">
                        <div class="field search">
                            <div class="input input--search">
                                <span class="form-check" aria-label="form-check-field-id">
                                    <svg class="icon brief-info__icon" role="img">
                                        <title>USP Check</title>
                                        <use xlink:href="/images/icons-sprite.svg#usp-check"></use>
                                    </svg>

                                </span>
                                <label class="
            label
            
        " for="field-id">
                                    Label text
                                </label>
                                <input class="input__field " id="field-id" name="field-name" type="text" placeholder="Zoeken">
                            </div>

                            <div class="search-autocomplete"></div>
                        </div>
                        <div class="actions">
                            <button type="submit" title="Zoek" class="search">
                                <svg class="icon " role="img">
                                    <title>zoeken</title>
                                    <use xlink:href="/images/icons-sprite.svg#search"></use>
                                </svg>

                                <span>Zoeken</span>
                            </button>
                        </div>
                    </form>

                </div>
            </div>
            <div class="header__trustpilot mobile">
                <div class="trustpilot-header">

                    <!-- TrustBox widget - Micro Star -->
                    <div class="trustpilot-widget" data-locale="nl-NL" data-template-id="5419b732fbfb950b10de65e5" data-businessunit-id="4d6fd8cf00006400050edf3a" data-style-height="24px" data-style-width="100%" data-theme="dark" data-font-family="Lato">
                        <a href="https://nl.trustpilot.com/review/vechtsportonline.nl" target="_blank" rel="noopener">Trustpilot</a>
                    </div>
                    <!-- End TrustBox widget -->
                </div>

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

<script src="/components/raw/header/../popup/popup.js"></script>
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
<header class="header">
    <div class="header__wrapper">
        <div class="container">
            <div class="header__top">
                <div class="header__top--logo">
                    {{ render '@logo' }}
                </div>
                <div class="header__top--header-buttons">
                    <div class="header__trustpilot desktop">
                        {{ render '@trustpilot--header' }}
                    </div>
                    {{ render '@keurmerk' }}
                    {{ render '@header-button' }}
                    {{ render '@language-switch' }}
                    {{ render '@minicart' }}
                </div>
            </div>

            <div class="header__bottom">
                {{ render '@side-menu' }}
                {{ render '@mega-menu' }}

                <div class="header__search">
                    {{ render '@minicart-content' }}
                    {{ render '@search' }}
                </div>
            </div>
            <div class="header__trustpilot mobile">
                {{ render '@trustpilot--header' }}
            </div>
        </div>
    </div>
</header>

<script src="{{static '../popup/popup.js' }}"></script>
{
  "headerBackground": {
    "src": "/images/hero/vso-hero-homepage.jpg"
  }
}
  • Content:
    .header {
        &__wrapper {
            background-color: $black;
            display: grid;
            grid-template-areas: "overflow";
    
            & .container {
                grid-area: overflow;
                position: relative;
            }
        }
    
        &__background {
            grid-area: overflow;
    
            & .image {
                object-fit: fill;
                object-position: top;
                height: 100%;
            }
    
            &--category-page {
                background: url('/images/hero/vso-hero-category-small.jpg');
                background-repeat: repeat;
            }
        }
    
        &__top {
            display: grid;
            grid-template: "logo header-buttons";
            margin: $spacer--medium;
            position: relative;
            @include mq($screen-m) {
                margin: $spacer--large 0;
            }
    
            &--logo {
                grid-area: logo;
                display: flex;
                align-items: center;
            }
    
            &--header-buttons {
                grid-area: header-buttons;
    
                display: flex;
                justify-content: flex-end;
                align-items: center;
    
                & .keurmerk,
                & .phonenumber,
                & .customer-account {
                    margin: 0 5px;
                }
            }
        }
    
        &__bottom {
            position: relative;
            display: flex;
            justify-content: space-between;
    
            background-color: $red;
            border-top-left-radius: $border-radius;
            border-top-right-radius: $border-radius;
        }
    
        &__search {
            position: absolute;
            right: 0;
            width: 50%;
    
            @include mq($screen-l) {
                width: 20%;
            }
            @include mq($screen-xl) {
                width: 25%;
            }
        }
    
        & .header__search.popup--active {
            width: 100%;
    
            @include mq($screen-m) {
                width: 50%;
            }
    
            @include mq($screen-l) {
                width: 40%;
            }
            @include mq($screen-xl) {
                width: 35%;
            }
        }
    }
    
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: build/components/03-modules/header/_header.scss
  • Size: 2 KB

There are no notes for this item.