Hero - With call to action

<figure class="mp c-hero c-hero--image">
  <div class="u-wrap">
    <div class="c-hero__content">
      <nav>
        <nav class="c-breadcrumb " aria-label="Breadcrumb">
          <ol class="c-breadcrumb__list" role="list">
          </ol>
        </nav>
      </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>
      <div class="c-hero__button-wrap">
        <a href="https://www.malvernpanalytical.com/en/assets/Mastersizer%203000%20Brochure%20%28EN%29_tcm50-58994.pdf" class="mp c-button c-button--inline" >Download brochure</a>
      </div>
    </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"
  }
}