Skip to content

Implement expand/collapse banner per federal govt web requirements #715

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hauten merged 5 commits into from
Jul 30, 2025
Merged

Implement expand/collapse banner per federal govt web requirements #715

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7e6ecee
add html for banner
hauten Jul 30, 2025
20923dc
add css for banner
hauten Jul 30, 2025
cbe4c2d
add banner images
hauten Jul 30, 2025
74056c9
call new css
hauten Jul 30, 2025
9b3a34d
call new html
hauten Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions _includes/gov-banner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<section class="usa-banner" aria-label="Official website of the United States government">
<div class="usa-accordion container">
<div class="usa-banner__inner">
<img aria-hidden="true" class="usa-banner__header-flag" src="/assets/images/flag.png" alt="" />
<p class="usa-banner__header-text">An official website of the United States government</p>
<p class="usa-banner__header-action" aria-hidden="true">Here's how you know</p>
<button type="button" class="usa-accordion__button usa-banner__button" data-bs-toggle="collapse" data-bs-target="#gov-banner" aria-expanded="false" aria-controls="gov-banner">
<span class="usa-banner__button-text">Here’s how you know</span>
</button>
</div>
<div id="gov-banner" class="usa-banner__content usa-accordion__content row collapse" id="gov-banner">
<div class="usa-media-block__body col-12 col-md-6 col-lg-5">
<img class="usa-banner__icon usa-media-block__img" src="/assets/images/icon-dot-gov.svg" role="img" alt="" aria-hidden="true"/>
<p><strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States.</p>
</div>
<div class="usa-media-block__body col-12 col-md-6 col-lg-5">
<img class="usa-banner__icon usa-media-block__img" src="/assets/images/icon-https.svg" role="img" alt="" aria-hidden="true" />
<p><strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> (<span class="icon-lock">
<svg xmlns="http://www.w3.org/2000/svg" width="52" height="64" viewBox="0 0 52 64" class="usa-banner__lock-image" role="img" aria-labelledby="banner-lock-description-default" focusable="false">
<title id="banner-lock-title-default">Lock</title>
<desc id="banner-lock-description-default">Locked padlock icon</desc>
<path fill="#000000" fill-rule="evenodd" d="M26 0c10.493 0 19 8.507 19 19v9h3a4 4 0 0 1 4 4v28a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V32a4 4 0 0 1 4-4h3v-9C7 8.507 15.507 0 26 0zm0 8c-5.979 0-10.843 4.77-10.996 10.712L15 19v9h22v-9c0-6.075-4.925-11-11-11z" />
</svg>
</span>) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
</div>
</div>
</div>
</section>
1 change: 1 addition & 0 deletions _includes/head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
<link rel="shortcut icon" href="/assets/images/OS-icon-color.png">
<link rel="icon" href="/assets/images/logomark-software.svg" />
<link rel="stylesheet" href="/assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="/assets/css/gov-banner.css" />
<link rel="stylesheet" href="/assets/css/llnl-header.css" />
<link rel="stylesheet" href="/assets/css/utility.css" />
<link rel="stylesheet" href="/assets/css/components.css" />
Expand Down
1 change: 1 addition & 0 deletions _layouts/container-default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
{% include head.html %}
<body class="static-text">
{% include gov-banner.html %}
{% include header.html %}
{% include layout/hero.html title=page.title tag='h1' %}
<main class="container">
Expand Down
1 change: 1 addition & 0 deletions _layouts/default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
{% include head.html %}
<body class="static-text">
{% include gov-banner.html %}
{% include header.html %}
{% include layout/hero.html title=page.title tag='h1' %}
<div class="container">
Expand Down
1 change: 1 addition & 0 deletions _layouts/project-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<html lang="en">
{% include head.html %}
<body class="static-text">
{% include gov-banner.html %}
{% include header.html %}
<main>
{{ content }}
Expand Down
1 change: 1 addition & 0 deletions _layouts/redirect.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
<meta http-equiv="refresh" content="1;url={{ page.redirect }}"/>
<link rel="canonical" href="{{ page.redirect }}"/>
<body class="static-text">
{% include gov-banner.html %}
{% include header.html %}
{% include layout/hero.html title=page.title tag='h1' %}
<main class="container">
Expand Down
255 changes: 255 additions & 0 deletions assets/css/gov-banner.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,255 @@
/* gov banner */
.usa-banner {
background-color: #d9dfea;
width: 100%;
}

.usa-banner__content,
.usa-banner__header {
color: #52565c;
}

.usa-accordion {
padding-bottom: .25rem;
padding-top: .25rem;
}

.usa-accordion__content {
padding-bottom: 1.5rem;
padding-top: 1.5rem;
display: inline-flex;
}

.usa-media-block__body {
display: flex;
align-items: start;
}

.usa-banner__header-flag {
float: left;
width: 1rem;
margin-right: .5rem;
}

.usa-banner__header-text {
margin-bottom: 0;
margin-top: 0;
font-size: .75rem;
line-height: 1.2;
}

.usa-accordion__button.usa-banner__button {
border-style: none;
color: #21409a;
display: inline;
margin-left: .5rem;
}

.usa-banner__button {
border-style: none;
color: #21409a;
display: inline;
margin-left: .5rem;
background-color: transparent;
font-size: .75rem;
height: auto;
line-height: 1.2;
padding: 0;
text-decoration: none;
width: auto;
}

.usa-banner__button-text {
text-decoration: underline;
}

.usa-banner__icon {
width: 2.5rem;
margin-right: .5rem;
}

.usa-banner__lock-image {
height: 1.5ex;
width: 1.21875ex;
}

.site-banner .usa-banner__button::after, .site-banner .usa-banner__button:hover::after {
background-color: #2491ff;
}

@media (min-width: 40em) {
.usa-banner__button::after,
.usa-banner__button:hover::after,
.usa-banner__button[aria-expanded="true"]::after {
position: absolute;
}

.usa-banner__inner {
display: flex
}
}

@supports ((-webkit-mask:url()) or (mask:url())) {
.usa-banner__button::after,
.usa-banner__header-action::after {
background: 0 0;
background-color: rgba(0, 0, 0, 0);
-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>'),linear-gradient(transparent,transparent);
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>'),linear-gradient(transparent,transparent);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1rem 1rem;
mask-size: 1rem 1rem;
}
}

.usa-banner__button::after,
.usa-banner__header-action::after {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z"/></svg>');
background-repeat: no-repeat;
background-position: center center;
background-size: 1rem 1rem;
display: inline-block;
height: 1rem;
width: 1rem;
content: "";
vertical-align: middle;
margin-left: 2px;
}

@media (min-width: 40em) {
@supports ((-webkit-mask:url()) or (mask:url())) {
.usa-banner__button[aria-expanded="true"]::after {
background: 0 0;
background-color: rgba(0, 0, 0, 0);
-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>'),linear-gradient(transparent,transparent);
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>'),linear-gradient(transparent,transparent);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1rem 1rem;
mask-size: 1rem 1rem;
}
}
}

@media (min-width: 40em) {
.usa-banner__button[aria-expanded="true"]::after {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="m12 8-6 6 1.41 1.41L12 10.83l4.59 4.58L18 14z"/></svg>');
background-repeat: no-repeat;
background-position: center center;
background-size: 1rem 1rem;
display: inline-block;
height: 1rem;
width: 1rem;
content: "";
vertical-align: middle;
margin-left: 2px;
}
}

@media (max-width: 39.99em) {
.usa-banner__button[aria-expanded="true"]::before {
bottom: 0;
top: 0;
position: absolute;
right: 0;
background-color: #e6e6e6;
content: "";
display: block;
height: 3rem;
width: 3rem;
}

.usa-banner__button::after {
display: none;
}
}

@media (max-width: 39.99em) {
@supports ((-webkit-mask:url()) or (mask:url())) {
.usa-banner__button[aria-expanded="true"]::after {
background: 0 0;
background-color: rgba(0, 0, 0, 0);
background-color: #005ea2;
-webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'),linear-gradient(transparent,transparent);
mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>'),linear-gradient(transparent,transparent);
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1.5rem 1.5rem;
mask-size: 1.5rem 1.5rem;
}
}
}

@media (max-width: 39.99em) {
.usa-banner__button[aria-expanded="true"]::after {
bottom: 0;
top: 0;
position: absolute;
right: 0;
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>');
background-repeat: no-repeat;
background-position: center center;
background-size: 1.5rem 1.5rem;
display: inline-block;
height: 3rem;
width: 3rem;
content: "";
vertical-align: middle;
margin-left: 0;
}
}

.usa-banner {
position: relative;
min-height: 3rem;
}

.usa-accordion__button {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.usa-banner__button-text {
position: absolute;
left: -999em;
right: auto;
}

.usa-banner__header-action {
color: #21409a;
font-size: .75rem;
line-height: 1.2;
margin-bottom: 0;
margin-top: 2px;
text-decoration: underline;
}

@media (min-width: 40em) {
.usa-banner {
min-height: 0;
}

.usa-banner__button {
position: relative;
}

.usa-banner__button-text {
position: static;
display: inline;
}

.usa-banner__header-action {
display: none;
}
}
/* end gov banner */
Binary file added assets/images/flag.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/icon-dot-gov.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions assets/images/icon-https.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.