{% if hero %} <section class=“usa-hero”{% if hero.image %}

style="background-image: url('{{ hero.image | relative_url }}')"{% endif %}>
<div class="usa-grid">
  <div class="usa-hero-callout usa-section-dark">
    {% if hero.callout %}
    <h2>
      {% if hero.callout.alt %}
      <span class="usa-hero-callout-alt">{{ hero.callout.alt }}</span>
      {% endif %}
      {{ hero.callout.text | default: hero.callout }}
    </h2>
    {% endif %}

    {% if hero.link %}
    <a class="usa-hero-link" href="{{ hero.link.href | relative_url }}">
      {{ hero.link.text }}
    </a>
    {% endif %}

    {{ hero.content | markdownify }}

    {% if hero.button %}
    <a class="usa-button"
      href="{{ hero.button.href | relative_url }}">
      {{ hero.button.text }}
    </a>
    {% endif %}
  </div>
</div>

</section> {% endif %}