Hero Hub 

<link media="all" rel="stylesheet" href="/assets/themes/default/css/hero.css?cb=">

<div class="hero hero--hub  hero--with-image " data-module="hero">

    <div class="hero__image  ">
        <picture>
            <source media="(max-width: 840px)" type="" srcset="https://dummyimage.com/400x225/f0f0f0/545454.png" />
            <source media="(min-width: 841px)" type="" srcset="https://dummyimage.com/800x450/f0f0f0/545454.png" />
            <img src="https://dummyimage.com/800x450/f0f0f0/545454.png" alt="Image alt text">
        </picture>
    </div>

    <div class="hero__content">
        <div class="hero__content-inner">
            <h1 class="hero__title">Hero hub</h1>
            <h2 class="hero__subtitle">This hero appears on the hub page type</h2>
        </div>
    </div>

</div>
 
{{> @hero modifier="hero--hub" }}
 
{
  "theme": "default",
  "firstInstance": true,
  "title": "Hero hub",
  "subtitle": "This hero appears on the hub page type",
  "image": {
    "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
    "fallbackImageUrl": "https://dummyimage.com/800x450/f0f0f0/545454.png",
    "sources": [
      {
        "types": "image/jpeg",
        "mobileImageUrl": "https://dummyimage.com/400x225/f0f0f0/545454.png",
        "desktopImageUrl": "https://dummyimage.com/800x450/f0f0f0/545454.png"
      }
    ],
    "altText": "Image alt text"
  }
}

No notes defined.