Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 | 1x 1x 1x 1x 1x 1x | import React, { useState } from 'react';
const GovBanner = () => {
const [hideContent, setHideContent] = useState(true);
return (
<section
className="qpp-c-gov-banner"
aria-label="Official government website"
>
<div className="qpp-c-gov-banner__expand-wrap">
<header
className={`qpp-c-gov-banner__header ${
!hideContent ? 'qpp-c-gov-banner__header--expanded' : ''
}`}
>
<div className="qpp-c-gov-banner__inner">
<div className="qpp-c-gov-banner__header-col1">
<img
className="qpp-c-gov-banner__header-flag"
src="/images/us_flag_small.png"
alt="U.S. flag"
/>
</div>
<div className="qpp-c-gov-banner__header-col2">
<p className="qpp-c-gov-banner__header-text">
An official website of the United States government
</p>
<p className="qpp-c-gov-banner__header-action" aria-hidden="true">
<span className="qpp-c-gov-banner__header-action-text qpp-c-button qpp-c-button--text">
Here’s how you know
</span>
<span className="qpp-c-gov-banner__header-action-icon qpp-c-button qpp-c-button--text"></span>
</p>
</div>
<button
className="qpp-c-gov-banner__button qpp-c-button qpp-c-button--icon-after qpp-c-button--text"
aria-expanded={!hideContent}
aria-controls="qpp-gov-banner-content"
onClick={() => setHideContent(!hideContent)}
>
<span className="qpp-c-gov-banner__button-text">
Here’s how you know
</span>
</button>
</div>
</header>
<div
className="qpp-c-gov-banner__content"
id="qpp-gov-banner-content"
hidden={hideContent}
>
<div className="qpp-u-display--flex qpp-u-flex-direction--column qpp-u-xs-flex-direction--row qpp-u-flex-gap--24">
<div className="qpp-c-gov-banner__guidance">
<img
className="qpp-c-gov-banner__icon"
src="/images/icon-dot-gov.svg"
role="img"
alt=""
aria-hidden="true"
/>
<div>
<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 className="qpp-c-gov-banner__guidance">
<img
className="qpp-c-gov-banner__icon"
src="/images/icon-https.svg"
role="img"
alt=""
aria-hidden="true"
/>
<div>
<p>
<strong> Secure .gov websites use HTTPS </strong>
<br />A <strong>lock</strong> (
<span className="icon-lock">
<svg
xmlns="http://www.w3.org/2000/svg"
width="52"
height="64"
viewBox="0 0 52 64"
className="qpp-c-gov-banner__lock-image "
role="img"
aria-labelledby="banner-lock-title-default banner-lock-description-default"
focusable="false"
>
<title id="banner-lock-title-default">Lock</title>
<desc id="banner-lock-description-default">
A locked padlock
</desc>
<path
fill="#000000"
fillRule="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>
</div>
</div>
</section>
);
};
export default GovBanner;
|