NJ Web Design System (v1.0.0)

Uswds Header 

<!doctype html>
<html lang="en-US">

<head>
    <title>Uswds Header: Default</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../dist/css/styles.css">
</head>

<body tabindex="0">

    <header class="usa-header usa-header--extended" role="banner">
        <div class="usa-navbar">
            <div class="usa-logo" id="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 role="navigation" class="usa-nav">
            <div class="header-mask"></div>
            <div class="usa-nav__inner">

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

    <style scoped>
        .header-mask {
            background-color: rgba(0, 0, 0, .2);
            position: fixed;
            top: -1000px;
            left: -1000px;
            right: -1000px;
            bottom: -1000px;
            z-index: 999;
        }

        .usa-nav__inner,
        .usa-nav__secondary {
            background-color: white;
            z-index: 1000;
        }
    </style>

    <script src="../../dist/js/uswds.min.js"></script>
    <script>
        window.addEventListener('load', function() {
            document.body.addEventListener('submit', function(e) {
                // https://github.com/uswds/uswds/issues/2101
                e.preventDefault();
            }, true);
        }, false);
    </script>
</body>

</html>

No notes defined.

{% extends '_uswds.njk' %}
{% block body %}
<header class="usa-header usa-header--extended" role="banner">
  {% render '@site-title' %}
  <nav role="navigation" class="usa-nav">
    <div class="header-mask"></div>
    <div class="usa-nav__inner">
      {{ yield }}
    </div>
  </nav>
</header>
<div class="usa-overlay"></div>

<style scoped>
  .header-mask {
    background-color: rgba(0, 0, 0, .2);
    position: fixed;
    top: -1000px;
    left: -1000px;
    right: -1000px;
    bottom: -1000px;
    z-index: 999;
  }

  .usa-nav__inner,
  .usa-nav__secondary {
    background-color: white;
    z-index: 1000;
  }
</style>
{% endblock %}
 
package:
  name: null
  version: 1.0.0
uswds:
  path: ../../dist