<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@onlineslaapcomfort.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.png" alt="Maison 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@onlineslaapcomfort.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==" 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==" 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
">
Badkamer
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Mobiliteit
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Gezondheid & Therapie
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Wonen & Slapen
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Zwanger & Bevalling
</a>
</li>
<li class="list__item mega-menu__inner-item">
<a href="" class="
link
mega-menu__inner-link
">
Verpleging artikelen
</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="/components/preview/grid-view" class="mega-menu__link">
Badkamer
</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==" 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==" 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==" 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==" 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==" 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==" 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": ""
}
}
]
}
}
.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;
}
}
}
$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 : $theme-second !default;
$header__background--email : $white !default;
$header__sticky-animation : slide-down 1s !default;
$header__wrapper-margin : 0 !default;
$header__wrapper-padding : $spacer 0 !default;
$header__wrapper-padding\@medium : $spacer--semi-medium 0 !default;
$header__wrapper-padding\@large : $spacer--semi-medium 0 !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-primary !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-primary !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;
@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) {
position: relative;
border: none;
padding: 0;
}
&__top {
margin-top: 110px;
@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;
background: transparent;
.icon {
width: 25px;
height: 25px;
fill: $black;
}
&__counter {
@include mq($screen-m) {
top: -10px;
right: 24px;
width: 20px;
height: 20px;
}
}
&__label {
display: none;
@include mq($screen-m) {
display: flex;
color: $black;
text-transform: capitalize;
padding: 7px 0 0;
}
}
&:after {
display: none;
}
&:hover {
background: transparent;
.icon {
fill: $theme-tertiary;
}
.header-button__label {
color: $theme-tertiary;
text-decoration: none;
}
}
}
}
&__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;
}
}
}
.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;
}
}
}
}
There are no notes for this item.