This repository has been archived by the owner on Jun 14, 2023. It is now read-only.
forked from canada-ca/design-system
-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
134 lines (133 loc) · 7.68 KB
/
test.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
---
altLangPage: https://conception.canada.ca/test.html
breadcrumbs:
- title: About Canada.ca
link: https://www.canada.ca/en/government/about.html
dateModified: 2023-02-20
layout: default
title: Canada.ca design system
---
Use this design system to provide a more usable, consistent and trustworthy online experience for people who access Government of Canada digital services.
<div class="row">
<section class="wb-eqht gc-drmt">
<div class="col-md-4">
<h3 class="h5"><a href="https://www.canada.ca/en/government/about/design-system/pattern-library.html">Template and design pattern library</a></h3>
<p>User-tested templates, page layouts, design patterns, guidelines, and code samples</p>
</div>
<div class="col-md-4">
<h3 class="h5"><a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-style-guide.html">Canada.ca Content Style guide</a></h3>
<p>Writing principles and techniques to make content clear and accessible to all</p>
</div>
<div class="col-md-4">
<h3 class="h5"><a href="https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification.html">Canada.ca Content and Information Architecture Specification</a></h3>
<p>Who has to use the Canada.ca design system, mandatory elements, how to organize content and design principles</p>
</div>
<div class="col-md-4">
<h3 class="h5"><a href="./continuous-improvement.html">Continuous improvement of web content </a></h3>
<p>Choosing what to improve, organizing and preparing your team, research and prototyping, designing content, monitoring and measuring success</p>
</div>
<div class="col-md-4">
<h3 class="h5"><a href="https://blog.canada.ca/">Canada.ca blog</a></h3>
<p>Evidence and insights on improving information and services on Canada.ca</p>
</div>
<div class="col-md-4">
<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>
</div>
</section>
</div>
<section>
<h2>Find guidance</h2>
<div class="row mrgn-tp-md">
<div class="col-md-3 small">
<details open>
<summary class="bg-primary text-center">Sources</summary>
<form class="wb-tables-filter mrgn-lft-md mrgn-rght-md" data-bind-to="design">
<div class="row">
<div class="form-group">
<fieldset>
<legend class="wb-inv"><span class="field-name">Sources</span></legend>
<ul class="list-unstyled">
<li class="checkbox">
<label for="dt_source1">
<input type="checkbox" id="dt_source1" name="dt_source" data-column="1" value="Blog post">
Blog post</label>
</li>
<li class="checkbox">
<label for="dt_source2">
<input type="checkbox" id="dt_source2" name="dt_source" data-column="1" value="Content Style Guide">
Content Style Guide</label>
</li>
<li class="checkbox">
<label for="dt_source3">
<input type="checkbox" id="dt_source3" name="dt_source" data-column="1" value="Content and Information Architecture Specification">
Content and Information Architecture Specification</label>
</li>
<li class="checkbox">
<label for="dt_source4">
<input type="checkbox" id="dt_source4" name="dt_source" data-column="1" value="Designing content">
Designing content</label>
</li>
<li class="checkbox">
<label for="dt_source5">
<input type="checkbox" id="dt_source5" name="dt_source" data-column="1" value="Research summary">
Research summary</label>
</li>
<li class="checkbox">
<label for="dt_source6">
<input type="checkbox" id="dt_source6" name="dt_source" data-column="1" value="Template and pattern library">
Template and pattern library</label>
</li>
</ul>
</fieldset>
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary full-width" aria-controls="dataset-filter">
<span class="fas fa-filter mrgn-rght-sm"></span> Filter
</button>
</div>
<div class="col-md-12 mrgn-tp-md">
<button type="reset" class="btn btn-default full-width">Reset to defaults</button>
</div>
</div>
</form>
</details>
</div>
<div class="col-md-9">
<div class="panel panel-default">
<div class="mrgn-tp-md mrgn-bttm-md">
<table class="wb-tables table table-striped small mrgn-tp-lg brdr-tp" aria-live="polite" id="design" data-page-length="25" data-wb-tables='{
"bDeferRender": true,
"ajaxSource": "./ajax/patterns-01-en.json",
"order": [0, "asc"],
"paging": true,
"info": true,
"columns": [
{ "data": "NAME", "className": "" },
{ "data": "SOURCE", "className": "" },
{ "data": "DESCRIPTION", "className": "", "orderable": false },
{ "data": "WHENTOUSE", "visible": false },
{ "data": "CATEGORY", "visible": false },
{ "data": "TYPE", "visible": false },
{ "data": "MANDATORY", "visible": false },
{ "data": "TANDP", "visible": false }
]
}'>
<thead>
<tr>
<th class="col-md-05">Name</th>
<th class="col-md-02">Source</th>
<th class="col-md-05">Description</th>
<th>When to use this pattern</th>
<th>Category</th>
<th>Type</th>
<th>Mandatory</th>
<th>Tempalates and patterns</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</section>