Education

The education (card) is an element used to put certain educations in the spotlight. It contains a title, date, location and the duration of the education. These can also be placed within a section layout to create a group.

Default

px 

			
				<article class="m-education ">
	<header class="m-education__header">
		<h4 class="m-education__title">
			<a class="m-education__link" href="#">Grafieken en 3D-effecten met adobe illustrator</a>
		</h4>
	</header>
	<div class="m-education__content">
		<span class="m-education__meta">
			23 November 2017
			,<br />
			Oost-vlaanderen
		</span>
		<span class="m-education__duration">2 dagen</span>
	</div>
</article>

Group

This is an example of how these elements should be placed on a page using the section and grid layout in a correct way.

px 

			
				<section class="l-section l-background l-background--fades" style="background-image: url('/assets/images/background/line-pattern.png');">
	<div class="l-container">
		<header class="l-section__header">
			<h2 class="l-section__title">Opleidingen in de spotlight</h2>
		</header>
		<div class="l-section__content">
			<div class="l-grid l-grid--with-spacing l-grid--stretch">
				<article class="m-education l-grid__col l-grid__col--6@viewport-7 l-grid__col l-grid__col--8@viewport-9">
					<header class="m-education__header">
						<h4 class="m-education__title">
							<a class="m-education__link" href="#">Grafieken en 3D-effecten met adobe illustrator</a>
						</h4>
					</header>
					<div class="m-education__content">
						<span class="m-education__meta">
							23 November 2017
							,<br />
							Oost-vlaanderen
						</span>
						<span class="m-education__duration">2 dagen</span>
					</div>
				</article>
				<article class="m-education l-grid__col l-grid__col--6@viewport-7 l-grid__col l-grid__col--4@viewport-9">
					<header class="m-education__header">
						<h4 class="m-education__title">
							<a class="m-education__link" href="#">Algemene topografie voor de bouwsector: gevorderd</a>
						</h4>
					</header>
					<div class="m-education__content">
						<span class="m-education__meta">
							18, 19, 20, 21, 25 februari 2019
						</span>
						<span class="m-education__duration">5 dagen</span>
					</div>
				</article>
			</div>
		</div>
	</div>
</section>