<figure class="mp c-hero c-hero--image">
<div class="u-wrap">
<div class="c-hero__content">
<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>
</div>
</div>
<div class="c-hero__image-bg" style="background-image:url(/static/img/range.jpg);"></div>
</figure>
Hero - With background image
{
"title": "The Mastersizer",
"subtitle": "The world’s most popular particle size analyzers",
"image": {
"src": "/static/img/range.jpg"
}
}
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 | Description |
---|---|
c-hero--no-cover | Remove cover beneath the hero |
c-hero--image | Increse padding to allow for image |