Card

A card can be a very simple. It can contain different types of elements ranging from titles, descriptions to actions such as links or buttons.

  • It is a way to display information that is not crucial for the user.
  • When the card resizes the description grows in height and the link is pushed down.

Default

px

			
				<article class="m-card ">
	<header class="m-card__header">
		<h6 class="m-card__title">Persoonlijke ontwikkeling</h6>
	</header>
	<p class="m-card__description">
		Voel u goed op het werk, word creatiever en bereik meer met uw communicatie.
	</p>
	<div class="m-card__action">
		<a class="a-link a-link--decorated " href="">
			<span class="a-link__text">Ontdek dit thema</span>
		</a>
	</div>
</article>
<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>
			

		

Documentation

Modifiers

  • m-card--align-center

    Align the content of the card to the center.