KMSKA

The TOC item is a component that is used in the Toc component which can be placed on several page templates but mostly on an article detail.

Javascript

Default


			
				<div class="c-toc js-toc ">
	<div class="c-toc__header">
		<div class="l-flex l-flex--justify-content:space-between">
			<span class="c-toc__header-text">Snel naar...</span>
			<div class="c-icon c-toc__header-icon">
				<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
				</svg>
			</div>
		</div>
		<div class="c-divider c-toc__header-divider"></div>
	</div>
	<div class="c-toc__content">
		<ul class="c-toc__list">
			<li class="c-toc__list-item" data-toc-id="omschrijving">
				<a href="#omschrijving" class="c-toc-item ">
					<span class="c-toc-item__text">Omschrijving</span>
					<div class="c-icon c-toc-item__icon">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
						</svg>
					</div>
				</a>
			</li>
			<li class="c-toc__list-item" data-toc-id="prijzen">
				<a href="#prijzen" class="c-toc-item ">
					<span class="c-toc-item__text">Prijzen</span>
					<div class="c-icon c-toc-item__icon">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
						</svg>
					</div>
				</a>
			</li>
			<li class="c-toc__list-item" data-toc-id="meer-info">
				<a href="#meer-info" class="c-toc-item ">
					<span class="c-toc-item__text">Meer info</span>
					<div class="c-icon c-toc-item__icon">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
						</svg>
					</div>
				</a>
			</li>
		</ul>
		<div class="c-divider c-toc__divider u-hide@at:vp-7"></div>
	</div>
</div>

With button


			
				<div class="c-toc js-toc ">
	<div class="c-toc__header">
		<div class="l-flex l-flex--justify-content:space-between">
			<span class="c-toc__header-text">Snel naar...</span>
			<div class="c-icon c-toc__header-icon">
				<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
				</svg>
			</div>
		</div>
		<div class="c-divider c-toc__header-divider"></div>
	</div>
	<div class="c-toc__content">
		<ul class="c-toc__list">
			<li class="c-toc__list-item" data-toc-id="">
				<a href="#" class="c-toc-item ">
					<span class="c-toc-item__text">Omschrijving</span>
					<div class="c-icon c-toc-item__icon">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
						</svg>
					</div>
				</a>
			</li>
			<li class="c-toc__list-item" data-toc-id="">
				<a href="#" class="c-toc-item ">
					<span class="c-toc-item__text">Prijzen</span>
					<div class="c-icon c-toc-item__icon">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
						</svg>
					</div>
				</a>
			</li>
			<li class="c-toc__list-item" data-toc-id="">
				<a href="#" class="c-toc-item ">
					<span class="c-toc-item__text">Item 3</span>
					<div class="c-icon c-toc-item__icon">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
						</svg>
					</div>
				</a>
			</li>
		</ul>
		<a class="c-link c-toc__link c-link--secondary" href="#">
			<span class="c-link__description">Reserveer ticket</span>
			<span class="c-link__decoration" aria-hidden="true"></span>
		</a>
		<div class="c-divider c-toc__divider u-hide@at:vp-7"></div>
	</div>
</div>

With definition


			
				<div class="c-toc js-toc ">
	<div class="c-toc__header">
		<div class="l-flex l-flex--justify-content:space-between">
			<span class="c-toc__header-text">Snel naar...</span>
			<div class="c-icon c-toc__header-icon">
				<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
					<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
				</svg>
			</div>
		</div>
		<div class="c-divider c-toc__header-divider"></div>
	</div>
	<div class="c-toc__content">
		<ul class="c-toc__list">
			<li class="c-toc__list-item" data-toc-id="">
				<a href="#" class="c-toc-item ">
					<span class="c-toc-item__text">Omschrijving</span>
					<div class="c-icon c-toc-item__icon">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
						</svg>
					</div>
				</a>
			</li>
			<li class="c-toc__list-item" data-toc-id="">
				<a href="#" class="c-toc-item ">
					<span class="c-toc-item__text">Prijzen</span>
					<div class="c-icon c-toc-item__icon">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
						</svg>
					</div>
				</a>
			</li>
			<li class="c-toc__list-item" data-toc-id="">
				<a href="#" class="c-toc-item ">
					<span class="c-toc-item__text">Item 3</span>
					<div class="c-icon c-toc-item__icon">
						<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
							<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5999 0H10.64V16.6397L4.80012 10.7999L2 13.6L12.4 24L22.8 13.6L19.9998 10.7999L14.5999 16.1998V0Z" />
						</svg>
					</div>
				</a>
			</li>
		</ul>
		<ul class="c-toc__details">
			<li class="c-toc__details-item">
				<p class="c-toc__details-label">Datum</p>
				<div class="c-toc__details-text">van 05.10.2021 t.e.m. 05.08.2022</div>
			</li>
			<li class="c-toc__details-item">
				<p class="c-toc__details-label">Locatie</p>
				<div class="c-toc__details-text">KMSKA</div>
			</li>
			<li class="c-toc__details-item">
				<p class="c-toc__details-label">Tarief</p>
				<div class="c-toc__details-text">Toegangsticket</div>
			</li>
		</ul>
		<a class="c-link c-toc__link c-link--secondary" href="#">
			<span class="c-link__description">Reserveer ticket</span>
			<span class="c-link__decoration" aria-hidden="true"></span>
		</a>
		<div class="c-divider c-toc__divider u-hide@at:vp-7"></div>
	</div>
</div>

Documentation

JavaScript

js-toc

Will navigate in the wysiwyg, usually in an article detail page, between the different sections of the article. The arrows indicate which part the user is viewing. The toc-component will scroll along the content.