Hero - With breadcrumb

<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>

{
  "title": "Products",
  "subtitle": "Laboratory equipment and process solutions",
  "breadcrumb": {
    "link": "",
    "label": "All products"
  }
}