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>
			

		

Html

px

			
				<div class="m-card m-card--secondary u-padding-none">
	<div class="m-card__container">
		<div class="a-formfield   ">
			<div class="a-formfield__header">
				<label class="a-formfield__label " for="formfield-with-label-example-1">
					Example label
				</label>
			</div>
			<div class="a-formfield__wrapper    ">
				<input class="a-formfield__input" type="text" name="formfield-with-label-example-1" id="" placeholder="A placeholder" value="" />
			</div>
		</div>
	</div>
</div>
			

		

Image

px

			
				<article class="m-card m-card--secondary m-card--align-center u-padding-none">
	<figure class="m-card__figure">
		<img class="m-card__image" src="/assets/images/featured-article/header.jpg" alt="Cevora team" width="375" height="147" />
	</figure>
	<div class="m-card__container">
		<header class="m-card__header">
			<p class="m-card__eyebrow">
				Wij behandelen je vraag
			</p>
			<h3 class="m-card__title">
				Cevora team
			</h3>
			<p class="m-card__description">
				staat voor je klaar
			</p>
		</header>
	</div>
</article>
			

		

Secondary

px

			
				<div class="m-card m-card--secondary ">
	<header class="m-card__header">
		<h2 class="m-card__title">
			Contact
		</h2>
		<p class="m-card__description">
			Krijg je graag meer info over onze opleidingen of diensten?
		</p>
	</header>
	<div class="m-card__content">
		<div class="l-grid l-grid--with-spacing-small">
			<div class="l-grid__col">
				<div class="a-icon-label ">
					<span class="a-icon-label__icon icon-alert"></span>
					<div class="a-icon-label__content">
						<h5 class="a-icon-label__title">
							Bel ons
						</h5>
						<div class="a-icon-label__footer">
							<div class="a-icon-label__description">
								Elke weekdag van 8 tot 17u
							</div>
							<a class="a-icon-label__emphasis" href="#" title="02 889 42 00">
								02 889 42 00
							</a>
						</div>
					</div>
				</div>
			</div>
			<div class="l-grid__col">
				<div class="a-icon-label ">
					<span class="a-icon-label__icon icon-alert"></span>
					<div class="a-icon-label__content">
						<h5 class="a-icon-label__title">
							Vragen over outplacement
						</h5>
						<div class="a-icon-label__footer">
							<div class="a-icon-label__description">
								Bel naar
							</div>
							<a class="a-icon-label__emphasis" href="#" title="02 889 49 01">
								02 889 49 01
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div class="m-card__action ">
		<button class="a-button a-button--secondary a-button--rounded u-width-100 ">
			<span class="a-button__text">Primary button</span>
		</button>
	</div>
</div>
			

		

Documentation

Modifiers

  • m-card--align-center

    Align the content of the card to the center.

  • m-card--secondary

    Changes the shadow and bordius of the card.

  • m-card--action-bottom

    Fits the height to it's parent and align the action container to the bottom of the card.