Skip to main content

Landing Page

The landing page template provides an engaging entry point to a website or major section, featuring prominent calls-to-action, value propositions, and visually compelling content to guide users toward their goals.


Overview

Landing pages serve as the primary gateway for users entering your site, whether through direct navigation, search results, or marketing campaigns. This template combines hero imagery, clear messaging, and strategic content placement to create an impactful first impression while directing users to the most important actions and information.

The USWDS landing page template is designed to accommodate a variety of use cases, from organizational homepages to campaign-specific microsites, while maintaining accessibility and responsive design standards.


Key Elements

Hero Section

The hero section is the prominent banner at the top of the landing page, featuring a compelling headline, supporting text, and a primary call-to-action button. It sets the tone for the entire page and immediately communicates the site's purpose.

Component Preview

Hero callout: Bring attention to a project priority

Support the callout with some short explanatory text. You don't need more than a couple of sentences.

Call to action

Component Code

<section class="usa-hero" aria-label="Introduction" style="background-image: url('/path/to/hero.png');">
  <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>

Value Propositions

Value propositions highlight key benefits or features of your organization or service. They are typically displayed in a grid layout using cards to create visual balance and easy scanning.

Component Preview

  • Fast and efficient

    Get things done quickly with streamlined processes designed for efficiency.

  • Accessible to all

    Built with accessibility in mind to ensure everyone can use our services.

  • Secure and reliable

    Your data is protected with industry-leading security standards.


Component Code

<ul class="usa-card-group">
  <li class="usa-card tablet:grid-col-4">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h2 class="usa-card__heading">Fast and efficient</h2>
      </div>
      <div class="usa-card__body">
        <p>Get things done quickly with streamlined processes designed for efficiency.</p>
      </div>
    </div>
  </li>
  <li class="usa-card tablet:grid-col-4">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h2 class="usa-card__heading">Accessible to all</h2>
      </div>
      <div class="usa-card__body">
        <p>Built with accessibility in mind to ensure everyone can use our services.</p>
      </div>
    </div>
  </li>
  <li class="usa-card tablet:grid-col-4">
    <div class="usa-card__container">
      <div class="usa-card__header">
        <h2 class="usa-card__heading">Secure and reliable</h2>
      </div>
      <div class="usa-card__body">
        <p>Your data is protected with industry-leading security standards.</p>
      </div>
    </div>
  </li>
</ul>

Featured Content

Featured content sections use cards or collections to highlight important content, news, or resources that users may find valuable.

Component Preview

  • A placeholder image

    Featured resource

    Highlight an important resource or piece of content that visitors should explore.

    Learn more
  • A placeholder image

    Latest news

    Share the latest updates and announcements with your audience.

    Read more

Component Code

<ul class="usa-card-group">
  <li class="usa-card tablet:grid-col-6">
    <div class="usa-card__container">
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img src="/path/to/image.jpg" alt="A placeholder image">
        </div>
      </div>
      <div class="usa-card__header">
        <h2 class="usa-card__heading">Featured resource</h2>
      </div>
      <div class="usa-card__body">
        <p>Highlight an important resource or piece of content that visitors should explore.</p>
      </div>
      <div class="usa-card__footer">
        <a class="usa-button" href="#">Learn more</a>
      </div>
    </div>
  </li>
  <li class="usa-card tablet:grid-col-6">
    <div class="usa-card__container">
      <div class="usa-card__media">
        <div class="usa-card__img">
          <img src="/path/to/image.jpg" alt="A placeholder image">
        </div>
      </div>
      <div class="usa-card__header">
        <h2 class="usa-card__heading">Latest news</h2>
      </div>
      <div class="usa-card__body">
        <p>Share the latest updates and announcements with your audience.</p>
      </div>
      <div class="usa-card__footer">
        <a class="usa-button" href="#">Read more</a>
      </div>
    </div>
  </li>
</ul>

Call-to-Action Sections

Call-to-action sections provide clear next steps for users, guiding them toward important actions such as signing up, learning more, or contacting your organization.

Component Preview

Ready to get started?

Join thousands of users who are already benefiting from our services.

Sign up now

Component Code

<section class="usa-section usa-section--dark">
  <div class="grid-container">
    <div class="grid-row grid-gap">
      <div class="tablet:grid-col-8">
        <h2 class="font-heading-xl margin-top-0 tablet:margin-bottom-0">Ready to get started?</h2>
        <p>Join thousands of users who are already benefiting from our services.</p>
      </div>
      <div class="tablet:grid-col-4 display-flex flex-align-center flex-justify-end">
        <a class="usa-button usa-button--outline usa-button--inverse" href="#">Sign up now</a>
      </div>
    </div>
  </div>
</section>

Graphics Section

The graphics section uses the graphic list component to pair images or icons with descriptive text, creating visually engaging content blocks.

Component Preview

Alt text

Graphic heading

Explain the benefit of your offering in a way that is useful to site visitors. Not all pages will need graphics.

Alt text

Graphic heading

Keep these brief, focusing on the most important piece of information visitors need to know.

Alt text

Graphic heading

Use visual elements to support your message and help users quickly understand key points.

Alt text

Graphic heading

Be concise and write in plain language to ensure your content is accessible to all users.


Component Code

<div class="usa-graphic-list usa-section usa-section--light">
  <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="/path/to/image.png" alt="Alt text">
        <div class="usa-media-block__body">
          <h2 class="usa-graphic-list__heading">Graphic heading</h2>
          <p>Explain the benefit of your offering in a way that is useful to site visitors.</p>
        </div>
      </div>
      <div class="usa-media-block tablet:grid-col">
        <img class="usa-media-block__img" src="/path/to/image.png" alt="Alt text">
        <div class="usa-media-block__body">
          <h2 class="usa-graphic-list__heading">Graphic heading</h2>
          <p>Keep these brief, focusing on the most important piece of information.</p>
        </div>
      </div>
    </div>
  </div>
</div>


Guidance

When to use the landing page template

Homepages.
Use this template for your organization's main homepage to create a strong first impression and guide users to key content.
Section landing pages.
Use for major sections of your site that serve as gateways to related content and services.
Campaign pages.
Use for marketing campaigns, initiatives, or special programs that need focused messaging and clear calls-to-action.

Best practices

Establish clear hierarchy.
Use visual hierarchy to guide users through content from the most important elements (hero) to supporting details. Ensure headings follow a logical order using <h1> through <h6> tags.
Keep calls-to-action focused.
Limit the number of primary CTAs to avoid overwhelming users. Each section should have a clear, singular action you want users to take.
Create scannable content.
Use short paragraphs, bullet points, and clear headings. Most users scan rather than read, so make key information easy to find.
Design mobile-first.
Ensure all landing page elements work well on mobile devices. Test your hero images, card grids, and CTAs on smaller screens.

Accessibility considerations

Provide meaningful alt text for images.
All images, including hero backgrounds and card images, must have descriptive alt attributes that convey their content and purpose.
Maintain proper heading order.
Use headings in sequential order without skipping levels. Each page should have one <h1>, and subsequent headings should follow the document outline.
Ensure visible focus states.
All interactive elements including buttons and links must have clearly visible focus indicators for keyboard navigation.
Use sufficient color contrast.
Text overlaid on hero images or colored backgrounds must meet WCAG contrast requirements. Consider using semi-transparent overlays on hero images.
Make CTAs descriptive.
Avoid generic link text like "Click here" or "Learn more." Use descriptive text that explains where the link leads, such as "View our services" or "Read the full report."

USWDS Documentation

For more guidance, view the USWDS Landing Page Template Documentation.

Looking for U.S. government information and services?
Visit USA.gov