Documentation

{% extends 'layouts/_base.njk' %}

{% block body %}
  <main class="usa-grid usa-section usa-content usa-layout-docs" id="main-content">
    <aside class="usa-width-one-fourth usa-layout-docs-sidenav">
      {% render '@sidenav' %}
    </aside>

    <div class="usa-width-three-fourths usa-layout-docs-main_content">
      <h1>Page heading (h1)</h1>

      <p class="usa-font-lead">The page heading communicates the main focus of the page. Make your page heading descriptive and keep it succinct.</p>

      <h2 id="section-heading-h2">Section heading (h2)</h2>

      <p>These headings introduce, respectively, sections and subsections within your body copy. As you create these headings, follow the same guidelines that you use when writing section headings: Be succinct, descriptive, and precise.</p>

      <h3 id="section-heading-h3">Subsection heading (h3)</h3>

      <p>The particulars of your body copy will be determined by the topic of your page. Regardless of topic, it’s a good practice to follow the inverted pyramid structure when writing copy: Begin with the information that’s most important to your users and then present information of less importance.</p>

      <p>Keep each section and subsection focused — a good approach is to include one theme (topic) per section.</p>

      <h4 id="section-heading-h4">Subsection heading (h4)</h4>

      <p>Use the side navigation menu to help your users quickly skip to different sections of your page. The menu is best suited to displaying a hierarchy with one to three levels and, as we mentioned, to display the sub-navigation of a given page.</p>

      <p>Read the full documentation on our side navigation on the component page.</p>
    </div>
  </main>
{% endblock %}