<!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--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>
<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>
<div class="usa-section">
<div class="grid-container">
<nav class="usa-breadcrumb" aria-label="Breadcrumbs">
<ol vocab="http://schema.org/" typeof="BreadcrumbList" class="usa-breadcrumb__list">
<li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item">
<a property="item" typeof="WebPage" href="#" class="usa-breadcrumb__link">
<span property="name">Home</span>
</a>
<meta property="position" content="1">
</li>
<li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item">
<a property="item" typeof="WebPage" href="#" class="usa-breadcrumb__link">
<span property="name">Federal Contracting</span>
</a>
<meta property="position" content="2">
</li>
<li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item">
<a property="item" typeof="WebPage" href="#" class="usa-breadcrumb__link">
<span property="name">Contracting assistance programs</span>
</a>
<meta property="position" content="3">
</li>
<li property="itemListElement" typeof="ListItem" class="usa-breadcrumb__list-item usa-current" aria-current="page">
<span property="name">Women-owned small business federal contracting program</span>
<meta property="position" content="4">
</li>
</ol>
</nav>
<div class="grid-row grid-gap">
<div class="desktop:grid-col-3 usa-layout-docs__sidenav">
<nav aria-label="Secondary navigation">
<ul class="usa-sidenav">
<li class="usa-sidenav__item">
<a href="">Another page</a>
</li>
<li class="usa-sidenav__item">
<a href="" class="usa-current">Current page</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="">First section</a>
</li>
<li class="usa-sidenav__item">
<a href="" class="usa-current">Second section</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="">Grandchild link</a>
</li>
<li class="usa-sidenav__item">
<a href="">Another one</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="">Third section</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="">Yet another page</a>
</li>
</ul>
</nav>
</div>
<main class="desktop:grid-col-9 usa-layout-docs__main usa-prose usa-layout-docs" id="main-content">
<h1>This is your page title</h1>
<p class="usa-intro">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="sign-in-form" class="margin-top-4">
<h2>Sign in form</h2>
<form class="usa-form">
<fieldset class="usa-fieldset">
<legend class="usa-legend">Sign in</legend>
<span>or <a href="javascript:void(0);">create an account</a></span>
<label class="usa-label" for="username">Username or email address</label>
<input class="usa-input" id="username" name="username" type="text" autocapitalize="off" autocorrect="off">
<label class="usa-label" for="password-sign-in">Password</label>
<input class="usa-input" id="password-sign-in" name="password" type="password">
<p class="usa-form__note">
<a title="Show password" href="javascript:void(0);" class="usa-show-password" aria-controls="password-sign-in">Show password</a>
</p>
<input class="usa-button" type="submit" value="Sign in">
<p><a href="javascript:void(0);" title="Forgot username">
Forgot username?</a></p>
<p><a href="javascript:void(0);" title="Forgot password">
Forgot password?</a></p>
</fieldset>
</form>
</section>
<section id="radio-buttons" class="margin-top-4">
<h2>Radio buttons</h2>
<form class="usa-form">
<fieldset class="usa-fieldset">
<legend class="usa-legend usa-legend">Select one historical figure</legend>
<div class="usa-radio">
<input class="usa-radio__input" id="historical-truth" type="radio" name="historical-figures" value="sojourner-truth">
<label class="usa-radio__label" for="historical-truth">Sojourner Truth</label>
</div>
<div class="usa-radio">
<input class="usa-radio__input" id="historical-douglass" type="radio" name="historical-figures" value="frederick-douglass">
<label class="usa-radio__label" for="historical-douglass">Frederick Douglass</label>
</div>
<div class="usa-radio">
<input class="usa-radio__input" id="historical-washington" type="radio" name="historical-figures" value="booker-t-washington">
<label class="usa-radio__label" for="historical-washington">Booker T. Washington</label>
</div>
<div class="usa-radio">
<input class="usa-radio__input" id="historical-carver" type="radio" name="historical-figures" value="george-washington-carver" disabled>
<label class="usa-radio__label" for="historical-carver">George Washington Carver</label>
</div>
</fieldset>
</form>
</section>
<section id="checkboxes" class="margin-top-4">
<h2>Check boxes</h2>
<form class="usa-form">
<fieldset class="usa-fieldset">
<legend class="usa-legend">Select any historical figure</legend>
<div class="usa-checkbox">
<input class="usa-checkbox__input" id="check-historical-truth" type="checkbox" name="historical-figures" value="sojourner-truth" checked>
<label class="usa-checkbox__label" for="check-historical-truth">Sojourner Truth</label>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input" id="check-historical-douglass" type="checkbox" name="historical-figures" value="frederick-douglass">
<label class="usa-checkbox__label" for="check-historical-douglass">Frederick Douglass</label>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input" id="check-historical-washington" type="checkbox" name="historical-figures" value="booker-t-washington">
<label class="usa-checkbox__label" for="check-historical-washington">Booker T. Washington</label>
</div>
<div class="usa-checkbox">
<input class="usa-checkbox__input" id="check-historical-carver" type="checkbox" name="historical-figures" value="george-washington-carver" disabled>
<label class="usa-checkbox__label" for="check-historical-carver">George Washington Carver</label>
</div>
</fieldset>
</form>
</section>
<section id="tables" class="margin-top-4">
<h2>Tables</h2>
<table class="usa-table">
<caption>Bordered table</caption>
<thead>
<tr>
<th scope="col">Document title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Declaration of Independence</th>
<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
<td>1776</td>
</tr>
<tr>
<th scope="row">Bill of Rights</th>
<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
<td>1791</td>
</tr>
<tr>
<th scope="row">Declaration of Sentiments</th>
<td>A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.</td>
<td>1848</td>
</tr>
<tr>
<th scope="row">Emancipation Proclamation</th>
<td>An executive order granting freedom to slaves in designated southern states.</td>
<td>1863</td>
</tr>
</tbody>
</table>
<table class="usa-table usa-table--borderless">
<caption>Borderless table: A borderless table can be useful when you want the information to feel more a part of the text it accompanies and extends.</caption>
<thead>
<tr>
<th scope="col">Document Title</th>
<th scope="col">Description</th>
<th scope="col">Year</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Declaration of Independence</th>
<td>Statement adopted by the Continental Congress declaring independence from the British Empire.</td>
<td>1776</td>
</tr>
<tr>
<th scope="row">Bill of Rights</th>
<td>The first ten amendments of the U.S. Constitution guaranteeing rights and freedoms.</td>
<td>1791</td>
</tr>
<tr>
<th scope="row">Declaration of Sentiments</th>
<td>A document written during the Seneca Falls Convention outlining the rights that American women should be entitled to as citizens.</td>
<td>1848</td>
</tr>
<tr>
<th scope="row">Emancipation Proclamation</th>
<td>An executive order granting freedom to slaves in designated southern states.</td>
<td>1863</td>
</tr>
</tbody>
</table>
</section>
<section id="default-cards" class="margin-top-4">
<h2>Basic cards</h2>
<ul class="usa-card-group">
<li class="usa-card tablet:grid-col-4">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Default card</h2>
</header>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Facere magnam quo nostrum amet odio ut ducimus?</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">The economy of cities</h2>
</header>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Facere magnam quo nostrum amet odio ut ducimus?</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-4">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Cities have the capability of providing something for everybody</h2>
</header>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis earum tenetur quo cupiditate, eaque qui officia recusandae. Facere magnam quo nostrum amet odio ut ducimus?</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
</ul>
</section>
<section id="media-cards" class="margin-top-4">
<h2>Cards with media</h2>
<ul class="usa-card-group">
<li class="usa-card tablet:grid-col-6">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Default media</h2>
</header>
<div class="usa-card__media">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="usa-card usa-card--header-first tablet:grid-col-6">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Inset media</h2>
</header>
<div class="usa-card__media usa-card__media--inset">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Nemo illo et error deserunt qui doloremque provident perferendis fuga pariatur eum?</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="usa-card tablet:grid-col-6">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Exdent media</h2>
</header>
<div class="usa-card__media usa-card__media--exdent">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Tempore ab exercitationem distinctio iste esse numquam a rerum culpa at quibusdam</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
<li class="usa-card usa-card--header-first tablet:grid-col-6">
<div class="usa-card__container">
<header class="usa-card__header">
<h2 class="usa-card__heading">Media with header first</h2>
</header>
<div class="usa-card__media usa-card__media--exdent">
<div class="usa-card__img">
<img src="https://designsystem.digital.gov/img/introducing-uswds-2-0/built-to-grow--alt.jpg" alt="A placeholder image">
</div>
</div>
<div class="usa-card__body">
<p>Tempore ab exercitationem distinctio iste esse numquam a rerum culpa at quibusdam</p>
</div>
<div class="usa-card__footer">
<button class="usa-button">Visit Florida Keys</button>
</div>
</div>
</li>
</ul>
</section>
<section id="accordions" class="margin-top-4">
<h2>Accordions - Borderless</h2>
<div class="usa-accordion">
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="true" aria-controls="a1">
First Amendment
</button>
</h2>
<div id="a1" class="usa-accordion__content usa-prose">
<p>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.</p>
</div>
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="a2">
Second Amendment
</button>
</h2>
<div id="a2" class="usa-accordion__content usa-prose">
<p>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.</p>
<ul>
<li>This is a list item</li>
<li>Another list item</li>
</ul>
</div>
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="a3">
Third Amendment
</button>
</h2>
<div id="a3" class="usa-accordion__content usa-prose">
<p>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.</p>
</div>
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="a4">
Fourth Amendment
</button>
</h2>
<div id="a4" class="usa-accordion__content usa-prose">
<p>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.</p>
</div>
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="a5">
Fifth Amendment
</button>
</h2>
<div id="a5" class="usa-accordion__content usa-prose">
<p>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.</p>
</div>
</div>
</section>
<section id="accordions-bordered" class="margin-top-4">
<h2>Accordions - Bordered</h2>
<div class="usa-accordion usa-accordion--bordered">
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="true" aria-controls="b1">
First Amendment
</button>
</h2>
<div id="b1" class="usa-accordion__content usa-prose">
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>
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="b2">
Second Amendment
</button>
</h2>
<div id="b2" class="usa-accordion__content usa-prose">
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>
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="b3">
Third Amendment
</button>
</h2>
<div id="b3" class="usa-accordion__content usa-prose">
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>
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="b4">
Fourth Amendment
</button>
</h2>
<div id="b4" class="usa-accordion__content usa-prose">
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>
<!-- Use the accurate heading level to maintain the document outline -->
<h2 class="usa-accordion__heading">
<button class="usa-accordion__button" aria-expanded="false" aria-controls="b5">
Fifth Amendment
</button>
</h2>
<div id="b5" class="usa-accordion__content usa-prose">
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>
</div>
</section>
</main>
</div>
</div>
</div>
<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>
<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 body %}
{% for spec in before %}
{% render '@' + spec.component, spec.context, true %}
{% endfor %}
<div class="usa-section">
<div class="grid-container">
{% render '@breadcrumb--metadata' %}
<div class="grid-row grid-gap">
<div class="desktop:grid-col-3 usa-layout-docs__sidenav">
{% render '@sidenav', {sidenav: sidenav} %}
</div>
<main class="desktop:grid-col-9 usa-layout-docs__main usa-prose usa-layout-docs" id="main-content">
<h1>{{ page.title }}</h1>
<p class="usa-intro">{{ page.lead | safe }}</p>
<p class="usa-content">
{{ page.body | safe }}
<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 }}" class="margin-top-4">
<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 %}
</main>
</div>
</div>
</div>
{% for spec in after %}
{% render '@' + spec.component, spec.context, true %}
{% endfor %}
{% endblock %}
package:
name: null
version: 1.0.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: Sign in form
id: sign-in-form
component: sign-in-form
- title: Radio buttons
id: radio-buttons
component: radio-buttons
- title: Check boxes
id: checkboxes
component: checkboxes
- title: Tables
id: tables
component: tables
- title: Basic cards
id: default-cards
component: card
- title: Cards with media
id: media-cards
component: card--media
context:
cards:
- title: Default media
classes: tablet:grid-col-6
media: true
media_classes: ''
image_classes: ''
content:
- Lorem ipsum dolor sit amet consectetur adipisicing elit.
- title: Inset media
classes: usa-card--header-first tablet:grid-col-6
media: true
media_classes: usa-card__media--inset
image_classes: ''
content:
- >-
Nemo illo et error deserunt qui doloremque provident perferendis
fuga pariatur eum?
- title: Exdent media
classes: tablet:grid-col-6
media: true
media_classes: usa-card__media--exdent
image_classes: ''
content:
- >-
Tempore ab exercitationem distinctio iste esse numquam a rerum
culpa at quibusdam
- title: Media with header first
classes: usa-card--header-first tablet:grid-col-6
media: true
media_classes: usa-card__media--exdent
image_classes: ''
content:
- >-
Tempore ab exercitationem distinctio iste esse numquam a rerum
culpa at quibusdam
- 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: []