_layouts/default.html

---
main: foo, bar, qaz
---

<!DOCTYPE html>
<html lang="{{ page.lang | default: site.lang | default: 'en-US' }}">
  <head>
    {% include meta.html %}
    {% include styles.html %}
    {% if site.google_analytics_ua or site.dap_agency %}
      {% include analytics.html %}
    {% endif %}
  </head>
  <body class="{{ layout.class }} {{ page.class }} {% if site.site_width %}site-{{ site.site_width }}{% endif %}">

    {% include skipnav.html %}
    {% include header.html %}

    {% assign hero = page.hero %}
    {% include components/hero.html %}

    {% if page.tagline and page.intro %}
    <section class="grid-container usa-section">
      <div class="grid-row grid-gap">
        <div class="tablet:grid-col-4">
          <h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">{{ page.tagline }}</h2>
        </div>
        <div class="tablet:grid-col-8 usa-prose">
          {{ page.intro | markdownify }}
        </div>
      </div>
    </section>
    {% endif %}

    {% capture _graphics %}
      {% include graphic-list.html graphics=page.graphics %}
    {% endcapture %}

    {% if page.graphics_position != 'after' %}
      {{ _graphics }}
    {% endif %}

    {% if page.layout == 'post' %}
      {{ content }}
    {% else %}
      <main id="main-content"{% for _attr in layout.main %} {{ _attr[0] }}="{{ _attr[1] }}"{% endfor %}>
        {{ content }}
      </main>
    {% endif %}

    {% if page.graphics_position == 'after' %}
      {{ _graphics }}
    {% endif %}

    {% include footer.html %}

    {% include scripts.html %}

  </body>
</html>