<div class="page-wrapper">
<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.svg" alt="Solarwood Logo">
</a>
<div class="header__buttons">
<div class="header__switchers">
<div id="dropdown-default" class="dropdown-list dropdown-list--detailed-content">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content">
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-detailed-content" class="dropdown-list__content " aria-hidden="true">
<ul class="list ">
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
<li class="list__item ">
Lorem ipsum
</li>
</ul>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-default'));
</script>
</div>
<div class="side-menu ">
<button class="button button--icon modal-trigger button--rotate-icon 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@solarwood.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>
<svg class="icon octagon" role="presentation" focusable="false">
<title>octagon</title>
<use xlink:href="/images/icons-sprite.svg#octagon"></use>
</svg>
</div>
</div>
</div>
</header>
</div>
<div class="page-wrapper">
{{ render '@header' }}
</div>
{
"hero": {
"class": "section--advanced",
"heading": false,
"components": [
{
"content": {
"content": "hero--advanced",
"contentContext": {
"heading": false
}
}
}
]
},
"briefInfo": {
"class": "display-none-m",
"heading": false,
"components": [
{
"content": {
"content": "brief-info--dividers",
"contentContext": ""
}
}
]
},
"categoryBanners": {
"class": "section--fix-spacer-large",
"heading": {
"content": "heading",
"contentContext": {
"tag": "h2",
"class": "heading--first-level margin-0",
"text": "Shop by category"
}
},
"contentClass": "row",
"components": [
{
"content": {
"content": "banner--secondary",
"contentContext": {
"text": "Clothing",
"class": "col-xs-6 col-lg-3 margin-bottom-l",
"image": {
"defaultSrc": "/images/home/banners/category-clothing-144_200.jpg",
"sources": [
{
"src": "/images/home/banners/category-clothing-320_432.jpg",
"mediaQuery": "(max-width: 1200px)"
},
{
"src": "/images/home/banners/category-clothing-320_432.jpg",
"mediaQuery": ""
}
]
}
}
}
},
{
"content": {
"content": "banner--secondary",
"contentContext": {
"text": "Shoes",
"class": "col-xs-6 col-lg-3 margin-bottom-l",
"image": {
"defaultSrc": "/images/home/banners/category-shoes-144_200.jpg",
"sources": [
{
"src": "/images/home/banners/category-shoes-320_432.jpg",
"mediaQuery": "(max-width: 1200px)"
},
{
"src": "/images/home/banners/category-shoes-320_432.jpg",
"mediaQuery": ""
}
]
}
}
}
},
{
"content": {
"content": "banner--secondary",
"contentContext": {
"text": "Accessories",
"class": "col-xs-6 col-lg-3 margin-bottom-l",
"image": {
"defaultSrc": "/images/home/banners/category-accessories-144_200.jpg",
"sources": [
{
"src": "/images/home/banners/category-accessories-320_432.jpg",
"mediaQuery": "(max-width: 1200px)"
},
{
"src": "/images/home/banners/category-accessories-320_432.jpg",
"mediaQuery": ""
}
]
}
}
}
},
{
"content": {
"content": "banner--secondary",
"contentContext": {
"text": "New In",
"class": "col-xs-6 col-lg-3 margin-bottom-l",
"image": {
"defaultSrc": "/images/home/banners/category-new-in-144_200.jpg",
"sources": [
{
"src": "/images/home/banners/category-new-in-320_432.jpg",
"mediaQuery": "(max-width: 1200px)"
},
{
"src": "/images/home/banners/category-new-in-320_432.jpg",
"mediaQuery": ""
}
]
}
}
}
}
]
},
"additionalBanners": {
"class": "section--fix-spacer-medium",
"heading": false,
"contentClass": "row",
"components": [
{
"content": {
"content": "banner",
"contentContext": {
"class": "col-xs-12 col-lg-6 margin-bottom-m",
"image": {
"defaultSrc": "/images/home/banners/banner-small-women-now-304_128.jpg",
"sources": [
{
"src": "/images/home/banners/banner-medium-women-now-656_264.jpg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/home/banners/banner-medium-women-now-656_264.jpg",
"mediaQuery": ""
}
]
}
}
}
},
{
"content": {
"content": "banner",
"contentContext": {
"class": "col-xs-12 col-lg-6 margin-bottom-m",
"image": {
"defaultSrc": "/images/home/banners/banner-small-men-now-304_128.jpg",
"sources": [
{
"src": "/images/home/banners/banner-medium-men-now-656_264.jpg",
"mediaQuery": "(max-width: 768px)"
},
{
"src": "/images/home/banners/banner-medium-men-now-656_264.jpg",
"mediaQuery": ""
}
]
}
}
}
}
]
},
"popularProducts": {
"heading": false,
"contentClass": "section__content--products",
"components": [
{
"content": {
"content": "slider--products",
"contentContext": {
"script": true,
"heading": {
"content": "heading",
"contentContext": {
"tag": "h2",
"class": "heading--first-level margin-0",
"text": "Popular products"
}
}
}
}
}
]
},
"teasers": {
"heading": false,
"contentClass": "",
"components": [
{
"content": {
"content": "teaser--secondary",
"contentContext": ""
}
}
]
},
"newProducts": {
"heading": false,
"contentClass": "section__content--products",
"components": [
{
"content": {
"content": "slider--products",
"contentContext": {
"script": true,
"heading": {
"content": "heading",
"contentContext": {
"tag": "h2",
"class": "heading--first-level margin-0",
"text": "New products"
}
}
}
}
}
]
},
"brands": {
"heading": false,
"contentClass": "",
"components": [
{
"content": {
"content": "slider--brands",
"contentContext": {
"script": true,
"heading": {
"content": "heading",
"contentContext": {
"tag": "h2",
"class": "heading--first-level margin-0",
"text": "Top brands"
}
}
}
}
}
]
},
"content": {
"heading": false,
"contentClass": "",
"components": [
{
"content": {
"content": "content-block--secondary",
"contentContext": ""
}
}
]
}
}
There are no notes for this item.