Menu

Hero - With breadcrumb

Open fullscreen 
<figure class="mp c-hero">
  <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">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"
  }
}

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