Official website banner

Tells people they are on a government site and how to tell. Goes above the header on every page.

When to use

On every page of a government service. It is the first thing a phishing site cannot copy convincingly.

When not to use

On a site that is not a government site. This documentation uses a different notice for that reason.

<section class="ag-banner" aria-label="Official website notice">
  <div class="ag-container ag-banner__inner">
    <span class="ag-flag" aria-hidden="true"><span></span><span></span><span></span></span>
    <p class="ag-banner__text" data-docs-string="banner">An official website of the Government</p>
    <details class="ag-banner__details">
      <summary data-docs-string="banner-how">How you know this is official</summary>
      <p data-docs-string="banner-domain">Official websites use a government domain</p>
      <p data-docs-string="banner-secure">Secure government websites use HTTPS</p>
    </details>
  </div>
</section>

How it works

• The text and the expandable explanation come from the country pack's strings, in the pack's default language.
• The flag's stripes and direction come from the pack. The three inner spans are the stripes; add more for flags with more bands.
• The expandable part is a native details element and needs no script.
• Keep the aria-label on the section so it is announced as a landmark.

Pack fields

strings.*.banner, banner-how, banner-domain, banner-secure, flag, flagDirection.