Skip to main content
U.S. Flag

An official website of the United States government

CMS Design System

USA banner

Warning: draft
Jump to Guidance
View related guidance in the U.S. Web Design System

The USA banner identifies official websites of government organizations in the United States. It also helps visitors understand how to tell that a website is both official and secure.

<UsaBanner>

English

View Source File

Code snippet

Spanish

View Source File

Code snippet

Props

React Properties Documentation
NameTypeDefaultDescription
classNamestring

Additional classes to be added to the root section element

idstring

A unique ID to be applied to the banner content. A unique ID will be generated if one isn't provided.

localeLanguage

Guidance

When to use

  • To identify as an official government site. Most government sites should use the banner.

When to consider alternatives

  • If you don't use a .gov domain and HTTPS. The banner text identifies .gov domains and HTTPS as indicators that a website is an official government website. Use the banner only if your site uses both the proper TLD and HTTPS.
  • Any time it would be misleading. The banner should be used to reduce confusion. Avoid using the banner on any site meant only for testing or otherwise not meant to be identified as an official government website.

Usage

  • Use the provided text without customization. The banner is most effective as an identifier and a learning tool when its message is consistent across government websites.
  • Show the banner on every page. Use the banner at the top of every page of a site. It can be confusing or misleading if it appears on some pages and not others.
  • Avoid distraction. The banner 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 banner.
  • Keep the text up-to-date. Use the most current version of the banner.

Customization

The following Sass variables can be overridden to customize UsaBanner components:

VariableDefault Core Theme Value
$usa-banner__background-color$color-gray-lightest
$usa-banner__color$color-black
$usa-banner-close__background-color$color-gray-light
$usa-banner-action__color$color-primary-darker
$usa-banner-lock-icon__color$color-green-light