Hero

The hero is used on every page to show at which page you are. It's made of a title and an image.

Default

px 

			
				<div class="m-hero m-hero--inverted js-m-hero">
	<div class="m-hero__background"></div>
	<div class="m-hero__image-container">
		<img class="m-hero__image" src="/assets/images/header/recycleren.jpg" alt="Recycleren" width="800" height="600" loading="lazy" />
	</div>
	<div class="m-hero__content-container">
		<div class="m-hero__content">
			<h1 class="m-hero__title">Recycleren</h1>
			<h3 class="m-hero__subtitle">Wat kan je doen met jouw gebruikte batterijen?</h3>
			<p class="m-hero__text">Lorem ipsum doler sit amet</p>
		</div>
	</div>
</div>

Documentation

Modifiers

  • m-hero--inverted

    This modifier will put the text in a white color.

  • m-hero--placeholder

    This will give the hero component a placeholder background and hide the gradient