Templates

Landing page

Provide someone’s first impression of your agency or program.

About the landing page template

Often, site users arrive at a landing page without much context, so a landing page needs to be clear, engaging, and contextualizing.

Landing page Demo Landing page 

<body>
  <a class="usa-skipnav" href="#main-content">Skip to main content</a>
  <section
    class="usa-banner"
    aria-label="Official website of the United States government"
  >
    <div class="usa-accordion">
      <header class="usa-banner__header">
        <div class="usa-banner__inner">
          <div class="grid-col-auto">
            <img
              aria-hidden="true"
              class="usa-banner__header-flag"
              src="/assets/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">Here’s how you know</p>
          </div>
          <button
            type="button"
            class="usa-accordion__button usa-banner__button"
            aria-expanded="false"
            aria-controls="gov-banner-default"
          >
            <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-default"
      >
        <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="/assets/img/icon-dot-gov.svg"
              role="img"
              alt=""
              aria-hidden="true"
            />
            <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="/assets/img/icon-https.svg"
              role="img"
              alt=""
              aria-hidden="true"
            />
            <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 icon
                    </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">
    <div class="usa-nav-container">
      <div class="usa-navbar">
        <div class="usa-logo">
          <em class="usa-logo__text"
            ><a href="/" title="<Project title>">&lt;Project title&gt;</a></em
          >
        </div>
      </div>
    </div>
  </header>
  <main id="main-content">
    <section class="usa-hero" aria-label="Introduction">
      <div class="grid-container">
        <div class="usa-hero__callout">
          <h1 class="usa-hero__heading">
            <span class="usa-hero__heading--alt">Hero callout:</span>Bring
            attention to a project priority
          </h1>
          <p>
            Support the callout with some short explanatory text. You don’t need
            more than a couple of sentences.
          </p>
          <a class="usa-button" href="">Call to action</a>
        </div>
      </div>
    </section>
    <section class="grid-container usa-section">
      <div class="grid-row grid-gap">
        <div class="tablet:grid-col-4">
          <h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">
            A tagline highlights your approach
          </h2>
        </div>
        <div class="tablet:grid-col-8 usa-prose">
          <p>
            The tagline should inspire confidence and interest, focusing on the
            value that your overall approach offers to your audience. Use a
            heading typeface and keep your tagline to just a few words, and
            don’t confuse or mystify.
          </p>
          <p>
            Use the right side of the grid to explain the tagline a bit more.
            What are your goals? How do you do your work? Write in the present
            tense, and stay brief here. People who are interested can find
            details on internal pages.
          </p>
        </div>
      </div>
    </section>
    <section class="usa-graphic-list usa-section usa-section--dark">
      <div class="grid-container">
        <div class="usa-graphic-list__row grid-row grid-gap">
          <div class="usa-media-block tablet:grid-col">
            <img
              class="usa-media-block__img"
              src="/assets/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="/assets/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="/assets/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="/assets/img/circle-124.png"
              alt="Alt text"
            />
            <div class="usa-media-block__body">
              <h2 class="usa-graphic-list__heading">Could also have 2 or 6.</h2>
              <p>
                In addition to your goal, find out your users’ goals. What do
                they want to know or do that supports your mission? Use these
                headings to show those.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
    <section id="test-section-id" class="usa-section">
      <div class="grid-container">
        <h2 class="font-heading-xl margin-y-0">Section heading</h2>
        <p class="usa-intro">
          Everything up to this point should help people understand your agency
          or project: who you are, your goal or mission, and how you approach
          it. Use this section to encourage them to act. Describe why they
          should get in touch here, and use an active verb on the button below.
          “Get in touch,” “Learn more,” and so on.
        </p>
        <a class="usa-button usa-button--big" href="">Call to action</a>
      </div>
    </section>
  </main>
  <footer class="usa-footer">
    <div class="grid-container usa-footer__return-to-top">
      <a href="#">Return to top</a>
    </div>
    <div class="usa-footer__primary-section">
      <nav class="usa-footer__nav" aria-label="Footer navigation">
        <ul class="grid-row grid-gap">
          <li
            class="mobile-lg:grid-col-4 desktop:grid-col-auto usa-footer__primary-content"
          >
            <a class="usa-footer__primary-link" href="javascript:void(0);"
              >&lt;Primary link&gt;</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);"
              >&lt;Primary link&gt;</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);"
              >&lt;Primary link&gt;</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);"
              >&lt;Primary link&gt;</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="/assets/img/logo-img.png"
                alt=""
              />
            </div>
            <div class="mobile-lg:grid-col-auto">
              <p class="usa-footer__logo-heading">&lt;Name of Agency&gt;</p>
            </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" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/facebook.svg"
                    alt="Facebook"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/twitter.svg"
                    alt="Twitter"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/youtube.svg"
                    alt="YouTube"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/instagram.svg"
                    alt="Instagram"
                /></a>
              </div>
              <div class="grid-col-auto">
                <a class="usa-social-link" href="javascript:void(0);"
                  ><img
                    class="usa-social-link__icon"
                    src="/assets/img/usa-icons/rss_feed.svg"
                    alt="RSS"
                /></a>
              </div>
            </div>
            <p class="usa-footer__contact-heading">
              &lt;Agency Contact Center&gt;
            </p>
            <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">&lt;(800) 555-GOVT&gt;</a>
                </div>
                <div class="grid-col-auto">
                  <a href="mailto:info@agency.gov">&lt;info@agency.gov&gt;</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="/assets/img/circle-gray-20.svg"
              alt="&lt;Parent agency&gt; logo"
              role="img"
          /></a>
        </div>
        <section
          class="usa-identifier__identity"
          aria-label="Agency description"
        >
          <p class="usa-identifier__identity-domain">domain.gov</p>
          <p class="usa-identifier__identity-disclaimer">
            <span aria-hidden="true">An </span>official website of the
            <a href="">&lt;Parent agency&gt;</a>
          </p>
        </section>
      </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 usa-link"
              >About &lt;Parent shortname&gt;</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Accessibility support</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >FOIA requests</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >No FEAR Act data</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Office of the Inspector General</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" class="usa-identifier__required-link usa-link"
              >Performance reports</a
            >
          </li>
          <li class="usa-identifier__required-links-item">
            <a href="" 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>
</body>

Guidance

When to use the landing page template

  • Introducing a new program. If you are introducing a new program to the public through a marketing or publicity campaign, a landing page is a good place to point links. It can build on the minimal copy of a campaign without overwhelming readers.

When to consider something else

  • Internal pages. Don’t use a landing page for standard internal page content. The same things that help people understand basics quickly can become distracting for people who are looking for more depth.

Usability guidance

  • Remember to do your research. The landing page can be a good model for a homepage. But do some research first. What do you have to say? What do your users need to know? Figure these things out. It’s important to know what you have to say about your organization before you settle on a homepage design.
  • Don’t make it too complicated. Don’t try to include forms or side navigation. Those components are visually complex, and a landing page works best when content is kept simple.
  • Simple pages may not need a header. If you are using the landing page to encourage users to follow a primary call to action, consider getting rid of the header. The less there is to distract people from the most important task, the more often they will do it.
  • Remove unnecessary elements. Do not create extra content just to fill the template. You can remove individual components (such as the media block) or sub-components (such as individual menu items in the header) from the template as you implement it. This template gives you a broad idea of the number of things your landing page could include, but never make a page more complex than you need to. If you’re unsure, interview users to find out what they need to know.
  • See component-specific guidance. For guidance on specific components, refer to pages on the components of interest.

Components used in this template

Component definitions

  • Hero: Heroes are used at the top of your landing page to help set the tone for the content of your site and to help users understand what your brand is all about. The hero offers a callout which provides a high-level overview of the content on the site and will often reference the hero image that sits behind it.
  • Graphic list: The graphic list is used to showcase a number of related items and their respective images in a grid pattern.