dpc-web/app/views/shared/_usa_banner.erb
<section class="ds-c-usa-banner" aria-label="Official government website">
<header class="ds-c-usa-banner__header">
<svg
aria-hidden="false"
class="ds-c-icon ds-c-icon--usa-flag ds-c-usa-banner__header-flag"
focusable="false"
id="icon-2"
viewBox="0 0 16 11"
xmlns="http://www.w3.org/2000/svg"
aria-labelledby="icon-2__title"
role="img"
>
<title id="icon-2__title">U.S. Flag</title>
<g fill="none" fill-rule="evenodd">
<path fill="#FFF" d="M0 0h16v11H0z"></path>
<path fill="#DB3E1F" d="M8 0h8v1H8z"></path>
<path fill="#1E33B1" d="M0 0h8v7H0z"></path>
<path
fill="#DB3E1F"
d="M8 2h8v1H8zM8 4h8v1H8zM8 6h8v1H8zM0 8h16v1H0zM0 10h16v1H0z"
></path>
<path
fill="#FFF"
d="M1 1h1v1H1zM2 3h1v1H2zM1 5h1v1H1zM3 1h1v1H3zM4 3h1v1H4zM3 5h1v1H3zM5 1h1v1H5zM6 3h1v1H6zM5 5h1v1H5z"
></path>
</g>
</svg>
<p class="ds-c-usa-banner__header-text">
<span>An official website of the United States government</span>
<button
class="ds-c-usa-banner__button"
aria-expanded="false"
aria-controls="gov-banner_1"
id="usa-banner__button"
>
<span class="ds-c-usa-banner__button-text">Here’s how you know</span>
<svg
aria-hidden="true"
class="ds-c-icon ds-c-icon--arrow ds-c-icon--arrow-down ds-c-usa-banner__action-icon"
focusable="false"
id="icon-3"
viewBox="0 0 320 512"
xmlns="http://www.w3.org/2000/svg"
direction="down"
>
<path
fill="currentColor"
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"
></path>
</svg>
</button>
</p>
</header>
<div class="ds-c-usa-banner__content" id="gov-banner_1" hidden="">
<div class="ds-c-usa-banner__guidance-container">
<div class="ds-c-usa-banner__guidance">
<svg
aria-hidden="true"
class="ds-c-icon ds-c-icon--building-circle ds-c-usa-banner__icon ds-c-icon-color--primary"
focusable="false"
id="icon-4"
viewBox="0 0 54 54"
xmlns="http://www.w3.org/2000/svg"
>
<g>
<path
class="ds-c-icon--building-circle__building"
fill="currentColor"
d="M36.5,20.91v1.36H35.15a0.71,0.71,0,0,1-.73.68H18.23a0.71,0.71,0,0,1-.73-0.68H16.14V20.91l10.18-4.07Zm0,13.57v1.36H16.14V34.48a0.71,0.71,0,0,1,.73-0.68h18.9A0.71,0.71,0,0,1,36.5,34.48ZM21.57,23.62v8.14h1.36V23.62h2.71v8.14H27V23.62h2.71v8.14h1.36V23.62h2.71v8.14h0.63a0.71,0.71,0,0,1,.73.68v0.68H17.5V32.45a0.71,0.71,0,0,1,.73-0.68h0.63V23.62h2.71Z"
></path>
<circle
class="ds-c-icon--building-circle__circle"
fill="none"
cx="50%"
cy="50%"
r="47%"
stroke="currentColor"
stroke-width="1"
></circle>
</g>
</svg>
<p class="ds-c-usa-banner__media-body">
<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="ds-c-usa-banner__guidance">
<svg
aria-hidden="true"
class="ds-c-icon ds-c-icon--lock-circle ds-c-usa-banner__icon"
focusable="false"
id="icon-5"
viewBox="0 0 54 54"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="currentColor"
d="M34.72,34.84a1.29,1.29,0,0,1-1.29,1.29H20.57a1.29,1.29,0,0,1-1.29-1.29V27.12a1.29,1.29,0,0,1,1.29-1.29H21V23.26a6,6,0,0,1,12,0v2.57h0.43a1.29,1.29,0,0,1,1.29,1.29v7.72Zm-4.29-9V23.26a3.43,3.43,0,0,0-6.86,0v2.57h6.86Z"
></path>
<circle
fill="none"
stroke="currentColor"
stroke-width="1"
cx="50%"
cy="50%"
r="47%"
></circle>
</svg>
<p class="ds-c-usa-banner__media-body">
<strong>Secure .gov websites use HTTPS</strong>
<br />
A
<strong>lock</strong>
<svg
aria-hidden="true"
class="ds-c-icon ds-c-icon--lock ds-c-usa-banner__lock-image"
focusable="false"
id="icon-6"
viewBox="0 0 52 64"
xmlns="http://www.w3.org/2000/svg"
>
<path
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"
></path>
</svg>
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>
<script defer type="text/javascript">
var usaBannerDropdownButton = document.getElementById("usa-banner__button");
var usaBannerDropdownIcon = document.getElementById("icon-3");
var usaBannerDropdown = document.getElementById("gov-banner_1");
var usaBannerDropDownFlag = false;
usaBannerDropdownButton.addEventListener("click", function(ev) {
if (usaBannerDropDownFlag === false) {
usaBannerDropdown.removeAttribute("hidden");
usaBannerDropdownIcon.classList.remove('ds-c-icon--arrow-down');
usaBannerDropdownIcon.classList.add('ds-c-icon--arrow-up');
usaBannerDropDownFlag = true;
} else {
usaBannerDropdown.setAttribute("hidden", "true");
usaBannerDropdownIcon.classList.remove('ds-c-icon--arrow-up');
usaBannerDropdownIcon.classList.add('ds-c-icon--arrow-down');
usaBannerDropDownFlag = false;
}
});
</script>