<style>
    .hro {
        background-image: url(https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_mobile_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok&#x3D;XzPWArjL&amp;amp;timestamp&#x3D;1469541909);
    }
    
    @media screen and (min-width: 768px) {
        .hro {
            background-image: url(https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_tablet_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok&#x3D;g19HCDkD&amp;amp;timestamp&#x3D;1469541909);
        }
    }
    
    @media screen and (min-width: 1024px) {
        .hro {
            background-image: url(https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_desktop_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok&#x3D;GJmuhNoE&amp;amp;timestamp&#x3D;1469541909);
        }
    }
    
    @media screen and (min-width: 1200px) {
        .hro {
            background-image: url(https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_wide_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok&#x3D;nWpQdSFD&amp;amp;timestamp&#x3D;1469541909);
        }
    }
</style>

<div class="hro hro--t">
    <div class="hro-c">
        <div class="hro-i hro-i--l">welcome to the new</div>
        <h1 class="hro-t hro-t--l">Boston.gov</h1>
        <div class="hro-st hro-st--l hro-st--w">Mayor Martin J. Walsh</div>
    </div>
    <div class="the-b the-b--c">
        <img src="/images/b-light.svg" alt="B Logo" class="the-b-i">
    </div>
</div>
{{#if image}}
  <style>
    .hro {
      background-image: url({{image.mobile1x}});
    }

    @media screen and (min-width: 768px) {
      .hro {
        background-image: url({{image.tablet1x}});
      }
    }

    @media screen and (min-width: 1024px) {
      .hro {
        background-image: url({{image.desktop1x}});
      }
    }

    @media screen and (min-width: 1200px) {
      .hro {
        background-image: url({{image.wide1x}});
      }
    }
  </style>
{{/if}}

<div class="hro{{#if image}}{{#if title}} hro--t{{else}} hro--b{{/if}}{{else}} hro--d{{/if}}">
  <div class="hro-c">
    {{#if intro}}
      <div class="hro-i{{#if home}} hro-i--l{{/if}}">{{intro}}</div>
    {{/if}}
    <h1 class="hro-t{{#if home}} hro-t--l{{/if}}">{{title}}</h1>
    {{#if cta}}
      <a href="{{cta.link}}" class="btn btn--c btn--ib">{{cta.text}}</a>
    {{else}}
      {{#if subheader}}
        <div class="hro-st{{#if home}} hro-st--l{{/if}}{{#if image}} hro-st--w{{/if}}">{{subheader}}</div>
      {{/if}}
    {{/if}}
  </div>
  {{#if b}}
    <div class="the-b the-b--c">
      <img src="/images/b-light.svg" alt="B Logo" class="the-b-i">
    </div>
  {{/if}}
</div>
{
  "home": true,
  "intro": "welcome to the new",
  "title": "Boston.gov",
  "subheader": "Mayor Martin J. Walsh",
  "cta": null,
  "image": {
    "wide1x": "https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_wide_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok=nWpQdSFD&amp;timestamp=1469541909",
    "desktop1x": "https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_desktop_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok=GJmuhNoE&amp;timestamp=1469541909",
    "tablet1x": "https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_tablet_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok=g19HCDkD&amp;timestamp=1469541909",
    "mobile1x": "https://www.boston.gov/sites/default/files/styles/rep_wide_2000x700custom_boston_mobile_1x/public/hero-image-07-2016/25832647073_167d235f54_o.jpg?itok=XzPWArjL&amp;timestamp=1469541909"
  },
  "b": true
}

There are no notes for this item.