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

<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></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="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>Section one</span>
    </button>
                        <ul id="basic-nav-section-one" class="usa-nav-submenu">

                            <li>
                                <a href="#">Sub-link one</a>
                            </li>

                            <li>
                                <a href="#">Sub-link two</a>
                            </li>

                        </ul>

                    </li>

                    <li>

                        <button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="basic-nav-section-two">
      <span>Section two</span>
    </button>
                        <ul id="basic-nav-section-two" class="usa-nav-submenu">

                            <li>
                                <a href="#">Sub-link one</a>
                            </li>

                            <li>
                                <a href="#">Sub-link two</a>
                            </li>

                        </ul>

                    </li>

                    <li>

                        <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link three</span>
    </a>

                    </li>

                    <li>

                        <a class="usa-nav-link" href="javascript:void(0)">
      <span>Link four</span>
    </a>

                    </li>

                </ul>

                <div role="search" class="usa-search usa-search-small">
                    <form class="">
                        <label class="usa-sr-only" for="search-field-small">Search small</label>
                        <input id="search-field-small" type="search" name="search">
                        <button type="submit">
      <span class="usa-sr-only">Search</span>
    </button>
                    </form>
                </div>

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

    <section class="usa-hero">
        <div class="usa-grid">
            <div class="usa-hero-callout usa-section-dark">
                <h2>

                    <span class="usa-hero-callout-alt">Hero callout:</span> Call attention to a current priority
                </h2>

                <a class="usa-hero-link" href="javascript:void(0)">Link to more about that priority</a>

                <a class="usa-button usa-button-big usa-button-secondary" href="javascript:void(0)">Learn about what we do</a>

            </div>
        </div>
    </section>

    <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="">
      Another page
    </a>

                </li>

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

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

                        <li>
                            <a href="">
      First section
    </a>

                        </li>

                        <li>
                            <a href="" class="usa-current">
      Second section
    </a>

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

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

                                </li>

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

                                </li>

                            </ul>

                        </li>

                        <li>
                            <a href="">
      Third section
    </a>

                        </li>

                    </ul>

                </li>

                <li>
                    <a href="">
      Yet another page
    </a>

                </li>

            </ul>

        </aside>

        <div class="usa-width-three-fourths usa-layout-docs-main_content">
            <h1>This is your page title</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>

            <p class="usa-content">
                This is the content body where we will test some ordered and unordered lists. Just long enough to wrap to a new line to test content width.

                <ul>

                    <li>This is a very long sentence that should go to a new line when it is among other pieces of paragraph text.</li>

                    <li>This is a short sentence that isn't long enough to go to a new line.</li>

                    <li>This is the third sentence.</li>

                </ul>

                <ol>

                    <li>This is a very long sentence that should go to a new line when it is among other pieces of paragraph text.</li>

                    <li>This is a short sentence that isn't long enough to go to a new line.</li>

                    <li>This is the third sentence.</li>

                </ol>
            </p>

            <section id="accordions">
                <h2>Accordions - Borderless</h2>

                <ul class="usa-accordion">

                    <li>
                        <button class="usa-accordion-button" aria-expanded="true" aria-controls="a1">
      First Amendment
    </button>
                        <div id="a1" class="usa-accordion-content">
                            Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress
                            of grievances.

                        </div>
                    </li>

                    <li>
                        <button class="usa-accordion-button" aria-expanded="false" aria-controls="a2">
      Second Amendment
    </button>
                        <div id="a2" class="usa-accordion-content">
                            A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

                        </div>
                    </li>

                    <li>
                        <button class="usa-accordion-button" aria-expanded="false" aria-controls="a3">
      Third Amendment
    </button>
                        <div id="a3" class="usa-accordion-content">
                            No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

                        </div>
                    </li>

                    <li>
                        <button class="usa-accordion-button" aria-expanded="false" aria-controls="a4">
      Fourth Amendment
    </button>
                        <div id="a4" class="usa-accordion-content">
                            The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly
                            describing the place to be searched, and the persons or things to be seized.

                        </div>
                    </li>

                    <li>
                        <button class="usa-accordion-button" aria-expanded="false" aria-controls="a5">
      Fifth Amendment
    </button>
                        <div id="a5" class="usa-accordion-content">
                            No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public
                            danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property,
                            without due process of law; nor shall private property be taken for public use, without just compensation.

                        </div>
                    </li>

                </ul>

            </section>

            <section id="accordions-bordered">
                <h2>Accordions - Bordered</h2>

                <ul class="usa-accordion-bordered">

                    <li>
                        <button class="usa-accordion-button" aria-expanded="true" aria-controls="b1">
      First Amendment
    </button>
                        <div id="b1" class="usa-accordion-content">
                            Congress shall make no law respecting an establishment of religion, or prohibiting the free exercise thereof; or abridging the freedom of speech, or of the press; or the right of the people peaceably to assemble, and to petition the Government for a redress
                            of grievances.

                        </div>
                    </li>

                    <li>
                        <button class="usa-accordion-button" aria-expanded="false" aria-controls="b2">
      Second Amendment
    </button>
                        <div id="b2" class="usa-accordion-content">
                            A well regulated Militia, being necessary to the security of a free State, the right of the people to keep and bear Arms, shall not be infringed.

                        </div>
                    </li>

                    <li>
                        <button class="usa-accordion-button" aria-expanded="false" aria-controls="b3">
      Third Amendment
    </button>
                        <div id="b3" class="usa-accordion-content">
                            No Soldier shall, in time of peace be quartered in any house, without the consent of the Owner, nor in time of war, but in a manner to be prescribed by law.

                        </div>
                    </li>

                    <li>
                        <button class="usa-accordion-button" aria-expanded="false" aria-controls="b4">
      Fourth Amendment
    </button>
                        <div id="b4" class="usa-accordion-content">
                            The right of the people to be secure in their persons, houses, papers, and effects, against unreasonable searches and seizures, shall not be violated, and no Warrants shall issue, but upon probable cause, supported by Oath or affirmation, and particularly
                            describing the place to be searched, and the persons or things to be seized.

                        </div>
                    </li>

                    <li>
                        <button class="usa-accordion-button" aria-expanded="false" aria-controls="b5">
      Fifth Amendment
    </button>
                        <div id="b5" class="usa-accordion-content">
                            No person shall be held to answer for a capital, or otherwise infamous crime, unless on a presentment or indictment of a Grand Jury, except in cases arising in the land or naval forces, or in the Militia, when in actual service in time of War or public
                            danger; nor shall any person be subject for the same offence to be twice put in jeopardy of life or limb; nor shall be compelled in any criminal case to be a witness against himself, nor be deprived of life, liberty, or property,
                            without due process of law; nor shall private property be taken for public use, without just compensation.

                        </div>
                    </li>

                </ul>

            </section>

        </div>
    </main>

    <section class="usa-section usa-section-dark usa-graphic_list">
        <div class="usa-grid usa-graphic_list-row">
            <div class="usa-width-one-half usa-media_block">
                <img class="usa-media_block-img" src="../../dist/img/circle-124.png" alt="Alt text">
                <div class="usa-media_block-body">
                    <h3>Graphic headings can vary.</h3>
                    <p>Graphic headings can be used a few different ways, depending on what your landing page is for. Highlight your values, specific program areas, or results.</p>
                </div>
            </div>
            <div class="usa-width-one-half usa-media_block">
                <img class="usa-media_block-img" src="../../dist/img/circle-124.png" alt="Alt text">
                <div class="usa-media_block-body">
                    <h3>Stick to 6 or fewer words.</h3>
                    <p>Keep body text to about 30. They can be shorter, but try to be somewhat balanced across all four. It creates a clean appearance with good spacing.</p>
                </div>
            </div>
        </div>
        <div class="usa-grid usa-graphic_list-row">
            <div class="usa-width-one-half usa-media_block">
                <img class="usa-media_block-img" src="../../dist/img/circle-124.png" alt="Alt text">
                <div class="usa-media_block-body">
                    <h3>Never highlight anything without a goal.</h3>
                    <p>For anything you want to highlight here, understand what your users know now, and what activity or impression you want from them after they see it.</p>
                </div>
            </div>
            <div class="usa-width-one-half usa-media_block">
                <img class="usa-media_block-img" src="../../dist/img/circle-124.png" alt="Alt text">
                <div class="usa-media_block-body">
                    <h3>Could also have 2 or 6.</h3>
                    <p>In addition to your goal, find out your users’ goals. What do they want to know or do that supports your mission? Use these headings to show those.</p>
                </div>
            </div>
        </div>
    </section>

    <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>
                    <address>
          <h3 class="usa-footer-contact-heading">Agency Contact Center</h3>
          <p>(800) CALL-GOVT</p>
          <a href="mailto:info@agency.gov">info@agency.gov</a>
        </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 %}

  {% for spec in before %}
    {% render '@' + spec.component, spec.context, true %}
  {% endfor %}

  <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', {sidenav: sidenav} %}
    </aside>

    <div class="usa-width-three-fourths usa-layout-docs-main_content">
      <h1>{{ page.title }}</h1>

      <p class="usa-font-lead">{{ page.lead }}</p>

      <p class="usa-content">
        {{ page.body }}

        <ul>
        {% for list in page.lists %}
          <li>{{ list }}</li>
        {% endfor %}
        </ul>

        <ol>
        {% for list in page.lists %}
          <li>{{ list }}</li>
        {% endfor %}
        </ol>
      </p>

      {% for spec in inner %}
      <section id="{{ spec.id }}">
        <h2>{{ spec.title }}</h2>
        {% if spec.include %}
          {% include spec.include %}
        {% elseif spec.component %}
          {% render '@' + spec.component, spec.context, spec.merge %}
        {% else %}
          {{ spec.content }}
        {% endif %}
      </section>
      {% endfor %}

    </div>
  </main>

  {% for spec in after %}
    {% render '@' + spec.component, spec.context, true %}
  {% endfor %}

{% endblock %}
package:
  name: uswds
  version: 1.3.0
uswds:
  path: ../../dist
page:
  title: This is your page title
  lead: >-
    The page heading communicates the main focus of the page. Make your page
    heading descriptive and keep it succinct.
  body: >-
    This is the content body where we will test some ordered and unordered
    lists. Just long enough to wrap to a new line to test content width.
  lists:
    - >-
      This is a very long sentence that should go to a new line when it is among
      other pieces of paragraph text.
    - This is a short sentence that isn't long enough to go to a new line.
    - This is the third sentence.
before:
  - component: hero
    context: {}
sidenav:
  links:
    - text: Another page
    - text: Current page
      current: true
      links:
        - text: First section
        - text: Second section
          current: true
          links:
            - text: Grandchild link
            - text: Another one
        - text: Third section
    - text: Yet another page
inner:
  - title: Accordions - Borderless
    id: accordions
    component: accordion
  - title: Accordions - Bordered
    id: accordions-bordered
    component: accordion--bordered
    context:
      accordion:
        variant: bordered
        items:
          - title: First Amendment
            id: b1
            expanded: true
            content: >
              Congress shall make no law respecting an establishment of
              religion, or prohibiting the free exercise thereof; or abridging
              the freedom of speech, or of the press; or the right of the people
              peaceably to assemble, and to petition the Government for a
              redress of grievances.
          - title: Second Amendment
            id: b2
            content: >
              A well regulated Militia, being necessary to the security of a
              free State, the right of the people to keep and bear Arms, shall
              not be infringed.
          - title: Third Amendment
            id: b3
            content: >
              No Soldier shall, in time of peace be quartered in any house,
              without the consent of the Owner, nor in time of war, but in a
              manner to be prescribed by law.
          - title: Fourth Amendment
            id: b4
            content: >
              The right of the people to be secure in their persons, houses,
              papers, and effects, against unreasonable searches and seizures,
              shall not be violated, and no Warrants shall issue, but upon
              probable cause, supported by Oath or affirmation, and particularly
              describing the place to be searched, and the persons or things to
              be seized.
          - title: Fifth Amendment
            id: b5
            content: >
              No person shall be held to answer for a capital, or otherwise
              infamous crime, unless on a presentment or indictment of a Grand
              Jury, except in cases arising in the land or naval forces, or in
              the Militia, when in actual service in time of War or public
              danger; nor shall any person be subject for the same offence to be
              twice put in jeopardy of life or limb; nor shall be compelled in
              any criminal case to be a witness against himself, nor be deprived
              of life, liberty, or property, without due process of law; nor
              shall private property be taken for public use, without just
              compensation.
after:
  - component: graphic-list
    context:
      graphics: []