Hero Detail 

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

<div class="hero hero--detail  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="http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg" alt="Image alt text">
        </picture>
    </div>

    <div class="hero__content">
        <div class="hero__content-inner">
            <h1 class="hero__title">Hero Detail</h1>
            <h2 class="hero__subtitle">This hero appears on detail, property, product and post page types</h2>
        </div>
    </div>

</div>
 
{{> @hero modifier="hero--detail" }}
 
{
  "theme": "default",
  "firstInstance": true,
  "title": "Hero Detail",
  "subtitle": "This hero appears on detail, property, product and post page types",
  "image": {
    "placeholderImageUrl": "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA",
    "fallbackImageUrl": "http://hwr.org.uk/wp-content/uploads/2016/11/placeholder-dark-600-400-729dad18518ecd2cd47afb63f9e6eb09.jpg",
    "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.