The identifier communicates a site’s parent agency and displays agency links required by federal laws and policies.
About the identifier component
Note: Identifier is a core component along with the banner component. We recommend using both core components on most sites. Together, they are the most recognizable and standardized design elements of a government site.
An official website of the <Parent agency>
Un sitio web oficial de <Parent agency>
Multiple parents and logos
An official website of the <Parent agency> and the <Other agency>
Multiple parents and logos (Spanish)
Un sitio web oficial de <Parent agency> y <Other agency>
An official website of the <Parent agency>
An official website of the <Parent agency> . Produced and published at taxpayer expense.
Taxpayer disclaimer (Spanish)
Un sitio web oficial de <Parent agency> . Producido y publicado con dinero de los contribuyentes de impuestos.
When to use the identifier component
- To identify a site’s parent agency. The identifier is a complement to the USWDS banner. Use the identifier to tell users what agency is responsible for your website.
- To display links required by federal laws and policies. The identifier includes links required on all government sites.
When to consider something else
- Any time it would be misleading. The identifier should be used to reduce confusion. Avoid using the identifier on any site meant only for testing or otherwise not meant to be identified as an official government website.
- Redundant content. Don’t add the identifier without removing any duplicate links from your existing site footer. Favor the common links and content in the identifier over any equivalent content in your site footer.
- Use the identifier component for required links. If your site already includes the federally required links in its site footer, remove them in favor of the links in the identifier. This assures that site visitors find the required links in a consistent location from site to site.
- Display the parent agency logo, not the product logo. The identifier is meant to identify a website’s parent agency as a complement to the site footer. Site-specific logos, like a product logo, should be in the site footer, not the identifier.
- Display multiple parents and logos in hierarchical order. If a site has more than one parent agency, you may display a reference and a logo for each parent in hierarchical order, highest first. For example,”An official website of [Grandparent Department] and [Parent Agency]”.
- Avoid distraction. The identifier appears on every page of your site. Choose background colors that fit with your site theme and avoid color combinations that draw excessive attention to the identifier.
- Keep the text up-to-date. Use the most current version of the identifier.
- Use proper landmarks for each identifier section. Each identifier section should be either a
nav, and include an appropriate
- Add an
altattribute to each logo image. Use
[Agency shortname] logoas the alt text for each logo image you add..
imagerole for any SVG images. Use
role="img"with any SVG logo image.
Using the identifier component
- Except where noted, use the entire component without deletions or additions. With rare exceptions, if you use the identifier, include the entire identifier. That is, don’t delete sections or required links or change any link text beyond the customizations mentioned in the implementation section.
- Use a background color darker than that of the footer. color to anchor the identifier to the bottom of the page and distinguish it from other site content. Use primary or base family background colors of grade
80or higher, or
- Use an SVG logo if possible. Ensure the logo is high resolution. We recommend using the SVG version of any logo if you have one. Otherwise, use an image that’s at least 120 pixels tall.
- Use logos intended for dark backgrounds if possible. The identifier has a dark background. If your agency has a version of its logo intended for dark backgrounds, use that version.
- Update the required links to point to the proper URLs. The identifier includes links required of any federal website, and these links are specific to a department, agency, or website. We’ve linked each section below to the guidance on Digital.gov to provide further context.
About [Official parent agency acronym]: Update the link text to include the department of agency’s official acronym. Link to the “About” page of your parent agency’s principal website. If your site includes multiple parents, include only the organization highest in the hierarchy in this link.
Accessibility: Link to the “Accessibility” page of your parent agency’s principal website.
FOIA requests: Link to a page that includes information about how the public can request information under the Freedom of Information Act on your parent agency’s principal website.
No FEAR Act data: Link to the “Equal Employment Opportunity Data Posted Pursuant to the No Fear Act” page on your parent agency’s principal website.
Office of the Inspector General: Link to your parent agency’s Office of the Inspector General.
Performance reports: Link to a “Budget and Performance” page that includes the agency’s strategic plan among other financial and performance documentation.
- Use the Spanish version if for Spanish-language sites. If you have an official Spanish-language website, use the Spanish version of the identifier.
- Duplicate the logo element if using multiple logos. If you’re using multiple logos, duplicate the
usa-identifier__logoelement and link the image to your image source.
- If applicable, include any taxpayer disclaimer after the standard text. If the organization must provide a taxpayer expense disclaimer, include it following the “Official website” text, as a separate sentence. For example, “An official website of [Department]. Produced and published at taxpayer expense.”
The background color of the identifier. Use a color of grade 80 or higher, darker than the section that precedes it.
The font family of the identifier.
The color of your domain text in the identifier masthead. This should be grade 20-30 in the same family as the
The maximum width of the content within the identifier. Use the same max-width as your site footer.
The color of the links in the masthead section.
The color of the links in the required links section. This should be grade 20-30 in a
This component has no variants.
Meaningful code and guidance updates are listed in the following table:
Used valid element for identity’s aria-label.
We updated the identity section of the identifier to use a
Breaking Updated to Sass module syntax and new package structure. More information: uswds#4656
Added identifier guidance and documentation. More information: uswds-site#1180