Skip to main content
USWDS + Tailwind

Banner

Add a government banner so visitors can identify an official U.S. government website and check its security information.

These examples use the following JavaScript initializers:

Usage

Breakpoints

Mobile

320px

Mobile Lg

480px

Tablet

640px

Desktop

1024px

An official website of the United States government

Official websites use .gov

A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS

A lock () or https:// means you've safely connected to the .gov website. Share sensitive information only on official, secure websites.

HTML
<section
  data-scope="collapse" data-part="root"
  class="@container bg-gray-5 group"
  aria-label="Official website of the United States government"
>
  <header
    class="flex text-xs gap-2 @tablet:items-center pl-4 pr-12 @tablet:pr-4 @tablet:px-8 py-2 @tablet:py-1 mx-auto max-w-5xl min-h-12 @tablet:min-h-0 leading-tight @tablet:leading-none relative"
  >
    <div class="shrink-0 w-4">
      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewbox="0 0 64 64"
      >
        <path fill="#DB3E1F" d="M32 10h32v4H32zM32 18h32v4H32zM32 26h32v4H32zM32 34h32v4H32zM0 42h64v4H0zM0 50h64v4H0z"/><path fill="#fff" d="M32 14h32v4H32zM32 22h32v4H32zM32 30h32v4H32z"/><path fill="#fff" d="M32 30h32v4H32zM0 46h64v4H0zM0 38h64v4H0z"/><path fill="#fff" d="M0 38h64v4H0z"/><path fill="#1D33B1" d="M0 10h32v28H0z"/><path fill="#fff" d="M4 14h4v4H4zM8 22h4v4H8zM4 30h4v4H4zM12 14h4v4h-4zM16 22h4v4h-4zM12 30h4v4h-4zM20 14h4v4h-4zM24 22h4v4h-4zM20 30h4v4h-4z"/>
      </svg>
    </div>
    <div class="@tablet:flex @tablet:gap-2 @tablet:items-center">
      <div>
        <p>An official website of the United States government</p>
      </div>
      <button
        type="button"
        data-scope="collapse" data-part="trigger"
        class="group text-blue-60v cursor-pointer inline-flex items-center underline @max-tablet:data-[state=open]:text-transparent focus:outline-0 @tablet:focus:outline-4 @tablet:focus:outline-blue-40v @max-tablet:after:absolute after:inset-0 focus:after:outline-4 focus:after:-outline-offset-4 focus:after:outline-blue-40v"
      >
        Here&#8217;s how you know
        <span class="icon-[material-symbols--expand-more] size-4 group-data-[state=open]:rotate-180"></span>
      </button>
    </div>
    <div
      aria-hidden="true"
      class="hidden group-data-[state=open]:flex @tablet:group-data-[state=open]:hidden items-center justify-center absolute right-0 top-0 bottom-0 bg-gray-10 size-12 pointer-events-none"
    >
      <span class="icon-[material-symbols--close] text-blue-60v size-6"></span>
    </div>
  </header>
  <div
    data-scope="collapse" data-part="content"
    class="py-6 px-3 grid @tablet:grid-cols-2 gap-6 mx-auto max-w-5xl not-data-[state=open]:hidden"
  >
    <div class="flex gap-2">
      <div
        aria-hidden="true"
        class="rounded-full border border-blue-50 text-blue-50 size-10 shrink-0 justify-center items-center flex"
      >
        <span class="icon-[material-symbols--account-balance] size-5 align-middle"></span>
      </div>
      <div>
        <p>
          <span class="font-bold">Official websites use .gov</span>
        </p>
        <p>
          A
          <span class="font-bold">.gov</span>
          website belongs to an official government organization in the United States.
        </p>
      </div>
    </div>
    <div class="flex gap-2">
      <div
        aria-hidden="true"
        class="rounded-full border border-green-40v text-green-40v size-10 shrink-0 justify-center items-center flex"
      >
        <span class="icon-[material-symbols--lock] size-5 align-middle"></span>
      </div>
      <div>
        <p>
          <span class="font-bold">Secure .gov websites use HTTPS</span>
        </p>
        <p>
          A
          <span class="font-bold">lock</span>
          (<span class="icon-[material-symbols--lock] size-4 align-middle"></span>) or
          <span class="font-bold">https://</span>
          means you've safely connected to the .gov website. Share sensitive information only on official, secure
          websites.
        </p>
      </div>
    </div>
  </div>
</section>

Component API

Initialization

Run after the component markup exists:

import { collapseInit } from '@uswds-tailwind/compat/collapse'


collapseInit()

Banner uses Collapse; there is no separate Banner initializer.

Anatomy

Set authored attributes in your HTML. The component manages generated attributes. Types describe HTML attribute values.

root

The banner section.

Attribute Type Description
data-scope "collapse" Authored. Identifies the component scope.
data-part "root" Authored. Identifies this part.
aria-label string Authored. Descriptive name for the banner landmark.
data-state "open" | "closed" Authored. Use "open" to expand initially; defaults to closed.
data-state "open" | "closed" Generated. "open" or "closed"; use for styling.

trigger

A native button with descriptive text.

Attribute Type Description
data-part "trigger" Authored. Identifies this part.
data-state "open" | "closed" Generated. "open" or "closed"; use for styling.
aria-expanded "true" | "false" Generated. Whether the content is expanded.
aria-controls ID reference Generated. ID of the associated content.

content

The expandable panel. Keep it inside the same root as its trigger.

Attribute Type Description
data-part "content" Authored. Identifies this part.
data-state "open" | "closed" Generated. "open" or "closed"; use for styling.
hidden boolean attribute Generated. Present when closed.

Configuration

Pass these JavaScript options to the instance constructor or factory. Authored configuration attributes are read during construction.

Option Description
defaultOpen Initial uncontrolled open state; overrides the authored initial state.
open Controlled open state. Your application must supply the updated value after a change callback.
id, ids Customize the instance identifier and generated element IDs.

Methods

Method Returns Description
open() Promise<void> Requests expansion.
close() Promise<void> Requests collapse.
destroy() void Stops the instance and clears its lookup. 
import { Collapse } from '@uswds-tailwind/compat/collapse'


const banner = Collapse.getOrCreateInstance(
  '[data-scope="collapse"][data-part="root"]',
)


await banner.open()

Promises settle the queued update, not CSS transitions. When using controlled state, your application must supply the updated value.

See initialization and cleanup.

Callbacks

Callback Payload When it runs
onOpenChange { open: boolean } An open-state change is requested.

Pass callbacks in instance options. These are JavaScript functions, not emitted DOM events.

Accessibility

  • Supply the landmark name, banner copy, and visible focus styles.
  • Use Enter or Space to activate the native button.