forked from canada-ca/design-system-systeme-conception
-
Notifications
You must be signed in to change notification settings - Fork 0
/
design-system-test-2.html
172 lines (160 loc) · 6.46 KB
/
design-system-test-2.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
<!DOCTYPE html>
<!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js" lang="en" dir="ltr"><!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
<title>Canada.ca design system - Canada.ca</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<!-- Meta data -->
<!-- Meta data-->
<!-- Load closure template scripts -->
<script type="text/javascript" src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_30/cdts/compiled/soyutils.js"></script>
<script type="text/javascript" src="https://www.canada.ca/etc/designs/canada/cdts/gcweb/v4_0_30/cdts/compiled/wet-en.js"></script>
<!-- Write closure template -->
<script type="text/javascript">
document.write(wet.builder.refTop({
}));
</script>
</head>
<body vocab="http://schema.org/" typeof="WebPage">
<div id="def-top">
</div>
<!-- Write closure template -->
<script type="text/javascript">
var defTop = document.getElementById("def-top");
defTop.outerHTML = wet.builder.top({
lngLinks: [{
lang: "fr",
href: "#",
text: "Français"
}],
breadcrumbs: [{
title: "Home",
href: "https://www.canada.ca/en.html"
},{
title: "About Canada.ca",
href: 'https://www.canada.ca/en/government/about.html'
},{
title: "Canada.ca design system",
href: 'https://www.canada.ca/en/government/about/design-system.html'
}],
search: true,
siteMenu: true,
showPreContent: true
});
</script>
<main role="main" property="mainContentOfPage" class="container">
<h1 property="name" id="wb-cont" dir="ltr">
Canada.ca design system</h1>
<div class="mwsgeneric-base-html parbase section">
<p>Use this design system to provide a more usable, consistent and trustworthy online experience for people who access Government of Canada digital services.</p>
<p>Start with user-tested templates, patterns and design principles to get going quickly and help save time and money.</p>
<section>
<h2>Canada.ca Content and Information Architecture Specification</h2>
<div class="row">
<section class="wb-eqht gc-drmt">
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/usage-canadaca-design.html">Who has to use this design system</a></h3>
<p>Which institutions must use the Canada.ca design system for their public-facing web presence</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/mandatory-elements.html">Mandatory elements</a></h3>
<p>What every institution must follow: colours, typography, header and footer, and mandatory templates</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/organizing-content.html">Organizing content</a></h3>
<p>User navigation, URL model and content types</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/templates.html">Designing content</a></h3>
<p>How to design and design principles</p>
</section>
</div>
</section>
</div>
<div class="row">
<div class="col-md-8">
<h2>Templates and guidance</h2>
</div>
</div>
<div class="row">
<section class="wb-eqht gc-drmt">
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/government/about/design-system/pattern-library.html">Templates and design patterns</a></h3>
<p>User-tested templates, page layouts, design patterns, guidelines, and code samples</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html">Web writing guidelines</a></h3>
<p>Writing principles and techniques from the <cite>Canada.ca Content Style guide</cite></p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/government/about/design-system/topic-tree-content-types.html">Topic tree and content types</a></h3>
<p>Canada.ca taxonomies: theme and topic structure and content types</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca//en/government/about/design-system/institutions-list.html">Institutions list</a></h3>
<p>List of Government of Canada institutions subject to the Canada.ca design system</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca//en/government/about/design-system/theme-lead-departments.html">Theme and audience lead departments</a></h3>
<p>Departments responsible for the 15 themes and 3 audience pages on Canada.ca</p>
</section>
</div>
<div class="col-md-4">
<section>
<h3 class="h5"><a href="https://www.canada.ca/en/government/about/design-system/latest-changes.html">Latest changes to the Canada.ca design system</a></h3>
<p>Latest changes to the design system, templates and patterns, style guide and other tools</p>
</section>
</div>
</section>
</div>
</section>
</div>
</div>
<div id="def-preFooter">
</div>
<!-- Write closure template -->
<script type="text/javascript">
var defPreFooter = document.getElementById("def-preFooter");
defPreFooter.outerHTML = wet.builder.preFooter({
dateModified: "April 1, 2019",
showPostContent: true,
showFeedback: true,
showShare: true
});
</script>
</main>
<div id="def-footer">
</div>
<!-- Write closure template -->
<script type="text/javascript">
var defFooter = document.getElementById("def-footer");
defFooter.outerHTML = wet.builder.footer({
showFooter: true,
showFeatures: true
});
</script>
<!-- Write closure template -->
<script type="text/javascript">
document.write(wet.builder.refFooter({
}));
</script>
</body>
</html>