Cookie settings

This cookie settings component is build in two sections: the tabs on the left side and the content on the right side. When you click on a tab, the content on the right side will be displayed.

On mobile these tabs are replaced by the use of collapsables which display or hide their respective content.

The cookie settings can be used in a modal component. The tabs and content becomes scrollable when it's too long.

Default

px

			
				<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">
						<div class="a-toggle a-toggle--fit-space a-toggle--inverse-order">
							<label class="a-toggle__container" for="checkbox-accept">
								<div class="a-toggle__wrapper">
									<input class="a-toggle__input" type="checkbox" id="checkbox-accept" name="checkbox-accept" />
									<span class="a-toggle__icon a-toggle__icon--off icon-checkbox-unchecked"></span>
									<span class="a-toggle__icon a-toggle__icon--on icon-checkbox-checked"></span>
								</div>
								<span class="a-toggle__label a-toggle__label--bold">Analytische cookies</span>
							</label>
						</div>
					</div>
					<div class="s-rte-cookie-settings">
						<p>
							Wanneer u een website bezoekt, kan deze informatie opslaan of ophalen
							over uw browser.
						</p>
					</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>
			

		

Documentation

States

  • is-active

    This will return the active state of the tab. Should be placed on the element *o-cookie-settings__tab.

  • is-open

    This state applies only on the mobile version. The will show the content of the collapse. Should be placed on the element o-cookie-settings__item.

  • is-active

    State that applies only to screens above tablet size. This will display the content. Should be placed on the element o-cookie-settings__item.

JavaScript

  • js-cookie-settings

    Js class to handle the tabs and collapses