-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Sprint 33 includes the following issues: Add outside link icon to all PDF's in Audit Repository page #460 Improve performance by adding explicit height and width to image elements #378 Add Smart Bulletin to the side navigation under Policies & Audits #531 Update List for Accessibility on american-security-drone-act #579 Remove extra chars from SB 001 #582
- Loading branch information
Showing
10 changed files
with
272 additions
and
181 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,99 +1,104 @@ | ||
--- | ||
// this component is for very top banner section that has USA flag, included in BaseLayout and used for all pages. | ||
import us_flag_small from "@assets/images/us_flag_small.png" | ||
import icon_dot_gov from "@assets/images/icon-dot-gov.svg" | ||
import icon_https from "@assets/images/icon-https.svg" | ||
import us_flag_small from "@assets/images/us_flag_small.png"; | ||
import icon_dot_gov from "@assets/images/icon-dot-gov.svg"; | ||
import icon_https from "@assets/images/icon-https.svg"; | ||
--- | ||
<section | ||
class="usa-banner" | ||
aria-label="Official website of the United States government" | ||
> | ||
<div class="usa-accordion"> | ||
|
||
<section | ||
class="usa-banner" | ||
aria-label="Official website of the United States government" | ||
> | ||
<div class="usa-accordion"> | ||
<header class="usa-banner__header"> | ||
<div class="usa-banner__inner"> | ||
<div class="usa-banner__inner"> | ||
<div class="grid-col-auto"> | ||
<img | ||
<img | ||
aria-hidden="true" | ||
class="usa-banner__header-flag" | ||
src={us_flag_small.src} | ||
alt="" | ||
/> | ||
/> | ||
</div> | ||
<div class="grid-col-fill tablet:grid-col-auto" aria-hidden="true"> | ||
<p class="usa-banner__header-text"> | ||
<p class="usa-banner__header-text"> | ||
An official website of the United States government | ||
</p> | ||
<p class="usa-banner__header-action">Here’s how you know</p> | ||
</p> | ||
<p class="usa-banner__header-action">Here’s how you know</p> | ||
</div> | ||
<button | ||
type="button" | ||
class="usa-accordion__button usa-banner__button" | ||
aria-expanded="false" | ||
aria-controls="gov-banner-default-default" | ||
type="button" | ||
class="usa-accordion__button usa-banner__button" | ||
aria-expanded="false" | ||
aria-controls="gov-banner-default-default" | ||
> | ||
<span class="usa-banner__button-text">Here’s how you know</span> | ||
<span class="usa-banner__button-text">Here’s how you know</span> | ||
</button> | ||
</div> | ||
</div> | ||
</header> | ||
<div | ||
class="usa-banner__content usa-accordion__content" | ||
id="gov-banner-default-default" | ||
class="usa-banner__content usa-accordion__content" | ||
id="gov-banner-default-default" | ||
> | ||
<div class="grid-row grid-gap-lg"> | ||
<div class="grid-row grid-gap-lg"> | ||
<div class="usa-banner__guidance tablet:grid-col-6"> | ||
<img | ||
<img | ||
class="usa-banner__icon usa-media-block__img" | ||
src={icon_dot_gov.src} | ||
role="img" | ||
alt="" | ||
aria-hidden="true" | ||
/> | ||
<div class="usa-media-block__body"> | ||
/> | ||
<div class="usa-media-block__body"> | ||
<p> | ||
<strong>Official websites use .gov</strong><br />A | ||
<strong>.gov</strong> website belongs to an official government | ||
organization in the United States. | ||
<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> | ||
<div class="usa-banner__guidance tablet:grid-col-6"> | ||
<img | ||
<img | ||
width="16" | ||
height="11" | ||
class="usa-banner__icon usa-media-block__img" | ||
src={ icon_https.src } | ||
src={icon_https.src} | ||
role="img" | ||
alt="" | ||
aria-hidden="true" | ||
/> | ||
<div class="usa-media-block__body"> | ||
/> | ||
<div class="usa-media-block__body"> | ||
<p> | ||
<strong>Secure .gov websites use HTTPS</strong><br />A | ||
<strong>lock</strong> ( | ||
<span class="icon-lock" | ||
<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" | ||
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 | ||
<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. | ||
></path> | ||
</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> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</section> | ||
</div> | ||
</section> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.