-
Notifications
You must be signed in to change notification settings - Fork 21
/
banner.js
79 lines (77 loc) · 2.62 KB
/
banner.js
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
import React from 'react';
import flag from 'uswds/img/us_flag_small.png';
import dotGov from 'uswds/img/icon-dot-gov.svg';
import https from 'uswds/img/icon-https.svg';
const Banner = () => (
<div className="usa-banner">
<div className="usa-accordion">
<header className="usa-banner__header">
<div className="usa-banner__inner">
<div className="grid-col-auto">
<img
className="usa-banner__header-flag"
src={flag}
alt="U.S. flag"
/>
</div>
<div className="grid-col-fill tablet:grid-col-auto">
<p className="usa-banner__header-text">
An official website of the United States government
</p>
<p className="usa-banner__header-action" aria-hidden="true">
Here’s how you know
</p>
</div>
<button
aria-controls="gov-banner"
aria-expanded={false}
className="usa-accordion__button usa-banner__button"
>
<span className="usa-banner__button-text">Here's how you know</span>
</button>
</div>
</header>
<div
id="gov-banner"
className="usa-accordion__content usa-banner__content"
hidden
>
<div className="grid-row grid-gap-lg">
<div className="usa-banner__guidance-gov tablet:grid-col-6">
<img
className="usa-banner__icon usa-media-block__img"
src={dotGov}
alt="Dot gov"
/>
<div className="usa-media-block__body">
<p>
<strong>The .gov means it’s official.</strong>
<br />
Federal government websites often end in .gov or .mil. Before
sharing sensitive information, make sure you’re on a federal
government site.
</p>
</div>
</div>
<div className="usa-banner__guidance-ssl tablet:grid-col-6">
<img
className="usa-banner__icon usa-media-block__img"
src={https}
alt="Https"
/>
<div className="usa-media-block__body">
<p>
<strong>The site is secure.</strong>
<br />
The <strong>https://</strong> ensures that you are connecting to
the official website and that any information you provide is
encrypted and transmitted securely.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
);
export default Banner;