<!doctype html>
<html lang="en-US">
<!-- generated by @1.0.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 • 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--extended">
<div class="usa-navbar">
<div class="usa-logo" id="extended-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">
<div class="usa-nav__inner"><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="extended-nav-section-one"><span>Current section</span></button>
<ul id="extended-nav-section-one" class="usa-nav__submenu">
<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>
</li>
<li class="usa-nav__primary-item">
<button class="usa-accordion__button usa-nav__link" aria-expanded="false" aria-controls="extended-nav-section-two"><span>Section</span></button>
<ul id="extended-nav-section-two" class="usa-nav__submenu">
<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>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="javascript:void(0)"><span>Simple link</span></a>
</li>
</ul>
<div class="usa-nav__secondary">
<ul class="usa-nav__secondary-links">
<li class="usa-nav__secondary-item">
<a href="">Secondary link</a>
</li>
<li class="usa-nav__secondary-item">
<a href="">Another secondary link</a>
</li>
</ul>
<form class="usa-search usa-search--small " role="search">
<label class="usa-sr-only" for="extended-search-field-small">Search small</label>
<input class="usa-input" id="extended-search-field-small" type="search" name="search">
<button class="usa-button" type="submit">
<img src="/img/usa-icons-bg/search--white.svg" class="usa-search__submit-icon" alt="Search" /></button>
</form>
</div>
</div>
</nav>
</header>
<main id="main-content">
<section class="usa-hero" aria-label="Introduction">
<div class="grid-container">
<div class="usa-hero__callout">
<h1 class="usa-hero__heading"><span class="usa-hero__heading--alt">Hero callout:</span>Bring attention to a project priority
</h1>
<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)">Call to action</a>
</div>
</div>
</section>
<section class="grid-container usa-section">
<div class="grid-row grid-gap">
<div class="tablet:grid-col-4">
<h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">A tagline highlights your approach</h2>
</div>
<div class="tablet:grid-col-8 usa-prose">
<p>The tagline should inspire confidence and interest, focusing on the value that your overall approach offers to your audience. Use a heading typeface and keep your tagline to just a few words, and don’t confuse or mystify.</p>
<p>Use the right side of the grid to explain the tagline a bit more. What are your goals? How do you do your work? Write in the present tense, and stay brief here. People who are interested can find details on internal pages.</p>
</div>
</div>
</section>
<section class="usa-graphic-list usa-section usa-section--dark">
<div class="grid-container">
<div class="usa-graphic-list__row grid-row grid-gap">
<div class="usa-media-block tablet:grid-col">
<img class="usa-media-block__img" src="../../dist/img/circle-124.png" alt="Alt text">
<div class="usa-media-block__body">
<h2 class="usa-graphic-list__heading">Graphic headings can vary.</h2>
<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-media-block tablet:grid-col">
<img class="usa-media-block__img" src="../../dist/img/circle-124.png" alt="Alt text">
<div class="usa-media-block__body">
<h2 class="usa-graphic-list__heading">Stick to 6 or fewer words.</h2>
<p>Keep body text to about 30 words. 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-graphic-list__row grid-row grid-gap">
<div class="usa-media-block tablet:grid-col">
<img class="usa-media-block__img" src="../../dist/img/circle-124.png" alt="Alt text">
<div class="usa-media-block__body">
<h2 class="usa-graphic-list__heading">Never highlight anything without a goal.</h2>
<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-media-block tablet:grid-col">
<img class="usa-media-block__img" src="../../dist/img/circle-124.png" alt="Alt text">
<div class="usa-media-block__body">
<h2 class="usa-graphic-list__heading">Could also have 2 or 6.</h2>
<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>
</div>
</section>
<section id="test-section-id" class="usa-section">
<div class="grid-container">
<h2 class="font-heading-xl margin-y-0">Section heading</h2>
<p class="usa-intro">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">
<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.
{% extends 'layouts/_base.njk' %}
{% block header %}
{% render '@header--extended' %}
{% endblock %}
{% block body %}
{% render '@layout--landing-inner' %}
{% endblock %}
package:
name: null
version: 1.0.0
uswds:
path: ../../dist