Article preview

An article preview is a card that shows a preview and some meta data about an article and links to the detail page of that particular article. It contains elements and components such as a title, description, image, pill, avatar,...

To make the component a bit more compact on smaller screens, the description will dissapear until a certain minimum viewport width.

Default

px

			
				<article class="m-article-preview ">
	<div class="m-article-preview__image" style="background-image: url(/assets/images/article-preview/header.jpg);">
		<ul class="m-pill-list m-article-preview__tags">
			<li class="m-pill-list__item">
				<div class="a-pill ">
					<span class="a-pill__text">Motiveren om te leren</span>
				</div>
			</li>
		</ul>
	</div>
	<div class="m-article-preview__content">
		<div class="m-article-preview__meta">
			<time class="m-article-preview__meta-item">16 april 2019</time>
			<div class="a-attribute m-article-preview__meta-item a-attribute--inherited">
				<span class="a-attribute__icon a-attribute__icon--before icon-stopwatch"></span>
				<p class="a-attribute__text">4 min</p>
			</div>
		</div>
		<h4 class="m-article-preview__title">Verankeren van leren: wat je als n+1 kan doen om leerimpact te verhogen</h4>
		<p class="m-article-preview__description">
			Een opleiding heeft pas zin als de cursist én zijn werkgever er beter van worden. De rol van de leidinggevende wordt daarbij vaak...
		</p>
		<div class="m-article-preview__footer">
			<div class="a-avatar m-article-preview__avatar">
				<div class="a-image a-avatar__image">
					<img class="a-image__visual" src="/assets/images/avatar/erika.jpg" alt="Erika Wyckmans" title="Erika Wyckmans" />
				</div>
				<div class="a-avatar__content">
					<p class="a-avatar__title">Erika Wyckmans</p>
					<p class="a-avatar__description">
						Functie auteur (1)
						-
						Functie auteur (2)
					</p>
				</div>
			</div>
			<a class="a-link a-link--decorated " href="">
				<span class="a-link__text">Lees meer</span>
			</a>
		</div>
	</div>
</article>