-
Notifications
You must be signed in to change notification settings - Fork 0
/
multi-sign-in.html
62 lines (59 loc) · 3.52 KB
/
multi-sign-in.html
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
<main id="main-content">
<div class="bg-base-lightest">
<section class="grid-container usa-section">
<div class="grid-row margin-x-neg-205 margin-bottom-7 flex-justify-center">
<div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205 margin-bottom-7">
<h1 class="desktop:display-none font-sans-lg margin-bottom-4 tablet:margin-top-neg-3">A tagline that explains the benefit of creating an account.</h1>
<div class="bg-white padding-y-3 padding-x-5 border border-base-lighter">
<h1 class="margin-bottom-1">Sign in to your account</h1>
<div class="usa-prose">
<p class="margin-top-1">You can access your account by signing in with one of the options below.</p>
</div>
<p><a href="javascript:void()" class="usa-button usa-button--outline width-full">Sign in with Login.gov</a></p>
<p><a href="javascript:void()" class="usa-button usa-button--outline width-full">Sign in with Legacy system 1</a></p>
<p><a href="javascript:void()" class="usa-button usa-button--outline width-full">Sign in with Legacy system 2</a></p>
<div class="border-top border-base-lighter margin-top-6 padding-top-1">
<p><strong>Don’t have an account?</strong></p>
<p>If you don’t have an account already, sign up here:</p>
<p><a href="javascript:void()" class="usa-button width-full">Create Login.gov account</a></p>
</div>
</div>
</div>
<div class="grid-col-12 mobile-lg:grid-col-10 tablet:grid-col-8 desktop:grid-col-6 padding-x-205">
<h2 class="display-none desktop:display-block">A tagline that explains the benefit of creating an account.</h2>
<div class="usa-prose">
<p>Here’s space for a longer description to introduce 3-5 easily scannable bullet points. Note that on mobile, this text block will bump below the Create Account form.</p>
<section class="usa-graphic-list">
<div class="usa-graphic-list__row">
<div class="usa-media-block margin-y-2">
<img class="usa-media-block__img height-7 width-7" src="/assets/img/circle-gray-20.svg" alt="Alt text">
<div class="usa-media-block__body">
<p><strong>Value proposition 1:</strong> Vivamus nec velit sed leo scelerisque laoreet vestibulum.</p>
</div>
</div>
<div class="usa-media-block margin-y-2">
<img class="usa-media-block__img height-7 width-7" src="/assets/img/circle-gray-20.svg" alt="Alt text">
<div class="usa-media-block__body">
<p><strong>Value proposition 2:</strong> Ut ac dictum elit. Vivamus nec velit sed leo laoreet vestibulum.</p>
</div>
</div>
<div class="usa-media-block margin-y-2">
<img class="usa-media-block__img height-7 width-7" src="/assets/img/circle-gray-20.svg" alt="Alt text">
<div class="usa-media-block__body">
<p><strong>Value proposition 3:</strong> Vivamus nec velit sed leo scelerisque laoreet vestibulum.</p>
</div>
</div>
</div>
</section>
</div>
<div class="border-top border-base-lighter margin-top-3 padding-top-1">
<h2>Are you a federal employee?</h2>
<div class="usa-prose">
<p>If you are a federal employee or [other secondary user], please use [secondary Single Sign On (SSO)].</p>
<p><a class="usa-button usa-button--outline" href="javascript:void()">Launch secondary SSO</a></p>
</div>
</div>
</div>
</section>
</div>
</main>