Skip to content

Commit 7e6ecee

Browse files
committed
add html for banner
1 parent adf5e57 commit 7e6ecee

1 file changed

Lines changed: 28 additions & 0 deletions

File tree

_includes/gov-banner.html

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<section class="usa-banner" aria-label="Official website of the United States government">
2+
<div class="usa-accordion container">
3+
<div class="usa-banner__inner">
4+
<img aria-hidden="true" class="usa-banner__header-flag" src="/assets/images/flag.png" alt="" />
5+
<p class="usa-banner__header-text">An official website of the United States government</p>
6+
<p class="usa-banner__header-action" aria-hidden="true">Here's how you know</p>
7+
<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">
8+
<span class="usa-banner__button-text">Here’s how you know</span>
9+
</button>
10+
</div>
11+
<div id="gov-banner" class="usa-banner__content usa-accordion__content row collapse" id="gov-banner">
12+
<div class="usa-media-block__body col-12 col-md-6 col-lg-5">
13+
<img class="usa-banner__icon usa-media-block__img" src="/assets/images/icon-dot-gov.svg" role="img" alt="" aria-hidden="true"/>
14+
<p><strong>Official websites use .gov</strong><br />A <strong>.gov</strong> website belongs to an official government organization in the United States.</p>
15+
</div>
16+
<div class="usa-media-block__body col-12 col-md-6 col-lg-5">
17+
<img class="usa-banner__icon usa-media-block__img" src="/assets/images/icon-https.svg" role="img" alt="" aria-hidden="true" />
18+
<p><strong>Secure .gov websites use HTTPS</strong><br />A <strong>lock</strong> (<span class="icon-lock">
19+
<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">
20+
<title id="banner-lock-title-default">Lock</title>
21+
<desc id="banner-lock-description-default">Locked padlock icon</desc>
22+
<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" />
23+
</svg>
24+
</span>) or <strong>https://</strong> means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.</p>
25+
</div>
26+
</div>
27+
</div>
28+
</section>

0 commit comments

Comments
 (0)