Identifier

The identifier component is a required component that displays agency information and links to required federal government policy pages.

Default Identifier

Component Preview

Looking for U.S. government information and services?

Visit USA.gov

Component Code


<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="#" class="usa-identifier__logo">
          <img class="usa-identifier__logo-img" src="/path/to/parent-agency-logo.svg" alt="Parent agency 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">
          An official website of the <a href="#">Parent Agency</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="#" class="usa-identifier__required-link usa-link">About Parent Agency</a>
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="#" class="usa-identifier__required-link usa-link">Accessibility statement</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>

Identifier with Multiple Parents

Component Preview

domain.gov

An official website of the First Parent Agency and the Second Parent Agency

Looking for U.S. government information and services?

Visit USA.gov

Component Code


<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="#" class="usa-identifier__logo">
          <img class="usa-identifier__logo-img" src="/path/to/parent-agency-1-logo.svg" alt="Parent agency 1 logo" role="img">
        </a>
        <a href="#" class="usa-identifier__logo">
          <img class="usa-identifier__logo-img" src="/path/to/parent-agency-2-logo.svg" alt="Parent agency 2 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">
          An official website of the <a href="#">First Parent Agency</a> and the <a href="#">Second Parent Agency</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="#" class="usa-identifier__required-link usa-link">About First Parent Agency</a>
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="#" class="usa-identifier__required-link usa-link">About Second Parent Agency</a>
        </li>
        <li class="usa-identifier__required-links-item">
          <a href="#" class="usa-identifier__required-link usa-link">Accessibility statement</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>

Guidance

When to use the identifier component

Use the identifier on all federal government websites. The identifier is required for federal websites under the 21st Century Integrated Digital Experience Act (IDEA).

Use the identifier to establish the official status of your website. It clearly communicates that your site is an official government website and identifies the parent agency.

When to consider something else

Non-federal websites should not use this component.: The identifier is specifically designed for federal government websites. State, local, or private sector websites should not use this component as it may mislead users about the site's official status.

Usability guidance

Place the identifier after the footer.: The identifier should appear at the very bottom of every page, after the footer content.
Include all required links.: Federal websites must include links to: About [Agency], Accessibility statement, FOIA requests, No FEAR Act data, Office of the Inspector General, Performance reports, and Privacy policy.
Use the parent agency's logo.: Display the logo of the parent agency (such as a department or major agency) rather than a sub-agency logo.
Include the website's domain.: Display the primary domain of your website in the masthead section to help users verify they are on the correct site.

Accessibility guidance

Use aria-label on sections.: Each section of the identifier should have an appropriate aria-label to help screen reader users understand the purpose of each section.
Ensure link text makes sense out of context.: Screen reader users often navigate by links. Make sure each link clearly describes its destination, such as "About [Agency Name]" rather than just "About."
Include meaningful alt text for logos.: Provide descriptive alt text for agency logos, such as "Department of Example logo" to identify the agency to screen reader users.
Use the nav element for the required links section.: The required links section uses a <nav> element with an aria-label to help users identify it as a navigation region.

USWDS Documentation

For more guidance, view the USWDS Identifier Component Documentation.

Settings

Variable	Description
`$theme-identifier-background-color`	Background color of the identifier component.
`$theme-identifier-font-family`	Font family of the identifier component.
`$theme-identifier-identity-domain-color`	Color of the domain text in the identifier masthead.
`$theme-identifier-max-width`	Maximum width of the identifier content.
`$theme-identifier-primary-link-color`	Color of the primary links in the identifier.
`$theme-identifier-secondary-link-color`	Color of the secondary links in the identifier.

Variants

Variant	Description
`.usa-identifier`	Default identifier with single parent agency logo and required links.
`.usa-identifier__logos` (multiple logos)	Identifier with multiple parent agency logos for sites with multiple parent agencies.
`.usa-identifier--no-logo`	Identifier variant without a logo, for cases where a logo is unavailable.