Cevora

Illustrations can be used alongside images to convey meaning while bringing a lighter weight than images. Illustrations and larger icons should be used for specific contexts (for example: use a specific item to describe "progress"). You can find advised illustrations and contexts below.

Modifiers

Default


			
				<div class="a-illustration ">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/clock.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Zes maanden tijd
	</p>
</div>
<div class="a-illustration ">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/profile.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Jouw profiel, in lijn met jezelf
	</p>
</div>
<div class="a-illustration ">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/saving.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Zelf betalen
	</p>
</div>
<div class="a-illustration ">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/graduate.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Eindproeven, slagen
	</p>
</div>
<div class="a-illustration ">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/free-time.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Vrije tijd, buiten werkuren
	</p>
</div>

Section example


			
				<section class="l-section">
	<div class="l-container l-container--secondary">
		<header class="l-section__header u-text-align-center">
			<h3 class="l-section__title">Aan welke voorwaarden moet minimaal worden voldaan voor een opleidingspremie?</h3>
		</header>
	</div>
	<div class="l-container u-margin-top-3x u-margin-top-5x@above-viewport-7">
		<div class="l-section__content">
			<div class="l-grid l-grid--with-spacing l-grid--align-center">
				<div class="a-illustration l-grid__col l-grid__col--6@viewport-7 l-grid__col--4@viewport-9 a-illustration--with-circle">
					<div class="a-illustration__image-container">
						<img class="a-illustration__image" src="/assets/images/illustrations/clock.svg" alt="clock" title="clock" />
					</div>
					<p class="a-illustration__text">
						Dien jouw aanvraag in tot <strong>zes maanden</strong> na de laatste opleidings- of examendag.
					</p>
				</div>
				<div class="a-illustration l-grid__col l-grid__col--6@viewport-7 l-grid__col--4@viewport-9 a-illustration--with-circle">
					<div class="a-illustration__image-container">
						<img class="a-illustration__image" src="/assets/images/illustrations/profile.svg" alt="clock" title="clock" />
					</div>
					<p class="a-illustration__text">
						De opleiding moet verband houden met <strong>jouw job</strong> of met een functie binnen het APCB.
					</p>
				</div>
				<div class="a-illustration l-grid__col l-grid__col--6@viewport-7 l-grid__col--4@viewport-9 a-illustration--with-circle">
					<div class="a-illustration__image-container">
						<img class="a-illustration__image" src="/assets/images/illustrations/saving.svg" alt="clock" title="clock" />
					</div>
					<p class="a-illustration__text">
						De opleiding moet plaatsvinden <strong>buiten jouw werkuren</strong> ('s avonds, in het weekend of op vrije dagen).
					</p>
				</div>
				<div class="a-illustration l-grid__col l-grid__col--6@viewport-7 l-grid__col--4@viewport-9 a-illustration--with-circle">
					<div class="a-illustration__image-container">
						<img class="a-illustration__image" src="/assets/images/illustrations/graduate.svg" alt="clock" title="clock" />
					</div>
					<p class="a-illustration__text">
						Je betaald de opleidingskosten <strong>zelf</strong> (niet jouw bedrijf).
					</p>
				</div>
				<div class="a-illustration l-grid__col l-grid__col--6@viewport-7 l-grid__col--4@viewport-9 a-illustration--with-circle">
					<div class="a-illustration__image-container">
						<img class="a-illustration__image" src="/assets/images/illustrations/free-time.svg" alt="clock" title="clock" />
					</div>
					<p class="a-illustration__text">
						Bevat jouw opleiding een eindproef? Dan moet je hiervoor <strong>slagen</strong>.
					</p>
				</div>
			</div>
		</div>
	</div>
</section>

With circle


			
				<div class="a-illustration a-illustration--with-circle">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/clock.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Zes maanden tijd
	</p>
</div>
<div class="a-illustration a-illustration--with-circle">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/profile.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Jouw profiel, in lijn met jezelf
	</p>
</div>
<div class="a-illustration a-illustration--with-circle">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/saving.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Zelf betalen
	</p>
</div>
<div class="a-illustration a-illustration--with-circle">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/graduate.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Eindproeven, slagen
	</p>
</div>
<div class="a-illustration a-illustration--with-circle">
	<div class="a-illustration__image-container">
		<img class="a-illustration__image" src="/assets/images/illustrations/free-time.svg" alt="clock" title="clock" />
	</div>
	<p class="a-illustration__text">
		Vrije tijd, buiten werkuren
	</p>
</div>

Documentation

Modifiers

a-illustration--with-circle

Place the illustration within a grey circle.