<figure class="mp c-hero">
<div class="u-wrap">
<div class="c-hero__content">
<nav>
<a href="" 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">Products</h1>
<p class="u-step-1">Laboratory equipment and process solutions</p>
</header>
</div>
</div>
</figure>
Hero - With breadcrumb
{
"title": "Products",
"subtitle": "Laboratory equipment and process solutions",
"breadcrumb": {
"link": "",
"label": "All products"
}
}
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 |