Cevora

The small blog card is used to display articles in the spotlight (top of the blog page). It doens't have a fixed size and expands to the bottom.

Modifiers

Default

px


			
				<article class="m-blog ">
	<div class="m-blog__wrapper">
		<span class="m-blog__theme">Nieuwe leervormen</span>
		<header class="m-blog__header">
			<h4 class="m-blog__title">5 Stappen om een trefzeker traject te ontwerpen</h4>
		</header>
	</div>
</article>

With background image

px


			
				<article class="m-blog m-blog--image">
	<div class="m-blog__image" style="background-image: url('/assets/images/banner/placeholder.png');"></div>
	<div class="m-blog__wrapper">
		<span class="m-blog__theme">Nieuwe leervormen</span>
		<header class="m-blog__header">
			<h4 class="m-blog__title">5 Stappen om een trefzeker traject te ontwerpen</h4>
		</header>
	</div>
</article>

With large height and background image

px


			
				<article class="m-blog m-blog--image m-blog--large">
	<div class="m-blog__image" style="background-image: url('/assets/images/banner/placeholder.png');"></div>
	<div class="m-blog__wrapper">
		<span class="m-blog__theme">Nieuwe leervormen</span>
		<header class="m-blog__header">
			<h4 class="m-blog__title">Microlearning: Buzzword of buitenkans?</h4>
		</header>
	</div>
</article>

With large height

px


			
				<article class="m-blog m-blog--large">
	<div class="m-blog__wrapper">
		<span class="m-blog__theme">Nieuwe leervormen</span>
		<header class="m-blog__header">
			<h4 class="m-blog__title">5 Stappen om een trefzeker traject te ontwerpen</h4>
		</header>
	</div>
</article>

Documentation

Modifiers

m-blog--image

Create a blog card supportd by a background-image. When an image is used, the color of the text changes as well for better readability.
m-blog--large

Increase the general size of the card and its copy. The title mainly increases in size.