Landing

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

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

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

    <header class="usa-header usa-header-extended" role="banner">
        <div class="usa-navbar">
            <div class="usa-logo" id="extended-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">
            <div class="usa-nav-inner">
                <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="extended-nav-section-one">
      <span>Section title</span>
    </button>
                        <ul id="extended-nav-section-one" 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><button class="usa-accordion-button usa-nav-link" aria-expanded="false" aria-controls="extended-nav-section-two">
      <span>Simple terms</span>
    </button>
                        <ul id="extended-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>
                <div class="usa-nav-secondary">

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

                    <ul class="usa-unstyled-list usa-nav-secondary-links">

                        <li class="js-search-button-container">
                            <button class="usa-header-search-button js-search-button">Search</button>
                        </li>

                        <li>
                            <a href="">
        Secondary priority link
      </a>
                        </li>

                        <li>
                            <a href="">
        Easy to comprehend
      </a>
                        </li>

                    </ul>
                </div>

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

    <main id="main-content">
        <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>

                    <p>Support the callout with some short explanatory text. You don't need more than a couple of sentences.</p>

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

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

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

        <section class="usa-section">
            <div class="usa-grid">
                <h2>Section heading</h2>
                <p class="usa-font-lead">Everything up to this point should help people understand your agency or project: who you are, your goal or mission, and how you approach it. Use this section to encourage them to act. Describe why they should get in touch here, and use
                    an active verb on the button below. “Get in touch,” “Learn more,” and so on.</p>
                <a class="usa-button usa-button-big" href="#">Call to action</a>
            </div>
        </section>

    </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="">
                    <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 header %}
  {% render '@header--extended' %}
{% endblock %}

{% block body %}
  {% render '@layout--landing-inner', true %}
{% endblock %}
package:
  name: uswds
  version: 1.6.6
uswds:
  path: ../../dist