Banner

A banner to identify official websites of government organizations in the United States. It allows users to know if a website is both official and secure. This component is required for all NCI informational websites and applications.

View in Figma

Overview

Usage

• Use the provided text without customization. The banner is most effective as an identifier when its message is consistent across government websites.
  • With only a few exceptions (see Implementation guidance), sites should use the TLD-appropriate text provided, unaltered.
  • Use the Spanish version of the banner for Spanish-language websites.
• Use background colors that fit with the website’s theme. Avoid color combinations that draw excessive attention to the banner.
• Use the most current version of the banner. Keep the text up to date.
• If website provides site-wide translation, use translation button with the NCI small button variant styling— only one button may be added.

Where to use

• Must be used across the top of every page of a website. Adding the banner to select websites can be confusing and/or misleading to users.

When to use

• Must be used by all NCI Division and Center websites to designate the website as an official U.S. government organizational website. Do not use a banner that is not provided by NCI.

Accessibility

• Use Aria-Labels to provide users with an accessible name for an element. If there is no visible name for the element, use aria-label to provide the user with a recognizable accessible name.

• NCIDS default markup uses aria-label="official government website" to distinguish the banner header from the main header.

• Use the banner directly following the skipnav component.

Aria-Label Translations Table

Code Snippets

NCI Banner

<section class="usa-banner" aria-label="Official government website">
  <header class="usa-banner__header">
    <div class="usa-banner__inner">
      <div class="usa-banner__header-text">
        An official website of the United States government
      </div>
    </div>
  </header>
</section>

NCI Banner with language toggle

<section class="usa-banner" aria-label="Official government website">
  <header class="usa-banner__header">
    <div class="usa-banner__inner">
      <div class="usa-banner__header-text">
        An official website of the United States government
      </div>
      <a href="/" class="usa-banner__language-toggle">Español</a>
    </div>
  </header>
</section>

NCI Banner (Spanish)

<section
  class="usa-banner"
  aria-label="Un sitio oficial del Gobierno de Estados Unidos"
>
  <header class="usa-banner__header">
    <div class="usa-banner__inner">
      <div class="usa-banner__header-text">
        Un sitio oficial del Gobierno de Estados Unidos
      </div>
    </div>
  </header>
</section>

NCI Banner with language toggle (Spanish)

<section
  class="usa-banner"
  aria-label="Un sitio oficial del Gobierno de Estados Unidos"
>
  <header class="usa-banner__header">
    <div class="usa-banner__inner">
      <div class="usa-banner__header-text">
        Un sitio oficial del Gobierno de Estados Unidos
      </div>
      <a href="/" class="usa-banner__language-toggle">English</a>
    </div>
  </header>
</section>

Packages

Import this Sass partial into your stylesheet.

@forward "usa-banner";
/* This package should also be imported in your sass stylesheet if not already as Banner with Language Toggle is dependent on it. */
@forward "usa-button";