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:

Collapse

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.

An official website of the United States government

Official websites use .mil

A .mil website belongs to an official U.S. Department of Defense organization.

Secure .mil websites use HTTPS

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

Twig

<div class="space-y-8">
	<section x-collapse 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" x-collapse:trigger class="text-blue-60v group-[[data-open]]:block focus:outline-none @tablet:focus:outline @tablet:focus:outline-4 @tablet:focus:outline-blue-40v cursor-pointer group after:absolute @tablet:after:relative after:inset-0 @tablet:inset-auto focus:after:outline @tablet:focus:after:outline-none 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 x-cloak x-collapse:content class="py-6 px-6 grid @tablet:grid-cols-2 gap-6 mx-auto max-w-5xl">
			<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>

	<section x-collapse 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" x-collapse:trigger class="text-blue-60v group-[[data-open]]:block focus:outline-none @tablet:focus:outline @tablet:focus:outline-4 @tablet:focus:outline-blue-40v cursor-pointer group after:absolute @tablet:after:relative after:inset-0 @tablet:inset-auto focus:after:outline @tablet:focus:after:outline-none 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 x-cloak x-collapse:content class="py-6 px-6 grid @tablet:grid-cols-2 gap-6 mx-auto max-w-5xl">
			<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 .mil</span>
					</p>
					<p>
						A
						<span class="font-bold">.mil</span>
						website belongs to an official U.S. Department of Defense organization.
					</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 .mil 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 .mil website. Share sensitive information only on official, secure websites.
					</p>
				</div>
			</div>
		</div>
	</section>

</div>

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.

Banner

Usage

Component API

Root

`<section>`

`x-collapse`

`aria-label`

Trigger

`<button>`

`x-collapse:trigger`

`aria-controls`

`aria-expanded`

Content

`x-collapse:content`

`id`

`hidden`