Program sheet

A way of visualising the program of the course with some text in lists. Their is a scope class s-rte-program-sheet for when the content is delivered in RTE.

Default

px 

			
				<div class="m-program-sheet ">
	<ol class="m-program-sheet__list">
		<li class="m-program-sheet__item">
			<h5 class="m-program-sheet__title">Overzicht van het programma</h5>
			<ul class="m-list m-list--with-icon m-program-sheet__sublist">
				<li class="m-list__item">
					<span class="m-list__text icon-arrow-double-right">Drie fouten die je dient te vermijden indien je jouw inlevingsvermogen wilt tonen</span>
				</li>
				<li class="m-list__item">
					<span class="m-list__text icon-arrow-double-right">Drie fouten die je dient te vermijden indien je jouw inlevingsvermogen wilt tonen</span>
				</li>
			</ul>
		</li>
		<li class="m-program-sheet__item">
			<h5 class="m-program-sheet__title">Hoe breng je jouw inlevingsvermogen in praktijk?</h5>
			<ul class="m-list m-list--with-icon m-program-sheet__sublist">
				<li class="m-list__item">
					<span class="m-list__text icon-arrow-double-right">Drie belangrijke gewoontes om inlevingsvermogen te tonen in de praktijk</span>
				</li>
				<li class="m-list__item">
					<span class="m-list__text icon-arrow-double-right">Een welwillende neutrale houding = essentie van inlevingsvermogen</span>
				</li>
				<li class="m-list__item">
					<span class="m-list__text icon-arrow-double-right">Welke kwaliteiten heb je nodig om je in te leven?</span>
				</li>
			</ul>
		</li>
	</ol>
	<div class="a-video js-video  m-program-sheet__video">
		<div class="a-video__controls">
			<button class="a-video__play"></button>
		</div>
		<video class="a-video__source">
			<source src="/assets/videos/cevora.mp4" type="video/mp4" />
			<source src="/assets/videos/cevora.ogg" type="video/ogg" />
		</video>
	</div>
</div>

Rte

This component has no classes to simulate a rich text environement. We use a scope class to style the component namely s-rte-program-sheet.

px 

			
				<div class="m-program-sheet s-rte-program-sheet">
	<ol>
		<li>
			<h5>Overzicht van het programma</h5>
			<ul>
				<li>Drie fouten die je dient te vermijden indien je jouw inlevingsvermogen wilt tonen</li>
				<li>Drie fouten die je dient te vermijden indien je jouw inlevingsvermogen wilt tonen</li>
			</ul>
		</li>
		<li>
			<h5>Hoe breng je jouw inlevingsvermogen in praktijk?</h5>
			<ul>
				<li>Drie belangrijke gewoontes om inlevingsvermogen te tonen in de praktijk</li>
				<li>Een welwillende neutrale houding = essentie van inlevingsvermogen</li>
				<li>Welke kwaliteiten heb je nodig om je in te leven?</li>
			</ul>
		</li>
	</ol>
	<video controls>
		<source src="/assets/videos/cevora.mp4" type="video/mp4" />
		<source src="/assets/videos/cevora.ogg" type="video/ogg" />
	</video>
</div>