<div class="page-wrapper">
<!-- TrustBox script -->
<script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async></script>
<!-- End TrustBox script -->
<header class="header">
<div class="header__wrapper">
<div class="container">
<div class="header__top">
<div class="header__top--logo">
<a class="logo " href="#" aria-label="Homepage">
<img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
</a>
</div>
<div class="header__top--header-buttons">
<div class="header__trustpilot desktop">
<div class="trustpilot-header">
<!-- TrustBox widget - Micro Star -->
<div class="trustpilot-widget" data-locale="nl-NL" data-template-id="5419b732fbfb950b10de65e5" data-businessunit-id="4d6fd8cf00006400050edf3a" data-style-height="24px" data-style-width="100%" data-theme="dark" data-font-family="Lato">
<a href="https://nl.trustpilot.com/review/vechtsportonline.nl" target="_blank" rel="noopener">Trustpilot</a>
</div>
<!-- End TrustBox widget -->
</div>
</div>
<a class="keurmerk" href="#" aria-label="Thuiswinkel Waarborg">
<img class="keurmerk__image" src="/images/logo/waarborg.png" alt="Thuiswinkel Waarborg" width="95" height="30" />
</a>
<a class="header-button button--gray phonenumber" href="#" aria-label="Phone number">
<svg class="icon button__icon" role="img">
<title>Phone</title>
<use xlink:href="/images/icons-sprite.svg#custom-tel"></use>
</svg>
<span class="header-button__text">
Contact
</span>
</a>
<a class="header-button button--gray customer-account" href="#" aria-label="Customer Account">
<svg class="icon button__icon" role="img">
<title>User's account</title>
<use xlink:href="/images/icons-sprite.svg#custom-acc"></use>
</svg>
<span class="header-button__text">
Account
</span>
</a>
<div class="language-switch">
<button class="header-button button--white language-switch__link popup-trigger" data-popuptrigger="popup-language-switch" aria-label="vechtsportonline.nl">
NL
<svg class="icon icon button__icon" role="img">
<title>angle down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<dialog class="js--popup language-switch__dialog" data-popup="popup-language-switch" role="alertdialog">
<a class="language-switch__dialog--link" href="fightsportonline.com" aria-label="fightsportonline.com">
ENG
</a>
<a class="language-switch__dialog--link" href="kampfsportonline.de" aria-label="kampfsportonline.de">
DE
</a>
</dialog>
</div>
<div class="minicart">
<button class="header-button button--minicart minicart__link popup-trigger" data-popuptrigger="popup-minicart" aria-label="">
<svg class="icon button__icon" role="img">
<title>custom cart</title>
<use xlink:href="/images/icons-sprite.svg#custom-cart"></use>
</svg>
<span class="counter qty minicart__counter">
<span class="counter-number minicart__counter--qty">
10
</span>
</span>
</button>
</div>
</div>
</div>
<div class="header__bottom">
<div class="side-menu ">
<button type="button" class="side-menu__trigger" aria-label="Side menu open">
<svg class="icon side-menu__trigger-icon" role="img">
<title>Mobile menu</title>
<use xlink:href="/images/icons-sprite.svg#mobile-menu"></use>
</svg>
</button>
<span class="side-menu__trigger-text">
Categorieën
</span>
<div class="side-menu__content">
<div class="side-menu__trigger-wrapper">
<button type="button" class="side-menu__trigger" aria-label="Side menu close">
<svg class="icon side-menu__trigger-icon" role="img">
<title>Close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
<span class="header-button__text">
Menu
</span>
</button>
</div>
<div id="dropdown-side-menu" class="dropdown-list side-menu__dropdown">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
All
</a>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label " aria-expanded="false" aria-controls="dropdown-1">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="dropdown-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-1-2">
sublist item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-1-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sub sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-2">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3">
dropdown title
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-1">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-1" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
Item name
</a>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-2">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-2" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-3">
Item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-3" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-3-4">
item name
<svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
<title>Arrow Down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</a>
<div id="dropdown-3-4" class="dropdown-list__content " aria-hidden="true">
<div id="" class="dropdown-list dropdown-list--inner">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
<a class="dropdown-list__label " href="#">
sublist item name
</a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('dropdown-side-menu'));
</script>
</div>
<div class="side-menu__overlay"></div>
</div>
<script src="/components/raw/side-menu/side-menu.js" defer></script>
<div class="mega-menu">
<ul class="mega-menu__list">
<li class="mega-menu__item mega-menu__item--parent">
<a href="/furniture" class="mega-menu__link">
Furniture
</a>
<ul class="mega-menu__inner-list mega-menu__inner-list--level1">
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--image">
<a class="mega-menu__inner-link" href="#">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="" data-src="/images/megamenu/menu-image.jpg" alt="">
</div>
<button class="button button--category" type="button" aria-label="click to do something">
Bekijk categorie
<svg class="icon button__icon" role="img">
<title>angle-right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</a>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
</ul>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example2
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
</ul>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example3
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
</ul>
</li>
<li class="mega-menu__inner-item mega-menu__inner-item--level1 mega-menu__inner-item--parent">
<a href="/example" class="mega-menu__inner-link">
Example long name
</a>
<ul class="list mega-menu__inner-list mega-menu__inner-list--level2">
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
Category long very name
</a>
</li>
<li class="list__item mega-menu__inner-item mega-menu__inner-item--level2">
<a href="" class="link mega-menu__inner-link">
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="mega-menu__item">
<a href="/accessories" class="mega-menu__link">
Accessories
</a>
</li>
<li class="mega-menu__item">
<a href="/world-of" class="mega-menu__link">
World of
</a>
</li>
</ul>
</div>
<script src="/components/raw/mega-menu/mega-menu.js"></script>
<div class="header__search">
<dialog class="minicart-content js--popup " data-popup="popup-minicart" role="alertdialog">
<div class="minicart-content__bar"></div>
<div class="minicart-content__wrapper">
<div class="minicart-content__total">
<div class="minicart-content__total-text">
2 producten in winkelwagen
</div>
<div class="minicart-content__total-close">
<svg class="icon minicart-content__total-close__icon js--popup__close-button" role="img">
<title>close</title>
<use xlink:href="/images/icons-sprite.svg#close"></use>
</svg>
</div>
</div>
<div class="minicart-content__products-list">
<div class="minicart-product">
<div class="minicart-product__image">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/VENUM-CONTENDER2.jpg" alt="Venum (Kick)bokshandschoenen Contender 2.0">
</div>
</div>
<div class="minicart-product__info">
<h3 class="minicart-product__name">
<a class="link link--invert minicart-product__link" href="#">
UFC MMA Handschoenen zonder duim
</a>
</h3>
<p class="minicart-product__description">
Deze leren wedstrijdhandschoenen van UFC zijn de enige handschoenen die gedragen mogen worden door de UFC vechters in Octagon!
</p>
<div id="test-1" class="dropdown-list minicart-product__attributes">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
">
< class="dropdown-list__label " aria-expanded="false" aria-controls="see-details-1">
</>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('test-1'));
</script>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
<div class="quantity-update ">
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<div class="quantity-update__buttons">
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow up</title>
<use xlink:href="/images/icons-sprite.svg#angle-up"></use>
</svg>
</button>
<button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/button/../quantity-update/quantity-update.js"></script>
</div>
<div class="minicart-product__price">
€ 109,95
</div>
</div>
</div>
</div>
<div class="minicart-product">
<div class="minicart-product__image">
<div class="lazyload-wrapper ">
<img class="image lazyload " src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/product/VENUM-CONTENDER2.jpg" alt="Venum (Kick)bokshandschoenen Contender 2.0">
</div>
</div>
<div class="minicart-product__info">
<h3 class="minicart-product__name">
<a class="link link--invert minicart-product__link" href="#">
Venum (Kick)bokshandschoenen Contender 2.0
</a>
</h3>
<p class="minicart-product__description">
Dit zijn de nieuwe bestsellers onder de kickboxhandschoenen van Venum! Betaalbare (kick)bokshandschoenen van Venum, zonder concessies aan kwaliteit!
</p>
<div id="test-1" class="dropdown-list minicart-product__attributes">
<ul class="dropdown-list__list">
<li class="
dropdown-list__item
dropdown-list__item--collapse
">
<button class="dropdown-list__label minicart-product__attributes-button" aria-expanded="false" aria-controls="see-details" aria-controls="see-details">
Bekijk Details
<svg class="icon dropdown-list__icon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
<div id="see-details" class="dropdown-list__content minicart-product__attributes-button" aria-hidden="true">
<dl class="list list--description minicart-product__attributes-list">
<dt class="list__label">Maat</dt>
<dd class="list__value">12 oz</dd>
<dt class="list__label">Kleur</dt>
<dd class="list__value">Zwart/Grijs-Wit</dd>
</dl>
</div>
</li>
</ul>
</div>
<script type="text/javascript">
new DropdownList(document.getElementById('test-1'));
</script>
<div class="minicart-product__bottom">
<div class="minicart-product__qty">
<div class="quantity-update ">
<input class="quantity-update__input " type="number" id="qty" min="1" value="1" aria-label="Change the quantity" />
<div class="quantity-update__buttons">
<button class="button button--icon quantity-update__button quantity-update__button--plus" type="button" aria-label="Increase the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow up</title>
<use xlink:href="/images/icons-sprite.svg#angle-up"></use>
</svg>
</button>
<button class="button button--icon quantity-update__button quantity-update__button--minus quantity-update__button--disabled" type="button" aria-label="Decrease the quantity">
<svg class="icon button__icon minicart-product__qty--buttonIcon" role="img">
<title>Arrow down</title>
<use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>
</button>
</div>
</div>
<script src="/components/raw/button/../quantity-update/quantity-update.js"></script>
</div>
<div class="minicart-product__price">
44,95
</div>
</div>
</div>
</div>
</div>
<div class="minicart-content__summary">
<div class="minicart-content__summary-label">
Totaal
</div>
<div class="minicart-content__summary-value">
€ 219,90
</div>
</div>
<div class="minicart-content__actions">
<div class="row">
<div class="col-xs-7">
<button class="button button minicart-content__actions--button minicart-content__actions--button-showcart" type="button">
Bekijk en bewerk Winkelwagen
<svg class="icon button__icon minicart-content__actions--button-icon" role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
<div class="col-xs-5">
<button class="button button minicart-content__actions--button minicart-content__actions--button-checkout" type="button">
Ga naar afrekenen
<svg class="icon button__icon minicart-content__actions--button-icon" role="img">
<title>Arrow right</title>
<use xlink:href="/images/icons-sprite.svg#angle-right"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
</dialog>
<form class="form minisearch">
<div class="field search">
<div class="input input--search">
<span class="form-check" aria-label="form-check-field-id">
<svg class="icon brief-info__icon" role="img">
<title>USP Check</title>
<use xlink:href="/images/icons-sprite.svg#usp-check"></use>
</svg>
</span>
<label class="
label
" for="field-id">
Label text
</label>
<input class="input__field " id="field-id" name="field-name" type="text" placeholder="Zoeken">
</div>
<div class="search-autocomplete"></div>
</div>
<div class="actions">
<button type="submit" title="Zoek" class="search">
<svg class="icon " role="img">
<title>zoeken</title>
<use xlink:href="/images/icons-sprite.svg#search"></use>
</svg>
<span>Zoeken</span>
</button>
</div>
</form>
</div>
</div>
<div class="header__trustpilot mobile">
<div class="trustpilot-header">
<!-- TrustBox widget - Micro Star -->
<div class="trustpilot-widget" data-locale="nl-NL" data-template-id="5419b732fbfb950b10de65e5" data-businessunit-id="4d6fd8cf00006400050edf3a" data-style-height="24px" data-style-width="100%" data-theme="dark" data-font-family="Lato">
<a href="https://nl.trustpilot.com/review/vechtsportonline.nl" target="_blank" rel="noopener">Trustpilot</a>
</div>
<!-- End TrustBox widget -->
</div>
</div>
</div>
</div>
</header>
<script src="/components/raw/header/../popup/popup.js"></script>
<div class="container">
<h1 class="">
Compare Products
</h1>
<div class="compare">
<table class="compare__table">
<thead>
<tr>
<th class="compare__label">
Product
</th>
<td class="compare__cell">
<div class="compare__product">
<a href="#" class="compare__link">
<div class="lazyload-wrapper ">
<img class="image lazyload compare__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/banner/banner-480_480.png" alt="Affirm Water Bottle">
</div>
</a>
<a href="#" class="compare__link">
Affirm Water Bottle
</a>
<div class="rating compare__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<span class="price">
$49.00
</span>
<div class="compare__buttons-container">
<form class="compare__form">
<button class="button button--secondary compare__cart" type="submit" aria-label="Add to Cart" title="Add to Cart">
<span class="compare__cart-text">Add to Cart</span>
<svg class="icon button__icon compare__cart-icon" role="img">
<title>Shopping Cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="compare__secondary-buttons">
<button class="button button--icon compare__wishlist" type="button" aria-label="Add to Wish List" title="Add to Wish List">
<svg class="icon button__icon compare__wishlist-icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon compare__remove" type="button" aria-label="Remove from Compare" title="Remove from Compare">
<svg class="icon button__icon compare__remove-icon" role="img">
<title>Trash bin</title>
<use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>
</button>
</div>
</div>
</div>
</td>
<td class="compare__cell">
<div class="compare__product">
<a href="#" class="compare__link">
<div class="lazyload-wrapper ">
<img class="image lazyload compare__image" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="/images/banner/banner-480_480.png" alt="Aim Analog Watch">
</div>
</a>
<a href="#" class="compare__link">
Aim Analog Watch
</a>
<div class="rating compare__rating" aria-label="Average rating: 72%" title="4/5 sterren" tabindex="0">
<div class="rating__star " role="presentation" style="width: 72%">
<span class="
rating__indicator
"></span>
</div>
</div>
<div class="rating__title">
4/5 sterren
</div>
<span class="price">
$49.00
</span>
<div class="compare__buttons-container">
<form class="compare__form">
<button class="button button--secondary compare__cart" type="submit" aria-label="Add to Cart" title="Add to Cart">
<span class="compare__cart-text">Add to Cart</span>
<svg class="icon icon compare__cart-icon" role="img">
<title>Shopping cart</title>
<use xlink:href="/images/icons-sprite.svg#shopping-cart"></use>
</svg>
</button>
</form>
<div class="compare__secondary-buttons">
<button class="button button--icon compare__wishlist" type="button" aria-label="Add to Wish List" title="Add to Wish List">
<svg class="icon button__icon compare__wishlist-icon" role="img">
<title>Heart</title>
<use xlink:href="/images/icons-sprite.svg#heart"></use>
</svg>
</button>
<button class="button button--icon compare__remove" type="button" aria-label="Remove from Compare" title="Remove from Compare">
<svg class="icon button__icon compare__remove-icon" role="img">
<title>Trash bin</title>
<use xlink:href="/images/icons-sprite.svg#remove"></use>
</svg>
</button>
</div>
</div>
</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<th class="compare__label">
SKU
</th>
<td class="compare__cell">
24-UG06
</td>
<td class="compare__cell">
24-MG04
</td>
</tr>
<tr>
<th class="compare__label">
Description
</th>
<td class="compare__cell">
You'll stay hydrated with ease with the Affirm Water Bottle by your side or in hand. Measurements on the outside help you keep track of how much you're drinking, while the screw-top lid prevents spills. A metal carabiner clip allows you to attach it to the outside of a backpack or bag for easy access.
</td>
<td class="compare__cell">
Stay light-years ahead of the competition with our Aim Analog Watch. The flexible, rubberized strap is contoured to conform to the shape of your wrist for a comfortable all-day fit. The face features three illuminated hands, a digital read-out of the current time, and stopwatch functions.
</td>
</tr>
<tr>
<th class="compare__label">
Short Description
</th>
<td class="compare__cell">
N/A
</td>
<td class="compare__cell">
N/A
</td>
</tr>
<tr>
<th class="compare__label">
Activity
</th>
<td class="compare__cell">
Yoga, Recreation, Gym, Sports
</td>
<td class="compare__cell">
Outdoor, Recreation, Gym, Sports
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<footer class="footer">
<div class="footer-brands">
<div class="container">
<div class="row">
<div class="col-xs-4 col-md-2">
<div class="">
<a class="" href="https://m2.vechtsportonline.nl/" aria-label="Home page link">
<img class="image" alt="Vechtsportonline.nl" src="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL/images/logos/logo-red-black.jpg">
</a>
</div>
</div>
<div class="col-xs-8 col-md-10">
<div class="footer-brands__slider">
<div class="slider ">
<div class="slider__handler">
<div class="slider__slides">
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/adidas_bokshandschoenen.jpg" alt="Adidas Bokshandschoenen"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/booster_fight_gear.png" alt="Booster Fight Gear"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/essimo.jpg" alt="Essimo"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/ernesto_hoost.png" alt="Ernesto Hoost"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/everlast.png" alt="Everlast"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/hayabusa_fightwear.png" alt="Hayabusa Fightwear"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/joya_fight_gear.png" alt="Joya Fight Gear"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/king_bokshandschoenen.jpg" alt="King bokshandschoenen "></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/matsuru.png" alt="Matsuru "></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/nike_boksschoenen.jpg" alt="Nike boksschoenen"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/qnt.png" alt="QNT"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/ringhorns.png" alt="Ringhorns"> <</div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/superpro.jpg" alt="SuperPro"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/tapout.jpg" alt="Tapout"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/tunturi.png" alt="Tunturi"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/twins_bokshandschoenen.jpg" alt="Twins bokshandschoenen"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/vechtsportonline.jpg" alt="vechtsportonline"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/venum.png" alt="Venum"></div>
</div>
<div class="slider__item ">
<div class="lazyload-wrapper "><img class="image lazyloaded" src="https://m2.vechtsportonline.nl/media/footer/brands/xxl_nutrition.png" alt="XXL Nutrition"></div>
</div>
</div>
</div>
<div class="slider__navigation ">
<button class="button button--icon slider__navigation-icon slider__prev" type="button" aria-label="Previous slide">
<svg class="icon button__icon slider__icon" role="img">
<title>Arrow left</title>
<use xlink:href="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL/images/icons-sprite.svg#angle-left">
</use>
</svg>
</button>
<button class="button button--icon slider__navigation-icon slider__next" type="button" aria-label="Next slide">
<svg class="icon button__icon slider__icon" role="img">
<title>Arrow right</title>
<use xlink:href="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL/images/icons-sprite.svg#angle-right">
</use>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-6 col-xl-5">
<div class="footer__contact">
<div class="row">
<div class="col-md-6">
<div class="footer__route-address">
<h3 class="footer__title">Bezoek onze Showroom!</h3>
<div class="m-b--1">
Atoomweg 6-3 <br>
9743 AK Groningen<br>
</div>
<a href="https://www.google.nl/maps/dir//Vechtsportonline.nl,+Atoomweg+6-3,+9743+AK+Groningen/@53.2146086,6.46887,12z/data=!4m9!4m8!1m0!1m5!1m1!1s0x47c9d2a9d5fa0411:0xb29c5ff99a82e229!2m2!1d6.5389093!2d53.2146291!3e0" title="Route Vechtportonline.nl" target="blank">
<button class="button button--icon" role="button" tabindex="0">
Route <svg class="icon m-l--1" role="img">
<title>Arrow right</title>
<use xlink:href="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL/images/icons-sprite.svg#angle-right">
</use>
</svg>
</button>
</a>
</div>
</div>
<div class="col-md-6">
<div class="footer__item footer-openinghours">
<h3 class="footer__title">Openingstijden</h3>
<div class="flex flex--between">
<span class="">Maandag</span>
<span>13:30 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Dinsdag</span>
<span>10:00 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Woensdag</span>
<span>10:00 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Donderdag</span>
<span>10:00 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Vrijdag</span>
<span>10:00 - 18:00u</span>
</div>
<div class="flex flex--between">
<span class="">Zaterdag</span>
<span>
10:00 - 17:00u </span>
</div>
<div class="flex flex--between">
<span class="">Zondag</span>
<span>
Gesloten </span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 col-xl-2 m-b--2">
<h3 class=" footer__title">Snel navigeren</h3>
<ul class="list footer-navigation-list">
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/scheenbeschermers" title="Kickboks Scheenbeschermers"><span>Kickboks Scheenbeschermers</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/kleding/broekjes-broeken/kickboks-broekjes" title="(Kick)bokshandschoenen"><span>(Kick)bokshandschoenen</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/handschoenen/kick-bokshandschoenen" title="Kickboks Broekjes"><span>Kickboks Broekjes</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/kruisbeschermers-tok" title="Kickboks Kruisbeschermers"><span>Kickboks Kruisbeschermers</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/bitjes" title="Kickboks Bitjes"><span>Kickboks Bitjes</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/bandages" title="Kickboks Bandages"><span>Kickboks Bandages</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/bescherming/binnenhandschoenen" title="Kickboks Binnenhandschoenen"><span>Kickboks Binnenhandschoenen</span></a>
</div>
</li>
<li class="list__item ">
<div class="widget block block-category-link">
<a href="https://m2.vechtsportonline.nl/kickboks-sets" title="Kickboks Setjes"><span>Kickboks Setjes</span></a>
</div>
</li>
</ul>
</div>
<div class="col-md-6 col-lg-2 col-xl-2 m-b--w">
<h3 class="footer__title">Klantenservice</h3>
<ul class="list footer-contact-list ">
<li class="list__item"><a href="https://m2.vechtsportonline.nl/veelgestelde-vragen">Veelgestelde
Vragen</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/ruilen-retourneren">Ruilen /
Retourneren</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/garantie">Garantie</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/betaalmethoden">Betaal
Mogelijkheden</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/klachten">Klachten</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/privacy-veiligheid">Privacy &
Veiligheid</a></li>
<li class="list__item"><a href="https://m2.vechtsportonline.nl/contact/">Contact</a></li>
</ul>
</div>
<div class="col-lg-12 col-xl-3">
<form class="newsletter" novalidate="novalidate" action="https://m2.vechtsportonline.nl/newsletter/subscriber/new/" method="post" id="newsletter-validate-detail">
<h3 class="footer__title">
Nieuwsbrief </h3>
<div class="newsletter__controls">
<div class="input newsletter__input" data-children-count="1">
<input name="email" type="email" id="newsletter" class="input__field newsletter__field" placeholder="Enter your email" required="" data-kwimpalastatus="alive" data-kwimpalaid="1600257046335-0">
<span style="animation: initial; transition: initial; color: initial; color-scheme: initial; font: initial; font-feature-settings: initial; font-kerning: initial; font-optical-sizing: initial; font-variation-settings: initial; text-orientation: initial; text-rendering: initial; -webkit-font-smoothing: initial; -webkit-locale: initial; -webkit-text-orientation: initial; -webkit-writing-mode: initial; writing-mode: initial; zoom: initial; place-content: initial; place-items: initial; place-self: initial; alignment-baseline: initial; appearance: initial; backdrop-filter: initial; backface-visibility: initial; background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjUgNS4yODgxMUMxMy41IDUuMTkzNzYgMTMuNDA1NyA1LjA5OTQxIDEzLjI3MzYgNS4wNjE2NkwxMS42ODg2IDQuNDc2NjZDMTEuNDI0NCA0LjM2MzQxIDExLjEyMjUgNC40OTU1MSAxMS4xMjI1IDQuNjg0MjZWMTEuNTgxN0MxMS4xMjk5IDExLjYzNTUgMTEuMTUxMiAxMS42ODY0IDExLjE4NDMgMTEuNzI5NEMxMS4yMTc0IDExLjc3MjQgMTEuMjYxMSAxMS44MDYxIDExLjMxMTIgMTEuODI3MUwxMi45MzQxIDEyLjQxMjFDMTMuMTc5NCAxMi41MDY0IDEzLjUwMDIgMTIuMzc0MyAxMy41MDAyIDEyLjE2NjdMMTMuNSA1LjI4ODExWk05LjQ3OTQyIDEwLjU0MzdDOS40Nzk0MiAxMC40NDk0IDkuMzg1MDcgMTAuMzU1IDkuMjUyOTcgMTAuMzE3M0w3LjY2Nzk3IDkuNzMyMjZDNy40MDM4MiA5LjYxOTAxIDcuMTAxODcgOS43NTExMSA3LjEwMTg3IDkuOTM5ODFWMTQuMjQyNEM3LjEwOTMxIDE0LjI5NjEgNy4xMzA2MiAxNC4zNDcgNy4xNjM3MSAxNC4zOUM3LjE5NjggMTQuNDMzMSA3LjI0MDUyIDE0LjQ2NjcgNy4yOTA1NyAxNC40ODc3TDguOTEzNDcgMTUuMDcyN0M5LjE1ODc3IDE1LjE2NzEgOS40Nzk1NyAxNS4wMzUgOS40Nzk1NyAxNC44Mjc0TDkuNDc5NDIgMTAuNTQzN1pNOS40Nzk0MiAxLjc0OTc2QzkuNDc5NDIgMS42NTU0MSA5LjM4NTA3IDEuNTYxMDYgOS4yNTI5NyAxLjUyMzMxTDcuNjY3OTcgMC45MzgzMTFDNy40MDM4MiAwLjgyNTA2MSA3LjEwMTg3IDAuOTU3MTYxIDcuMTAxODcgMS4xNDU4NlY1LjQ0ODQxQzcuMTA5MzEgNS41MDIxNyA3LjEzMDYyIDUuNTUzMDcgNy4xNjM3MSA1LjU5NjA5QzcuMTk2OCA1LjYzOTEyIDcuMjQwNTIgNS42NzI3OCA3LjI5MDU3IDUuNjkzNzZMOC45MTM0NyA2LjI3ODc2QzkuMTU4NzcgNi4zNzMxMSA5LjQ3OTU3IDYuMjQxMDEgOS40Nzk1NyA2LjAzMzQxTDkuNDc5NDIgMS43NDk3NlpNNS40NzkxNyAxLjQxOTc2QzUuNDc5MTcgMS4zMjUzNiA1LjM4NDgyIDEuMjMxMDEgNS4yNTI3MiAxLjE5MzMxTDMuNjY3NzIgMC42MDgzMTFDMy40MDM1NyAwLjQ5NTA2MSAzLjEwMTYyIDAuNjI3MTYxIDMuMTAxNjIgMC44MTU4NjFWMTQuNTkxNEMzLjEwOTA1IDE0LjY0NTIgMy4xMzAzNiAxNC42OTYxIDMuMTYzNDUgMTQuNzM5MUMzLjE5NjU0IDE0Ljc4MjEgMy4yNDAyNyAxNC44MTU3IDMuMjkwMzIgMTQuODM2N0w0LjkxMzIyIDE1LjQyMTdDNS4xNTg1MiAxNS41MTYxIDUuNDc5MzIgMTUuMzg0IDUuNDc5MzIgMTUuMTc2NEw1LjQ3OTE3IDEuNDE5NzZaIiBmaWxsPSIjMEU2NDc2Ii8+Cjwvc3ZnPgo=") center center / contain no-repeat; background-blend-mode: initial; baseline-shift: initial; block-size: initial; border-block-end: initial; border-block-start: initial; border: none; border-radius: initial; border-collapse: initial; border-inline-end: initial; border-inline-start: initial; bottom: initial; box-shadow: initial; box-sizing: initial; break-after: initial; break-before: initial; break-inside: initial; buffered-rendering: initial; caption-side: initial; caret-color: initial; clear: initial; clip: initial; clip-path: initial; clip-rule: initial; color-interpolation: initial; color-interpolation-filters: initial; color-rendering: initial; columns: initial; column-fill: initial; gap: initial; column-rule: initial; column-span: initial; contain: initial; contain-intrinsic-size: initial; content: initial; content-visibility: initial; counter-increment: initial; counter-reset: initial; counter-set: initial; cursor: initial; cx: initial; cy: initial; d: initial; display: inline; dominant-baseline: initial; empty-cells: initial; fill: initial; fill-opacity: initial; fill-rule: initial; filter: initial; flex: initial; flex-flow: initial; float: initial; flood-color: initial; flood-opacity: initial; grid: initial; grid-area: initial; height: 16px; hyphens: initial; image-orientation: initial; image-rendering: initial; inline-size: initial; isolation: initial; left: 251px; letter-spacing: initial; lighting-color: initial; line-break: initial; list-style: initial; margin-block-end: initial; margin-block-start: initial; margin: initial; margin-inline-end: initial; margin-inline-start: initial; marker: initial; mask: initial; mask-type: initial; max-block-size: initial; max-height: initial; max-inline-size: initial; max-width: initial; min-block-size: initial; min-height: initial; min-inline-size: initial; min-width: 16px; mix-blend-mode: initial; object-fit: initial; object-position: initial; offset: initial; opacity: 1; order: initial; origin-trial-test-property: initial; orphans: initial; outline: initial; outline-offset: initial; overflow-anchor: initial; overflow-wrap: initial; overflow: initial; overscroll-behavior-block: initial; overscroll-behavior-inline: initial; overscroll-behavior: initial; padding-block-end: initial; padding-block-start: initial; padding: initial; padding-inline-end: initial; padding-inline-start: initial; page: initial; page-orientation: initial; paint-order: initial; perspective: initial; perspective-origin: initial; pointer-events: initial; position: absolute; quotes: initial; r: initial; resize: initial; right: initial; ruby-position: initial; rx: initial; ry: initial; scroll-behavior: initial; scroll-margin-block: initial; scroll-margin: initial; scroll-margin-inline: initial; scroll-padding-block: initial; scroll-padding: initial; scroll-padding-inline: initial; scroll-snap-align: initial; scroll-snap-stop: initial; scroll-snap-type: initial; shape-image-threshold: initial; shape-margin: initial; shape-outside: initial; shape-rendering: initial; size: initial; speak: initial; stop-color: initial; stop-opacity: initial; stroke: initial; stroke-dasharray: initial; stroke-dashoffset: initial; stroke-linecap: initial; stroke-linejoin: initial; stroke-miterlimit: initial; stroke-opacity: initial; stroke-width: initial; tab-size: initial; table-layout: initial; text-align: initial; text-align-last: initial; text-anchor: initial; text-combine-upright: initial; text-decoration: initial; text-decoration-skip-ink: initial; text-indent: initial; text-overflow: initial; text-shadow: initial; text-size-adjust: initial; text-transform: initial; text-underline-position: initial; top: 13px; touch-action: initial; transform: initial; transform-box: initial; transform-origin: initial; transform-style: initial; user-select: initial; vector-effect: initial; vertical-align: initial; visibility: visible; -webkit-app-region: initial; border-spacing: initial; -webkit-border-image: initial; -webkit-box-align: initial; -webkit-box-decoration-break: initial; -webkit-box-direction: initial; -webkit-box-flex: initial; -webkit-box-ordinal-group: initial; -webkit-box-orient: initial; -webkit-box-pack: initial; -webkit-box-reflect: initial; -webkit-font-size-delta: initial; -webkit-highlight: initial; -webkit-hyphenate-character: initial; -webkit-line-break: initial; -webkit-line-clamp: initial; -webkit-mask-box-image: initial; -webkit-mask: initial; -webkit-mask-composite: initial; -webkit-perspective-origin-x: initial; -webkit-perspective-origin-y: initial; -webkit-print-color-adjust: initial; -webkit-rtl-ordering: initial; -webkit-ruby-position: initial; -webkit-tap-highlight-color: initial; -webkit-text-combine: initial; -webkit-text-decorations-in-effect: initial; -webkit-text-emphasis: initial; -webkit-text-emphasis-position: initial; -webkit-text-fill-color: initial; -webkit-text-security: initial; -webkit-text-stroke: initial; -webkit-transform-origin-x: initial; -webkit-transform-origin-y: initial; -webkit-transform-origin-z: initial; -webkit-user-drag: initial; -webkit-user-modify: initial; white-space: initial; widows: initial; width: 16px; will-change: initial; word-break: initial; word-spacing: initial; x: initial; y: initial; z-index: auto;"></span>
</div>
<button class="button newsletter__button button--in-input button--icon" data-testid="submit-newsletter-button">
<svg class="icon">
<use xlink:href="https://m2.vechtsportonline.nl/static/version1600075943/frontend/Elgentos/vso/nl_NL//images/icons-sprite.svg#angle-right">
</use>
</svg>
</button>
</div>
</form>
<div class="m-t--1">
<div class="footer__trustedlogos">
<ul class="list footer__trustedlogos--list">
<li class="list__item footer__trustedlogos--item">
<a href="#>" target="_blank" class="link ">
<img class="image footer__trustedlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/1c54b451-0ace-4567-9f07-53ffda3b081b_Thuiswinkel_Waarborg_Kleur_Verticaal.png?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/1c54b451-0ace-4567-9f07-53ffda3b081b_Thuiswinkel_Waarborg_Kleur_Verticaal.png?auto=compress,format" alt="Thuiswinkel Waarborg" loading="lazy" />
</a>
</li>
<li class="list__item footer__trustedlogos--item">
<a href="#" class="link ">
<img class="image footer__trustedlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/8ed2f5b4-1e26-4e3b-bba6-985c778e44a8_Ecommerce_Europe_Trustmark.png?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/8ed2f5b4-1e26-4e3b-bba6-985c778e44a8_Ecommerce_Europe_Trustmark.png?auto=compress,format" alt="eCommerce Trustmark" loading="lazy" />
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-xl-12">
<div class="m-t--12">
<div class="footer__paymentlogos">
<ul class="list footer__paymentlogos--list">
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/82b0d09b-f7a2-419d-87b6-4508f69e2868_afterpay.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/82b0d09b-f7a2-419d-87b6-4508f69e2868_afterpay.svg?auto=compress,format" alt="Afterpay" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/12f61279-baa1-4c03-bb82-b78185a44cf1_ideal.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/12f61279-baa1-4c03-bb82-b78185a44cf1_ideal.svg?auto=compress,format" alt="iDeal" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/6afc1ec0-ca86-4109-9849-0a7b3f71a0e1_paypal.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/6afc1ec0-ca86-4109-9849-0a7b3f71a0e1_paypal.svg?auto=compress,format" alt="PayPal" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/f9e5733b-0c4f-4285-b198-aa75512b77e6_maestro-2.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/f9e5733b-0c4f-4285-b198-aa75512b77e6_maestro-2.svg?auto=compress,format" alt="Maestro" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/e407fd5d-a15e-43b8-a960-7ccce7d0f453_mastercard-4.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/e407fd5d-a15e-43b8-a960-7ccce7d0f453_mastercard-4.svg?auto=compress,format" alt="Mastercard" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/20e84741-c887-40ca-a94d-998cb682a31b_visa.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/20e84741-c887-40ca-a94d-998cb682a31b_visa.svg?auto=compress,format" alt="Visa" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/a5c7e872-d39d-4d26-b8c8-c575fc7f9474_mollie.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/a5c7e872-d39d-4d26-b8c8-c575fc7f9474_mollie.svg?auto=compress,format" alt="Mollie" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#link" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/e5f3b2a0-6257-45a5-84f4-635a5ccf182b_american-express-1.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/e5f3b2a0-6257-45a5-84f4-635a5ccf182b_american-express-1.svg?auto=compress,format" alt="American Express" loading="lazy">
</a>
</li>
<li class="list__item footer__paymentlogos--item">
<a href="#" class="link ">
<img class="image footer__paymentlogos--image lazyload" src="https://images.prismic.io/vechtsportonline/d614f6d8-cff4-4b54-8042-bfd1bef8d258_bancontact-mister-cash.svg?auto=compress,format" data-src="https://images.prismic.io/vechtsportonline/d614f6d8-cff4-4b54-8042-bfd1bef8d258_bancontact-mister-cash.svg?auto=compress,format" alt="Bancontant Mister Cash" loading="lazy">
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="footer__absolute-footer">
<span class="colon colon--after">Copyright © 2020 Vechtsportonline.nl </span>
<span class="colon colon--after"> <a class="link" href="https://m2.vechtsportonline.nl/algemene-voorwaarden">Algemene voorwaarden</a></span>
<span class="colon colon--after"> <a class="link" href="https://m2.vechtsportonline.nl/disclaimer">Disclaimer</a> </span>
<span class="colon colon--after"> <a class="link" href="https://m2.vechtsportonline.nl/privacy-veiligheid">
Privacy Policy </a></span> </div>
</footer>
<div class="page-wrapper">
{{ render '@header' }}
<div class="container">
{{ render '@heading' heading}}
<div class="compare">
<table class="compare__table">
<thead>
<tr>
<th class="compare__label">
Product
</th>
{{#each products}}
<td class="compare__cell">
<div class="compare__product">
<a href="#" class="compare__link">
{{ render '@image' img }}
</a>
<a href="#" class="compare__link">
{{ name }}
</a>
{{ render '@rating' rating merge=true }}
<span class="price">
{{ price }}
</span>
<div class="compare__buttons-container">
<form class="compare__form">
{{ render '@button' cart }}
</form>
<div class="compare__secondary-buttons">
{{ render '@button' wishlist }}
{{ render '@button' remove }}
</div>
</div>
</div>
</td>
{{/each}}
</tr>
</thead>
<tbody>
{{#each attributes}}
<tr>
<th class="compare__label">
{{ label }}
</th>
{{#each products}}
<td class="compare__cell">
{{ this }}
</td>
{{/each}}
</tr>
{{/each}}
</tbody>
</table>
</div>
</div>
</div>
{{ render '@footer' }}
{
"heading": {
"tag": "h1",
"text": "Compare Products"
},
"products": [
{
"name": "Affirm Water Bottle",
"img": {
"class": "compare__image",
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/banner/banner-480_480.png",
"alt": "Affirm Water Bottle"
},
"rating": {
"class": "compare__rating"
},
"price": "$49.00",
"cart": {
"tag": "button",
"text": "<span class=\"compare__cart-text\">Add to Cart</span>",
"class": "button--secondary compare__cart",
"icon": {
"id": "shopping-cart",
"title": "Shopping Cart",
"class": "button__icon compare__cart-icon"
},
"attributes": "type=\"submit\" aria-label=\"Add to Cart\" title=\"Add to Cart\""
},
"wishlist": {
"tag": "button",
"class": "button--icon compare__wishlist",
"icon": {
"id": "heart",
"title": "Heart",
"class": "button__icon compare__wishlist-icon"
},
"attributes": "type=\"button\" aria-label=\"Add to Wish List\" title=\"Add to Wish List\""
},
"remove": {
"tag": "button",
"class": "button--icon compare__remove",
"icon": {
"id": "remove",
"title": "Trash bin",
"class": "button__icon compare__remove-icon"
},
"attributes": "type=\"button\" aria-label=\"Remove from Compare\" title=\"Remove from Compare\""
}
},
{
"name": "Aim Analog Watch",
"img": {
"class": "compare__image",
"src": "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==",
"dataSrc": "/images/banner/banner-480_480.png",
"alt": "Aim Analog Watch"
},
"rating": {
"class": "compare__rating"
},
"price": "$49.00",
"cart": {
"tag": "button",
"text": "<span class=\"compare__cart-text\">Add to Cart</span>",
"class": "button--secondary compare__cart",
"icon": {
"id": "shopping-cart",
"title": "Shopping cart",
"class": "icon compare__cart-icon"
},
"attributes": "type=\"submit\" aria-label=\"Add to Cart\" title=\"Add to Cart\""
},
"wishlist": {
"tag": "button",
"class": "button--icon compare__wishlist",
"icon": {
"id": "heart",
"title": "Heart",
"class": "button__icon compare__wishlist-icon"
},
"attributes": "type=\"button\" aria-label=\"Add to Wish List\" title=\"Add to Wish List\""
},
"remove": {
"tag": "button",
"class": "button--icon compare__remove",
"icon": {
"id": "remove",
"title": "Trash bin",
"class": "button__icon compare__remove-icon"
},
"attributes": "type=\"button\" aria-label=\"Remove from Compare\" title=\"Remove from Compare\""
}
}
],
"attributes": [
{
"label": "SKU",
"products": [
"24-UG06",
"24-MG04"
]
},
{
"label": "Description",
"products": [
"You'll stay hydrated with ease with the Affirm Water Bottle by your side or in hand. Measurements on the outside help you keep track of how much you're drinking, while the screw-top lid prevents spills. A metal carabiner clip allows you to attach it to the outside of a backpack or bag for easy access.",
"Stay light-years ahead of the competition with our Aim Analog Watch. The flexible, rubberized strap is contoured to conform to the shape of your wrist for a comfortable all-day fit. The face features three illuminated hands, a digital read-out of the current time, and stopwatch functions."
]
},
{
"label": "Short Description",
"products": [
"N/A",
"N/A"
]
},
{
"label": "Activity",
"products": [
"Yoga, Recreation, Gym, Sports",
"Outdoor, Recreation, Gym, Sports"
]
}
]
}
$compare__border : 1px solid $gray-lighter !default;
$compare__margin-bottom : $spacer--medium !default;
$compare__table-width : 100% !default;
$compare__label-width : 120px !default;
$compare__label-background : $gray-lightest !default;
$compare__label-padding : $spacer !default;
$compare__label-padding\@medium : $spacer--medium !default;
$compare__attributes-margin-bottom : $spacer !default;
$compare__cell-padding : $spacer--medium !default;
$compare__cell-min-width : 160px !default;
$compare__cell-list-padding-left : $spacer--medium !default;
$compare__cell-item-line-height : $font-line-height !default;
$compare__image-size : auto !default;
$compare__image-max-size : 100% !default;
$compare__form-margin : 0 !default;
$compare__cart-width : 120px !default;
$compare__cart-padding : 0 !default;
$compare__cart-padding\@medium : 0 $spacer--medium !default;
$compare__wishlist-size : 48px !default;
$compare__wishlist-padding : 0 !default;
$compare__wishlist-background : transparent !default;
$compare__wishlist-border : none !default;
$compare__wishlist-cursor : pointer !default;
$compare__wishlist-icon-size : 18px !default;
$compare__wishlist-icon-fill : $color-secondary !default;
$compare__wishlist-icon-fill--hover: $color-primary !default;
$compare__wishlist-icon-transition : $transition-base !default;
.compare {
margin-bottom: $compare__margin-bottom;
overflow-x: auto;
&__table {
border-collapse: collapse;
border-spacing: 0;
border: $compare__border;
@include mq($screen-m) {
width: $compare__table-width;
table-layout: fixed;
}
}
&__label {
width: $compare__label-width;
padding: $compare__label-padding;
background-color: $compare__label-background;
border-bottom: $compare__border;
@include mq($screen-m) {
padding: $compare__label-padding\@medium;
}
}
&__cell {
position: relative;
padding: $compare__cell-padding;
min-width: $compare__cell-min-width;
border-left: $compare__border;
border-bottom: $compare__border;
ul {
padding-left: $compare__cell-list-padding-left;
}
li {
line-height: $compare__cell-item-line-height;
}
}
&__product {
display: flex;
flex-direction: column;
align-items: center;
}
.image {
width: $compare__image-size;
height: $compare__image-size;
max-width: $compare__image-max-size;
max-height: $compare__image-max-size;
}
.price {
font-weight: $font-weight-bold;
}
&__link,
&__rating,
.price {
display: block;
margin-bottom: $compare__attributes-margin-bottom;
}
&__buttons-container {
display: flex;
justify-content: center;
@include mq($screen-m) {
flex-wrap: wrap;
}
}
&__secondary-buttons {
display: flex;
}
&__form {
margin: $compare__form-margin;
}
&__cart {
padding: $compare__cart-padding;
@include mq($screen-m) {
width: $compare__cart-width;
padding: $compare__cart-padding\@medium;
}
}
&__cart-text {
display: none;
@include mq($screen-m) {
display: inline;
}
}
&__cart-icon {
@include mq($screen-m) {
display: none;
}
}
&__wishlist,
&__remove {
height: $compare__wishlist-size;
width: $compare__wishlist-size;
padding: $compare__wishlist-padding;
background: $compare__wishlist-background;
border: $compare__wishlist-border;
cursor: $compare__wishlist-cursor;
&:hover,
&:focus {
background: $compare__wishlist-background;
.compare__wishlist-icon,
.compare__remove-icon {
fill: $compare__wishlist-icon-fill--hover;
}
}
}
&__wishlist-icon,
&__remove-icon {
fill: $compare__wishlist-icon-fill;
width: $compare__wishlist-icon-size;
height: $compare__wishlist-icon-size;
transition: $compare__wishlist-icon-transition;
}
}
There are no notes for this item.