Skip to main content
USWDS + Tailwind

Banner

Banners identify official websites of government organizations in the United States. They also help visitors understand whether a website is official and secure.

This component requires the following JavaScript plugins:

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-part="collapse-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="hidden group-[[data-open]]:flex @tablet:group-[[data-open]]:hidden items-center justify-center absolute right-0 inset-y-0 bg-gray-10 size-12"
    >
      <span class="icon-[material-symbols--close] text-blue-60v size-6"></span>
    </div>
    <div class="pt-0.5 @tablet:pt-0 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 gap-2 items-center">
      <div>
        <p>An official website of the United States government</p>
      </div>
      <button
        type="button"
        data-part="collapse-trigger"
        class="text-blue-60v group-[[data-open]]:block focus:outline-hidden @tablet:focus:outline-4 @tablet:focus:outline-blue-40v cursor-pointer group after:absolute @tablet:after:relative after:inset-0 @tablet:inset-auto @tablet:focus:after:outline-hidden focus:after:outline-4 focus:after:outline-blue-40v "
      >
        <div
          class="inline-flex items-center underline group-[[data-open]]:hidden @tablet:group-[[data-open]]:inline-flex"
        >
          <span>Here&#8217;s how you know</span>
          <span
            class="icon-[material-symbols--expand-more] size-4 align-middle group-aria-expanded:rotate-180"></span>
        </div>
      </button>
    </div>
  </header>
  <div
    data-part="collapse-content"
    class="py-6 px-6 @tablet:grid-cols-2 gap-6 mx-auto max-w-5xl not-[[data-state=open]]:hidden grid"
  >
    <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

A banner is composed using a x-collapse directive, using the following elements:

Root

  • <section>

    Using a <section> element ensures banners can be found by navigating by landmark when using assistive technologies.

  • x-collapse

    Custom Alpine directive that marks the Banner Root.

  • aria-label

    Type: string

    .gov websites should use the following aria-label:

    “Official website of the United States government”

Trigger

  • <button>

    Use a button element as a banner’s trigger.

  • x-collapse:trigger

    Custom Alpine directive that marks the Collapse Trigger.

    • aria-controls

    Type: string

    Accessibility attribute that links the Accordion Trigger control to it’s respective Accordion Content.

    Automatically handled with JavaScript.

  • aria-expanded

    Type: boolean

    Accessibility attribute that communicates whether an element is expanded or collapsed.

    Automatically handled with JavaScript.

Content

  • x-collapse:content

    Custom Alpine directive that marks the Collapse Content.

  • id

    Type: string

    Links the Collapse Content an it’s respective Collapse Trigger.

    Automatically handled with JavaScript.

  • hidden

    Type: boolean

    When true, content will be hidden. When false, content will be visible and hidden attribute will be removed.

    Automatically handled with JavaScript.