Banners identify official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure.
About the banner component
When to use the banner component
- To identify as an official government site. Most government sites should use the banner.
When to consider something else
- If you don’t use a .gov/.mil domain and HTTPS. The Design System’s banner text identifies .gov and .mil domains and HTTPS as indicators that a website is an official government website. Use this banner only if your site uses both the proper top-level domain (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.
- 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 sites. With only a few exceptions (described in our Implementation guidance), sites should use the TLD-appropriate text provided, unaltered. Use the Spanish version of the banner for Spanish-language websites.
- Use the version appropriate to your website’s TLD. If your project uses a .mil top-level domain, use the .mil banner text.
- 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 should appear 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.
aria-labelto give the banner a useful name. Our default markup uses
aria-label="official government website"to distinguish the banner
headerfrom the main
Using the banner component
- Some .mil websites do not belong to an official U.S. Department of Defense organization. These sites should adapt the Official websites use .mil section to use more technically accurate language: “A .mil website operates under the approval of the U.S. Department of Defense.”
- The banner should directly follow the
- Set the banner background color with
$theme-banner-background-color. Banner text will update automatically.
Background color of the banner and its content.
The font family of the banner.
The color of banner link. Add the link color and the system will generate the hover state.
Maximum width of the banner content.
This component has no variants.