<!doctype html>
<html lang="en">
<!-- generated by uswds@1.4.3 -->

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>USWDS Fractal example document</title>
    <link rel="stylesheet" href="../../dist/css/uswds.min.css">

</head>

<body>
    <a class="usa-skipnav" href="#main-content">Skip to main content</a>

    <div class="usa-banner">
        <div class="usa-accordion">
            <header class="usa-banner-header">
                <div class="usa-grid usa-banner-inner">
                    <img src="../../dist/img/favicons/favicon-57.png" alt="U.S. flag">
                    <p>An official website of the United States government</p>
                    <button class="usa-accordion-button usa-banner-button" aria-expanded="false" aria-controls="gov-banner">
        <span class="usa-banner-button-text">Here's how you know</span>
      </button>
                </div>
            </header>
            <div class="usa-banner-content usa-grid usa-accordion-content" id="gov-banner">
                <div class="usa-banner-guidance-gov usa-width-one-half">
                    <img class="usa-banner-icon usa-media_block-img" src="../../dist/img/icon-dot-gov.svg" alt="Dot gov">
                    <div class="usa-media_block-body">
                        <p>
                            <strong>The .gov means it’s official.</strong>
                            <br> Federal government websites often end in .gov or .mil. Before sharing sensitive information, make sure you're on a federal government site.
                        </p>
                    </div>
                </div>
                <div class="usa-banner-guidance-ssl usa-width-one-half">
                    <img class="usa-banner-icon usa-media_block-img" src="../../dist/img/icon-https.svg" alt="Https">
                    <div class="usa-media_block-body">
                        <p>
                            <strong>The site is secure.</strong>
                            <br> The <strong>https://</strong> ensures that you are connecting to the official website and that any information you provide is encrypted and transmitted securely.
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <header class="usa-header usa-header-basic" role="banner">
        <div class="usa-nav-container">
            <div class="usa-navbar">
                <div class="usa-logo" id="basic-logo">
                    <em class="usa-logo-text">
      <a href="/"
        title="Home"
        aria-label="Home">
        Department of Web Design
      </a>
    </em>
                </div>
                <button class="usa-menu-btn">Menu</button>
            </div>

            <nav role="navigation" class="usa-nav">

                <button class="usa-nav-close">
  <img src="../../dist/img/close.svg" alt="close">
</button>
                <ul class="usa-nav-primary usa-accordion">
                    <li><button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-one">
      <span>Sections</span>
    </button>
                        <ul id="basic-nav-section-one" class="usa-nav-submenu">
                            <li>
                                <a href="#section-heading-h2">Section heading (h2)</a>
                            </li>
                            <li>
                                <a href="#section-heading-h3">Subsection heading (h3)</a>
                            </li>
                            <li>
                                <a href="#section-heading-h4">Subsection heading (h4)</a>
                            </li>
                        </ul>
                    </li>
                    <li><button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-two">
      <span>Simple terms</span>
    </button>
                        <ul id="basic-nav-section-two" class="usa-nav-submenu">
                            <li>
                                <a href="#">Subsection title</a>
                            </li>
                            <li>
                                <a href="#">Subsection title</a>
                            </li>
                            <li>
                                <a href="#">Subsection title</a>
                            </li>
                        </ul>
                    </li>
                    <li><a class="usa-nav-link" href="javascript:void(0)">
      <span>Distinct from each other</span>
    </a></li>
                </ul>

            </nav>
        </div>
    </header>
    <div class="usa-overlay"></div>

    <main class="usa-grid usa-section usa-content usa-layout-docs" id="main-content">
        <aside class="usa-width-one-fourth usa-layout-docs-sidenav">

            <ul class="usa-sidenav-list">

                <li>
                    <a href="">
      Parent link
    </a>

                </li>

                <li>
                    <a href="" class="usa-current">
      Current page
    </a>

                    <ul class="usa-sidenav-sub_list">

                        <li>
                            <a href="">
      Child link
    </a>

                        </li>

                        <li>
                            <a href="" class="usa-current">
      Child link
    </a>

                            <ul class="usa-sidenav-sub_list">

                                <li>
                                    <a href="">
      Grandchild link
    </a>

                                </li>

                                <li>
                                    <a href="">
      Grandchild link
    </a>

                                </li>

                                <li>
                                    <a href="" class="usa-current">
      Grandchild link
    </a>

                                </li>

                                <li>
                                    <a href="">
      Grandchild link
    </a>

                                </li>

                            </ul>

                        </li>

                        <li>
                            <a href="">
      Child link
    </a>

                        </li>

                        <li>
                            <a href="">
      Child link
    </a>

                        </li>

                        <li>
                            <a href="">
      Child link
    </a>

                        </li>

                    </ul>

                </li>

                <li>
                    <a href="">
      Another link
    </a>

                </li>

            </ul>

        </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>

    <footer class="usa-footer usa-footer-medium" role="contentinfo">
        <div class="usa-grid usa-footer-return-to-top">
            <a href="#">Return to top</a>
        </div>
        <div class="usa-footer-primary-section">
            <div class="usa-grid">
                <nav class="usa-footer-nav">
                    <ul class="usa-unstyled-list">
                        <li class="usa-width-one-sixth usa-footer-primary-content">
                            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                        </li>
                        <li class="usa-width-one-sixth usa-footer-primary-content">
                            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                        </li>
                        <li class="usa-width-one-sixth usa-footer-primary-content">
                            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                        </li>
                        <li class="usa-width-one-sixth usa-footer-primary-content">
                            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                        </li>
                        <li class="usa-width-one-sixth usa-footer-primary-content">
                            <a class="usa-footer-primary-link" href="javascript:void(0);">Primary link</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>

        <div class="usa-footer-secondary_section">
            <div class="usa-grid">
                <div class="usa-footer-logo usa-width-one-half">
                    <img class="usa-footer-logo-img" src="../../dist/img/logo-img.png" alt="Logo image">
                    <h3 class="usa-footer-logo-heading">Name of Agency</h3>
                </div>
                <div class="usa-footer-contact-links usa-width-one-half">
                    <a class="usa-link-facebook" href="javascript:void(0);">
          <span>Facebook</span>
        </a>
                    <a class="usa-link-twitter" href="javascript:void(0);">
          <span>Twitter</span>
        </a>
                    <a class="usa-link-youtube" href="javascript:void(0);">
          <span>YouTube</span>
        </a>
                    <a class="usa-link-rss" href="javascript:void(0);">
          <span>RSS</span>
        </a>
                    <h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
                    <address>
          <div class="usa-footer-primary-content usa-footer-contact_info">
            <p>
              <a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
            </p>
          </div>
          <div class="usa-footer-primary-content usa-footer-contact_info">
            <p><a href="mailto:info@agency.gov">info@agency.gov</a></p>
          </div>
        </address>
                </div>
            </div>
        </div>
    </footer>

    <script src="../../dist/js/uswds.min.js"></script>

</body>

</html>

There are no notes for this item.

{% 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 %}
package:
  name: uswds
  version: 1.4.3
uswds:
  path: ../../dist
header:
  primary:
    search: null
    links:
      - text: Sections
        id: nav-section-one
        links:
          - text: Section heading (h2)
            href: '#section-heading-h2'
          - text: Subsection heading (h3)
            href: '#section-heading-h3'
          - text: Subsection heading (h4)
            href: '#section-heading-h4'