Page header

The page header has its place at the top of a detailpage. It has an image, title and label which is optional.

Default

px

			
				<section class="c-page-header ">
	<div class="c-page-header__content l-container:10/12 l-container--default-spacing">
		<div class="l-grid l-grid--default-spacing">
			<a class="c-link c-page-header__back c-link--secondary c-link--reverse l-grid__col:12/12" href="/">
				<span class="c-link__description">Alle artikelen</span>
				<span class="c-link__decoration" aria-hidden="true"></span>
			</a>
			<header class="
					c-page-header__title-wrapper
					l-grid__col:12/12
					l-grid__col:7/12@at:vp-9">
				<h1 class="c-page-header__title">Onze <strong>faciliteiten</strong></h1>
			</header>
			<div class="l-grid__col:12/12 l-grid__col:5/12@at:vp-9">
				<p class="c-page-header__description">Omwille van Corona is de toegang alleen mogelijk met een
					ticket met tijdsaanduiding of na reservering. De capaciteit is beperkt.</p>
			</div>
		</div>
	</div>
	<div class="c-page-header__visual l-container:12/12 l-container--default-spacing">
		<div class="c-page-header__image" style="background-image: url('/assets/images/hero/hero-01.jpg');">
			<img class="u-visually-hidden u-idle" src="/assets/images/hero/hero-01.jpg" alt="Afbeelding van het KMSKA" width="895" height="600">
		</div>
	</div>
</section>