Skip to main content

Establish Trust

The Establish Trust pattern helps users verify they are on an official government website by displaying consistent, recognizable government markers and security indicators.


Overview

Government websites must establish trust with users immediately. Visitors need to know they are interacting with a legitimate government entity and that their information is secure. This pattern combines several key elements that work together to communicate authenticity and security.

The Establish Trust pattern addresses a critical user need: verifying that a website is an official government resource before sharing personal information or conducting transactions. By consistently displaying official markers, government websites help users distinguish legitimate sites from fraudulent ones.


Key Elements

Official Government Banner

The official government banner appears at the very top of every page and informs users that they are on an official government website. This banner is a critical trust signal that users have come to recognize and expect.

Component Preview

Official websites use .gov
A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS
A lock ( ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.


Component Code


HTTPS Indicator

The HTTPS indicator shows users that the connection between their browser and the website is encrypted and secure. This is essential for protecting sensitive information during transmission.

Component Preview

Secure .gov websites use HTTPS
A lock ( Locked padlock icon ) or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.


Component Code

<div class="usa-banner__guidance tablet:grid-col-6">
  <img class="usa-banner__icon usa-media-block__img" src="/civic-guide/uswds/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> or <strong>https://</strong> means you've safely connected to
      the .gov website. Share sensitive information only on official,
      secure websites.
    </p>
  </div>
</div>

.gov Domain Indicator

The .gov domain is a trusted indicator that a website belongs to an official U.S. government organization. Only verified government entities can register .gov domains.

Component Preview

Official websites use .gov
A .gov website belongs to an official government organization in the United States.


Component Code

<div class="usa-banner__guidance tablet:grid-col-6">
  <img class="usa-banner__icon usa-media-block__img" src="/civic-guide/uswds/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>

Agency Seal or Logo

An official agency seal or logo reinforces the website's legitimacy and helps users identify which government organization operates the site. The logo should appear prominently in the header and identifier sections.

Component Preview

example.gov

An official website of the Example Agency


Component Code

<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="#" class="usa-identifier__logo">
        <img class="usa-identifier__logo-img" src="/path/to/agency-logo.svg" alt="Agency logo" role="img">
      </a>
    </div>
    <section class="usa-identifier__identity" aria-label="Agency description">
      <p class="usa-identifier__identity-domain">example.gov</p>
      <p class="usa-identifier__identity-disclaimer">
        An official website of the <a href="#">Example Agency</a>
      </p>
    </section>
  </div>
</section>


Guidance

When to use the Establish Trust pattern

Use this pattern on all government websites to help users verify they are on an official site.
The official government banner should appear on every page of your website, not just the homepage.
Use this pattern especially on pages where users will enter sensitive information or complete transactions.

Best practices

Place the banner at the very top of every page.
The government banner should be the first element users see, appearing above all other content including the site header.
Do not modify the official banner text or icons.
The banner content has been carefully crafted and tested. Modifications can reduce trust and create inconsistency across government sites.
Ensure your site uses HTTPS.
All government websites must use HTTPS to encrypt data in transit. The banner explains HTTPS to users, so your site must actually use it.
Use your official agency seal or logo consistently.
Display your agency's official visual identity in the header and identifier sections to reinforce authenticity.
Include the identifier component at the bottom of every page.
The identifier component reinforces the official nature of the site and provides required links to parent agencies and policies.

Accessibility considerations

Use appropriate ARIA labels.
The banner section should include aria-label="Official website of the United States government" to provide context for screen reader users.
Ensure the banner is keyboard accessible.
The expandable "Here's how you know" section must be operable using only a keyboard.
Use proper heading hierarchy.
Do not use heading elements within the banner to avoid disrupting the page's heading structure.
Provide alt text for the flag icon.
The flag image should have aria-hidden="true" since it is decorative and the text provides the necessary information.

USWDS Documentation

For more guidance, view the USWDS Establish Trust Pattern Documentation.



Related Components

Component Description
usa-banner

The official government banner that appears at the top of every page.
usa-identifier

Identifies the parent agency and displays required links at the bottom of each page.
usa-header

Contains the agency logo and site title to reinforce official branding.
usa-footer

Provides additional navigation and contact information in a consistent location.
Looking for U.S. government information and services?
Visit USA.gov