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" style="background-image:url('/assets/images/mock/iphone.jpg')" tabindex="-1">
	<a href="/" class="m-article-tile__link" target="_blank"></a>
	<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>
</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