Hero

The hero component is used at the top of the page and can contain a header with a title and/or description and can have a visual background-image.

Article

px

			
				<div class="c-hero c-hero--article " style="background-image: linear-gradient(to top, hsla(0, 0%, 0%, 0.3) 15%, rgba(255, 255, 255, 0) 100%), url('/assets/images/news/header-placeholder.jpg');">
	<div class="l-container l-container--viewport-7">
		<div class="c-hero__container">
			<header class="c-hero__header">
				<h1 class="c-hero__title">News title enim ad minim veniam aute irure dolor in reprehenderit</h1>
				<time datatime="15-07-2019" class="c-hero__time">15 July 2019</time>
			</header>
		</div>
	</div>
	<div class="c-separator  c-separator--bottom  ">
		<svg class="c-separator__shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1439.2 73.2" width="1439.2" height="73.2" preserveAspectRatio="none">
			<path d="M1439.2,73.2c-813.9,0-1293.6,0-1439.2,0V0c302.1,0,381.8,73.2,624.9,73.2c260.2,0,539-109,814.3-19.1V73.2z" />
		</svg>
	</div>
</div>
			

		

Default

px

			
				<div class="c-hero " style="background-image: url('/assets/images/hero/hero-placeholder-1.jpg');">
	<div class="l-container ">
		<div class="c-hero__container">
			<header class="c-hero__header">
				<h1 class="c-hero__title">Euraknos</h1>
				<div class="c-hero__content s-wysiwyg-hero">
					<p>
						The <strong>future of innovation</strong> in European agriculture and
						forestry is based on the improved (digital) <strong>exchange of best
							practices</strong> between farmers, researchers and advisors from different
						sectors and member states.
					</p>
				</div>
			</header>
		</div>
	</div>
	<div class="c-separator  c-separator--bottom  ">
		<svg class="c-separator__shape" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1439.2 73.2" width="1439.2" height="73.2" preserveAspectRatio="none">
			<path d="M1439.2,73.2c-813.9,0-1293.6,0-1439.2,0V0c302.1,0,381.8,73.2,624.9,73.2c260.2,0,539-109,814.3-19.1V73.2z" />
		</svg>
	</div>
</div>