<!doctype html>
<html lang="en-US">
<!-- generated by uswds@2.9.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/uswds.min.css">

</head>

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

    <section class="usa-banner" aria-label="Official government website">
        <div class="usa-accordion">
            <header class="usa-banner__header">
                <div class="usa-banner__inner">
                    <div class="grid-col-auto">
                        <img class="usa-banner__header-flag" src="../../dist/img/us_flag_small.png" alt="U.S. flag">
                    </div>
                    <div class="grid-col-fill tablet:grid-col-auto">
                        <p class="usa-banner__header-text">An official website of the United States government</p>
                        <p class="usa-banner__header-action" aria-hidden="true">Here’s how you know</p>
                    </div>
                    <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-accordion__content" id="gov-banner">
                <div class="grid-row grid-gap-lg">
                    <div class="usa-banner__guidance tablet:grid-col-6">
                        <img class="usa-banner__icon usa-media-block__img" src="../../dist/img/icon-dot-gov.svg" role="img" alt="Dot gov">
                        <div class="usa-media-block__body">
                            <p>
                                <strong>
                                    Official websites use .gov
                                </strong>
                                <br />
                                A <strong>.gov</strong> website belongs to an official government organization in the United States.

                            </p>
                        </div>
                    </div>
                    <div class="usa-banner__guidance tablet:grid-col-6">
                        <img class="usa-banner__icon usa-media-block__img" src="../../dist/img/icon-https.svg" role="img" alt="Https">
                        <div class="usa-media-block__body">
                            <p>
                                <strong>
                                    Secure .gov websites use HTTPS
                                </strong>
                                <br />
                                A <strong>lock</strong> (
                                <span class="icon-lock"><svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-title banner-lock-description">
                                        <title id="banner-lock-title">Lock</title>
                                        <desc id="banner-lock-description">A locked padlock</desc>
                                        <path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" />
                                    </svg></span>
                                ) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </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"><span class="usa-sr-only">Search</span></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&#39;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&#39;t long enough to go to a new line.</li>

                        <li>This is the third sentence.</li>

                    </ol>
                    </p>

                    <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);">
                                    <span>Facebook</span>
                                </a>
                            </div>
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--twitter" href="javascript:void(0);">
                                    <span>Twitter</span>
                                </a>
                            </div>
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--youtube" href="javascript:void(0);">
                                    <span>YouTube</span>
                                </a>
                            </div>
                            <div class="grid-col-auto">
                                <a class="usa-social-link usa-social-link--rss" href="javascript:void(0);">
                                    <span>RSS</span>
                                </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="javascript:void(0);" class="usa-identifier__logo">
                        <img class="usa-identifier__logo-img" src="../../dist/img/circle-gray-20.svg" alt="&lt;Parent agency&gt; logo" role="img">
                    </a>
                </div>
                <div class="usa-identifier__identity" aria-label="Agency description">
                    <p class="usa-identifier__identity-domain">domain.gov</p>
                    <p class="usa-identifier__identity-disclaimer">An official website of the <a href="javascript:void(0);">&lt;Parent agency&gt;</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="javascript:void(0);" class="usa-identifier__required-link">About &lt;Parent shortname&gt;</a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="javascript:void(0);" class="usa-identifier__required-link">Accessibility support</a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="javascript:void(0);" class="usa-identifier__required-link usa-link">FOIA requests</a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="javascript:void(0);" class="usa-identifier__required-link usa-link">No FEAR Act data</a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="javascript:void(0);" class="usa-identifier__required-link usa-link">Office of the Inspector General</a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="javascript:void(0);" class="usa-identifier__required-link usa-link">Performance reports</a>
                    </li>
                    <li class="usa-identifier__required-links-item">
                        <a href="javascript:void(0);" class="usa-identifier__required-link usa-link">Privacy policy</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">Looking for U.S. government information and services?</div>
                <a href="https://www.usa.gov/" class="usa-link">Visit USA.gov</a>
            </div>
        </section>
    </div>

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

</html>

There are no notes for this item.

{% 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: uswds
  version: 2.9.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: 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: []