Article tile

This is a set of articles that is shown in a layout grid. This component is based upon the article-preview.

Default

px 

			
				<article class="m-article-tile js-m-article-tile m-article-tile--primary l-grid__col-3-12" tabindex="-1">
	<img class="m-article-tile__image" src="/assets/images/mock/iphone.jpg" width="310" height="240" alt="iphone" loading="lazy" />
	<a href="/" class="m-article-tile__link" target="_blank">
		<div class="m-article-tile__content">
			<span class="a-label ">Campagnes</span>
			<h4>Recyclage</h4>
			<p>Een inzamelactie in jouw buurt? Onze nieuwe TV spot? Hier vind je een overzicht van de belangrijkste campagnes.</p>
		</div>
	</a>
</article>

Documentation

Modifiers

  • m-article-tile--primary

    Primary color background, white text on hover

  • m-article-tile--dark

    Dark color background, white text on hover

  • m-article-tile--light

    Light grey background color, dark text on hover

  • m-article-tile--white

    WHite background color, dark text color on hover

JavaScript

  • js-m-article-tile

    this is to place the conten at the bottom and have smooth transition