An official website of the United States government
Here's how you know
Official websites use .gov
A <strong>.gov</strong> website belongs to an official government organization in the United States.
Secure .gov websites use HTTPS
A <strong>lock</strong> (
) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
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.
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.
Graphic headings can vary.
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.
Stick to 6 or fewer words.
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.
Never highlight anything without a goal.
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.
Could also have 2 or 6.
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.
Section heading
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.
<section aria-label="Official website of the United States government" class="usa-banner site-banner">
<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"
aria-hidden="true"
src="https://cdn.jsdelivr.net/npm/@uswds/uswds@3.7.0/dist/img/us_flag_small.png"
alt="">
</div>
<div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true">
<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 type="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"
hidden="">
<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="https://cdn.jsdelivr.net/npm/@uswds/uswds@3.7.0/dist/img/icon-dot-gov.svg"
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="https://cdn.jsdelivr.net/npm/@uswds/uswds@3.7.0/dist/img/icon-https.svg"
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-description"
focusable="false">
<title id="banner-lock-title">Lock</title>
<desc id="banner-lock-description">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>
<header class="usa-header usa-header--extended" role="banner">
<div class="usa-logo site-logo" id="logo">
<em class="usa-logo__text">
<a href=""
accesskey="2"
title="Home"
aria-label="Home">Project title</a>
</em>
</div>
<nav class="usa-nav" role="navigation">
<div class="usa-nav__inner">
<button type="button" class="usa-nav__close">
<img src="usa-icons/close.svg" alt="Close" />
</button>
<ul class="usa-nav__primary usa-accordion">
<li class="usa-nav__primary-item">
<a class="usa-nav__link usa-current" href="https://example.com">
<span>Current section</span>
</a>
</li>
<li class="usa-nav__primary-item">
<a class="usa-nav__link" href="https://example.com">
<span>Home</span>
</a>
</li>
</ul>
<div class="usa-nav__secondary">
<ul class="usa-nav__secondary-links">
<li class="usa-nav__secondary-item">
<a href="https://example.com">Data</a>
</li>
<li class="usa-nav__secondary-item">
<a href="https://example.com">Secondary link</a>
</li>
<li class="usa-nav__secondary-item">
<a href="https://example.com">Another secondary link</a>
</li>
</ul>
<section aria-label="Search component">
<form class="usa-search">
<div role="search">
<!-- [Error] component: label, template not found: label -->
<input class="usa-input" id="test-search-field" type="search" name="search" />
<button class="usa-button" type="submit">
<span class="usa-search__submit-text">Search</span>
<img src="" class="usa-search__submit-icon" alt="Search">
</button>
</div>
</form>
</section>
</div>
</div>
</nav>
</header>
<section aria-label="Introduction" class="usa-hero" style="background-image: https://cdnjs.cloudflare.com/ajax/libs/uswds/3.7.0/img/hero.jpg">
<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="#" role="button">Call to action</a>
</div>
</div>
</section>
<section class="usa-section">
<div class="grid-container">
<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></div>
</section>
<section class="usa-section usa-section--dark usa-graphic-list">
<div class="grid-container">
<div class="tablet:grid-col usa-media-block">
<img class="usa-media-block__img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMaWdodCBCbHVlIENpcmNsZSIgdmlld2JveD0iMCAwIDEyNCAxMjQiIHdpZHRoPSIxMjQiIGhlaWdodD0iMTI0Ij48Y2lyY2xlIGlkPSJsaWdodF9ibHVlX2NpcmNsZSIgZmlsbD0iIzAwNzFiYyIgY3g9IjYyIiBjeT0iNjIiIHI9IjYyIi8+PC9zdmc+Cg==" />
<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="tablet:grid-col usa-media-block">
<img class="usa-media-block__img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMaWdodCBCbHVlIENpcmNsZSIgdmlld2JveD0iMCAwIDEyNCAxMjQiIHdpZHRoPSIxMjQiIGhlaWdodD0iMTI0Ij48Y2lyY2xlIGlkPSJsaWdodF9ibHVlX2NpcmNsZSIgZmlsbD0iIzAwNzFiYyIgY3g9IjYyIiBjeT0iNjIiIHI9IjYyIi8+PC9zdmc+Cg==" />
<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 class="tablet:grid-col usa-media-block">
<img class="usa-media-block__img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMaWdodCBCbHVlIENpcmNsZSIgdmlld2JveD0iMCAwIDEyNCAxMjQiIHdpZHRoPSIxMjQiIGhlaWdodD0iMTI0Ij48Y2lyY2xlIGlkPSJsaWdodF9ibHVlX2NpcmNsZSIgZmlsbD0iIzAwNzFiYyIgY3g9IjYyIiBjeT0iNjIiIHI9IjYyIi8+PC9zdmc+Cg==" />
<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="tablet:grid-col usa-media-block">
<img class="usa-media-block__img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMaWdodCBCbHVlIENpcmNsZSIgdmlld2JveD0iMCAwIDEyNCAxMjQiIHdpZHRoPSIxMjQiIGhlaWdodD0iMTI0Ij48Y2lyY2xlIGlkPSJsaWdodF9ibHVlX2NpcmNsZSIgZmlsbD0iIzAwNzFiYyIgY3g9IjYyIiBjeT0iNjIiIHI9IjYyIi8+PC9zdmc+Cg==" />
<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>
</section>
<section 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" href="#" role="button">Call to action</a>
</div>
</section>
