Wizard

The wizard 🧙‍contains a content and navigational area. The content area can contain anything that allows the user to go to the net step. The navigational area consists of next and previous buttons and a progress bar that help indicate the user how many steps there are and at which step the user is at.

Default

px 

			
				<div class="o-wizard">
	<div class="o-wizard__content">
	</div>
	<div class="o-wizard__nav">
		<button class="a-button a-button--outline o-wizard__prev ">
			<span class="a-button__text">vorige stap</span>
		</button>
		<div class="m-progress-bar js-progress-bar  o-wizard__progress">
			<div class="m-progress-bar__wrapper">
				<button class="m-progress-bar__arrow m-progress-bar__arrow--left"></button>
				<div class="m-progress-bar__items">
					<a href="#" class="m-progress-bar__item is-completed  m-progress-bar__item--first ">
						<span class="m-progress-bar__number">1</span>
					</a>
					<a href="#" class="m-progress-bar__item  is-active  ">
						<span class="m-progress-bar__number">2</span>
					</a>
					<a href="#" class="m-progress-bar__item    ">
						<span class="m-progress-bar__number">3</span>
					</a>
					<a href="#" class="m-progress-bar__item    m-progress-bar__item--last">
						<span class="m-progress-bar__number">4</span>
					</a>
				</div>
				<button class="m-progress-bar__arrow m-progress-bar__arrow--right"></button>
			</div>
			<p class="m-progress-bar__text">Currently at step
				<strong class="m-progress-bar__current">2/4</strong>
			</p>
		</div>
		<button class="a-button o-wizard__next ">
			<span class="a-button__text">volgende stap</span>
		</button>
	</div>
</div>