-
Notifications
You must be signed in to change notification settings - Fork 0
/
governor-cta-footer.njk
163 lines (129 loc) · 6.58 KB
/
governor-cta-footer.njk
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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
---
layout: render-layout.njk
title: NYSDS Gov Footer example
url: nysds.dev/governor-cta-footer
domain: nysds.dev
facebook:
title: NYSDS Gov Footer example
description: NYSDS Gov Footer example
image: nygov-logo.png
twitter:
title: NYSDS Gov Footer example
description: NYSDS Gov Footer example
image: nygov-logo.png
---
<style>
{% include './css/gov-footer.css' %}
</style>
<div style="margin:50px;"><p> Key differences here are that the link for the logo has a focus and hover of #FACE00 because it needs some visual identifier, things are more centered at mobile and responsive below tablet, and any general width constraints are gone (Ex. no 1160px container issue).
</p><br>
<p>There are almost all min-widths removed, no relative positioning, no other weird constrains of containers. Things are properly grouped as they should be in wrappers or containers and tab order is preserved and logical.</p></div>
<p style="text-align: center; margin: 22px;font-weight:bold;"> governor unav footer with cta </p>
<footer>
<div class="nygov-footer"> <!-- footer container that has no 1160px restriction. relies on flex, justify, and align to center vertical and horizontal -->
<div class="nygov-logo-container"> <!-- container for the link / svg logo. I find that enclosing the interactive element helps with spacing/sizing in relation to other elements around it. -->
<a class="nygov-footer-logo" href="#"><span class="sr-only">Homepage</span> </a>
</div>
<div class="nygov-footer-link-and-cta"> <!-- container for the footer links and the cta if it exists. this allows you to control flex properties within this container to have the list and the cta change direction and align in respect to each other vs. anything else.-->
<div class="nygov-footer-links"> <!-- container for the list. again, enclosing the ul in a div seems to more uniformly apply block level properties -->
<ul class="nygov-footer-link-list">
<li>
<a href="https://www.ny.gov/agencies" data-once="nygovExitModal">Agencies</a>
</li>
<li>
<a href="https://www.ny.gov/mobileapps" data-once="nygovExitModal">App Directory</a>
</li>
<li>
<a href="https://www.ny.gov/counties" data-once="nygovExitModal">Counties</a>
</li>
<li>
<a href="https://www.ny.gov/events" data-once="nygovExitModal">Events</a>
</li>
<li>
<a href="https://www.ny.gov/programs" data-once="nygovExitModal">Programs</a>
</li>
<li>
<a href="https://www.ny.gov/services" data-once="nygovExitModal">Services</a>
</li>
</ul>
</div>
<div class="nygov-footer-cta"> <!-- container for the cta. this is where the logic would go to display/not display this based -->
<a class="nygov-footer-cta-link" href="#"> Register to Vote </a>
<div class="nygov-cta-text"> <!-- again, using an enclosing div might not be needed, this is for the cta text. -->
<p> Sign up online or download and mail in your application </p>
</div>
</div>
</div>
</div>
</footer>
<div style="height:68px"> </div>
<footer>
<div class="nygov-footer">
<div class="nygov-logo-container">
<a class="nygov-footer-logo" href="#"><span class="sr-only">Homepage</span> </a>
</div>
<div class="nygov-footer-link-and-cta">
<div class="nygov-footer-links">
<ul class="nygov-footer-link-list">
<li>
<a href="https://www.ny.gov/agencies" data-once="nygovExitModal">Agencies</a>
</li>
<li>
<a href="https://www.ny.gov/mobileapps" data-once="nygovExitModal">App Directory</a>
</li>
<li>
<a href="https://www.ny.gov/counties" data-once="nygovExitModal">Counties</a>
</li>
<li>
<a href="https://www.ny.gov/events" data-once="nygovExitModal">Events</a>
</li>
<li>
<a href="https://www.ny.gov/programs" data-once="nygovExitModal">Programs</a>
</li>
<li>
<a href="https://www.ny.gov/services" data-once="nygovExitModal">Services</a>
</li>
</ul>
</div>
<div class="nygov-footer-cta">
<a class="nygov-footer-cta-link" href="#"> Find COVID-19 Testing</a>
<div class="nygov-cta-text">
<p> Go to our easy testing center finder app and I just need some longer text here to show what it would look like. </p>
</div>
</div>
</div>
</div>
</footer>
<div style="height:80px"> </div>
<p style="text-align: center; margin: 22px; font-weight:bold;"> governor unav footer NO cta </p>
<footer>
<div class="nygov-footer">
<div class="nygov-logo-container">
<a class="nygov-footer-logo" href="#"><span class="sr-only">Homepage</span> </a>
</div>
<div class="nygov-footer-link-and-cta">
<div class="nygov-footer-links">
<ul class="nygov-footer-link-list">
<li>
<a href="https://www.ny.gov/agencies" data-once="nygovExitModal">Agencies</a>
</li>
<li>
<a href="https://www.ny.gov/mobileapps" data-once="nygovExitModal">App Directory</a>
</li>
<li>
<a href="https://www.ny.gov/counties" data-once="nygovExitModal">Counties</a>
</li>
<li>
<a href="https://www.ny.gov/events" data-once="nygovExitModal">Events</a>
</li>
<li>
<a href="https://www.ny.gov/programs" data-once="nygovExitModal">Programs</a>
</li>
<li>
<a href="https://www.ny.gov/services" data-once="nygovExitModal">Services</a>
</li>
</ul>
</div>
</div>
</div>
</footer>