Card group

A card-group can be used to create a set of cards that align perfectly and have their own set of rules, deviating from the base card if necessary.

Default

px 

			
				<div class="o-card-group">
	<ul class="o-card-group__list l-grid l-grid--with-spacing l-grid--stretch">
		<li class="o-card-group__item l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<div class="m-card ">
				<p class="m-card__description">
					Ik volg ergens anders een opleiding. Krijg ik een opleidingspremie?
				</p>
				<div class="m-card__action ">
					<a class="a-link a-link--decorated " href="">
						<span class="a-link__text">Bekijk opleidingspremies</span>
					</a>
				</div>
			</div>
		</li>
		<li class="o-card-group__item l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<div class="m-card ">
				<p class="m-card__description">
					Ik volg ergens anders een opleiding. Krijg ik een opleidingspremie?
				</p>
				<div class="m-card__action ">
					<a class="a-link a-link--decorated " href="">
						<span class="a-link__text">Bekijk opleidingspremies</span>
					</a>
				</div>
			</div>
		</li>
		<li class="o-card-group__item l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<div class="m-card ">
				<p class="m-card__description">
					Ik volg ergens anders een opleiding. Krijg ik een opleidingspremie?
				</p>
				<div class="m-card__action ">
					<a class="a-link a-link--decorated " href="">
						<span class="a-link__text">Bekijk opleidingspremies</span>
					</a>
				</div>
			</div>
		</li>
	</ul>
</div>

With cta

px 

			
				<div class="o-card-group">
	<ul class="o-card-group__list l-grid l-grid--with-spacing l-grid--stretch">
		<li class="o-card-group__item l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<article class="m-cta  ">
				<header class="m-cta__header">
					<small class="m-cta__sub">Volg een opleiding</small>
					<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
				</header>
				<div class="m-cta__actions">
					<a class="a-button " href="">
						<span class="a-button__text">Volg een opleiding</span>
					</a>
				</div>
			</article>
		</li>
		<li class="o-card-group__item l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<article class="m-cta  ">
				<header class="m-cta__header">
					<small class="m-cta__sub">Volg een opleiding</small>
					<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
				</header>
				<div class="m-cta__actions">
					<a class="a-button " href="">
						<span class="a-button__text">Volg een opleiding</span>
					</a>
				</div>
			</article>
		</li>
		<li class="o-card-group__item l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<article class="m-cta  ">
				<header class="m-cta__header">
					<small class="m-cta__sub">Volg een opleiding</small>
					<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
				</header>
				<div class="m-cta__actions">
					<a class="a-button " href="">
						<span class="a-button__text">Volg een opleiding</span>
					</a>
				</div>
			</article>
		</li>
	</ul>
</div>

With mobile discolure link

px 

			
				<div class="o-card-group">
	<ul class="o-card-group__list l-grid l-grid--with-spacing l-grid--stretch u-hide@below-viewport-9">
		<li class="o-card-group__item l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<article class="m-cta  ">
				<header class="m-cta__header">
					<small class="m-cta__sub">Volg een opleiding</small>
					<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
				</header>
				<div class="m-cta__actions">
					<a class="a-button " href="">
						<span class="a-button__text">Volg een opleiding</span>
					</a>
				</div>
			</article>
		</li>
		<li class="o-card-group__item l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<article class="m-cta  ">
				<header class="m-cta__header">
					<small class="m-cta__sub">Volg een opleiding</small>
					<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
				</header>
				<div class="m-cta__actions">
					<a class="a-button " href="">
						<span class="a-button__text">Volg een opleiding</span>
					</a>
				</div>
			</article>
		</li>
		<li class="o-card-group__item l-grid__col--6@viewport-7 l-grid__col--4@viewport-9">
			<article class="m-cta  ">
				<header class="m-cta__header">
					<small class="m-cta__sub">Volg een opleiding</small>
					<h4 class="m-cta__title">Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.</h4>
				</header>
				<div class="m-cta__actions">
					<a class="a-button " href="">
						<span class="a-button__text">Volg een opleiding</span>
					</a>
				</div>
			</article>
		</li>
	</ul>
	<ul class="m-disclosure-list u-hide@above-viewport-9">
		<li class="m-disclosure-list__item">
			<a class="a-disclosure-link " href="">
				<div class="a-disclosure-link__text">
					<span>
						Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.
					</span>
				</div>
				<span class="a-disclosure-link__icon icon-arrow-right"></span>
			</a>
		</li>
		<li class="m-disclosure-list__item">
			<a class="a-disclosure-link " href="">
				<div class="a-disclosure-link__text">
					<span>
						Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.
					</span>
				</div>
				<span class="a-disclosure-link__icon icon-arrow-right"></span>
			</a>
		</li>
		<li class="m-disclosure-list__item">
			<a class="a-disclosure-link " href="">
				<div class="a-disclosure-link__text">
					<span>
						Bekijk onze catalogus met cursussen, om vooruit te gaan in jouw job.
					</span>
				</div>
				<span class="a-disclosure-link__icon icon-arrow-right"></span>
			</a>
		</li>
	</ul>
</div>