Hero

The hero has his place at the top of a page to put an article or news item in the picture. It has an image, title and label which is optional. The type of html tag depends on the syntax of the page, the heading styling can be set through the util classes.

Default

px 

			
				<section class="c-hero ">
	<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
		<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
			<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
		</div>
		<div class="c-hero__content">
			<div class="c-hero__label-wrapper">
				<div class="c-label c-hero__label">
					05.10.2019
					<div class="c-label__divider"></div>
					05.10.2019
				</div>
			</div>
			<h1 class="c-hero__title">Madonna ontmoet dulle griet</h1>
		</div>
	</a>
</section>

Reversed

px 

			
				<section class="c-hero c-hero--reversed">
	<a class="c-hero__link" href="" aria-label="Artikel: [object Object]">
		<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
			<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
		</div>
		<div class="c-hero__content">
			<div class="c-hero__label-wrapper">
				<div class="c-label c-hero__label">
					05.10.2019
					<div class="c-label__divider"></div>
					05.10.2019
				</div>
			</div>
			<h1 class="c-hero__title">Madonna ontmoet dulle griet</h1>
		</div>
	</a>
</section>

Small

px 

			
				<section class="c-hero c-hero--small">
	<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
		<div class="c-hero__image" style="background-image: url('/assets/images/placeholders/placeholder1.jpg');">
			<img src="/assets/images/placeholders/placeholder1.jpg" class="u-visually-hidden u-idle" alt="Schilderij Madonna" />
		</div>
		<div class="c-hero__content">
			<div class="c-hero__label-wrapper">
				<div class="c-label c-hero__label">
					05.10.2019
					<div class="c-label__divider"></div>
					05.10.2019
				</div>
			</div>
			<h2 class="c-hero__title">Madonna ontmoet dulle griet</h2>
		</div>
	</a>
</section>

Video

px 

			
				<section class="c-hero ">
	<a class="c-hero__link" href="#" aria-label="Artikel: [object Object]">
		<video class="c-hero__video" muted="true" autoplay="true">
			<source src="https://www.rebranding-bvlnkiy-w2327jyujk6eo.eu-2.platformsh.site/sites/default/files/2021-01/Drone_teaser_homepage.mp4" type="video/mp4">
		</video>
		<div class="c-hero__content">
			<div class="c-hero__label-wrapper">
				<div class="c-label c-hero__label">
					05.10.2019
					<div class="c-label__divider"></div>
					05.10.2019
				</div>
			</div>
			<h1 class="c-hero__title">Madonna ontmoet dulle griet</h1>
		</div>
	</a>
</section>

Documentation

Modifiers

  • c-hero--reversed

    Puts the content in the bottom right corner of the hero

  • c-hero--small

    Gives the hero a smaller title

  • c-hero--top

    Puts the content at the top of the hero