Quote

The quote molecule is used to highlight a quote within an article. This block can have an optional subtitle, title, text, source, note and button to provide context.

Background image

px

			
				<blockquote class="m-quote m-quote--background-image l-background--with-image-dark " style="background-image: url('/assets/images/background/image.png');">
	<div class="m-quote__inner">
		<div class="m-quote__subtitle">
			Lees zijn ervaring
		</div>
		<div class="m-quote__title">
			Zorg dat je onderwerp duidelijk is en opvalt in de massa mails die veel bedienden te verwerken krijgen.
		</div>
		<p class="m-quote__text">
			Het eerste wat de bestemmeling van je mail ziet, is het onderwerp. Zorg dan ook dat die subject line duidelijk is en opvalt in de massa berichten die veel bedienden te verwerken krijgen. Gebruik niet alleen te algemene woorden, zoals ‘feedback’ of ‘document’, maar kies de juiste inhoudelijke kernwoorden.
		</p>
		<cite class="m-quote__source">
			John Porter,
			<span class="m-quote__note">CEO Telenet</span>
		</cite>
		<button class="a-button m-quote__button ">
			<span class="a-button__text">Ontdek Mycevora</span>
		</button>
	</div>
</blockquote>
			

		

Big

px

			
				<blockquote class="m-quote m-quote--big m-quote--background ">
	<div class="m-quote__subtitle">
		Lees zijn ervaring
	</div>
	<div class="m-quote__title">
		Zorg dat je onderwerp duidelijk is en opvalt in de massa mails die veel bedienden te verwerken krijgen.
	</div>
	<p class="m-quote__text">
		Het eerste wat de bestemmeling van je mail ziet, is het onderwerp. Zorg dan ook dat die subject line duidelijk is en opvalt in de massa berichten die veel bedienden te verwerken krijgen. Gebruik niet alleen te algemene woorden, zoals ‘feedback’ of ‘document’, maar kies de juiste inhoudelijke kernwoorden.
	</p>
	<cite class="m-quote__source">
		John Porter,
		<span class="m-quote__note">CEO Telenet</span>
	</cite>
	<button class="a-button m-quote__button ">
		<span class="a-button__text">Ontdek Mycevora</span>
	</button>
</blockquote>
			

		

Default

px

			
				<blockquote class="m-quote m-quote--background ">
	<div class="m-quote__title">
		Zorg dat je onderwerp duidelijk is en opvalt in de massa mails die veel bedienden te verwerken krijgen.
	</div>
	<cite class="m-quote__source">John Porter</cite>
	<span class="m-quote__note">CEO Telenet</span>
</blockquote>
			

		

Illustrative

px

			
				<blockquote class="m-quote m-quote--illustrative ">
	<div class="m-quote__subtitle">
		Lees zijn ervaring
	</div>
	<div class="m-quote__title">
		Zorg dat je onderwerp duidelijk is en opvalt in de massa mails die veel bedienden te verwerken krijgen.
	</div>
	<p class="m-quote__text">
		Het eerste wat de bestemmeling van je mail ziet, is het onderwerp. Zorg dan ook dat die subject line duidelijk is en opvalt in de massa berichten die veel bedienden te verwerken krijgen. Gebruik niet alleen te algemene woorden, zoals ‘feedback’ of ‘document’, maar kies de juiste inhoudelijke kernwoorden.
	</p>
	<cite class="m-quote__source">
		John Porter,
		<span class="m-quote__note">CEO Telenet</span>
	</cite>
	<button class="a-button m-quote__button ">
		<span class="a-button__text">Ontdek Mycevora</span>
	</button>
</blockquote>
			

		

Documentation

Modifiers

  • m-quote--big

    Alternative styling to make the quote bigger.

  • m-quote--background

    Add the default quotes as an illustrative background.

  • m-quote--illustrative

    Add an alternative illustrative background with arrows.

  • m-quote--background-image

    Add styles for an image background with a dark overlay. Make sure to combine this with the .l-background--with-image-dark class.