Menu

Hero - With call to action

<figure class="mp c-hero c-hero--image">
<div class="u-wrap">
<div class="c-hero__content">
<nav>
<a href="/prototype/products/" class="mp c-twi u-link c-twi--left"><span>All products</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--arrow-left">
<use xlink:href="/static/svg/sprite.svg#arrow-left"></use>
</svg>
</a>
</nav>
<header class="u-flow--m">
<h1 class="c-h c-h--page-title">The Mastersizer</h1>
<p class="u-step-1">The world’s most popular particle size analyzers</p>
</header>
<a href="https://www.malvernpanalytical.com/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf" class="mp c-twi u-link c-twi--left" download><span>Download brochure</span>
<svg role="img" aria-hidden="true" focusable="false" class="mp c-icon c-icon--file">
<use xlink:href="/static/svg/sprite.svg#file"></use>
</svg>
</a>
</div>
</div>
<div class="c-hero__image-bg" style="background-image:url(/static/img/range.jpg);"></div>
</figure>
{
"title": "The Mastersizer",
"subtitle": "The world’s most popular particle size analyzers",
"image": {
"src": "/static/img/range.jpg"
},
"breadcrumb": {
"link": "/prototype/products/",
"label": "All products"
},
"cta": {
"label": "Download brochure",
"link": "https://www.malvernpanalytical.com/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf",
"attrs": "download",
"icon": "file"
}
}

Props

Name Type Description
title string
subtitle string
content html
classes string
cta object Add text with icon component
breadcrumb object Add breadcrumb component
image object Add background image

CSS modifiers

Name Type Description
c-hero--no-cover Remove cover beneath the hero
c-hero--image Increse padding to allow for image