Hero Article 

<header class="hero">
    <figure class="image">
        <div class="image__container">
            <amp-img itemscope itemtype="https://schema.org/ImageObject" class="grey-placeholder" src="" srcset=" 767w,  768w,  1320w" layout="fill">
                <noscript>
                    <img src="" alt="Alt Text" />
                </noscript>
            </amp-img>
        </div>
    </figure>
    <div class="hero__overlay">
        <div class="hero__inner">
            <time class="hero__read-time" datetime="">4 min read</time>
            <h1 class="hero__title heading01">On location: Star Wars: The Last Jedi</h1>
            <div class="hero__body">
                <div class="hero__main">
                    <p class="hero__lead spacer-lg">Mark Hamill and Daisy Ridley returned to Skellig Michael, County Kerry, for Star Wars: The Last Jedi, this time with director Rian Johnson</p>
                    <time datetime="2017-06-14">14 June 2017</time>
                </div>
                <div class="hero__side">
                    <div class="map">
                        <div class="map__inner">
                            <amp-img src="/img/maps/map.png" class="stage-footer__logo" alt="County Kerry" height="111" width="95" layout="responsive"></amp-img>
                        </div>
                        <div class="map-county">County Kerry</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</header>
 
<header class="hero">
    {{> @cp-medium-image-amp backgroundResponsiveImage}}
    <div class="hero__overlay">
        <div class="hero__inner">
            <time class="hero__read-time" datetime="{{timeSpan.stamp}}">{{timeSpan.text}}</time>
            <h1 class="hero__title heading01">{{title}}</h1>
            <div class="hero__body">
                <div class="hero__main">
                    <p class="hero__lead spacer-lg">{{subtitle}}</p>
                    <time datetime="{{articleDateTime.stamp}}">{{articleDateTime.displayDate}}</time>
                </div>
                {{#if imageMap}}
                <div class="hero__side">
                    <div class="map">
                        <div class="map__inner">
                            <amp-img src="{{imageMap.image}}" class="stage-footer__logo" alt="{{imageMap.county}}" height="111" width="95" layout="responsive"></amp-img>
                        </div>
                        <div class="map-county">{{imageMap.county}}</div>
                    </div>
                </div>
                {{/if}}
            </div>
        </div>
    </div>
</header>
 
{
  "modifier": "article",
  "backgroundResponsiveImage": {
    "altText": "Alt Text",
    "modifier": "lazy",
    "lowResolutionUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=50&q=10",
    "sources": [
      {
        "type": "image/jpeg",
        "largeUrl": "https://images.unsplash.com/photo-1511219096939-ce77f5f44cc8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80",
        "smallUrl": "https://images.unsplash.com/photo-1535479804851-93f60320e644?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=80"
      }
    ]
  },
  "title": "On location: Star Wars: The Last Jedi",
  "subtitle": "Mark Hamill and Daisy Ridley returned to Skellig Michael, County Kerry, for Star Wars: The Last Jedi, this time with director Rian Johnson",
  "timeSpan": {
    "text": "4 min read"
  },
  "articleDateTime": {
    "stamp": "2017-06-14",
    "displayDate": "14 June 2017"
  },
  "imageMap": {
    "image": "/img/maps/map.png",
    "county": "County Kerry"
  }
}

There are no notes for this item.