<header class="page-header">
<div class="page-header__topbar show@xl">
<div class="row">
<div class="col-12">
<!-- This requires code from t3x-icon_list -->
<ul class="list--reset flex flex-row flex-wrap icon-list">
<li class="flex items-center margin-bottom-sm margin-right-md icon-list__item">
<svg class="icon icon--18 icon-list__icon margin-right-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z" />
</svg>
<div class="icon-list__text">
rem beatae quam
</div>
</li>
<li class="flex items-center margin-bottom-sm margin-right-md icon-list__item">
<svg class="icon icon--18 icon-list__icon margin-right-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z" />
</svg>
<div class="icon-list__text">
eum odit aut
</div>
</li>
<li class="flex items-center margin-bottom-sm margin-right-md icon-list__item">
<svg class="icon icon--18 icon-list__icon margin-right-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z" />
</svg>
<div class="icon-list__text">
nesciunt et asperiores
</div>
</li>
<li class="flex items-center margin-bottom-sm margin-right-md icon-list__item">
<svg class="icon icon--18 icon-list__icon margin-right-sm" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 464c-118.664 0-216-96.055-216-216 0-118.663 96.055-216 216-216 118.664 0 216 96.055 216 216 0 118.663-96.055 216-216 216zm141.63-274.961L217.15 376.071c-4.705 4.667-12.303 4.637-16.97-.068l-85.878-86.572c-4.667-4.705-4.637-12.303.068-16.97l8.52-8.451c4.705-4.667 12.303-4.637 16.97.068l68.976 69.533 163.441-162.13c4.705-4.667 12.303-4.637 16.97.068l8.451 8.52c4.668 4.705 4.637 12.303-.068 16.97z" />
</svg>
<div class="icon-list__text">
libero ducimus accusantium
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="page-header__content">
<div class="row">
<div class="col-12">
<div class="flex justify-between@xl items-center">
<div class="flex flex-column justify-center items-center margin-right-sm margin-right-md@xl">
<a href="#" class="page-header__logo-link color-current" title="Company">
<svg xmlns="http://www.w3.org/2000/svg" class="page-header__logo" viewBox="0 0 112.14 14.64">
<path d="M7.8 14.64a8.78 8.78 0 003.64-.72 6.76 6.76 0 002.64-2.08L11.1 9.18a3.82 3.82 0 01-3.06 1.64 3.13 3.13 0 01-2.38-.95 3.56 3.56 0 01-.9-2.55 3.56 3.56 0 01.9-2.55 3.13 3.13 0 012.38-.95 3.82 3.82 0 013.06 1.64l2.98-2.66A6.76 6.76 0 0011.44.72 8.78 8.78 0 007.8 0a8.5 8.5 0 00-4 .93 6.95 6.95 0 00-2.79 2.6A7.18 7.18 0 000 7.32a7.18 7.18 0 001.01 3.79 6.95 6.95 0 002.79 2.6 8.5 8.5 0 004 .93zm14.98 0a8.64 8.64 0 004.06-.94 7.01 7.01 0 003.84-6.38A7.01 7.01 0 0026.84.94 8.64 8.64 0 0022.78 0a8.64 8.64 0 00-4.06.94 7.01 7.01 0 00-3.84 6.38 7.01 7.01 0 003.84 6.38 8.64 8.64 0 004.06.94zm0-3.82a3 3 0 01-1.59-.43 3.08 3.08 0 01-1.13-1.22 3.89 3.89 0 01-.42-1.85 3.89 3.89 0 01.42-1.85 3.08 3.08 0 011.13-1.22 3.15 3.15 0 013.18 0 3.08 3.08 0 011.13 1.22 3.89 3.89 0 01.42 1.85 3.89 3.89 0 01-.42 1.85 3.08 3.08 0 01-1.13 1.22 3 3 0 01-1.59.43zm13.92 3.5V8.16l3.04 4.9h2.08l3.04-5.12.04 6.38h4.3l-.04-14h-3.88l-4.44 7.46L36.28.32H32.4v14zm19.5 0v-3.44h2.02a8.26 8.26 0 003.38-.64 4.98 4.98 0 002.22-1.84 5.02 5.02 0 00.78-2.8 5.02 5.02 0 00-.78-2.8A4.98 4.98 0 0061.6.96a8.26 8.26 0 00-3.38-.64h-6.74v14zm1.72-7.08H56.2V3.96h1.72a2.1 2.1 0 011.44.43 1.54 1.54 0 01.48 1.21 1.54 1.54 0 01-.48 1.21 2.1 2.1 0 01-1.44.43zm11.7 7.08l.94-2.44h5.32l.94 2.44h4.88l-6.12-14h-4.64l-6.12 14zm4.96-5.84h-2.72l1.36-3.52zm12.48 5.84V7.96l5.32 6.36h3.88v-14h-4.6v6.36L86.34.32h-3.88v14zm19.8 0V9.24l5.28-8.92h-4.56l-2.88 4.84-2.86-4.84h-4.98l5.28 8.86v5.14z" />
</svg>
</a>
</div>
<div class="page-header__search flex-grow-1 margin-right-md show@xl">
<!-- render search field from style guide -->
<div class="input-field input-field--floating-label margin-0">
<input id="floating-labels" type="search" placeholder="What are you looking for?">
<label for="floating-labels">What are you looking for?</label>
</div>
</div>
<ul aria-label="Go to" class="show@xl header__links header-links list--reset">
<li class="header-links__link">
<a href="">About us</a>
</li>
<li class="header-links__link">
<a href="">Service & Contact</a>
</li>
</ul>
<div class="page-header__actions flex flex-shrink-0">
<div class="page-header__action page-header__action--login">
<a class="page-header__action-link flex flex-column items-center reset-link padding-x-xs padding-x-sm@lg" href="#">
<svg class='icon icon--24' viewBox='0 0 26 22'>
<g fill='none' fill-rule='evenodd' stroke-linecap='round'>
<g stroke='currentColor'>
<path vector-effect='non-scaling-stroke' d='M23.677 20c0-3.898-5.268-7.059-11.765-7.059C5.414 12.941.147 16.101.147 20' transform='translate(-75 -195) translate(76 196)' />
<path vector-effect='non-scaling-stroke' d='M11.912 12.946c3.573 0 6.47-2.897 6.47-6.47 0-3.574-2.897-6.47-6.47-6.47-3.574 0-6.47 2.896-6.47 6.47 0 3.573 2.896 6.47 6.47 6.47h0z' transform='translate(-75 -195) translate(76 196)' />
</g>
</g>
</svg>
<span class="page-header__action-label">
Login
</span>
</a>
</div>
<div class="page-header__action page-header__action--wishlist">
<a class="page-header__action-link flex flex-column items-center reset-link padding-x-xs padding-x-sm@lg" href="#">
<svg class='icon icon--24' viewBox='0 0 22 21'>
<g fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'>
<g stroke='currentColor'>
<path vector-effect='non-scaling-stroke' d='M.815 8.222l8.904 10.641c.154.184.405.181.556 0l8.904-10.64-.355.454c.524-.655.9-1.445 1.071-2.314.069-.347.105-.707.105-1.076C20 2.37 17.74.004 14.953.004c-2.3 0-4.24 1.61-4.848 3.812l-.21-.004C9.286 1.61 7.346 0 5.047 0 2.26 0 0 2.365 0 5.283c0 .369.036.728.105 1.076.171.868.547 1.659 1.071 2.314' transform='translate(-110 -195) translate(111 196)'></path>
</g>
</g>
</svg>
<span class="page-header__action-label">
Wish list
</span>
</a>
</div>
<div class="page-header__action page-header__action--cart">
<a class="page-header__action-link flex flex-column items-center reset-link padding-x-xs padding-x-sm@lg" href="#">
<svg class='icon icon--24' viewBox='0 0 17 22'>
<g fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'>
<g stroke='currentColor'>
<path vector-effect='non-scaling-stroke' d='M11.977 20h-8.5c-1.28 0-2.318-.839-2.318-2.009L0 5.714c0-.195.173-.26.386-.26h14.682c.213 0 .387.12.387.315l-1.16 12.242c0 1.17-1.037 1.989-2.318 1.989h0z' transform='translate(-141 -194) translate(142 195)'></path>
<path vector-effect='non-scaling-stroke' d='M4.09 5.455V4.07C4.09 1.885 5.657.114 7.728.114c2.071 0 3.637 1.771 3.637 3.956v1.385' transform='translate(-141 -194) translate(142 195)'></path>
</g>
</g>
</svg>
<span class="page-header__action-label">
Cart
</span>
</a>
</div>
</div>
<div class="margin-left-sm hidden@xl">
<button type="button" href="#" class="page-header__navigation-toggle nav-toggle reset-link js-nav-toggle" aria-haspopup="true" aria-expanded="false">
<span class="nav-toggle__icon">
<span class="nav-toggle__line nav-toggle__line--1"></span>
<span class="nav-toggle__line nav-toggle__line--2"></span>
<span class="nav-toggle__line nav-toggle__line--3"></span>
</span>
<span class="visually-hidden">
Menu
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="page-navigation" class="page-header__navigation page-navigation" tabindex="-1">
<div class="row row--collapse hidden@xl">
<div class="col-12">
<div class="page-header__search">
<!-- render search field from style guide -->
<div class="input-field input-field--floating-label margin-0">
<input id="floating-labels" type="search" placeholder="What are you looking for?">
<label for="floating-labels">What are you looking for?</label>
</div>
</div>
</div>
</div>
<div class="row row--collapse">
<div class="col-12">
<nav id="page-navigation" class="page-navigation" aria-label="Company">
<ul role="menubar" class="page-navigation__menu main-menu flex flex-column flex-row@xl items-center@xl list--reset">
<li class="main-menu__item main-menu__item--has-submenu main-menu__link--has-large-submenu" role="none">
<a href="#" class="main-menu__link main-menu__link--has-submenu main-menu__link--primary block" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="main-menu__link-label block">
Item 1
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
</span>
</a>
<div class="main-menu__dropdown main-menu__dropdown--large flex flex-column flex-row@xl" aria-hidden="true">
<div class="main-menu__dropdown-inner flex flex-column flex-row@xl">
<button class="menu-menu__link--back hidden@xl">
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
Terug naar Hoofdnavigatie
</button>
<div class="hidden@xl">
<a href="{item.link}" class="main-menu__link main-menu__link--parent" role="menuitem" data-uid="xx">
missing link and attribute View all...
</a>
</div>
<div class="main-menu__column ">
<a href="#" class="main-menu__column-title main-menu__link main-menu__link--has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false">
Uitgelicht
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
</a>
<div class="main-menu__dropdown main-menu__dropdown--sub flex flex-column flex-row@xl" aria-hidden="true">
<button class="menu-menu__link--back hidden@xl">
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
Terug naar Uitgelicht
</button>
<ul class="list--reset main-menu__menu" role="menu" aria-label="Uitgelicht">
<li class="main-menu__dropdown-item main-menu__dropdown-item--current" role="none">
<a href="#" class="main-menu__link main-menu__link--current" role="menuitem">
Uitgelicht
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Nieuwe producten
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Collectie
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Uitverkoop
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Duurzame materialen
</a>
</li>
</ul>
</div>
</div>
<div class="main-menu__column padding-left-md@xl padding-left-lg@xl">
<a href="#" class="main-menu__column-title main-menu__link main-menu__link--has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false">
Item 1 Sub 1
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
</a>
<div class="main-menu__dropdown main-menu__dropdown--sub flex flex-column flex-row@xl" aria-hidden="true">
<button class="menu-menu__link--back hidden@xl">
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
Terug naar Item 1 Sub 1
</button>
<ul class="list--reset main-menu__menu" role="menu" aria-label="Item 1 Sub 1">
<li class="main-menu__dropdown-item main-menu__dropdown-item--current" role="none">
<a href="#" class="main-menu__link main-menu__link--current" role="menuitem">
Item 1 Sub 1
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Subcategorie
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Subcategorie
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Subcategorie
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Subcategorie
</a>
</li>
</ul>
</div>
</div>
<div class="main-menu__column padding-left-md@xl padding-left-lg@xl">
<a href="#" class="main-menu__column-title main-menu__link main-menu__link--has-submenu" role="menuitem" aria-haspopup="true" aria-expanded="false">
Item 1 Sub 2
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
</a>
<div class="main-menu__dropdown main-menu__dropdown--sub flex flex-column flex-row@xl" aria-hidden="true">
<button class="menu-menu__link--back hidden@xl">
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
Terug naar Item 1 Sub 2
</button>
<ul class="list--reset main-menu__menu" role="menu" aria-label="Item 1 Sub 2">
<li class="main-menu__dropdown-item main-menu__dropdown-item--current" role="none">
<a href="#" class="main-menu__link main-menu__link--current" role="menuitem">
Item 1 Sub 2
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Subcategorie
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Subcategorie
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Subcategorie
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub" role="menuitem">
Subcategorie
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="main-menu__item main-menu__item--has-submenu " role="none">
<a href="#" class="main-menu__link main-menu__link--has-submenu main-menu__link--primary block" role="menuitem" aria-haspopup="true" aria-expanded="false">
<span class="main-menu__link-label block">
Item 2
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" />
</svg>
</span>
</a>
<div class="main-menu__dropdown flex flex-column" aria-hidden="true">
<div class="main-menu__dropdown-inner flex flex-column flex-row@xl">
<button class="menu-menu__link--back hidden@xl">
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
Terug naar Item 2
</button>
<div class="hidden@xl">
<a href="{item.link}" class="main-menu__link main-menu__link--parent" role="menuitem" data-uid="xx">
Missing link attribute View all...
</a>
</div>
<ul class="list--reset main-menu__menu" role="menu">
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub block padding-sm" role="menuitem">
Nieuwe producten
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub block padding-sm" role="menuitem">
Collectie
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub block padding-sm" role="menuitem">
Uitverkoop
</a>
</li>
<li class="main-menu__dropdown-item" role="none">
<a href="#" class="main-menu__link main-menu__link--sub block padding-sm" role="menuitem">
Duurzame materialen
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="main-menu__item " role="none">
<a href="#" class="main-menu__link main-menu__link--has-submenu main-menu__link--primary block" role="menuitem">
<span class="main-menu__link-label block">
Item 3
</span>
</a>
<div class="main-menu__dropdown flex flex-column" aria-hidden="true">
<div class="main-menu__dropdown-inner flex flex-column flex-row@xl">
<button class="menu-menu__link--back hidden@xl">
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
Terug naar Item 3
</button>
<div class="hidden@xl">
<a href="{item.link}" class="main-menu__link main-menu__link--parent" role="menuitem" data-uid="xx">
Missing link attribute View all...
</a>
</div>
<ul class="list--reset main-menu__menu" role="menu">
</ul>
</div>
</div>
</li>
<li class="main-menu__item " role="none">
<a href="#" class="main-menu__link main-menu__link--has-submenu main-menu__link--primary block" role="menuitem">
<span class="main-menu__link-label block">
Item 4
</span>
</a>
<div class="main-menu__dropdown flex flex-column" aria-hidden="true">
<div class="main-menu__dropdown-inner flex flex-column flex-row@xl">
<button class="menu-menu__link--back hidden@xl">
<svg class="icon" viewBox="0 0 24 24" style="width: 16px; height: 16px;">
<path fill="currentColor" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" />
</svg>
Terug naar Item 4
</button>
<div class="hidden@xl">
<a href="{item.link}" class="main-menu__link main-menu__link--parent" role="menuitem" data-uid="xx">
Missing link attribute View all...
</a>
</div>
<ul class="list--reset main-menu__menu" role="menu">
</ul>
</div>
</div>
</li>
</ul>
</nav>
<script src="/components/raw/navigation/navigation.js"></script>
</div>
</div>
<div class="row row--collapse hidden@xl">
<div class="col-12">
<ul aria-label="Go to" class="header__links header-links list--reset">
<li class="header-links__link">
<a href="">About us</a>
</li>
<li class="header-links__link">
<a href="">Service & Contact</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<header class="page-header">
<div class="page-header__topbar show@xl">
<div class="row">
<div class="col-12">
<!-- This requires code from t3x-icon_list -->
{{ render '@icon-list' }}
</div>
</div>
</div>
<div class="page-header__content">
<div class="row">
<div class="col-12">
<div class="flex justify-between@xl items-center">
<div class="flex flex-column justify-center items-center margin-right-sm margin-right-md@xl">
<a href="#" class="page-header__logo-link color-current" title="{{siteName}}">
<svg xmlns="http://www.w3.org/2000/svg" class="page-header__logo" viewBox="0 0 112.14 14.64"><path d="M7.8 14.64a8.78 8.78 0 003.64-.72 6.76 6.76 0 002.64-2.08L11.1 9.18a3.82 3.82 0 01-3.06 1.64 3.13 3.13 0 01-2.38-.95 3.56 3.56 0 01-.9-2.55 3.56 3.56 0 01.9-2.55 3.13 3.13 0 012.38-.95 3.82 3.82 0 013.06 1.64l2.98-2.66A6.76 6.76 0 0011.44.72 8.78 8.78 0 007.8 0a8.5 8.5 0 00-4 .93 6.95 6.95 0 00-2.79 2.6A7.18 7.18 0 000 7.32a7.18 7.18 0 001.01 3.79 6.95 6.95 0 002.79 2.6 8.5 8.5 0 004 .93zm14.98 0a8.64 8.64 0 004.06-.94 7.01 7.01 0 003.84-6.38A7.01 7.01 0 0026.84.94 8.64 8.64 0 0022.78 0a8.64 8.64 0 00-4.06.94 7.01 7.01 0 00-3.84 6.38 7.01 7.01 0 003.84 6.38 8.64 8.64 0 004.06.94zm0-3.82a3 3 0 01-1.59-.43 3.08 3.08 0 01-1.13-1.22 3.89 3.89 0 01-.42-1.85 3.89 3.89 0 01.42-1.85 3.08 3.08 0 011.13-1.22 3.15 3.15 0 013.18 0 3.08 3.08 0 011.13 1.22 3.89 3.89 0 01.42 1.85 3.89 3.89 0 01-.42 1.85 3.08 3.08 0 01-1.13 1.22 3 3 0 01-1.59.43zm13.92 3.5V8.16l3.04 4.9h2.08l3.04-5.12.04 6.38h4.3l-.04-14h-3.88l-4.44 7.46L36.28.32H32.4v14zm19.5 0v-3.44h2.02a8.26 8.26 0 003.38-.64 4.98 4.98 0 002.22-1.84 5.02 5.02 0 00.78-2.8 5.02 5.02 0 00-.78-2.8A4.98 4.98 0 0061.6.96a8.26 8.26 0 00-3.38-.64h-6.74v14zm1.72-7.08H56.2V3.96h1.72a2.1 2.1 0 011.44.43 1.54 1.54 0 01.48 1.21 1.54 1.54 0 01-.48 1.21 2.1 2.1 0 01-1.44.43zm11.7 7.08l.94-2.44h5.32l.94 2.44h4.88l-6.12-14h-4.64l-6.12 14zm4.96-5.84h-2.72l1.36-3.52zm12.48 5.84V7.96l5.32 6.36h3.88v-14h-4.6v6.36L86.34.32h-3.88v14zm19.8 0V9.24l5.28-8.92h-4.56l-2.88 4.84-2.86-4.84h-4.98l5.28 8.86v5.14z"/></svg>
</a>
</div>
<div class="page-header__search flex-grow-1 margin-right-md show@xl">
<!-- render search field from style guide -->
{{ render '@search' }}
</div>
<ul aria-label="{{ links.label }}" class="show@xl header__links header-links list--reset">
{{#each links.items}}
<li class="header-links__link">
<a href="{{this.link}}">{{this.label}}</a>
</li>
{{/each}}
</ul>
<div class="page-header__actions flex flex-shrink-0">
<div class="page-header__action page-header__action--{{actions.login.className}}">
<a class="page-header__action-link flex flex-column items-center reset-link padding-x-xs padding-x-sm@lg" href="#">
{{{actions.login.icon}}}
<span class="page-header__action-label">
{{actions.login.label}}
</span>
</a>
</div>
<div class="page-header__action page-header__action--{{actions.wishlist.className}}">
<a class="page-header__action-link flex flex-column items-center reset-link padding-x-xs padding-x-sm@lg" href="#">
{{{actions.wishlist.icon}}}
<span class="page-header__action-label">
{{actions.wishlist.label}}
</span>
</a>
</div>
<div class="page-header__action page-header__action--{{actions.cart.className}}">
<a class="page-header__action-link flex flex-column items-center reset-link padding-x-xs padding-x-sm@lg" href="#">
{{{actions.cart.icon}}}
<span class="page-header__action-label">
{{actions.cart.label}}
</span>
</a>
</div>
</div>
<div class="margin-left-sm hidden@xl">
<button type="button" href="#" class="page-header__navigation-toggle nav-toggle reset-link js-nav-toggle" aria-haspopup="true" aria-expanded="false">
<span class="nav-toggle__icon">
<span class="nav-toggle__line nav-toggle__line--1"></span>
<span class="nav-toggle__line nav-toggle__line--2"></span>
<span class="nav-toggle__line nav-toggle__line--3"></span>
</span>
<span class="visually-hidden">
{{ navigationToggle.label }}
</span>
</button>
</div>
</div>
</div>
</div>
</div>
<div id="page-navigation" class="page-header__navigation page-navigation" tabindex="-1">
<div class="row row--collapse hidden@xl">
<div class="col-12">
<div class="page-header__search">
<!-- render search field from style guide -->
{{ render '@search' }}
</div>
</div>
</div>
<div class="row row--collapse">
<div class="col-12">
{{ render '@navigation' }}
</div>
</div>
<div class="row row--collapse hidden@xl">
<div class="col-12">
<ul aria-label="{{ links.label }}" class="header__links header-links list--reset">
{{#each links.items}}
<li class="header-links__link">
<a href="{{this.link}}">{{this.label}}</a>
</li>
{{/each}}
</ul>
</div>
</div>
</div>
</header>
{
"siteName": "Company",
"navigationToggle": {
"label": "Menu"
},
"links": {
"label": "Go to",
"items": [
{
"label": "About us"
},
{
"label": "Service & Contact"
}
]
},
"actions": {
"login": {
"className": "login",
"icon": "<svg class='icon icon--24' viewBox='0 0 26 22'><g fill='none' fill-rule='evenodd' stroke-linecap='round'><g stroke='currentColor'><path vector-effect='non-scaling-stroke' d='M23.677 20c0-3.898-5.268-7.059-11.765-7.059C5.414 12.941.147 16.101.147 20' transform='translate(-75 -195) translate(76 196)' /> <path vector-effect='non-scaling-stroke' d='M11.912 12.946c3.573 0 6.47-2.897 6.47-6.47 0-3.574-2.897-6.47-6.47-6.47-3.574 0-6.47 2.896-6.47 6.47 0 3.573 2.896 6.47 6.47 6.47h0z' transform='translate(-75 -195) translate(76 196)' /></g></g></svg>",
"label": "Login"
},
"wishlist": {
"className": "wishlist",
"icon": "<svg class='icon icon--24' viewBox='0 0 22 21'> <g fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'> <g stroke='currentColor'> <path vector-effect='non-scaling-stroke' d='M.815 8.222l8.904 10.641c.154.184.405.181.556 0l8.904-10.64-.355.454c.524-.655.9-1.445 1.071-2.314.069-.347.105-.707.105-1.076C20 2.37 17.74.004 14.953.004c-2.3 0-4.24 1.61-4.848 3.812l-.21-.004C9.286 1.61 7.346 0 5.047 0 2.26 0 0 2.365 0 5.283c0 .369.036.728.105 1.076.171.868.547 1.659 1.071 2.314' transform='translate(-110 -195) translate(111 196)'></path> </g> </g> </svg>",
"label": "Wish list"
},
"cart": {
"className": "cart",
"icon": "<svg class='icon icon--24' viewBox='0 0 17 22'> <g fill='none' fill-rule='evenodd' stroke-linecap='round' stroke-linejoin='round'> <g stroke='currentColor'> <path vector-effect='non-scaling-stroke' d='M11.977 20h-8.5c-1.28 0-2.318-.839-2.318-2.009L0 5.714c0-.195.173-.26.386-.26h14.682c.213 0 .387.12.387.315l-1.16 12.242c0 1.17-1.037 1.989-2.318 1.989h0z' transform='translate(-141 -194) translate(142 195)'></path> <path vector-effect='non-scaling-stroke' d='M4.09 5.455V4.07C4.09 1.885 5.657.114 7.728.114c2.071 0 3.637 1.771 3.637 3.956v1.385' transform='translate(-141 -194) translate(142 195)'></path> </g> </g> </svg>",
"label": "Cart"
}
}
}
No notes defined.