<a href="#maincontent" class="skip-nav">
    Skip to content
</a>
<script src="/components/raw/skip-nav/skip-nav.js" defer></script>

<div class="marketing-bar marketing-bar--closed" data-type="marketing-bar">
    <div class="container marketing-bar__container">
        <div class="marketing-bar__text">
            Subscribe and get 10$ for Shopping! Lorem ipsum text in marketing bar.
        </div>
        <button class="button button--icon button--rotate-icon marketing-bar__close" type="button" aria-label="Close marketing bar">
        <svg
    class="icon button__icon marketing-bar__close-icon"
    
        role="img"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

</button>

    </div>
</div>
<script src="/components/raw/marketing-bar/marketing-bar.js"></script>

<div class="contact-bar ">
    <div class="contact-bar__container container">
        <ul class="list contact-bar__list contact-bar__list--icons">
            <li class="list-item contact-bar__item">
                <a href="#" class="
                            contact-bar__link
                            
                        ">
                        <span
                                class="
                            icon
                            contact-bar__icon
                        "
                                aria-label=""
                        >
                            <svg
    class="icon "
    
        role="img"
>
    <use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>

                        </span>
                        <span
                            class="
                                button__text
                                contact-bar__text
                            "
                        >
                            Account
                        </span>
                    </a>
            </li>
            <li class="list-item contact-bar__item">
                <a href="#" class="
                            contact-bar__link
                            
                        ">
                        <span
                                class="
                            icon
                            contact-bar__icon
                        "
                                aria-label=""
                        >
                            <svg
    class="icon "
    
        role="img"
>
    <use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>

                        </span>
                        <span
                            class="
                                button__text
                                contact-bar__text
                            "
                        >
                            Klantenservice
                        </span>
                    </a>
            </li>
            <li class="list-item contact-bar__item">
                <a href="#" class="
                            contact-bar__link
                            
                        ">
                        <span
                                class="
                            icon
                            contact-bar__icon
                        "
                                aria-label=""
                        >
                            <svg
    class="icon "
    
        role="img"
>
    <use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>

                        </span>
                        <span
                            class="
                                button__text
                                contact-bar__text
                            "
                        >
                            Groothandel
                        </span>
                    </a>
            </li>
        </ul>
        <ul class="list contact-bar__list contact-bar__list--icons">
            <li class="list-item contact-bar__item">
                <a href="tel:+31858772604" class="
                        contact-bar__link
                        
                    ">
                    <span
                        class="
                            icon
                            contact-bar__icon
                        "
                        aria-label=""
                    >
                        <svg
    class="icon "
    
        role="img"
>
        <title>Phone</title>
    <use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>

                    </span>
                    <span
                        class="
                            button__text
                            contact-bar__text
                        "
                    >
                        T: 085 - 877 26 04
                    </span>
                </a>
            </li>
            <li class="contact-bar__item">
                <a href="mailto:info@cruc.nl" class="
                        contact-bar__link
                        
                    ">
                    <span
                        class="
                            icon
                            contact-bar__icon
                        "
                        aria-label=""
                    >
                        <svg
    class="icon "
    
        role="img"
>
        <title>Email</title>
    <use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>

                    </span>
                    <span
                        class="
                            button__text
                            contact-bar__text
                        "
                    >
                        E-mail
                    </span>
                </a>
            </li>
        </ul>
    </div>
</div>

<header class="header ">
    <div class="container">
        <div class="header__wrapper">
            <a class="logo header__logo" href="/components/preview/home" aria-label="Homepage">
    <img
        class="logo__image "
        src="/images/logo/logo_cruc.jpeg"
        alt="Cruc Logo"
        
    >
</a>

            <div class="side-menu ">
                <button class="button button--icon modal-trigger side-menu__trigger" type="button" data-modal-trigger="side-menu" aria-label="Open menu">
        <svg
    class="icon side-menu__trigger-icon"
    
        role="presentation"
        focusable="false"
>
        <title>Mobile-menu</title>
    <use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>

</button>

                <div role="dialog" aria-hidden="true" id="side-menu" data-modal="side-menu" class="modal modal--tertiary side-menu__modal">
                    <div role="document" class="modal__container side-menu__container" tabindex="0">
                        <div class="modal__content side-menu__content">

                            <div class="modal__middle side-menu__content-middle">

                                <div id="dropdown-default" class="dropdown-list dropdown-list--with-nested">
                                    <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-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-default'));
                                </script>

                            </div>

                            <div class="modal__bottom side-menu__content-bottom">
                                <div class="modal__bottom-actions side-menu__bottom-actions">
                                    <div class="
                                    modal__bottom-action
                                    side-menu__bottom-action
                                ">
                                        <div class="contact-bar contact-bar--vertical">
                                            <div class="contact-bar__container ">
                                                <ul class="list contact-bar__list contact-bar__list--icons">
                                                    <li class="list-item contact-bar__item">
                                                        <a href="#" class="
                            contact-bar__link
                            
                        ">
                        <span
                                class="
                            icon
                            contact-bar__icon
                        "
                                aria-label=""
                        >
                            <svg
    class="icon "
    
        role="img"
>
    <use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>

                        </span>
                        <span
                            class="
                                button__text
                                contact-bar__text
                            "
                        >
                            Account
                        </span>
                    </a>
                                                    </li>
                                                    <li class="list-item contact-bar__item">
                                                        <a href="#" class="
                            contact-bar__link
                            
                        ">
                        <span
                                class="
                            icon
                            contact-bar__icon
                        "
                                aria-label=""
                        >
                            <svg
    class="icon "
    
        role="img"
>
    <use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>

                        </span>
                        <span
                            class="
                                button__text
                                contact-bar__text
                            "
                        >
                            Klantenservice
                        </span>
                    </a>
                                                    </li>
                                                    <li class="list-item contact-bar__item">
                                                        <a href="#" class="
                            contact-bar__link
                            
                        ">
                        <span
                                class="
                            icon
                            contact-bar__icon
                        "
                                aria-label=""
                        >
                            <svg
    class="icon "
    
        role="img"
>
    <use xlink:href="/images/icons-sprite.svg#undefined"></use>
</svg>

                        </span>
                        <span
                            class="
                                button__text
                                contact-bar__text
                            "
                        >
                            Groothandel
                        </span>
                    </a>
                                                    </li>
                                                </ul>
                                                <ul class="list contact-bar__list contact-bar__list--icons">
                                                    <li class="list-item contact-bar__item">
                                                        <a href="tel:+31858772604" class="
                        contact-bar__link
                        
                    ">
                    <span
                        class="
                            icon
                            contact-bar__icon
                        "
                        aria-label=""
                    >
                        <svg
    class="icon "
    
        role="img"
>
        <title>Phone</title>
    <use xlink:href="/images/icons-sprite.svg#phone"></use>
</svg>

                    </span>
                    <span
                        class="
                            button__text
                            contact-bar__text
                        "
                    >
                        T: 085 - 877 26 04
                    </span>
                </a>
                                                    </li>
                                                    <li class="contact-bar__item">
                                                        <a href="mailto:info@cruc.nl" class="
                        contact-bar__link
                        
                    ">
                    <span
                        class="
                            icon
                            contact-bar__icon
                        "
                        aria-label=""
                    >
                        <svg
    class="icon "
    
        role="img"
>
        <title>Email</title>
    <use xlink:href="/images/icons-sprite.svg#envelope"></use>
</svg>

                    </span>
                    <span
                        class="
                            button__text
                            contact-bar__text
                        "
                    >
                        E-mail
                    </span>
                </a>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>

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

                        <button class="button button--icon button--rotate-icon modal__close-button side-menu__close-button" type="button" aria-label="click to close the modal">
        <svg
    class="icon button__icon modal__close-button-icon"
    
        role="presentation"
        focusable="false"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

</button>

                    </div>
                </div>
                <script type="text/javascript">
                    new Modal(document.querySelector('[data-modal-trigger="side-menu"]'));
                </script>

            </div>

            <div class="header__buttons">
                <div class="header__icon">
                    <a class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    button--icon-fill margin-right-xs
                                " href="#" aria-label="Account">
                                <svg
    class="icon header-button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Account</title>
    <use xlink:href="/images/icons-sprite.svg#new-user"></use>
</svg>

                                <span class="header-button__label">Aanmelden</span>
                            </a>
                </div>
                <div class="header__icon">
                    <a class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    button--icon-fill margin-right-xs
                                " href="#" aria-label="Wishlist">
                                <svg
    class="icon header-button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Heart</title>
    <use xlink:href="/images/icons-sprite.svg#new-heart"></use>
</svg>

                                <span class="header-button__label">Verlanglijstje</span>
                            </a>
                </div>

                <div class="header__minicart">
                    <button type="button" class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    modal-trigger
                                    margin-left-xs
                                " aria-label="Shopping cart dropdown trigger" data-modal-trigger="modal-minicart">
                                <svg
    class="icon header-button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Winkelwagen</title>
    <use xlink:href="/images/icons-sprite.svg#new-cart"></use>
</svg>

                                <span class="header-button__counter">
                                    <span class="header-button__counter-dot">2</span>
                                </span>
                                <span class="header-button__label">Winkelwagen</span>
                            </button>
                </div>

                <div role="dialog" aria-hidden="true" id="modal-minicart" data-modal="modal-minicart" class="modal modal--secondary" aria-labelledby="minicart-title" aria-describedby="minicart-products">
                    <div role="document" class="modal__container " tabindex="0">
                        <div class="modal__content modal__content--block">

                            <div class="minicart-content ">
                                <div class="minicart-content__top" id="minicart-title">
                                    <h2 class="minicart-content__heading">
                                        Shopping cart
                                    </h2>

                                    <div class="minicart-content__counter">
                                        2 items
                                    </div>
                                </div>
                                <div class="minicart-content__middle" id="minicart-products">
                                    <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/minicart-product-64x96.jpeg" alt="product name goes here">
                                                </div>

                                            </div>
                                            <div class="minicart-product__data">
                                                <div class="minicart-product__info">
                                                    <div class="minicart-product__name-wrapper">
                                                        <h3 class="minicart-product__name">
                                                            <a class="
                            link
                            link--invert
                            minicart-product__link
                        " href="#">
                        Some product name
                    </a>
                                                        </h3>
                                                        <div class="minicart-product__price margin-bottom-xs">
                                                            <div class="price  ">
                                                                <span class="price__value price__value--old ">
        <del aria-label="Price reduced from: $249.95">
                $
            249.95
                
        </del>
    </span>
                                                                <span class="price__value price__value--special ">
        <ins aria-label="On sale at: $159.95">
            
                $
            
            159.95
            
                
            
        </ins>
    </span>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
                                                        <dt class="list__label">
            Lorem ipsum
        </dt>
                                                        <dd class="list__value">
                                                            Lorem ipsum Value
                                                        </dd>
                                                        <dt class="list__label">
            Lorem ipsum
        </dt>
                                                        <dd class="list__value">
                                                            Lorem ipsum Value
                                                        </dd>
                                                    </dl>

                                                </div>

                                                <div class="minicart-product__bottom">
                                                    <div class="minicart-product__qty">
                                                        <div class="input input--inline minicart-product__input margin-bottom-0 margin-right-m">
                                                            <label class="
            label
            input__label
            minicart-product__label
        " for="mini-qty-1">
        Qty:
    </label>
                                                            <input class="input__field minicart-product__field" id="mini-qty-1" name="mini-qty" type="text" placeholder="32" aria-label="Change the quantity" min="1">
                                                        </div>

                                                        <button class="button button--secondary minicart-product__update" type="button">
    Update
</button>

                                                    </div>

                                                    <div class="minicart-product__actions">
                                                        <a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
        <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Edit pencil</title>
    <use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>

</a>

                                                        <a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
        <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Trash bin</title>
    <use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>

</a>

                                                    </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/minicart-product-64x96.jpeg" alt="product name goes here">
                                                </div>

                                            </div>
                                            <div class="minicart-product__data">
                                                <div class="minicart-product__info">
                                                    <div class="minicart-product__name-wrapper">
                                                        <h3 class="minicart-product__name">
                                                            <a class="
                            link
                            link--invert
                            minicart-product__link
                        " href="#">
                        Some product 2 name
                    </a>
                                                        </h3>
                                                        <div class="minicart-product__price margin-bottom-xs">
                                                            <div class="price  ">
                                                                <span class="price__value price__value--old ">
        <del aria-label="Price reduced from: $249.95">
                $
            249.95
                
        </del>
    </span>
                                                                <span class="price__value price__value--special ">
        <ins aria-label="On sale at: $159.95">
            
                $
            
            159.95
            
                
            
        </ins>
    </span>
                                                            </div>

                                                        </div>
                                                    </div>
                                                    <dl class="list list--description minicart-product__attributes-list" title="Alpaca description list">
                                                        <dt class="list__label">
            Lorem ipsum
        </dt>
                                                        <dd class="list__value">
                                                            Lorem ipsum Value
                                                        </dd>
                                                        <dt class="list__label">
            Lorem ipsum
        </dt>
                                                        <dd class="list__value">
                                                            Lorem ipsum Value
                                                        </dd>
                                                    </dl>

                                                </div>

                                                <div class="minicart-product__bottom">
                                                    <div class="minicart-product__qty">
                                                        <div class="input input--inline minicart-product__input margin-bottom-0 margin-right-m">
                                                            <label class="
            label
            input__label
            minicart-product__label
        " for="mini-qty-2">
        Qty:
    </label>
                                                            <input class="input__field minicart-product__field" id="mini-qty-2" name="mini-qty" type="text" placeholder="32" aria-label="Change the quantity" min="1">
                                                        </div>

                                                        <button class="button button--secondary minicart-product__update" type="button">
    Update
</button>

                                                    </div>

                                                    <div class="minicart-product__actions">
                                                        <a class="button button--icon " href="#" aria-label="edit product in your shopping cart">
        <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Edit pencil</title>
    <use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>

</a>

                                                        <a class="button button--icon " href="#" aria-label="remove this product from your shopping cart">
        <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Trash bin</title>
    <use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>

</a>

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

                                    </div>
                                </div>
                                <div class="minicart-content__bottom">
                                    <div class="minicart-content__summary">
                                        <div class="minicart-content__summary-label">
                                            Cart Subtotal
                                        </div>
                                        <div class="minicart-content__summary-value">
                                            $ 200.00
                                        </div>
                                    </div>
                                    <div class="minicart-content__actions">
                                        <a href="/edit" class="
                    button
                    button--secondary
                    minicart-content__edit
                    minicart-content__action-button
                ">
                View and edit cart
            </a>
                                        <button class="button minicart-content__action-button minicart-content__checkout" type="button">
    Go to Checkout
</button>

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

                        </div>

                        <button class="button button--icon button--rotate-icon modal__close-button" type="button" aria-label="click to close the modal">
        <svg
    class="icon button__icon modal__close-button-icon"
    
        role="presentation"
        focusable="false"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

</button>

                    </div>
                </div>
                <script type="text/javascript">
                    new Modal(document.querySelector('[data-modal-trigger="modal-minicart"]'));
                </script>

            </div>

            <div class="header__search-wrapper">
                <form class="search-form">
                    <div class="search-form__wrapper">
                        <div class="input search-form__input-wrapper margin-0">
                            <label class="
            label
            input__label
                label--hidden
            
        " for="search">
        Search products
    </label>
                            <input class="input__field search-form__input border-color-light" id="search" name="search" type="search" placeholder="Zoeken in de winkel...">
                        </div>

                        <button class="button button--icon button--icon search-form__button" type="button" aria-label="Search">
        <svg
    class="icon button__icon"
    
        role="presentation"
        focusable="false"
>
        <title>Search</title>
    <use xlink:href="/images/icons-sprite.svg#search"></use>
</svg>

</button>

                    </div>
                    <div class="quicksearch__wrapper">
                        <section class="quicksearch quicksearch--visible" tabindex="0" aria-label="Quicksearch results">
                            <div class="quicksearch__results">
                                <h2 class="quicksearch__results-heading margin-bottom-0">
                                    Results for your request:
                                    <span class="quicksearch__typed">
                    Ni
                </span>
                                </h2>
                            </div>
                            <div class="quicksearch__content">
                                <ul class="quicksearch__list quicksearch__list--column">
                                    <li class="quicksearch__product">
                                        <a href="#" title="Lorem Ipsum is simply dummy...">
                                            <div class="lazyload-wrapper quicksearch__product-image-wrapper">
                                                <img class="image lazyload quicksearch__product-image" src="" data-src="/images/product/minicart-product-64x96.jpeg" alt="">
                                            </div>

                                        </a>
                                        <div class="quicksearch__product-details">
                                            <a href="#" class="link quicksearch__link" title="Lorem Ipsum is simply dummy...">
                                                <h3 class="quicksearch__name">
                                                    Lorem Ipsum is simply dummy...
                                                </h3>

                                            </a>
                                            <div class="price  ">
                                                <span class="price__value price__value--old ">
        <del aria-label="Price reduced from: $249.95">
                $
            249.95
                
        </del>
    </span>
                                                <span class="price__value price__value--special ">
        <ins aria-label="On sale at: $159.95">
            
                $
            
            159.95
            
                
            
        </ins>
    </span>
                                            </div>

                                        </div>
                                    </li>
                                    <li class="quicksearch__product">
                                        <a href="#" title="Lorem Ipsum is simply dummy...">
                                            <div class="lazyload-wrapper quicksearch__product-image-wrapper">
                                                <img class="image lazyload quicksearch__product-image" src="" data-src="/images/product/minicart-product-64x96.jpeg" alt="">
                                            </div>

                                        </a>
                                        <div class="quicksearch__product-details">
                                            <a href="#" class="link quicksearch__link" title="Lorem Ipsum is simply dummy...">
                                                <h3 class="quicksearch__name">
                                                    Lorem Ipsum is simply dummy...
                                                </h3>

                                            </a>
                                            <div class="price  ">
                                                <span class="price__value price__value--old ">
        <del aria-label="Price reduced from: $249.95">
                $
            249.95
                
        </del>
    </span>
                                                <span class="price__value price__value--special ">
        <ins aria-label="On sale at: $159.95">
            
                $
            
            159.95
            
                
            
        </ins>
    </span>
                                            </div>

                                        </div>
                                    </li>
                                    <li class="quicksearch__product">
                                        <a href="#" title="Lorem Ipsum is simply dummy...">
                                            <div class="lazyload-wrapper quicksearch__product-image-wrapper">
                                                <img class="image lazyload quicksearch__product-image" src="" data-src="/images/product/minicart-product-64x96.jpeg" alt="">
                                            </div>

                                        </a>
                                        <div class="quicksearch__product-details">
                                            <a href="#" class="link quicksearch__link" title="Lorem Ipsum is simply dummy...">
                                                <h3 class="quicksearch__name">
                                                    Lorem Ipsum is simply dummy...
                                                </h3>

                                            </a>
                                            <div class="price  ">
                                                <span class="price__value price__value--old ">
        <del aria-label="Price reduced from: $249.95">
                $
            249.95
                
        </del>
    </span>
                                                <span class="price__value price__value--special ">
        <ins aria-label="On sale at: $159.95">
            
                $
            
            159.95
            
                
            
        </ins>
    </span>
                                            </div>

                                        </div>
                                    </li>
                                    <li class="quicksearch__product">
                                        <a href="#" title="Lorem Ipsum is simply dummy...">
                                            <div class="lazyload-wrapper quicksearch__product-image-wrapper">
                                                <img class="image lazyload quicksearch__product-image" src="" data-src="/images/product/minicart-product-64x96.jpeg" alt="">
                                            </div>

                                        </a>
                                        <div class="quicksearch__product-details">
                                            <a href="#" class="link quicksearch__link" title="Lorem Ipsum is simply dummy...">
                                                <h3 class="quicksearch__name">
                                                    Lorem Ipsum is simply dummy...
                                                </h3>

                                            </a>
                                            <div class="price  ">
                                                <span class="price__value price__value--old ">
        <del aria-label="Price reduced from: $249.95">
                $
            249.95
                
        </del>
    </span>
                                                <span class="price__value price__value--special ">
        <ins aria-label="On sale at: $159.95">
            
                $
            
            159.95
            
                
            
        </ins>
    </span>
                                            </div>

                                        </div>
                                    </li>
                                </ul>
                                <div class="quicksearch__sidebar-column">
                                    <h3 id="qs-category-title" class="quicksearch__sidebar-title">
                                        Category
                                    </h3>
                                    <ul class="quicksearch__list quicksearch__sidebar-list" aria-labelledby="qs-category-title">
                                        <li class="quicksearch__sidebar-item">
                                            <a href="#" class="
                                    link
                                    quicksearch__link
                                     quicksearch__link--sidebar
                                " title="Category 1">
                                Category 1
                            </a>
                                        </li>
                                        <li class="quicksearch__sidebar-item">
                                            <a href="#" class="
                                    link
                                    quicksearch__link
                                     quicksearch__link--sidebar
                                " title="Category 2">
                                Category 2
                            </a>
                                        </li>
                                    </ul>
                                    <h3 id="qs-manufacturer-title" class="quicksearch__sidebar-title">
                                        Manufacturer
                                    </h3>
                                    <ul class="quicksearch__list quicksearch__sidebar-list" aria-labelledby="qs-manufacturer-title">
                                        <li class="quicksearch__sidebar-item">
                                            <a href="#" class="
                                    link
                                    quicksearch__link
                                     
                                " title="Nike">
                                Nike
                            </a>
                                        </li>
                                        <li class="quicksearch__sidebar-item">
                                            <a href="#" class="
                                    link
                                    quicksearch__link
                                     
                                " title="Nike SB">
                                Nike SB
                            </a>
                                        </li>
                                        <li class="quicksearch__sidebar-item">
                                            <a href="#" class="
                                    link
                                    quicksearch__link
                                     
                                " title="Nike sportswear">
                                Nike sportswear
                            </a>
                                        </li>
                                        <li class="quicksearch__sidebar-item">
                                            <a href="#" class="
                                    link
                                    quicksearch__link
                                     
                                " title="Nixon">
                                Nixon
                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <a class="link button button--fluid quicksearch__more-link" href="#" title="See All">
    See All
</a>

                            <button class="button button--icon button--rotate-icon quicksearch__close-button" type="button" aria-label="Close quicksearch">
        <svg
    class="icon button__icon quicksearch__close-icon"
    
        role="img"
>
        <title>Close</title>
    <use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>

</button>

                        </section>
                    </div>

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

<div class="mega-menu ">
    <ul class="mega-menu__list container ">
        <li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
            <a href="/nieuw" class="mega-menu__link">
                    Nieuw
                </a>

            <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Bekijk alle
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Kisten
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Kisten
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Kisten
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Kisten
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Kisten
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Terug in voorraad
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Trending nu
                </a>
                </li>
            </ul>

        </li>
        <li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
            <a href="/fruitkisten" class="mega-menu__link">
                    Fruitkisten
                </a>

            <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                <li class="list__item mega-menu__inner-item mega-menu__inner-item--inline mega-menu__column-hidden">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Row one
                </a>
                    <ul class="list mega-menu__inner-list">
                        <li class="list__item mega-menu__inner-item">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    columns one item
                </a>
                        </li>
                        <li class="list__item mega-menu__inner-item">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    columns one item 2
                </a>
                        </li>
                    </ul>

                </li>
                <li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--images">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Row two
                </a>
                    <ul class="list mega-menu__inner-list">
                        <li class="list__item mega-menu__inner-item">
                            <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                <div class="lazyload-wrapper ">
                                    <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                </div>

                                Summer
                            </a>
                        </li>
                        <li class="list__item mega-menu__inner-item">
                            <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                <div class="lazyload-wrapper ">
                                    <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                </div>

                                Spring
                            </a>
                        </li>
                        <li class="list__item mega-menu__inner-item">
                            <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                <div class="lazyload-wrapper ">
                                    <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                </div>

                                Autumn
                            </a>
                        </li>
                        <li class="list__item mega-menu__inner-item">
                            <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                <div class="lazyload-wrapper ">
                                    <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                </div>

                                Winter
                            </a>
                        </li>
                        <li class="list__item mega-menu__inner-item">
                            <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                <div class="lazyload-wrapper ">
                                    <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                </div>

                                View all
                            </a>
                        </li>
                        <li class="list__item mega-menu__inner-item">
                            <a href="" class="
                    link
                    mega-menu__inner-link
                ">
                                <div class="lazyload-wrapper ">
                                    <img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw&#x3D;&#x3D;" data-src="/images/product/cart-product-160_160.jpg" alt="brand name alt text">
                                </div>

                                lorem ipsum
                            </a>
                        </li>
                    </ul>

                </li>
                <li class="list__item mega-menu__inner-item mega-menu__column-hidden mega-menu__inner-item--columns">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Row three
                </a>
                    <ul class="list mega-menu__inner-list">
                        <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    row 3 c 1
                </a>
                            <ul class="list mega-menu__inner-list">
                                <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Men
                </a>
                                    <ul class="list mega-menu__inner-list">
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Elegant
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Casual
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Active
                </a>
                                        </li>
                                    </ul>

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

                        </li>
                        <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    row 3 column 2
                </a>
                            <ul class="list mega-menu__inner-list">
                                <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Women
                </a>
                                    <ul class="list mega-menu__inner-list">
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Elegant
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Casual
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Active
                </a>
                                        </li>
                                    </ul>

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

                        </li>
                        <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    row 3 column 3
                </a>
                            <ul class="list mega-menu__inner-list">
                                <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Kids
                </a>
                                    <ul class="list mega-menu__inner-list">
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Pijamas
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    School Days
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Kids Fance Dress
                </a>
                                            <ul class="list mega-menu__inner-list">
                                                <li class="list__item mega-menu__inner-item">
                                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Hats
                </a>
                                                </li>
                                                <li class="list__item mega-menu__inner-item">
                                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Special Ocassions
                </a>
                                                </li>
                                            </ul>

                                        </li>
                                    </ul>

                                </li>
                            </ul>

                        </li>
                        <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    row 3 column 4
                </a>
                            <ul class="list mega-menu__inner-list">
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Jackets
                </a>
                                </li>
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Shirts
                </a>
                                </li>
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Dresses
                </a>
                                </li>
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Trousers
                </a>
                                </li>
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Hats
                </a>
                                </li>
                            </ul>

                        </li>
                    </ul>

                </li>
            </ul>

        </li>
        <li class="mega-menu__item ">
            <a href="/meubels" class="mega-menu__link">
                    Meubels
                </a>

        </li>
        <li class="mega-menu__item ">
            <a href="/woonaccessoires" class="mega-menu__link">
                    Woonaccessoires
                </a>

        </li>
        <li class="mega-menu__item ">
            <a href="/partijverkoop" class="mega-menu__link">
                    Partijverkoop
                </a>

        </li>
        <li class="mega-menu__item mega-menu__item--parent mega-menu__item--rows">
            <a href="/maatwerk" class="mega-menu__link">
                    Maatwerk
                </a>

            <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                <li class="list__item mega-menu__inner-item mega-menu__inner-item--columns mega-menu__column-hidden">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Row one
                </a>
                    <ul class="list mega-menu__inner-list">
                        <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    row 3 c 1
                </a>
                            <ul class="list mega-menu__inner-list">
                                <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Men
                </a>
                                    <ul class="list mega-menu__inner-list">
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Elegant
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Casual
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Active
                </a>
                                        </li>
                                    </ul>

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

                        </li>
                        <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    row 3 column 2
                </a>
                            <ul class="list mega-menu__inner-list">
                                <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Women
                </a>
                                    <ul class="list mega-menu__inner-list">
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Elegant
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Casual
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Active
                </a>
                                        </li>
                                    </ul>

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

                        </li>
                        <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    row 3 column 3
                </a>
                            <ul class="list mega-menu__inner-list">
                                <li class="list__item mega-menu__inner-item mega-menu__inner-item--children">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Kids
                </a>
                                    <ul class="list mega-menu__inner-list">
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Pijamas
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    School Days
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Fance Dress
                </a>
                                        </li>
                                        <li class="list__item mega-menu__inner-item">
                                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Special Occasion
                </a>
                                        </li>
                                    </ul>

                                </li>
                            </ul>

                        </li>
                        <li class="list__item mega-menu__inner-item mega-menu__column-hidden">
                            <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    row 3 column 4
                </a>
                            <ul class="list mega-menu__inner-list">
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Jackets
                </a>
                                </li>
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Shirts
                </a>
                                </li>
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Dresses
                </a>
                                </li>
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Trousers
                </a>
                                </li>
                                <li class="list__item mega-menu__inner-item">
                                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Hats
                </a>
                                </li>
                            </ul>

                        </li>
                    </ul>

                </li>
            </ul>

        </li>
        <li class="mega-menu__item mega-menu__item--parent mega-menu__item--secondary">
            <a href="/brands" class="mega-menu__link">
                    Inspiratie
                </a>

            <ul class="list mega-menu__inner-list mega-menu__inner-list--level1">
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    View all
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Clothing
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Shoes
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Accessories
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Face + Body
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Living + Gifts
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Back in stock
                </a>
                </li>
                <li class="list__item mega-menu__inner-item">
                    <a href="" class="
                        link
                        mega-menu__inner-link
                    ">
                    Trending now
                </a>
                </li>
            </ul>

        </li>
    </ul>
</div>
<script src="/components/raw/mega-menu/mega-menu.js"></script>
{{#if skipNav }}
    {{ render '@skip-nav' }}
{{/if}}

{{#if marketingBar }}
    {{ render '@marketing-bar' }}
{{/if}}

{{#if contactBar }}
    {{ render '@contact-bar' }}
{{/if}}

<header class="header {{ class }}" {{{ attributes }}}>
    <div class="container">
        <div class="header__wrapper">
            {{#if logo}}
                {{ render '@logo' logo merge="true" }}
            {{/if}}

            {{#if sideMenu}}
                {{ render '@side-menu' }}
            {{/if}}

            {{#if buttons }}
                <div class="header__buttons">
                    {{#each buttons as |item| }}
                        <div class="header__icon">
                            <a
                                class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    {{ item.class }}
                                "
                                href="#"
                                aria-label="{{ item.ariaLabel }}"
                            >
                                {{ render '@icon' item.icon }}
                                <span class="header-button__label">{{ label }}</span>
                            </a>
                        </div>
                    {{/each}}

                    {{#if minicart}}
                        <div class="header__minicart">
                            <button
                                type="button"
                                class="
                                    header-button
                                    button
                                    button--icon
                                    button--icon-light
                                    modal-trigger
                                    margin-left-xs
                                "
                                aria-label="{{ minicartTrigger.ariaLabel }}"
                                data-modal-trigger="modal-minicart"
                            >
                                {{ render '@icon' minicartTrigger.icon }}
                                <span class="header-button__counter">
                                    <span class="header-button__counter-dot">2</span>
                                </span>
                                <span class="header-button__label">{{ minicartTrigger.label }}</span>
                            </button>
                        </div>

                        {{ render '@modal--secondary' minicartModal merge=true }}
                    {{/if}}
                </div>
            {{/if}}

            {{#if search }}
                <div class="header__search-wrapper">
                    <form class="search-form">
                        <div class="search-form__wrapper">
                            {{ render '@input' searchInput }}
                            {{ render '@button--icon' searchButton }}
                        </div>
                        {{#if quicksearch }}
                            {{ render '@quicksearch' }}
                        {{/if}}
                    </form>
                </div>
            {{/if}}
        </div>
    </div>
</header>

{{#if megaMenu }}
    {{ render '@mega-menu' }}
{{/if}}
{
  "contactBar": true,
  "sideMenu": true,
  "search": true,
  "quicksearch": true,
  "megaMenu": true,
  "skipNav": true,
  "marketingBar": true,
  "minicart": true,
  "buttons": [
    {
      "ariaLabel": "Account",
      "class": "button--icon-fill margin-right-xs",
      "label": "Aanmelden",
      "icon": {
        "id": "new-user",
        "title": "Account",
        "class": "header-button__icon",
        "hidden": true
      }
    },
    {
      "ariaLabel": "Wishlist",
      "class": "button--icon-fill margin-right-xs",
      "label": "Verlanglijstje",
      "icon": {
        "id": "new-heart",
        "title": "Heart",
        "class": "header-button__icon",
        "hidden": true
      }
    }
  ],
  "logo": {
    "class": "header__logo"
  },
  "searchInput": {
    "class": "search-form__input-wrapper margin-0",
    "label": {
      "text": "Search products",
      "hidden": true
    },
    "field": {
      "class": "search-form__input border-color-light",
      "id": "search",
      "name": "search",
      "type": "search",
      "placeholder": "Zoeken in de winkel..."
    }
  },
  "searchButton": {
    "tag": "button",
    "text": "",
    "class": "button--icon search-form__button",
    "icon": {
      "id": "search",
      "title": "Search",
      "class": "button__icon",
      "hidden": true
    },
    "attributes": "type=\"button\" aria-label=\"Search\""
  },
  "minicartTrigger": {
    "icon": {
      "id": "new-cart",
      "title": "Winkelwagen",
      "class": "header-button__icon",
      "hidden": true
    },
    "label": "Winkelwagen",
    "link": "/cart",
    "ariaLabel": "Shopping cart dropdown trigger"
  },
  "minicartModal": {
    "trigger": false,
    "modal": {
      "id": "modal-minicart",
      "attributes": "aria-labelledby=\"minicart-title\" aria-describedby=\"minicart-products\""
    },
    "modalComponent": {
      "content": "minicart-content",
      "contentContext": ""
    },
    "modalContent": {
      "class": "modal__content--block"
    },
    "script": true,
    "modalTop": false,
    "modalMiddle": false,
    "modalBottom": false
  },
  "briefInfo": {
    "items": [
      {
        "iconLabel": "",
        "icon": {
          "class": "brief-info__icon",
          "id": "",
          "title": "",
          "hidden": true
        },
        "title": {
          "class": "",
          "tag": "span",
          "text": ""
        },
        "subtitle": {
          "class": "",
          "tag": "span",
          "text": ""
        }
      }
    ]
  }
}
  • Content:
    .header-button {
        @include mq($screen-xl) {
            margin: $header-button__margin\@extra-large;
        }
    
        &__counter {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: $header-button__counter-top;
            right: $header-button__counter-right;
            padding: 2px;
            border: $header-button__counter-border;
            border-radius: $header-button__counter-size;
            line-height: $header-button__counter-font-size;
            font-size: $header-button__counter-font-size;
            color: $header-button__counter-color;
            background-color: $header-button__counter-background;
            z-index: $header-button__counter-z-index;
    
            &--hidden {
                display: none;
            }
    
            &-dot {
                min-width: $header-button__counter-dot-size;
                min-height: $header-button__counter-dot-size;
                border-radius: $header-button__counter-dot-size;
                margin: auto;
                background-color: $header-button__counter-dot-bg-color;
            }
        }
    
        &__summary-count {
            @include visually-hidden();
        }
        &.button--icon-fill {
            &:before {
                background-color: $button__before-background--icon-light;
            }
        }
    }
    
  • URL: /components/raw/header/_button.scss
  • Filesystem Path: build/components/Organisms/header/_button.scss
  • Size: 1.3 KB
  • Content:
    $header__border                               : $border-base !default;
    $header__border-width                         : 0 0 $border-width-base 0 !default;
    $header__border\@large                        : 0 !default;
    $header__border-width\@large                  : 0 !default;
    $header__background                           : $white !default;
    $header__background--email                    : $white !default;
    
    $header__sticky-animation                     : slide-down 1s !default;
    
    $header__wrapper-margin                       : 0 !default;
    $header__wrapper-padding                      : 0 0 $spacer !default;
    $header__wrapper-padding\@medium              : 0 0 $spacer--semi-medium !default;
    $header__wrapper-padding\@large               : 0 0 $spacer--semi-medium !default;
    $header__wrapper-column-gap                   : $spacer--semi-medium !default;
    
    $header__logo-padding                         : 0 0 $spacer--extra-small 0 !default;
    $header__logo-padding\@medium                 : 0 !default;
    $header__logo-order\@medium                   : 2 !default;
    
    $header__side-menu-order                      : 1 !default;
    $header__side-menu-max-width                  : 30% !default;
    
    $header__buttons-width                        : calc(100% - (#{$logo__max-width} * 2 + 5% )) !default;
    $header__buttons-width\@medium                : calc(2 * 48px + 1 * #{$spacer}) !default;
    $header__buttons-order\@medium                : 3 !default;
    $header__buttons-width\@extra-large           : 30% !default;
    
    $header__search-wrapper-z-index               : $z-index-high + 1 !default;
    $header__search-wrapper-padding               : 0 !default;
    $header__search-wrapper-padding\@medium       : 0 24px !default;
    $header__search-wrapper-padding\@large        : 0 0 0 !default;
    $header__search-wrapper-padding\@extra-large  : 0 $spacer--small 0 0 !default;
    $header__search-wrapper-order                 : 3 !default;
    $header__search-wrapper-order\@medium         : 2 !default;
    $header__search-wrapper-max-width\@large      : 750px !default;
    $header__search-wrapper-max-width\@extra-large: 800px !default;
    
    $header__minicart-border\@medium              : $border-base !default;
    $header__minicart-border-width\@medium        : 0 0 0 1px !default;
    
    $header__brief-info-display                   : none !default;
    $header__brief-info-display\@large            : flex !default;
    $header__brief-info-min-width                 : 220px !default;
    $header__brief-info-order                     : 3 !default;
    $header__brief-info-subtitle-font-size        : $font-size-small !default;
    
    
    // Buttons
    $header-button__margin\@extra-large           : 0 0 0 $spacer--medium !default;
    
    $header-button__counter-top                   : 6px !default;
    $header-button__counter-right                 : 6px !default;
    $header-button__counter-font-size             : $font-size-small !default;
    $header-button__counter-background            : $theme-second !default;
    $header-button__counter-color                 : $white !default;
    $header-button__counter-size                  : $spacer--medium !default;
    $header-button__counter-border                : none !default;
    $header-button__counter-z-index               : $z-index-low !default;
    
    $header-button__counter-dot-size              : $spacer--small !default;
    $header-button__counter-dot-bg-color          : $theme-second !default;
    $header-button__icon-before-bg--icon-fill     : $button__before-background--icon-light !default;
    
    // Search
    $search-form__position                        : static !default;
    $search-form__position\@medium                : static !default;
    $search-form__height                          : 34px !default;
    $search-form__width                           : 100% !default;
    $search-form__width--extra-large              : 70% !default;
    $search-form__alignment                       : flex-end !default;
    $search-form__margin                          : 0 !default;
    $search-form__border                          : 1px solid $gray-light !default;
    $search-form__font-size                       : $input__placeholder-font-size !default;
    
    $search-form__button-margin                   : 0 !default;
    $search-form__button-top                      : 1px !default;
    $search-form__button-right                    : 0 !default;
    $search-form__button-border                   : $border-base !default;
    $search-form__button-border-width             : 0 1px !default;
    $search-form__button-border-radius            : 0 $form-elements-radius $form-elements-radius 0 !default;
    $search-form__button-height                   : 46px !default;
    $search-form__button-background--disabled     : none !default;
    $search-form__button-icon-fill--disabled      : $color-primary !default;
    
    $search-form__placeholder-color               : $input__placeholder-color !default;
    
    // Checkout variant
    $header__wrapper-padding--checkout            : 0 !default;
    $header__wrapper-padding--checkout\@medium    : $spacer--medium 0 !default;
    
  • URL: /components/raw/header/_header-variables.scss
  • Filesystem Path: build/components/Organisms/header/_header-variables.scss
  • Size: 4.9 KB
  • Content:
    @import 'header-variables';
    @import 'button';
    @import 'search-form';
    
    .header {
        position: fixed;
        border: $header__border;
        border-width: $header__border-width;
        background: $header__background;
        z-index: 51;
        width: 100%;
        top: 0;
        @include mq($screen-m) {
            padding: 5px;
        }
        @include mq($screen-l) {
            margin-top: 1rem;
            position: relative;
            border: none;
            padding: 0;
        }
        &__top {
            margin-top: 101px;
            @include mq($screen-m) {
                margin-top: 141px;
            }
            @include mq($screen-l) {
                margin-top: 0;
            }
            .usps-top--mobile {
                display: block;
                @include mq($screen-l) {
                    display: none;
                }
                .header-usps--item {
                    display: none;
                }
                .slick-track {
                    .header-usps--item {
                        display: block;
                    }
                }
            }
        }
        &.sticky {
            @include mq($screen-l) {
                position: fixed;
                top: 0;
                width: 100%;
                margin-top: 0;
                border-bottom: 1px solid #f5f5f5;
                z-index: 51;
                animation: $header__sticky-animation;
                padding: 24px 0 0;
    
                .quicksearch {
                    top: 75%;
                }
            }
        }
        &--checkout {
            position: static;
    
            .header__wrapper {
                padding: $header__wrapper-padding--checkout;
    
                @include mq($screen-m) {
                    padding: $header__wrapper-padding--checkout\@medium;
                }
            }
    
            .header__minicart {
                border: none;
            }
    
            @include mq($screen-l) {
                border: $header__border;
                border-width: $header__border-width;
            }
            .sticky {
                position: relative !important; // sass-lint:disable-line no-important
            }
        }
    
        &--email {
            background-color: $header__background--email;
        }
    
        &__wrapper {
            position: relative;
            justify-content: space-between;
            display: flex;
            flex-flow: row wrap;
            padding: $header__wrapper-padding;
    
            @include mq($screen-l) {
                flex-wrap: nowrap;
                border: $header__border\@large;
                border-width: $header__border-width\@large;
                padding: $header__wrapper-padding\@large;
                margin-top: $header__wrapper-margin;
                column-gap: $header__wrapper-column-gap;
            }
        }
    
        &__logo {
            padding: $header__logo-padding;
    
            @include mq($screen-l) {
                order: $header__logo-order\@medium;
                padding: $header__logo-padding\@medium;
            }
        }
    
        &__search-wrapper {
            display: flex;
            flex-flow: column nowrap;
            flex: 1 100%;
            order: $header__search-wrapper-order;
            justify-content: center;
            padding: $header__search-wrapper-padding;
            z-index: $header__search-wrapper-z-index;
            width: 100%;
            @include mq($screen-l) {
                order: $header__search-wrapper-order\@medium;
                flex-direction: column;
                justify-content: center;
                padding: $header__search-wrapper-padding\@large;
                max-width: $header__search-wrapper-max-width\@large;
            }
    
            @include mq($screen-xl) {
                padding: $header__search-wrapper-padding\@extra-large;
                max-width: $header__search-wrapper-max-width\@extra-large;
            }
        }
    
        &__minicart {
            position: relative;
            display: flex;
            flex-direction: column;
    
            //@include mq($screen-m) {
            //    border: $header__minicart-border\@medium;
            //    border-width: $header__minicart-border-width\@medium;
            //}
        }
    
        &__buttons {
            display: flex;
            flex: 1 $header__buttons-width;
            max-width: $header__buttons-width;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-end;
            padding: $header__search-wrapper-padding;
            order: 3;
            @include mq($screen-l) {
                order: $header__buttons-order\@medium;
                flex-wrap: nowrap;
                flex: 1 $header__buttons-width\@extra-large;
                max-width: $header__buttons-width\@extra-large;
                padding: $header__search-wrapper-padding\@large;
            }
            @include mq($screen-xl) {
                padding: $header__search-wrapper-padding\@extra-large;
            }
            .header-button {
                min-width: 35px;
                min-height: 35px;
                margin: 0;
                flex-direction: column;
    
                .icon {
                    width: 25px;
                    height: 25px;
                }
                &__counter {
                    @include mq($screen-m) {
                        top: -6px;
                        right: 32px;
                        width: 16px;
                        height: 16px;
                        background: $theme-second;
                        &-dot {
                            background: $theme-second;
                        }
                    }
                }
                &__label {
                    display: none;
                    @include mq($screen-m) {
                        display: flex;
                        color: #555;
                        text-transform: none;
                        padding: 7px 0 0;
                    }
                }
                &:after {
                    display: none;
                }
                &:hover {
                    background: transparent !important;// sass-lint:disable-line no-important
    
                    .header-button__label {
                        color: $theme-second;
                        text-decoration: underline;
                    }
                 }
            }
        }
        &__icon {
            display: flex;
            flex-direction: column;
            @include mq($screen-xl) {
                margin-right: $spacer--semi-medium;
            }
        }
    
        &__brief-info {
            display: $header__brief-info-display;
            align-items: center;
            order: $header__brief-info-order;
            min-width: $header__brief-info-min-width;
    
            @include mq($screen-l) {
                display: $header__brief-info-display\@large;
            }
    
            .brief-info__subtitle {
                font-size: $header__brief-info-subtitle-font-size;
            }
        }
    
        .side-menu {
            max-width: $header__side-menu-max-width;
            order: $header__side-menu-order;
            flex: 1 $header__side-menu-max-width;
        }
        .container {
            @include mq($screen-m) {
                margin: 0 auto;
            }
        }
    }
    
  • URL: /components/raw/header/_header.scss
  • Filesystem Path: build/components/Organisms/header/_header.scss
  • Size: 6.6 KB
  • Content:
    .search-form {
        width: $search-form__width;
        align-self: $search-form__alignment;
        line-height: $font-line-height;
        margin: $search-form__margin;
        position: $search-form__position;
    
        @include mq($screen-m) {
            position: $search-form__position\@medium;
        }
    
        &__wrapper {
            position: relative;
        }
    
        &__input-wrapper {
            position: relative;
        }
    
        &__input {
            width: 100%;
        }
    
        &__button {
            position: absolute;
            top: $search-form__button-top;
            right: $search-form__button-right;
            height: $search-form__button-height;
            min-height: $search-form__button-height;
            margin: $search-form__button-margin;
            border: $search-form__button-border;
            border-width: $search-form__button-border-width;
            border-radius: $search-form__button-border-radius;
    
            &:disabled,
            &[disabled] {
                background: $search-form__button-background--disabled;
    
                &:hover {
                    background: $search-form__button-background--disabled;
                }
    
                .icon {
                    fill: $search-form__button-icon-fill--disabled;
                }
            }
    
        }
    }
    
  • URL: /components/raw/header/_search-form.scss
  • Filesystem Path: build/components/Organisms/header/_search-form.scss
  • Size: 1.2 KB

There are no notes for this item.