Base

<!doctype html>
<html lang="en-US">
<!-- generated by @0.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>USWDS Fractal example document</title>
    <link rel="stylesheet" href="../../dist/css/styles.css">

</head>

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

    <section class="nj-banner" aria-label="Official government website">
        <header class="nj-banner__header">
            <div class="grid-container">
                <div class="nj-banner__inner">
                    <div class="grid-col-auto">
                        <img class="nj-banner__header-seal" src="../../dist/img/nj_state_seal.png" alt="NJ flag">
                    </div>
                    <div class="grid-col-fill"><a href="https://nj.gov">Official Site of the State of New Jersey</a></div>
                    <div class="grid-col-auto">
                        <div class="text-white">
                            <ul>
                                <li>Governor Phil Murphy &bull; Lt. Governor Sheila Oliver</li>
                                <li><a href="https://nj.gov/subscribe/" target="_blank"><svg class="usa-icon bottom-neg-2px margin-right-05" aria-hidden="true" focusable="false" role="img">
                                            <use xlink:href="../../dist/img/sprite.svg#mail"></use>
                                        </svg>Get Updates</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </header>
    </section>

    <div class="usa-overlay"></div>
    <header class="usa-header usa-header--basic usa-header--megamenu">
        <div class="usa-nav-container">
            <div class="usa-navbar">
                <div class="usa-logo" id="basic-mega-logo">
                    <em class="usa-logo__text"><a href="/" title="Home" aria-label="Home">Project title</a></em>
                </div>
                <button class="usa-menu-btn">Menu</button>
            </div>
            <nav aria-label="Primary navigation" class="usa-nav">
                <button class="usa-nav__close"><img src="../../dist/img/close.svg" role="img" alt="close"></button>
                <ul class="usa-nav__primary usa-accordion">
                    <li class="usa-nav__primary-item">
                        <button class="usa-accordion__button usa-nav__link  usa-current" aria-expanded="false" aria-controls="basic-mega-nav-section-one"><span>Current section</span></button>
                        <div id="basic-mega-nav-section-one" class="usa-nav__submenu usa-megamenu">
                            <div class="grid-row grid-gap-4">
                                <div class="usa-col">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="usa-col">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">A very long navigation link that goes onto two lines</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="usa-col">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="usa-nav__primary-item">
                        <button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="basic-mega-nav-section-two"><span>Section</span></button>
                        <div id="basic-mega-nav-section-two" class="usa-nav__submenu usa-megamenu">
                            <div class="grid-row grid-gap-4">
                                <div class="usa-col">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="usa-col">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">A very long navigation link that goes onto two lines</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="usa-col">
                                    <ul class="usa-nav__submenu-list">
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                        <li class="usa-nav__submenu-item">
                                            <a href="#" class="">Navigation link</a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li class="usa-nav__primary-item">
                        <a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
                    </li>
                </ul>
                <form class="usa-search usa-search--small " role="search">
                    <label class="usa-sr-only" for="basic-mega-search-field-small">Search small</label>
                    <input class="usa-input" id="basic-mega-search-field-small" type="search" name="search">
                    <button class="usa-button" type="submit">
                        <img src="../../dist/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button>
                </form>
            </nav>
        </div>
    </header>

    <main id="main-content">
    </main>

    <footer class="usa-footer">
        <div class="grid-container usa-footer__return-to-top">
            <a href="#">Return to top</a>
        </div>
        <div class="usa-footer__primary-section">
            <nav class="usa-footer__nav" aria-label="Footer navigation">
                <ul class="grid-row grid-gap">
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                    <li class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content">
                        <a class="usa-footer__primary-link" href="javascript:void(0);">Primary link</a>
                    </li>
                </ul>
            </nav>
        </div>

        <div class="usa-footer__secondary-section">
            <div class="grid-container">
                <div class="grid-row grid-gap">
                    <div class="usa-footer__logo grid-row mobile-lg:grid-col-6 mobile-lg:grid-gap-2">
                        <div class="mobile-lg:grid-col-auto">
                            <img class="usa-footer__logo-img" src="../../dist/img/logo-img.png" alt="">
                        </div>
                        <div class="mobile-lg:grid-col-auto">
                            <h3 class="usa-footer__logo-heading">Name of Agency</h3>
                        </div>
                    </div>
                    <div class="usa-footer__contact-links mobile-lg:grid-col-6">
                        <div class="usa-footer__social-links grid-row grid-gap-1">
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--facebook" href="javascript:void(0);">
                                    <img class="usa-social-link__icon" src="../../dist/img/usa-icons/facebook.svg" alt="Facebook" />
                                </a>
                            </div>
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
                                    <img class="usa-social-link__icon" src="../../dist/img/usa-icons/twitter.svg" alt="Twitter" />
                                </a>
                            </div>
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
                                    <img class="usa-social-link__icon" src="../../dist/img/usa-icons/youtube.svg" alt="YouTube" />
                                </a>
                            </div>
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
                                    <img class="usa-social-link__icon" src="../../dist/img/usa-icons/rss_feed.svg" alt="RSS" />
                                </a>
                            </div>
                        </div>
                        <h3 class="usa-footer__contact-heading">Agency Contact Center</h3>
                        <address class="usa-footer__address">
                            <div class="usa-footer__contact-info grid-row grid-gap">
                                <div class="grid-col-auto">
                                    <a href="tel:1-800-555-5555">(800) CALL-GOVT</a>
                                </div>
                                <div class="grid-col-auto">
                                    <a href="mailto:info@agency.gov">info@agency.gov</a>
                                </div>
                            </div>
                        </address>
                    </div>
                </div>
            </div>
        </div>
    </footer>

    <div class="usa-identifier">
        <section class="usa-identifier__section usa-identifier__section--masthead" aria-label="Agency identifier">
            <div class="usa-identifier__container">
                <div class="usa-identifier__logos">
                    <a href="https://nj.gov" class="usa-identifier__logo">
                        <img class="usa-identifier__logo-img" src="../../dist/img/nj-logo-gray-20.png" alt="the State of New Jersey logo" role="img">
                    </a>
                </div>
                <div class="usa-identifier__identity" aria-label="Agency description">
                    <p class="usa-identifier__identity-domain"></p>
                    <p class="usa-identifier__identity-disclaimer">An official website of the <a href="https://nj.gov">the State of New Jersey</a></p>
                </div>
            </div>
        </section>
        <nav class="usa-identifier__section usa-identifier__section--required-links" aria-label="Important links">
            <div class="usa-identifier__container">
                <ul class="usa-identifier__required-links-list">
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/governor/admin/about/" class="usa-identifier__required-link">
                            Governor Phil Murphy
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/governor/admin/lt/" class="usa-identifier__required-link">
                            Lt. Governor Sheila Oliver
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/" class="usa-identifier__required-link usa-link">
                            NJ Home
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/nj/gov/njgov/alphaserv.html" class="usa-identifier__required-link usa-link">
                            Services A to Z
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/nj/gov/deptserv/" class="usa-identifier__required-link usa-link">
                            Departments/Agencies
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/faqs/" class="usa-identifier__required-link usa-link">
                            FAQs
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/nj/feedback.html" class="usa-identifier__required-link usa-link">
                            Contact Us
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/nj/privacy.html" class="usa-identifier__required-link usa-link">
                            Privacy Notice
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/nj/legal.html" class="usa-identifier__required-link usa-link">
                            Legal Statement & Disclaimers
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/nj/accessibility.html" class="usa-identifier__required-link usa-link">
                            Accessibility
                        </a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="https://nj.gov/opra/" class="usa-identifier__required-link usa-link">
                            Open Public Records Act (OPRA)
                        </a>
                    </li>
                </ul>
            </div>
        </nav>
        <section class="usa-identifier__section usa-identifier__section--usagov" aria-label="U.S. government information and services">
            <div class="usa-identifier__container">
                <div class="usa-identifier__usagov-description">Copyright © 2020 State of New Jersey</div>
            </div>
        </section>
    </div>

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

</html>

No notes defined.

<!doctype html>
<html lang="en-US">
  <!-- generated by {{ package.name }}@{{ package.version }} -->
  <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>{{ meta.title | default('USWDS Fractal example document') }}</title>
    <link rel="stylesheet" href="{{ uswds.path }}/css/styles.css">
    {% block styles %}{% endblock %}
  </head>
  <body>
    {% block skipnav -%}
      <a class="usa-skipnav" href="#main-content">Skip to main content</a>
    {% endblock %}

    {% block banner -%}
      {% render '@banner' %}
    {% endblock %}

    {% block header -%}
      {% render '@header--basic-mega', {header: header}, true %}
    {% endblock %}

    {% block body -%}
      <main id="main-content">
      </main>
    {% endblock %}

    {% block footer -%}
      {% render '@footer' %}
    {% endblock %}
    {% block identifier -%}
      {% render '@identifier' %}
    {% endblock %}
    <script src="{{ uswds.path }}/js/uswds.min.js"></script>
  </body>
</html>
package:
  name: null
  version: 0.3.0
uswds:
  path: ../../dist