-
Notifications
You must be signed in to change notification settings - Fork 225
/
index.njk
93 lines (75 loc) · 2.44 KB
/
index.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
---
title: Start pages
layout: layout-example.njk
stylesheets:
- related-items.css
---
{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
{% from "button/macro.njk" import govukButton %}
<div class="govuk-width-container">
{{ govukBreadcrumbs({
items: [
{
text: "Home",
href: "#"
},
{
text: "Section",
href: "#"
},
{
text: "Subsection"
}
]
}) }}
<div class="govuk-main-wrapper">
<div class="govuk-grid-row">
<div class="govuk-grid-column-two-thirds">
<h1 class="govuk-heading-xl">Service name goes here</h1>
<p class="govuk-body">Use this service to:</p>
<ul class="govuk-list govuk-list--bullet">
<li>do something</li>
<li>update your name, address or other details</li>
<li>do something else</li>
</ul>
<p class="govuk-body">Registering takes around 5 minutes.</p>
{{ govukButton({
text: "Start now",
href: "#",
classes: "govuk-button--start govuk-!-mt-r2 govuk-!-mb-r8"
}) }}
<h2 class="govuk-heading-m">Before you start</h2>
<p class="govuk-body">You can also <a class="govuk-link" href="#">register by post</a>.</p>
<p class="govuk-body">The online service is also available in <a class="govuk-link" href="#">Welsh (Cymraeg)</a>.</p>
<p class="govuk-body">You can’t register for this service if you’re in the UK illegally.</p>
</div>
<div class="govuk-grid-column-one-third">
<!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->
<aside class="app-related-items" role="complementary">
<h2 class="govuk-heading-m" id="subsection-title">
Subsection
</h2>
<nav role="navigation" aria-labelledby="subsection-title">
<ul class="govuk-list govuk-!-f-16">
<li>
<a href="#">
Related link
</a>
</li>
<li>
<a href="#">
Related link
</a>
</li>
<li>
<a href="#" class="govuk-!-w-bold">
More <span class="govuk-visually-hidden">in Subsection</span>
</a>
</li>
</ul>
</nav>
</aside>
</div>
</div>
</div>
</div>