-
Notifications
You must be signed in to change notification settings - Fork 6
/
applying_brand.html
291 lines (265 loc) · 25.8 KB
/
applying_brand.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
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
<!DOCTYPE html>
<html lang="en" class="govuk-template">
<head>
<!-- Google Tag Manager -->
<script>(function (w, d, s, l, i) {
w[l] = w[l] || []; w[l].push({
'gtm.start':
new Date().getTime(), event: 'gtm.js'
}); var f = d.getElementsByTagName(s)[0],
j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src =
'https://www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', 'GTM-P6KWBKV');</script>
<!-- End Google Tag Manager -->
<meta charset="utf-8">
<title>Applying the brand | User Experience Guide</title>
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#0b0c0c">
<link rel="shortcut icon" size="16x16 32x32 48x48" href="/node_modules/nidirect-frontend/assets/images/favicon.ico"
type="image/x-icon">
<link rel="stylesheet" href="css/nidirect-all.css">
</head>
<body class="govuk-template__body">
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P6KWBKV" height="0" width="0"
style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<script>
document.body.className += ' js-enabled' + ('noModule' in HTMLScriptElement.prototype ? ' govuk-frontend-supported' : '');
</script>
<a href="#main-content" class="govuk-skip-link" data-module="govuk-skip-link">Skip to main content</a>
<header class="nidirect-header" role="banner" data-module="govuk-header">
<div class="govuk-width-container nidirect-header__container">
<div class="nidirect-header__logo">
<svg role="presentation" focusable="false" xmlns="http://www.w3.org/2000/svg" width="133" height="32"
viewbox="0 0 133 32">
<path fill="currentColor"
d="M0,8.93l7-.41a31.54,31.54,0,0,1,.62,4.64,10.06,10.06,0,0,1,3.31-3.43,8.4,8.4,0,0,1,4.34-1.15,6.65,6.65,0,0,1,3.49.83A5.74,5.74,0,0,1,21,12a9.17,9.17,0,0,1,.86,4V26.17a2.24,2.24,0,0,0,.5,1.63,2.48,2.48,0,0,0,1.71.47h.68a2,2,0,0,0,1.45-.47,1.93,1.93,0,0,0,.47-1.42V13.15A2.42,2.42,0,0,0,26,11.26a3,3,0,0,0-2.13-.65H22.17V8.93l8.36-.24V26.78a1.36,1.36,0,0,0,.35,1.06,1.92,1.92,0,0,0,1.3.44h2V30H14.54V28.28H15.6a3.34,3.34,0,0,0,2.07-.47,1.78,1.78,0,0,0,.59-1.42v-9A8.37,8.37,0,0,0,17.37,13a4.13,4.13,0,0,0-3.81-2,5.39,5.39,0,0,0-4.26,2,8,8,0,0,0-1.68,5.32v7.8a2.24,2.24,0,0,0,.5,1.63,2.56,2.56,0,0,0,1.74.47h1.42V30H.21V28.29H1.66a2.58,2.58,0,0,0,1.66-.44,1.38,1.38,0,0,0,.59-1.12V13.12a2.66,2.66,0,0,0-.74-2,2.88,2.88,0,0,0-2.1-.71H0Z" />
<path fill="currentColor" d="M24.29,3.75A3.66,3.66,0,1,1,28,7.41h0a3.65,3.65,0,0,1-3.66-3.66" />
<path fill="currentColor"
d="M46.61,24.3a3.89,3.89,0,0,1-3,1.51c-2.39,0-3.31-2-3.31-6.3,0-4.41.95-6.5,3.43-6.5a3.82,3.82,0,0,1,2.87,1.63ZM54,0H46.61V11.23a8.06,8.06,0,0,0-5.94-2.66c-4.73,0-8.13,4.26-8.13,11s3.25,10.85,8,10.85a9.25,9.25,0,0,0,6.09-2.54V30H54V0" />
<rect fill="currentColor" x="55.3" y="8.84" width="7.36" height="21.1" />
<path fill="currentColor"
d="M64,30h7.39V16c1.25-1,3.69-1.92,7.48-.53V8.37c-3.13.21-5.59.53-7.48,2.84V8.85H64Z" />
<path fill="currentColor"
d="M116.33,22.11c-.74,2.39-2.16,3.66-4,3.66-2.66,0-3.54-2.13-3.54-6.53,0-4.08.8-6,3.19-6,1.51,0,2.25,1,2.6,3.07l6.59-.5c-1.27-4.76-4.73-7.42-9.55-7.42-6.21,0-10.58,4.49-10.58,11.23s4.2,11,10.55,11a9.76,9.76,0,0,0,10-7.51Z" />
<path fill="currentColor"
d="M133,29.91v-5a9.67,9.67,0,0,1-1.86.24c-1.39,0-2-.59-2-1.92V13.49H133V8.85h-3.84V1.39H122V25c0,3.72,2.28,5.5,7,5.5a15,15,0,0,0,4.1-.57" />
<path fill="currentColor" d="M55.3,3.75A3.66,3.66,0,1,1,59,7.41,3.66,3.66,0,0,1,55.3,3.75h0" />
<path fill="currentColor"
d="M100.49,20.93c0-.44,0-.83,0-1.21,0-7.06-4.2-11.32-10.79-11.32S78.56,12.81,78.56,19.69c0,6.68,4.37,11,11.17,11,5,0,8.48-2,10.58-5.79L95.58,22.7a5,5,0,0,1-4.73,3c-2.84,0-4.52-1.68-4.52-4.61v-.12ZM89.76,12.77c2.1,0,3.34,1.51,3.34,4.14H86.54C86.6,14.19,87.72,12.77,89.76,12.77Z" />
</svg>
<span class="govuk-visually-hidden">(n i direct government services)</span>
</div>
</div>
<section aria-label="Service information" class="govuk-service-navigation"
data-module="govuk-service-navigation">
<div class="govuk-width-container">
<div class="govuk-service-navigation__container">
<span class="govuk-service-navigation__service-name">
<a href="#" class="govuk-service-navigation__link">
<a class="govuk-service-navigation__link" href="index.html">
User Experience Guide
</a>
</span>
<button type="button" class="govuk-service-navigation__toggle govuk-js-service-navigation-toggle" aria-controls="navigation" aria-expanded="true" hidden="">
Menu
</button>
<nav aria-label="Menu" class="govuk-service-navigation__wrapper">
<ul class="govuk-service-navigation__list" id="navigation">
<li class="govuk-service-navigation__item">
<a class="govuk-service-navigation__link" href="user_centred_design.html">
<strong class="govuk-service-navigation__active-fallback">User-centred design</strong>
</a>
</li>
<li class="govuk-service-navigation__item">
<a class="govuk-service-navigation__link" href="usability_testing.html" >
Usability testing
</a>
</li>
<li class="govuk-service-navigation__item govuk-service-navigation__item--active">
<a class="govuk-service-navigation__link" href="applying_brand.html" aria-current="true">
<strong class="govuk-service-navigation__active-fallback">Applying the brand</strong>
</a>
</li>
</ul>
</nav>
</div>
</div>
</section>
</header>
<div class="govuk-width-container">
<main class="govuk-main-wrapper " id="main-content" role="main">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">
Applying the brand
</h1>
<p class="govuk-body-l">
nidirect online transactional services should be built using the <a class="govuk-link"
href="https://design-system.service.gov.uk">GOV.UK design system</a> and be branded with the nidirect
header and footer.</p>
<h2 class="govuk-heading-l" id="inclduing-frontend">Including the GOV.UK Frontend and nidirect branding in
your projects</h2>
<p class="govuk-body">To start using the nidirect brand with GOV.UK styles, components and patterns, you’ll
need
to include GOV.UK Frontend and nidirect branding in your project.</p>
<p class="govuk-body">You can install both the GOV.UK Frontend and nidirect branding using node.js package
manager (npm).</p>
<p class="govuk-body">GOV.UK provide their own guidance for <a class="govuk-link"
href="https://frontend.design-system.service.gov.uk/#gov-uk-frontend">installing the GOV.UK Frontend using
npm.</a></p>
<p class="govuk-body">Once you have installed the GOV.UK Frontend, you should install the nidirect branding
found in the <a class="govuk-link" href="https://www.npmjs.com/package/nidirect-frontend">nidirect-frontend
package</a>.</p>
<p class="govuk-body">Guidance for installing the nidirect branding package can be found in the README.md file
in the <a class="govuk-link" href="https://github.com/dof-dss/nidirect-frontend">nidirect frontend
repository.</a></p>
<h2 class="govuk-heading-l" id="nidirect-robots">Robots meta tag</h2>
<p class="govuk-body">The starting point for an nidirect online transactional service is a page on the nidirect.gov.uk core site.
Content on transactional services should not be indexed by search engines. Each page must include a 'noindex, nofollow' instruction that should be inserted into the <span><head></span> element of the HTML code.</p>
<details class="govuk-details demo" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
nidirect robots instructional HTML code
</span>
</summary>
<div class="govuk-details__text">
<pre class="language-markup"> <code class="language-markup">
<span class="nidirect-codeLine"></span><span class="nidirect-element"><meta</span><span class="nidirect-selector"> name=</span><span class="nidirect-attribute">"robots"</span><span class="nidirect-selector"> content=</span><span class="nidirect-attribute">"no index, no follow"</span><span class="nidirect-element">/></span>
</code></pre>
</div>
</details>
<h2 class="govuk-heading-l" id="nidirect-branding">nidirect branding</h2>
<h3 class="govuk-heading-m" id="favicon-component">nidirect favicon</h3>
<p class="govuk-body">Each page must include the nidirect favicon. This should be inserted into the <span><head></span> element of the HTML code.</p>
<details class="govuk-details demo" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
nidirect favicon HTML code
</span>
</summary>
<div class="govuk-details__text">
<pre class="language-markup"><code class="language-markup">
<span class="nidirect-codeLine"></span><span class="nidirect-element"><link</span><span class="nidirect-selector"> rel=</span><span class="nidirect-attribute">"shortcut icon"</span><span class="nidirect-selector"> size=</span><span class="nidirect-attribute">"16x16 32x32 48x48"</span><span class="nidirect-selector"> href=</span><span class="nidirect-attribute">"/node_modules/nidirect-frontend/assets/images/favicon.ico"</span><span class="nidirect-selector"> type=</span><span class="nidirect-attribute">"image/x-icon"</span><span class="nidirect-element">></span></code>
</pre>
</div>
</details>
<h3 class="govuk-heading-m" id="header-component">nidirect header</h3>
<p class="govuk-body">The nidirect header shows users that they are on nidirect.gov.uk and which service they
are using. You must use the nidirect header at the top of each page in your application.</p>
<p class="govuk-body">The nidirect header includes the nidirect logo and the service name container. You will
need to update this section to show your application's name.</p>
<p class="govuk-body">Insert the nidirect header HTML code below the opening <span><body></span> tag of
your HTML file.</p>
<details class="govuk-details demo" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
nidirect header HTML code
</span>
</summary>
<div class="govuk-details__text">
<pre class="language-markup"> <code class="language-markup">
<span class="nidirect-codeLine"></span><span class="nidirect-element"><header</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"nidirect-header"</span> <span class="nidirect-selector">role</span>=<span class="nidirect-attribute">"banner"</span> <span class="nidirect-selector">data-module</span>=<span class="nidirect-attribute">"govuk-header"</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><div</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"govuk-width-container nidirect-header__container"</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><div</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"nidirect-header__logo"</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><svg</span> <span class="nidirect-selector">role</span>=<span class="nidirect-attribute">"presentation"</span> <span class="nidirect-selector">focusable</span>=<span class="nidirect-attribute">"false"</span> <span class="nidirect-selector">xmlns</span>=<span class="nidirect-attribute">"http://www.w3.org/2000/svg"</span> <span class="nidirect-selector">width</span>=<span class="nidirect-attribute">"133"</span> <span class="nidirect-selector">height</span>=<span class="nidirect-attribute">"32"</span><span class="nidirect-selector">viewbox</span>=<span class="nidirect-attribute">"0 0 133 32"</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><path</span> <span class="nidirect-selector">fill</span>=<span class="nidirect-attribute">"currentColor"</span> <span class="nidirect-selector">d</span>=<span class="nidirect-attribute">"M0,8.93l7-.41a31.54,31.54,0,0,1,.62,4.64,10.06,10.06,0,0,1,3.31-3.43,8.4,8.4,0,0,1,4.34-1.15,6.65,6.65,0,0,1,3.49.83A5.74,5.74,0,0,1,21,12a9.17,9.17,0,0,1,.86,4V26.17a2.24,2.24,0,0,0,.5,1.63,2.48,2.48,0,0,0,1.71.47h.68a2,2,0,0,0,1.45-.47,1.93,1.93,0,0,0,.47-1.42V13.15A2.42,2.42,0,0,0,26,11.26a3,3,0,0,0-2.13-.65H22.17V8.93l8.36-.24V26.78a1.36,1.36,0,0,0,.35,1.06,1.92,1.92,0,0,0,1.3.44h2V30H14.54V28.28H15.6a3.34,3.34,0,0,0,2.07-.47,1.78,1.78,0,0,0,.59-1.42v-9A8.37,8.37,0,0,0,17.37,13a4.13,4.13,0,0,0-3.81-2,5.39,5.39,0,0,0-4.26,2,8,8,0,0,0-1.68,5.32v7.8a2.24,2.24,0,0,0,.5,1.63,2.56,2.56,0,0,0,1.74.47h1.42V30H.21V28.29H1.66a2.58,2.58,0,0,0,1.66-.44,1.38,1.38,0,0,0,.59-1.12V13.12a2.66,2.66,0,0,0-.74-2,2.88,2.88,0,0,0-2.1-.71H0Z"</span> /<span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><path</span> <span class="nidirect-selector">fill</span>=<span class="nidirect-attribute">"currentColor"</span> <span class="nidirect-selector">d</span>=<span class="nidirect-attribute">"M24.29,3.75A3.66,3.66,0,1,1,28,7.41h0a3.65,3.65,0,0,1-3.66-3.66"</span> /<span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><path</span> <span class="nidirect-selector">fill</span>=<span class="nidirect-attribute">"currentColor"</span> <span class="nidirect-selector">d</span>=<span class="nidirect-attribute">"M46.61,24.3a3.89,3.89,0,0,1-3,1.51c-2.39,0-3.31-2-3.31-6.3,0-4.41.95-6.5,3.43-6.5a3.82,3.82,0,0,1,2.87,1.63ZM54,0H46.61V11.23a8.06,8.06,0,0,0-5.94-2.66c-4.73,0-8.13,4.26-8.13,11s3.25,10.85,8,10.85a9.25,9.25,0,0,0,6.09-2.54V30H54V0"</span> /<span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><rect</span> <span class="nidirect-selector">fill</span>=<span class="nidirect-attribute">"currentColor"</span> <span class="nidirect-selector">x</span>=<span class="nidirect-attribute">"55.3"</span> <span class="nidirect-selector">y</span>=<span class="nidirect-attribute">"8.84"</span> <span class="nidirect-selector">width</span>=<span class="nidirect-attribute">"7.36"</span> <span class="nidirect-selector">height</span>=<span class="nidirect-attribute">"21.1"</span> /<span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><path</span> <span class="nidirect-selector">fill</span>=<span class="nidirect-attribute">"currentColor"</span> <span class="nidirect-selector">d</span>=<span class="nidirect-attribute">"M64,30h7.39V16c1.25-1,3.69-1.92,7.48-.53V8.37c-3.13.21-5.59.53-7.48,2.84V8.85H64Z"</span> /<span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><path</span> <span class="nidirect-selector">fill</span>=<span class="nidirect-attribute">"currentColor"</span> <span class="nidirect-selector">d</span>=<span class="nidirect-attribute">"M116.33,22.11c-.74,2.39-2.16,3.66-4,3.66-2.66,0-3.54-2.13-3.54-6.53,0-4.08.8-6,3.19-6,1.51,0,2.25,1,2.6,3.07l6.59-.5c-1.27-4.76-4.73-7.42-9.55-7.42-6.21,0-10.58,4.49-10.58,11.23s4.2,11,10.55,11a9.76,9.76,0,0,0,10-7.51Z"</span> /<span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><path</span> <span class="nidirect-selector">fill</span>=<span class="nidirect-attribute">"currentColor"</span> <span class="nidirect-selector">d</span>=<span class="nidirect-attribute">"M133,29.91v-5a9.67,9.67,0,0,1-1.86.24c-1.39,0-2-.59-2-1.92V13.49H133V8.85h-3.84V1.39H122V25c0,3.72,2.28,5.5,7,5.5a15,15,0,0,0,4.1-.57"</span> /<span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><path</span> <span class="nidirect-selector">fill</span>=<span class="nidirect-attribute">"currentColor"</span> <span class="nidirect-selector">d</span>=<span class="nidirect-attribute">"M55.3,3.75A3.66,3.66,0,1,1,59,7.41,3.66,3.66,0,0,1,55.3,3.75h0"</span> /<span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><path</span> <span class="nidirect-selector">fill</span>=<span class="nidirect-attribute">"currentColor"</span> <span class="nidirect-selector">d</span>=<span class="nidirect-attribute">"M100.49,20.93c0-.44,0-.83,0-1.21,0-7.06-4.2-11.32-10.79-11.32S78.56,12.81,78.56,19.69c0,6.68,4.37,11,11.17,11,5,0,8.48-2,10.58-5.79L95.58,22.7a5,5,0,0,1-4.73,3c-2.84,0-4.52-1.68-4.52-4.61v-.12ZM89.76,12.77c2.1,0,3.34,1.51,3.34,4.14H86.54C86.6,14.19,87.72,12.77,89.76,12.77Z"</span> /<span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"></svg</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><span</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"govuk-visually-hidden"</span><span class="nidirect-element">></span>(n i direct government services)<span class="nidirect-element"></span</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"></div</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"></div</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span><span class="nidirect-element"></header</span><span class="nidirect-element">></span>
</code></pre>
</div>
</details>
<h3 class="govuk-heading-m" id="footer-component">nidirect footer</h3>
<p class="govuk-body">The footer provides copyright, licensing and other information about your service and
department. You must use the nidirect footer at the bottom of each page in your application.</p>
<p class="govuk-body">The footer for your application will need to be adapted to fit your needs. </p>
<p class="govuk-body"> You will need to change the links in the code provided to show the correct content for
your application.</p>
<p class="govuk-body">You will need to link to your own: </p>
<ul class="govuk-list govuk-list--bullet">
<li>privacy statement</li>
<li>cookies</li>
<li>accessibility statement</li>
</ul>
<p class="govuk-body">A link to terms and conditions may be necessary in some scenarios, but most applications
will outline these in the application process.</p>
<p class="govuk-body">Insert the nidirect footer HTML code above the closing <span></body></span> tag of
your HTML file.</p>
<details class="govuk-details demo" data-module="govuk-details">
<summary class="govuk-details__summary">
<span class="govuk-details__summary-text">
nidirect footer HTML code
</span>
</summary>
<div class="govuk-details__text">
<pre class="language-markup"> <code class="language-markup">
<span class="nidirect-codeLine"></span><span class="nidirect-element"><footer</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"nidirect-footer"</span> <span class="nidirect-selector">role</span>=<span class="nidirect-attribute">"contentinfo"</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><div</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"govuk-width-container"</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><h2</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"govuk-visually-hidden"</span><span class="nidirect-element">></span>Support links<span class="nidirect-element"></h2</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><ul</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"nidirect-footer__list"</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><li</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><a</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"govuk-link"</span> <span class="nidirect-selector">href</span>=<span class="nidirect-attribute">"#"</span> <span class="nidirect-selector">target</span>=<span class="nidirect-attribute">"blank"</span> <span class="nidirect-selector">rel</span>=<span class="nidirect-attribute">"nofollow"</span><span class="nidirect-element">></span>Privacy (opens in a new tab)<span class="nidirect-element"></a</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"></li</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><li</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><a</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"govuk-link"</span> <span class="nidirect-selector">href</span>=<span class="nidirect-attribute">"#"</span> <span class="nidirect-selector">target</span>=<span class="nidirect-attribute">"blank"</span> <span class="nidirect-selector">rel</span>=<span class="nidirect-attribute">"nofollow"</span><span class="nidirect-element">></span>Cookies (opens in a new tab)<span class="nidirect-element"></a</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"></li</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><li</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"><a</span> <span class="nidirect-selector">class</span>=<span class="nidirect-attribute">"govuk-link"</span> <span class="nidirect-selector">href</span>=<span class="nidirect-attribute">"#"</span> <span class="nidirect-selector">rel</span>=<span class="nidirect-attribute">"nofollow"</span><span class="nidirect-element">></span>Accessibility<span class="nidirect-element"></a</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"></li</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"></ul</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span> <span class="nidirect-element"></div</span><span class="nidirect-element">></span>
<span class="nidirect-codeLine"></span><span class="nidirect-element"></footer</span><span class="nidirect-element">></span></code></pre>
</div>
</details>
</div>
</div>
</main>
</div>
<footer class="nidirect-footer" role="contentinfo">
<div class="govuk-width-container">
<h2 class="govuk-visually-hidden">Support links</h2>
<ul class="nidirect-footer__list">
<li>
<a class="govuk-link" href="http://www.nidirect.gov.uk/crown-copyright" target="_blank" rel="nofollow">
© Crown copyright (opens in a new tab)
</a>
</li>
<li>
<a class="govuk-link" href="http://www.nidirect.gov.uk/terms-and-conditions" target="_blank" rel="nofollow">
Terms and conditions (opens in a new tab)
</a>
</li>
<li>
<a class="govuk-link" href="contact.html">
Contact us
</a>
</li>
<li>
<a class="govuk-link" href="accessibility.html">
Accessibility
</a>
</li>
</ul>
</div>
</footer>
<script type="module" src="/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js"></script>
<script type="module">
import {
initAll
} from '/node_modules/govuk-frontend/dist/govuk/govuk-frontend.min.js'
initAll()
</script>
</body>
</html>