View on Github
Banner
The banner identifies official websites of government organizations in the United States. It also helps visitors understand how to tell that a website is both official and secure.
.gov domains (Dark version)
Official websites use .gov
A .gov website belongs to an official government organization in the United States.
The site is secure.
A lock ( lock ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
Example HTML usage:
<!--Banner light-->
<section class="banner banner-dark" aria-label="Official government website">
<div class="accordion">
<div class="d-md-none">
<button
class="btn accordion-btn"
type="button"
data-toggle="collapse"
data-target="#gov-banner"
aria-expanded="false"
aria-controls="gov-banner"
>
<div class="banner-inner">
<img
class="banner-header-flag mr-2"
src="../assets/img/us_flag_small.png"
alt="U.S. flag"
/>
<div class="flex-fill">
<p class="banner-header-text">
An official website of the United States government
<span class="expand-btn"
>Here’s how you know
<i class="material-icons">keyboard_arrow_down</i>
</span>
</p>
</div>
<span class="close-btn">
<i class="material-icons">close</i>
</span>
</div>
</button>
</div>
<div class="d-none d-md-block">
<div class="banner-inner align-itens-center">
<img
class="banner-header-flag mr-2"
src="../assets/img/us_flag_small.png"
alt="U.S. flag"
/>
<p class="banner-header-text">
An official website of the United States government
</p>
<button
class="btn banner-btn ml-2"
type="button"
data-toggle="collapse"
data-target="#gov-banner"
aria-expanded="false"
aria-controls="gov-banner"
>
Here’s how you know
<i class="material-icons">keyboard_arrow_down</i>
</button>
</div>
</div>
<div class="banner-content collapse" id="gov-banner">
<div class="row no-gutters-sm">
<div class="col-md-6 media">
<img
class="banner-icon align-self-start"
src="../assets/img/icon-dot-gov.svg"
role="img"
alt="Dot gov"
/>
<div class="media-body">
<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>
<div class="col-md-6 media">
<img
class="banner-icon align-self-start"
src="../assets/img/icon-https.svg"
role="img"
alt="Https"
/>
<div class="media-body">
<p>
<strong>The site is secure.</strong>
<br />
A <strong>lock</strong> ( <i class="material-icons md-sm">lock</i> ) 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>
</div>
</div>
</section>.gov domains (Light version)
Official websites use .gov
A .gov website belongs to an official government organization in the United States.
The site is secure.
A lock ( lock ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.
Example HTML usage:
<!--Banner dark-->
<section class="banner" aria-label="Official government website">
<div class="accordion">
<div class="d-md-none">
<button
class="btn accordion-btn"
type="button"
data-toggle="collapse"
data-target="#gov-banner-light"
aria-expanded="false"
aria-controls="gov-banner-light"
>
<div class="banner-inner">
<img
class="banner-header-flag mr-2"
src="../assets/img/us_flag_small.png"
alt="U.S. flag"
/>
<div class="flex-fill">
<p class="banner-header-text">
An official website of the United States government
<span class="expand-btn"
>Here’s how you know
<i class="material-icons">keyboard_arrow_down</i>
</span>
</p>
</div>
<span class="close-btn">
<i class="material-icons">close</i>
</span>
</div>
</button>
</div>
<div class="d-none d-md-block">
<div class="banner-inner align-itens-center">
<img
class="banner-header-flag mr-2"
src="../assets/img/us_flag_small.png"
alt="U.S. flag"
/>
<p class="banner-header-text">
An official website of the United States government
</p>
<button
class="btn banner-btn ml-2"
type="button"
data-toggle="collapse"
data-target="#gov-banner-light"
aria-expanded="false"
aria-controls="gov-banner-light"
>
Here’s how you know
<i class="material-icons">keyboard_arrow_down</i>
</button>
</div>
</div>
<div class="banner-content collapse" id="gov-banner-light">
<div class="row no-gutters-sm">
<div class="col-md-6 media">
<img
class="banner-icon align-self-start"
src="../assets/img/icon-dot-gov.svg"
role="img"
alt="Dot gov"
/>
<div class="media-body">
<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>
<div class="col-md-6 media">
<img
class="banner-icon align-self-start"
src="../assets/img/icon-https.svg"
role="img"
alt="Https"
/>
<div class="media-body">
<p>
<strong>The site is secure.</strong>
<br />
A <strong>lock</strong> ( <i class="material-icons md-sm">lock</i> ) 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>
</div>
</div>
</section>