Whitepaper

The whitepaper molecule is a card that has the same functionality as the downloadable component, but it looks visually different. The default version can be used in a grid and the large version can be used as a banner.

Default

px 

			
				<article class="m-whitepaper ">
	<div class="m-whitepaper__image-container">
		<img class="m-whitepaper__image" src="/assets/images/blog/book.png" alt="6 bouwstenen voor een impactvolle contentstrategie" title="6 bouwstenen voor een impactvolle contentstrategie">
	</div>
	<div class="m-whitepaper__content">
		<h3 class="m-whitepaper__title">Gratis e-book</h3>
		<p class="m-whitepaper__description">6 bouwstenen voor een impactvolle contentstrategie</p>
		<a class="a-button m-whitepaper__button a-button--animated" href="">
			<span class="a-button__text">Download e-book</span>
			<span class="a-button__icon icon-download"></span>
		</a>
	</div>
</article>

Large

px 

			
				<article class="m-whitepaper m-whitepaper--large">
	<div class="m-whitepaper__image-container">
		<img class="m-whitepaper__image" src="/assets/images/blog/book.png" alt="6 bouwstenen voor een impactvolle contentstrategie" title="6 bouwstenen voor een impactvolle contentstrategie">
	</div>
	<div class="m-whitepaper__content">
		<h3 class="m-whitepaper__title">Gratis e-book</h3>
		<p class="m-whitepaper__description">6 bouwstenen voor een impactvolle contentstrategie</p>
		<a class="a-button m-whitepaper__button a-button--animated" href="">
			<span class="a-button__text">Download e-book</span>
			<span class="a-button__icon icon-download"></span>
		</a>
	</div>
</article>

Documentation

Modifiers

  • m-author--large

    This modifier stretches the component to full width, like a banner.