Progress

List component used to display certain steps within a flow, a maximum of three steps can be placed next to each other. When the view gets closer to touch devices the items are placed underneath each other.

Default

px 

			
				<div class="o-progress ">
	<ul class="o-progress__list l-grid l-grid--with-spacing l-grid--stretch">
		<li class="o-progress__item l-grid__col l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<article class="m-progress-item ">
				<div class="m-progress-item__decorator">
					<span class="m-progress-item__icon"></span>
				</div>
				<div class="m-progress-item__container">
					<h6 class="m-progress-item__title">Gesprek 1</h6>
					<div class="m-progress-item__content">
						<p class="m-progress-item__text">kennismaking en feedback over uw attitudeprofiel op basis van uw voorbereiding.</p>
					</div>
				</div>
			</article>
		</li>
		<li class="o-progress__item l-grid__col l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<article class="m-progress-item ">
				<div class="m-progress-item__decorator">
					<span class="m-progress-item__icon"></span>
				</div>
				<div class="m-progress-item__container">
					<h6 class="m-progress-item__title">Gesprek 2</h6>
					<div class="m-progress-item__content">
						<p class="m-progress-item__text">Dit vindt ongeveer 2 weken na gesprek 1 plaats. Hierin gaan we samen een visuele taakanalyse maken.</p>
					</div>
				</div>
			</article>
		</li>
		<li class="o-progress__item l-grid__col l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<article class="m-progress-item ">
				<div class="m-progress-item__decorator">
					<span class="m-progress-item__icon"></span>
				</div>
				<div class="m-progress-item__container">
					<h6 class="m-progress-item__title">Gesprek 3</h6>
					<div class="m-progress-item__content">
						<p class="m-progress-item__text">Dit vindt ongeveer 1 maand na gesprek 2 plaats. Kennismaking met de verschillende jobcrafting-technieken. En we stellen uw actieplan (incl. opleidingsadvies) op.</p>
					</div>
				</div>
			</article>
		</li>
	</ul>
</div>

With four items

px 

			
				<div class="o-progress ">
	<ul class="o-progress__list l-grid l-grid--with-spacing l-grid--stretch">
		<li class="o-progress__item l-grid__col l-grid__col--6@viewport-7 l-grid__col--3@viewport-9">
			<article class="m-progress-item ">
				<div class="m-progress-item__decorator">
					<span class="m-progress-item__icon"></span>
				</div>
				<div class="m-progress-item__container">
					<h6 class="m-progress-item__title">Schrijf je in</h6>
					<div class="m-progress-item__content">
						<p class="m-progress-item__text">kennismaking en feedback over uw attitudeprofiel op basis van uw voorbereiding.</p>
					</div>
				</div>
			</article>
		</li>
		<li class="o-progress__item l-grid__col l-grid__col--6@viewport-7 l-grid__col--3@viewport-9">
			<article class="m-progress-item ">
				<div class="m-progress-item__decorator">
					<span class="m-progress-item__icon"></span>
				</div>
				<div class="m-progress-item__container">
					<h6 class="m-progress-item__title">Volg de opleiding</h6>
					<div class="m-progress-item__content">
						<p class="m-progress-item__text">Na de selectieronde kan je de opleiding beginnen</p>
					</div>
				</div>
			</article>
		</li>
		<li class="o-progress__item l-grid__col l-grid__col--6@viewport-7 l-grid__col--3@viewport-9">
			<article class="m-progress-item ">
				<div class="m-progress-item__decorator">
					<span class="m-progress-item__icon"></span>
				</div>
				<div class="m-progress-item__container">
					<h6 class="m-progress-item__title">Doe de stage</h6>
					<div class="m-progress-item__content">
						<p class="m-progress-item__text">Zet je kennis om in praktijk om via een stage, tijdens of na de opleiding</p>
					</div>
				</div>
			</article>
		</li>
		<li class="o-progress__item l-grid__col l-grid__col--6@viewport-7 l-grid__col--3@viewport-9">
			<article class="m-progress-item ">
				<div class="m-progress-item__decorator">
					<span class="m-progress-item__icon"></span>
				</div>
				<div class="m-progress-item__container">
					<h6 class="m-progress-item__title">Zoek een job</h6>
					<div class="m-progress-item__content">
						<p class="m-progress-item__text">Stage afgerond? Teken dan net zoals 7 op 10 van onze cursisten voor je droomjob</p>
					</div>
				</div>
			</article>
		</li>
	</ul>
</div>