Banner
identityUSWDS-derivedinteractive
Official .gov/.mil banner identifying the site as a government website.
Reference: USWDS documentation ↗
Variants
Default
An official website of the United States government
<flex-banner class="flex-banner" aria-label="Official website of the United States government">
<div class="flex-banner__header">
<div class="flex-banner__inner">
<div class="flex-banner__header-text">
<p>
<img class="flex-banner__header-flag" src="/static/img/us_flag_small.png" alt="U.S. flag"/>An official website of the United States government
</p>
</div>
<button type="button" class="flex-banner__button" aria-expanded="false" aria-controls="banner-content"><span class="flex-banner__button-text">Here's how you know</span></button>
</div>
</div>
<div class="flex-banner__content" id="banner-content" hidden="">
<div class="flex-banner__guidance">
<div class="flex-banner__guidance-gov">
<div class="flex-banner__icon">
<img src="/static/img/icon-dot-gov.svg" alt="Dot gov" class="flex-banner__icon-img"/>
</div>
<div class="flex-banner__guidance-text">
<p><strong>Official websites use .gov</strong></p>
<p>A <strong>.gov</strong> website belongs to an official government organization in the United States.</p>
</div>
</div>
<div class="flex-banner__guidance-ssl">
<div class="flex-banner__icon">
<img src="/static/img/icon-https.svg" alt="HTTPS" class="flex-banner__icon-img"/>
</div>
<div class="flex-banner__guidance-text">
<p><strong>Secure .gov websites use HTTPS</strong></p>
<p>A <strong>lock</strong> or <strong>https://</strong> means you've safely connected to the .gov website.</p>
</div>
</div>
</div>
</div>
</flex-banner>Contract
Class mapping
| USWDS | Flex | Notes |
|---|---|---|
usa-banner | .flex-banner | Outer banner section |
usa-banner__header | .flex-banner__header | Banner header with flag and text |
usa-banner__inner | .flex-banner__inner | Inner container for header content |
usa-banner__button | .flex-banner__button | Expand/collapse button |
usa-banner__content | .flex-banner__content | Expandable guidance content |
usa-banner__guidance | .flex-banner__guidance-gov / .flex-banner__guidance-ssl | Guidance sections for .gov and HTTPS |
usa-banner__icon | .flex-banner__icon | Icon in guidance section |
Verified properties
background-colorcolorfont-familyfont-sizeline-heightIntentional differences
background-color: ours = var(--flex-gray-5), USWDS = #f0f0f0
We use semantic token that resolves to the same value
Behavior promises
- ✓ Button toggles hidden attribute on content panel
- ✓ Button toggles aria-expanded between true and false
- ✓ Guidance icons (dot-gov and HTTPS) render as visible images
Source CSS
/* flex-banner — USWDS Banner conformance
Official .gov/.mil site identity banner */
flex-banner {
display: block;
}
.flex-banner {
font-size: 0.87rem;
line-height: 1.5;
background-color: var(--flex-color-bg-subtle);
padding-block-end: 0;
}
/* --- Header --- */
.flex-banner__header {
color: var(--flex-color-text);
padding-block: 0.5rem;
font-size: 0.8rem;
min-block-size: 0;
}
.flex-banner__inner {
padding-inline: var(--flex-space-md);
display: flex;
flex-wrap: wrap;
align-items: center;
position: relative;
}
/* --- Header text --- */
.flex-banner__header-text {
margin-inline-end: 0.5rem;
& p {
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.8rem;
line-height: 1.1;
}
}
/* --- Flag image --- */
.flex-banner__header-flag {
inline-size: 1rem;
block-size: auto;
vertical-align: middle;
margin-inline-end: 0.25rem;
}
/* --- Button (expand/collapse) --- */
.flex-banner__button {
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
font-weight: 400;
text-align: start;
margin: 0;
color: var(--flex-color-link);
display: block;
font-size: 0.8rem;
block-size: auto;
line-height: 1.1;
padding: 0;
text-decoration: none;
inline-size: auto;
cursor: pointer;
&:hover {
text-decoration: underline;
color: var(--flex-color-link-hover);
}
&:focus {
outline: 0.25rem solid var(--flex-color-focus);
outline-offset: 0;
}
&::after {
content: "";
display: inline-block;
inline-size: 0.75rem;
block-size: 0.75rem;
margin-inline-start: 0.25rem;
vertical-align: middle;
background-color: var(--flex-color-link);
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
transition: transform 0.15s ease;
}
&[aria-expanded="true"]::after {
transform: rotate(180deg);
}
}
.flex-banner__button-text {
text-decoration: underline;
}
/* --- Expandable content --- */
.flex-banner__content {
padding-inline: var(--flex-space-md);
padding-block: 0.25rem 1rem;
background-color: transparent;
font-size: 0.87rem;
overflow: hidden;
color: var(--flex-color-text);
}
/* --- Guidance sections --- */
.flex-banner__guidance {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
}
.flex-banner__guidance-gov,
.flex-banner__guidance-ssl {
display: flex;
align-items: flex-start;
max-inline-size: 64ex;
flex: 1 1 40%;
min-inline-size: 200px;
& p {
margin-block: 0 0.25rem;
font-size: 0.87rem;
line-height: 1.5;
&:last-child {
margin-block-end: 0;
}
}
}
/* --- Icon in guidance --- */
.flex-banner__icon {
inline-size: 2.5rem;
flex-shrink: 0;
margin-inline-end: 0.5rem;
}
.flex-banner__icon-img {
inline-size: 2.5rem;
block-size: 2.5rem;
fill: var(--flex-color-accent);
}
.flex-banner__guidance-text p {
margin-block: 0 0.25rem;
font-size: 0.87rem;
line-height: 1.5;
&:last-child {
margin-block-end: 0;
}
}