Hero

The hero component is used on almost every detail/overview content page. It shows a full screen hero image with a title as default content item. Extra elements are breadcrumbs, a main tag, sub title or meta copy, hashtags, a content/description block (wysiwyg proof) and an actions block.

Default

placeholder

Ontploffing in Lyon, Frankrijk

24 mei 2019
Nieuws

Op 24 mei 2019 heeft zich een ontploffing voor gedaan in Lyon, Frankrijk. Bij de ontploffing zouden 13 gewonden zijn gevallen waarvan 11 zeer licht gewonden.


			
				<div class="c-hero js-hero">
	<div class="c-hero__background">
		<div class="c-hero__background-visual" style="background-image: url('/assets/images/general/hero/placeholder.jpg');"></div>
		<div class="c-hero__background-skewed-overlay-container">
			<div class="c-hero__background-skewed-overlay"></div>
		</div>
		<img class="c-hero__background-image u-hide" src="/assets/images/general/hero/placeholder.jpg" alt="placeholder" title="placeholder">
	</div>
	<div class="c-hero__container l-container ">
		<div class="l-grid">
			<header class="c-hero__header c-hero__item l-grid__col l-grid__col--7@viewport-8 l-grid__col--9@viewport-9  u-margin-bottom-1x ">
				<div class="c-hero__breadcrumbs">
					<div class="c-hero__breadcrumbs-item">
						<a class="c-link  c-link--with-icon-before" href="">
							<div class="c-icon c-link__icon c-link__icon--before">
								<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
									<path d="M16.1,0l3,3l-9,9l9,9l-3,3L5.6,13.5c-0.4-0.4-0.6-0.9-0.6-1.5c0-0.6,0.2-1.1,0.6-1.5L16.1,0z" />
								</svg>
							</div>
							<span class="c-link__text">Ga terug</span>
						</a>
					</div>
				</div>
				<h1 class="c-hero__title">Ontploffing in Lyon, Frankrijk</h1>
				<span class="c-hero__meta">24 mei 2019</span>
				<div class="c-hero__hashtags">
					<ul class="c-hero__hashtag-list">
						<li class="c-hero__hashtag-item">
							<a href="#" class="c-hashtag__link">
								<span class="c-hashtag__text">#Aanslag</span>
							</a>
						</li>
						<li class="c-hero__hashtag-item">
							<a href="#" class="c-hashtag__link">
								<span class="c-hashtag__text">#Terreur</span>
							</a>
						</li>
						<li class="c-hero__hashtag-item">
							<a href="#" class="c-hashtag__link">
								<span class="c-hashtag__text">#Explosie</span>
							</a>
						</li>
					</ul>
				</div>
			</header>
			<div class="c-hero__item l-grid__col--12 l-grid__col--5@viewport-8 l-grid__col--3@viewport-9">
				<div class="c-hero__tag">
					<div class="c-tag ">
						<div class="c-tag__background"></div>
						<span class="c-tag__text">
							Nieuws
						</span>
					</div>
				</div>
			</div>
			<div class="c-hero__content c-hero__item l-grid__col l-grid__col--7@viewport-7">
				<p>
					Op 24 mei 2019 heeft zich een ontploffing voor gedaan
					in Lyon, Frankrijk. Bij de ontploffing zouden 13
					gewonden zijn gevallen waarvan 11 zeer licht
					gewonden.
				</p>
			</div>
			<div class="c-hero__actions c-hero__item l-grid__col">
				<div class="c-hero__actions-item">
					<button class="c-button  c-button--with-icon-after">
						<span class="c-button__text">Blijf op de hoogte</span>
						<div class="c-icon c-button__icon c-button__icon--after">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
								<path d="M7.9,24l-3-3l9-9l-9-9l3-3l10.5,10.5c0.4,0.4,0.6,0.9,0.6,1.5c0,0.6-0.2,1.1-0.6,1.5L7.9,24z" />
							</svg>
						</div>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
			

		

Medium

placeholder

Ontploffing in Lyon, Frankrijk

Terreur

Op 24 mei 2019 heeft zich een ontploffing voor gedaan in Lyon, Frankrijk. Bij de ontploffing zouden 13 gewonden zijn gevallen waarvan 11 zeer licht gewonden.


			
				<div class="c-hero js-hero">
	<div class="c-hero__background">
		<div class="c-hero__background-visual" style="background-image: url('/assets/images/general/hero/placeholder.jpg');"></div>
		<div class="c-hero__background-skewed-overlay-container">
			<div class="c-hero__background-skewed-overlay"></div>
		</div>
		<img class="c-hero__background-image u-hide" src="/assets/images/general/hero/placeholder.jpg" alt="placeholder" title="placeholder">
	</div>
	<div class="c-hero__container l-container ">
		<div class="l-grid">
			<header class="c-hero__header c-hero__item l-grid__col l-grid__col--7@viewport-8 l-grid__col--9@viewport-9 ">
				<h1 class="c-hero__title">Ontploffing in Lyon, Frankrijk</h1>
			</header>
			<div class="c-hero__item l-grid__col--12 l-grid__col--5@viewport-8 l-grid__col--3@viewport-9">
				<div class="c-hero__tag">
					<div class="c-tag-interactive c-tag-interactive--border-white ">
						<div class="c-tag-interactive__content">
							<div class="c-icon c-tag-interactive__icon">
								<?xml version="1.0" encoding="utf-8"?>
								<!-- Generator: Adobe Illustrator 24.2.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
								<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
									<path d="M23.2,10.6l-9.8-9.8c-0.4-0.4-1.1-0.7-1.6-0.7H2.3c-1.3,0-2.2,1-2.2,2.2v9.5c0,0.5,0.3,1.2,0.7,1.6l9.8,9.8
	c0.9,0.9,2.3,0.9,3.2,0l9.5-9.5C24.1,12.9,24.1,11.5,23.2,10.6z M12.2,21.7l-9.8-9.8V2.3h9.5l9.9,9.9L12.2,21.7z M9,6.8
	c0-1.2-1-2.2-2.2-2.2c-1.3,0-2.2,1-2.2,2.2C4.6,8,5.5,9,6.8,9C8,9,9,8,9,6.8z" />
								</svg>
							</div>
							<span class="c-tag-interactive__text">Terreur</span>
						</div>
						<div class="c-tag-interactive__button-container">
							<button class="c-button c-button--border-white c-tag-interactive__button">
								<div class="c-icon c-button__icon">
									<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
										<path d="M13.8,12l9.8-9.8C24,1.8,24,1.3,23.6,1L23,0.4c-0.3-0.3-0.9-0.3-1.2,0L12,10.2L2.2,0.4C1.8,0,1.3,0,1,0.4L0.4,1C0,1.3,0,1.9,0.4,2.2l9.8,9.8l-9.8,9.8C0,22.2,0,22.7,0.4,23L1,23.6c0.3,0.3,0.9,0.3,1.2,0l9.8-9.8l9.8,9.8c0.3,0.3,0.9,0.3,1.2,0l0.6-0.6c0.3-0.3,0.3-0.9,0-1.2L13.8,12z" />
									</svg>
								</div>
							</button>
						</div>
					</div>
				</div>
			</div>
			<div class="c-hero__content c-hero__item l-grid__col l-grid__col--7@viewport-7">
				<p>
					Op 24 mei 2019 heeft zich een ontploffing voor gedaan
					in Lyon, Frankrijk. Bij de ontploffing zouden 13
					gewonden zijn gevallen waarvan 11 zeer licht
					gewonden.
				</p>
			</div>
			<div class="c-hero__actions c-hero__item l-grid__col">
				<div class="c-hero__actions-item">
					<button class="c-button  c-button--with-icon-after">
						<span class="c-button__text">Blijf op de hoogte</span>
						<div class="c-icon c-button__icon c-button__icon--after">
							<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
								<path d="M7.9,24l-3-3l9-9l-9-9l3-3l10.5,10.5c0.4,0.4,0.6,0.9,0.6,1.5c0,0.6-0.2,1.1-0.6,1.5L7.9,24z" />
							</svg>
						</div>
					</button>
				</div>
			</div>
		</div>
	</div>
</div>
			

		

Slim

Ontploffing in Lyon, Frankrijk


			
				<div class="c-hero js-hero">
	<div class="c-hero__container l-container ">
		<div class="l-grid">
			<header class="c-hero__header c-hero__item l-grid__col l-grid__col--7@viewport-8 l-grid__col--9@viewport-9 ">
				<h1 class="c-hero__title">Ontploffing in Lyon, Frankrijk</h1>
			</header>
		</div>
	</div>
</div>