Cookies

Component that contains the cookie-settings displayed in a modal and the cookie-bar. When clicking on the link "Cookie instellingen" the modal is displayed to the user containing the cookie settings.

Default

px

			
				<div class="o-cookies">
	<div id="cookies" class="o-cookies__settings l-modal js-modal">
		<div class="l-modal__backdrop"></div>
		<div class="l-modal__container">
			<header class="l-modal__header">
				<h5 class="l-modal__title">Cookie instellingen | Privacyvoorkeuren</h5>
				<button class="a-icon-button a-icon-button--animated l-modal__close js-modal-trigger" data-modal-target="cookies">
					<span class="a-icon-button__icon icon-cancel"></span>
				</button>
			</header>
			<div class="l-modal__content u-padding-none">
				<div class="o-cookie-settings js-cookie-settings">
					<ul class="o-cookie-settings__tabs u-hide@below-viewport-7">
						<li class="o-cookie-settings__tab is-active" data-tab-target="cookie-settings-privacy">
							<button class="o-cookie-settings__button">Uw privacy</button>
						</li>
						<li class="o-cookie-settings__tab " data-tab-target="cookie-settings-stict">
							<button class="o-cookie-settings__button">Striktnoodzakelijke cookies</button>
						</li>
						<li class="o-cookie-settings__tab " data-tab-target="cookie-settings-analytics">
							<button class="o-cookie-settings__button">Analytische cookies</button>
						</li>
						<li class="o-cookie-settings__tab " data-tab-target="cookie-settings-functional">
							<button class="o-cookie-settings__button">Functionele cookies</button>
						</li>
						<li class="o-cookie-settings__tab " data-tab-target="cookie-settings-advertisement">
							<button class="o-cookie-settings__button">Advertentie cookies</button>
						</li>
					</ul>
					<div class="o-cookie-settings__container">
						<div class="o-cookie-settings__item is-active" id="cookie-settings-privacy">
							<div class="o-cookie-settings__header u-hide@above-viewport-7">
								<h5 class="o-cookie-settings__title">Uw privacy</h5>
								<button class="o-cookie-settings__toggle"></button>
							</div>
							<div class="o-cookie-settings__content">
								<div class="o-cookie-settings__content-wrapper">
									<div class="o-cookie-settings__content-header">
										<span class="o-cookie-settings__content-title">Uw privacy</span>
									</div>
									<div class="s-rte-cookie-settings">
										<p>Wanneer u een website bezoekt, kan deze informatie
											opslaan of ophalen over uw browser, meestal in de vorm van
											cookies. Dit kan informatie zijn over uzelf, uw voorkeuren
											of uw apparaat; deze wordt meestal gebruikt om ervoor te
											zorgen dat de website goed werkt. De informatie
											identificeert u meestal niet rechtstreeks, maar biedt u een
											meer gepersonaliseerde webervaring. Omdat wij uw recht op
											privacy respecteren,kunt u ervoor kiezen bepaalde soorten
											cookies niet toe te staan. Klik op de verschillende
											categorieën voor meer informatie en om de
											standaardinstellingen aan te passen. Wanneer u bepaalde
											soorten cookies blokkeert, kan dat wel gevolgen hebben voor
											uw ervaring op de website en de diensten die wij u kunnen
											bieden.</p>
									</div>
								</div>
							</div>
						</div>
						<div class="o-cookie-settings__item " id="cookie-settings-stict">
							<div class="o-cookie-settings__header u-hide@above-viewport-7">
								<h5 class="o-cookie-settings__title">Striktnoodzakelijke cookies</h5>
								<button class="o-cookie-settings__toggle"></button>
							</div>
							<div class="o-cookie-settings__content">
								<div class="o-cookie-settings__content-wrapper">
									<div class="o-cookie-settings__content-header">
										<span class="o-cookie-settings__content-title">Striktnoodzakelijke cookies</span>
									</div>
									<div class="s-rte-cookie-settings">
									</div>
								</div>
							</div>
						</div>
						<div class="o-cookie-settings__item " id="cookie-settings-analytics">
							<div class="o-cookie-settings__header u-hide@above-viewport-7">
								<h5 class="o-cookie-settings__title">Analytische cookies</h5>
								<button class="o-cookie-settings__toggle"></button>
							</div>
							<div class="o-cookie-settings__content">
								<div class="o-cookie-settings__content-wrapper">
									<div class="o-cookie-settings__content-header">
										<span class="o-cookie-settings__content-title">Analytische cookies</span>
									</div>
									<div class="s-rte-cookie-settings">
									</div>
								</div>
							</div>
						</div>
						<div class="o-cookie-settings__item " id="cookie-settings-functional">
							<div class="o-cookie-settings__header u-hide@above-viewport-7">
								<h5 class="o-cookie-settings__title">Functionele cookies</h5>
								<button class="o-cookie-settings__toggle"></button>
							</div>
							<div class="o-cookie-settings__content">
								<div class="o-cookie-settings__content-wrapper">
									<div class="o-cookie-settings__content-header">
										<span class="o-cookie-settings__content-title">Functionele cookies</span>
									</div>
									<div class="s-rte-cookie-settings">
									</div>
								</div>
							</div>
						</div>
						<div class="o-cookie-settings__item " id="cookie-settings-advertisement">
							<div class="o-cookie-settings__header u-hide@above-viewport-7">
								<h5 class="o-cookie-settings__title">Advertentie cookies</h5>
								<button class="o-cookie-settings__toggle"></button>
							</div>
							<div class="o-cookie-settings__content">
								<div class="o-cookie-settings__content-wrapper">
									<div class="o-cookie-settings__content-header">
										<span class="o-cookie-settings__content-title">Advertentie cookies</span>
									</div>
									<div class="s-rte-cookie-settings">
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<foorter class="l-modal__footer l-modal__footer--border-top">
				<div class="l-grid l-grid--with-spacing l-grid--align-middle">
					<div class="l-grid__col l-grid__col--6@viewport-7 u-align-right">
						<a class="a-button u-width-100@below-viewport-7" href="">
							<span class="a-button__text">Instellingen opslaan</span>
						</a>
					</div>
					<div class="l-grid__col l-grid__col--6@viewport-7 u-align-center@below-viewport-7 u-align-left@above-viewport-7">
						<a class="a-link a-link--decorated " href="">
							<span class="a-link__text">Meer informatie</span>
						</a>
					</div>
				</div>
			</foorter>
		</div>
	</div>
	<div class="o-cookie-bar o-cookies__bar">
		<div class="o-cookie-bar__content">
			<small class="o-cookie-bar__text">We gebruiken cookies om inhoud en advertenties op uw interesses
				af te stemmen, socialmediafunctionaliteit te bieden en ons
				verkeer te analyseren. U kunt uw voorkeuren kiezen in
				Cookie-instellingen. Door gebruik te maken van deze website,
				accepteert u het gebruik van cookies.</small>
		</div>
		<div class="o-cookie-bar__actions">
			<button class="a-button o-cookie-bar__button ">
				<span class="a-button__icon icon-checkmark"></span>
				<span class="a-button__text">Cookies accepteren</span>
			</button>
			<a class="a-link a-link--decorated o-cookie-bar__link undefined js-modal-trigger" data-modal-target="cookies" href="#">
				<span class="a-link__text">Cookie instellingen</span>
			</a>
			<button class="a-icon-button a-icon-button--animated o-cookie-bar__close ">
				<span class="a-icon-button__icon icon-cancel"></span>
			</button>
		</div>
	</div>
</div>