Header highlight

Highlight of a header on a specific page, containing an image, a link, a title and a label.

Default

px

			
				<section class="c-header-highlight ">
	<div class="l-container:10/12">
		<div class="c-header-highlight__container l-flex l-flex--justify-content:space-between l-flex--align-items:end l-flex--wrap">
			<div class="c-header-highlight__content">
				<a class="c-link c-header-highlight__back c-link--secondary c-link--reverse" href="/">
					<span class="c-link__description">Alle artikelen</span>
					<span class="c-link__decoration" aria-hidden="true"></span>
				</a>
				<div class="c-label c-header-highlight__label">
					activiteit basisschool
				</div>
				<h1 class="c-header-highlight__title">Kleuren als een grootmeester</h1>
			</div>
			<a class="c-link c-header-highlight__link" href="#">
				<span class="c-link__description">Activiteit aanvragen</span>
				<span class="c-link__decoration" aria-hidden="true"></span>
			</a>
		</div>
	</div>
	<div class="c-header-highlight__image" style="background-image: url('/assets/images/hero/hero-02.jpg');">
		<img class="u-visually-hidden u-idle" src="/assets/images/hero/hero-02.jpg" alt="Afbeelding van kinderen in het KMSKA" width="1400" height="700">
	</div>
</section>