@qhealth-design-system/core 1.16.5 → 1.17.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (47) hide show
  1. package/.storybook/assets/storybook.css +1 -1
  2. package/.storybook/globals.js +10 -0
  3. package/CHANGELOG.md +4 -0
  4. package/package.json +1 -1
  5. package/src/components/_global/css/cta_links/component.scss +107 -14
  6. package/src/components/_global/css/forms/control_inputs/component.scss +65 -77
  7. package/src/components/_global/css/link_columns/component.scss +2 -2
  8. package/src/components/_global/html/head.html +4 -57
  9. package/src/components/_global/html/scripts.html +0 -2
  10. package/src/components/_global/js/cta_links/global.js +33 -0
  11. package/src/components/_global/js/global.js +175 -138
  12. package/src/components/_global/js/tabs/global.js +6 -2
  13. package/src/components/banner_advanced/html/component.hbs +1 -1
  14. package/src/components/breadcrumbs/js/global.js +17 -4
  15. package/src/components/card_feature/html/component.hbs +1 -1
  16. package/src/components/card_multi_action/html/component.hbs +1 -1
  17. package/src/components/card_single_action/css/component.scss +38 -47
  18. package/src/components/card_single_action/html/component.hbs +1 -1
  19. package/src/components/code/css/component.scss +72 -73
  20. package/src/components/code/html/component.hbs +62 -19
  21. package/src/components/code/js/global.js +102 -86
  22. package/src/components/footer/css/component.scss +2 -4
  23. package/src/components/footer/html/component.hbs +11 -8
  24. package/src/components/header/css/component.scss +12 -12
  25. package/src/components/header/html/component.hbs +3 -3
  26. package/src/components/header/js/global.js +58 -65
  27. package/src/components/in_page_navigation/js/global.js +34 -31
  28. package/src/components/internal_navigation/js/global.js +13 -3
  29. package/src/components/main_navigation/css/component.scss +79 -13
  30. package/src/components/main_navigation/html/component.hbs +5 -5
  31. package/src/components/main_navigation/js/global.js +94 -115
  32. package/src/components/mega_main_navigation/css/component.scss +27 -14
  33. package/src/components/mega_main_navigation/html/component.hbs +5 -5
  34. package/src/components/mega_main_navigation/js/global.js +50 -55
  35. package/src/components/page_alert/css/component.scss +141 -179
  36. package/src/data/site.json +3 -3
  37. package/src/html/component-card_feature.html +74 -487
  38. package/src/html/component-card_single_action.html +219 -1175
  39. package/src/html/component-forms.html +202 -67
  40. package/src/stories/Checkboxes/Checkboxes.js +41 -0
  41. package/src/stories/Checkboxes/Checkboxes.mdx +45 -0
  42. package/src/stories/Checkboxes/Checkboxes.stories.js +209 -0
  43. package/src/stories/RadioButtons/RadioButtons.js +41 -0
  44. package/src/stories/RadioButtons/RadioButtons.mdx +45 -0
  45. package/src/stories/RadioButtons/RadioButtons.stories.js +209 -0
  46. package/src/styles/imports/mixins.scss +5 -43
  47. package/src/styles/imports/variables.scss +3 -2
package/src/html/component-card_single_action.html CHANGED
@@ -39,331 +39,55 @@
39
39
  status_changed_userid: "54",
40
40
  thumbnail: "",
41
41
  attributes: {
42
- name: {
43
- attrid: "685",
44
- type: "text",
45
- value: "Design System",
46
- is_contextable: true,
47
- use_default: true,
48
- },
49
- not_found_page_cache_globally: {
50
- attrid: "686",
51
- type: "boolean",
52
- value: false,
53
- is_contextable: false,
54
- use_default: true,
55
- },
56
- available_conditions: {
57
- attrid: "687",
58
- type: "serialise",
59
- value: [],
60
- is_contextable: false,
61
- use_default: true,
62
- },
42
+ name: { attrid: "685", type: "text", value: "Design System", is_contextable: true, use_default: true },
43
+ not_found_page_cache_globally: { attrid: "686", type: "boolean", value: false, is_contextable: false, use_default: true },
44
+ available_conditions: { attrid: "687", type: "serialise", value: [], is_contextable: false, use_default: true },
63
45
  },
64
46
  metadata: {
65
- displayInPageNav: {
66
- value: "",
67
- fieldid: "808",
68
- type: "metadata_field_select",
69
- is_contextable: true,
70
- default_value: true,
71
- use_default: true,
72
- },
73
- inPageNav_heading: {
74
- value: "On this page",
75
- fieldid: "809",
76
- type: "metadata_field_text",
77
- is_contextable: true,
78
- default_value: true,
79
- use_default: true,
80
- },
81
- inPageNav_headingType: {
82
- value: "h2",
83
- fieldid: "810",
84
- type: "metadata_field_select",
85
- is_contextable: true,
86
- default_value: true,
87
- use_default: true,
88
- },
89
- siteTitle: {
90
- value: "Queensland Health Design System",
91
- fieldid: "166",
92
- type: "metadata_field_text",
93
- is_contextable: true,
94
- default_value: false,
95
- use_default: true,
96
- },
97
- siteLogo: {
98
- value: "169",
99
- fieldid: "127",
100
- type: "metadata_field_related_asset",
101
- is_contextable: true,
102
- default_value: false,
103
- use_default: true,
104
- },
105
- siteFavicon: {
106
- value: "106",
107
- fieldid: "128",
108
- type: "metadata_field_related_asset",
109
- is_contextable: true,
110
- default_value: false,
111
- use_default: true,
112
- },
113
- siteAppleTouch: {
114
- value: "106",
115
- fieldid: "129",
116
- type: "metadata_field_related_asset",
117
- is_contextable: true,
118
- default_value: false,
119
- use_default: true,
120
- },
121
- sitePreHeaderLogo: {
122
- value: "170",
123
- fieldid: "171",
124
- type: "metadata_field_related_asset",
125
- is_contextable: true,
126
- default_value: false,
127
- use_default: true,
128
- },
129
- sitePreHeaderText: {
130
- value: "digital.qld.gov.au",
131
- fieldid: "167",
132
- type: "metadata_field_text",
133
- is_contextable: true,
134
- default_value: false,
135
- use_default: true,
136
- },
137
- sitePreHeaderURL: {
138
- value: "http://www.digital.qld.gov.au",
139
- fieldid: "168",
140
- type: "metadata_field_text",
141
- is_contextable: true,
142
- default_value: false,
143
- use_default: true,
144
- },
145
- showHomeIcon: {
146
- value: "true",
147
- fieldid: "481",
148
- type: "metadata_field_select",
149
- is_contextable: true,
150
- default_value: true,
151
- use_default: true,
152
- },
153
- siteRepository: {
154
- value: "164",
155
- fieldid: "213",
156
- type: "metadata_field_related_asset",
157
- is_contextable: true,
158
- default_value: false,
159
- use_default: true,
160
- },
161
- footerLinks: {
162
- value: '["186","194","198","458","676"]',
163
- fieldid: "715",
164
- type: "metadata_field_related_asset",
165
- is_contextable: true,
166
- default_value: false,
167
- use_default: true,
168
- },
169
- footerCopyrightMessage: {
170
- value: "© The State of Queensland 2020",
171
- fieldid: "722",
172
- type: "metadata_field_text",
173
- is_contextable: true,
174
- default_value: true,
175
- use_default: true,
176
- },
177
- footerCopyrightLink: {
178
- value: "206",
179
- fieldid: "723",
180
- type: "metadata_field_related_asset",
181
- is_contextable: true,
182
- default_value: false,
183
- use_default: true,
184
- },
185
- footerCTAHeading: {
186
- value: "Help us improve",
187
- fieldid: "724",
188
- type: "metadata_field_text",
189
- is_contextable: true,
190
- default_value: false,
191
- use_default: true,
192
- },
193
- footerCTALead: {
194
- value: "We are always looking for ways to improve our website.",
195
- fieldid: "725",
196
- type: "metadata_field_text",
197
- is_contextable: true,
198
- default_value: false,
199
- use_default: true,
200
- },
201
- footerCTALink: {
202
- value: "186",
203
- fieldid: "726",
204
- type: "metadata_field_related_asset",
205
- is_contextable: true,
206
- default_value: false,
207
- use_default: true,
208
- },
47
+ displayInPageNav: { value: "", fieldid: "808", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
48
+ inPageNav_heading: { value: "On this page", fieldid: "809", type: "metadata_field_text", is_contextable: true, default_value: true, use_default: true },
49
+ inPageNav_headingType: { value: "h2", fieldid: "810", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
50
+ siteTitle: { value: "Queensland Health Design System", fieldid: "166", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
51
+ siteLogo: { value: "169", fieldid: "127", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
52
+ siteFavicon: { value: "106", fieldid: "128", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
53
+ siteAppleTouch: { value: "106", fieldid: "129", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
54
+ sitePreHeaderLogo: { value: "170", fieldid: "171", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
55
+ sitePreHeaderText: { value: "digital.qld.gov.au", fieldid: "167", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
56
+ sitePreHeaderURL: { value: "http://www.digital.qld.gov.au", fieldid: "168", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
57
+ showHomeIcon: { value: "true", fieldid: "481", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
58
+ siteRepository: { value: "164", fieldid: "213", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
59
+ footerLinks: { value: '["186","194","198","458","676"]', fieldid: "715", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
60
+ footerCopyrightMessage: { value: "© The State of Queensland 2020", fieldid: "722", type: "metadata_field_text", is_contextable: true, default_value: true, use_default: true },
61
+ footerCopyrightLink: { value: "206", fieldid: "723", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
62
+ footerCTAHeading: { value: "Help us improve", fieldid: "724", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
63
+ footerCTALead: { value: "We are always looking for ways to improve our website.", fieldid: "725", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
64
+ footerCTALink: { value: "186", fieldid: "726", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
209
65
  },
210
66
  },
211
67
  metadata: {
212
- displayInPageNav: {
213
- value: "",
214
- fieldid: "808",
215
- type: "metadata_field_select",
216
- is_contextable: true,
217
- default_value: true,
218
- use_default: true,
219
- },
220
- inPageNav_heading: {
221
- value: "On this page",
222
- fieldid: "809",
223
- type: "metadata_field_text",
224
- is_contextable: true,
225
- default_value: true,
226
- use_default: true,
227
- },
228
- inPageNav_headingType: {
229
- value: "h2",
230
- fieldid: "810",
231
- type: "metadata_field_select",
232
- is_contextable: true,
233
- default_value: true,
234
- use_default: true,
235
- },
236
- siteTitle: {
237
- value: "Queensland Health Design System",
238
- fieldid: "166",
239
- type: "metadata_field_text",
240
- is_contextable: true,
241
- default_value: false,
242
- use_default: true,
243
- },
244
- siteLogo: {
245
- value: "169",
246
- fieldid: "127",
247
- type: "metadata_field_related_asset",
248
- is_contextable: true,
249
- default_value: false,
250
- use_default: true,
251
- },
252
- siteFavicon: {
253
- value: "106",
254
- fieldid: "128",
255
- type: "metadata_field_related_asset",
256
- is_contextable: true,
257
- default_value: false,
258
- use_default: true,
259
- },
260
- siteAppleTouch: {
261
- value: "106",
262
- fieldid: "129",
263
- type: "metadata_field_related_asset",
264
- is_contextable: true,
265
- default_value: false,
266
- use_default: true,
267
- },
268
- sitePreHeaderLogo: {
269
- value: "170",
270
- fieldid: "171",
271
- type: "metadata_field_related_asset",
272
- is_contextable: true,
273
- default_value: false,
274
- use_default: true,
275
- },
276
- sitePreHeaderText: {
277
- value: "digital.qld.gov.au",
278
- fieldid: "167",
279
- type: "metadata_field_text",
280
- is_contextable: true,
281
- default_value: false,
282
- use_default: true,
283
- },
284
- sitePreHeaderURL: {
285
- value: "http://www.digital.qld.gov.au",
286
- fieldid: "168",
287
- type: "metadata_field_text",
288
- is_contextable: true,
289
- default_value: false,
290
- use_default: true,
291
- },
292
- showHomeIcon: {
293
- value: "true",
294
- fieldid: "481",
295
- type: "metadata_field_select",
296
- is_contextable: true,
297
- default_value: true,
298
- use_default: true,
299
- },
300
- siteRepository: {
301
- value: "164",
302
- fieldid: "213",
303
- type: "metadata_field_related_asset",
304
- is_contextable: true,
305
- default_value: false,
306
- use_default: true,
307
- },
308
- footerLinks: {
309
- value: '["186","194","198","458","676"]',
310
- fieldid: "715",
311
- type: "metadata_field_related_asset",
312
- is_contextable: true,
313
- default_value: false,
314
- use_default: true,
315
- },
316
- footerCopyrightMessage: {
317
- value: "© The State of Queensland 2020",
318
- fieldid: "722",
319
- type: "metadata_field_text",
320
- is_contextable: true,
321
- default_value: true,
322
- use_default: true,
323
- },
324
- footerCopyrightLink: {
325
- value: "206",
326
- fieldid: "723",
327
- type: "metadata_field_related_asset",
328
- is_contextable: true,
329
- default_value: false,
330
- use_default: true,
331
- },
332
- footerCTAHeading: {
333
- value: "Help us improve",
334
- fieldid: "724",
335
- type: "metadata_field_text",
336
- is_contextable: true,
337
- default_value: false,
338
- use_default: true,
339
- },
340
- footerCTALead: {
341
- value: "We are always looking for ways to improve our website.",
342
- fieldid: "725",
343
- type: "metadata_field_text",
344
- is_contextable: true,
345
- default_value: false,
346
- use_default: true,
347
- },
348
- footerCTALink: {
349
- value: "186",
350
- fieldid: "726",
351
- type: "metadata_field_related_asset",
352
- is_contextable: true,
353
- default_value: false,
354
- use_default: true,
355
- },
68
+ displayInPageNav: { value: "", fieldid: "808", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
69
+ inPageNav_heading: { value: "On this page", fieldid: "809", type: "metadata_field_text", is_contextable: true, default_value: true, use_default: true },
70
+ inPageNav_headingType: { value: "h2", fieldid: "810", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
71
+ siteTitle: { value: "Queensland Health Design System", fieldid: "166", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
72
+ siteLogo: { value: "169", fieldid: "127", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
73
+ siteFavicon: { value: "106", fieldid: "128", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
74
+ siteAppleTouch: { value: "106", fieldid: "129", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
75
+ sitePreHeaderLogo: { value: "170", fieldid: "171", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
76
+ sitePreHeaderText: { value: "digital.qld.gov.au", fieldid: "167", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
77
+ sitePreHeaderURL: { value: "http://www.digital.qld.gov.au", fieldid: "168", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
78
+ showHomeIcon: { value: "true", fieldid: "481", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
79
+ siteRepository: { value: "164", fieldid: "213", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
80
+ footerLinks: { value: '["186","194","198","458","676"]', fieldid: "715", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
81
+ footerCopyrightMessage: { value: "© The State of Queensland 2020", fieldid: "722", type: "metadata_field_text", is_contextable: true, default_value: true, use_default: true },
82
+ footerCopyrightLink: { value: "206", fieldid: "723", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
83
+ footerCTAHeading: { value: "Help us improve", fieldid: "724", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
84
+ footerCTALead: { value: "We are always looking for ways to improve our website.", fieldid: "725", type: "metadata_field_text", is_contextable: true, default_value: false, use_default: true },
85
+ footerCTALink: { value: "186", fieldid: "726", type: "metadata_field_related_asset", is_contextable: true, default_value: false, use_default: true },
356
86
  },
357
87
  children: [
358
88
  { asset_name: "Get started", asset_assetid: "186" },
359
- {
360
- asset_name: "Brand guidelines",
361
- asset_assetid: "190",
362
- },
363
- {
364
- asset_name: "Content guidelines",
365
- asset_assetid: "194",
366
- },
89
+ { asset_name: "Brand guidelines", asset_assetid: "190" },
90
+ { asset_name: "Content guidelines", asset_assetid: "194" },
367
91
  { asset_name: "Components", asset_assetid: "198" },
368
92
  { asset_name: "Examples", asset_assetid: "202" },
369
93
  { asset_name: "Support", asset_assetid: "206" },
@@ -390,162 +114,36 @@
390
114
  status_changed_userid: "312",
391
115
  thumbnail: "",
392
116
  attributes: {
393
- name: {
394
- attrid: "631",
395
- type: "text",
396
- value: "Links",
397
- is_contextable: true,
398
- use_default: true,
399
- },
400
- short_name: {
401
- attrid: "632",
402
- type: "text",
403
- value: "Links",
404
- is_contextable: true,
405
- use_default: true,
406
- },
407
- available_conditions: {
408
- attrid: "633",
409
- type: "serialise",
410
- value: [],
411
- is_contextable: false,
412
- use_default: true,
413
- },
414
- conditions: {
415
- attrid: "634",
416
- type: "serialise",
417
- value: [],
418
- is_contextable: true,
419
- use_default: true,
420
- },
117
+ name: { attrid: "631", type: "text", value: "Links", is_contextable: true, use_default: true },
118
+ short_name: { attrid: "632", type: "text", value: "Links", is_contextable: true, use_default: true },
119
+ available_conditions: { attrid: "633", type: "serialise", value: [], is_contextable: false, use_default: true },
120
+ conditions: { attrid: "634", type: "serialise", value: [], is_contextable: true, use_default: true },
421
121
  },
422
122
  metadata: {
423
- description: {
424
- value: "",
425
- fieldid: "132",
426
- type: "metadata_field_text",
427
- is_contextable: true,
428
- default_value: true,
429
- use_default: true,
430
- },
431
- pageType: {
432
- value: "landing",
433
- fieldid: "680",
434
- type: "metadata_field_select",
435
- is_contextable: true,
436
- default_value: false,
437
- use_default: true,
438
- },
439
- displayBreadcrumbs: {
440
- value: "true",
441
- fieldid: "681",
442
- type: "metadata_field_select",
443
- is_contextable: true,
444
- default_value: true,
445
- use_default: true,
446
- },
447
- displayBanner: {
448
- value: "true",
449
- fieldid: "682",
450
- type: "metadata_field_select",
451
- is_contextable: true,
452
- default_value: true,
453
- use_default: true,
454
- },
455
- displayInPageNav: {
456
- value: "true",
457
- fieldid: "808",
458
- type: "metadata_field_select",
459
- is_contextable: true,
460
- default_value: true,
461
- use_default: true,
462
- },
463
- inPageNav_heading: {
464
- value: "On this page",
465
- fieldid: "809",
466
- type: "metadata_field_text",
467
- is_contextable: true,
468
- default_value: true,
469
- use_default: true,
470
- },
471
- inPageNav_headingType: {
472
- value: "h2",
473
- fieldid: "810",
474
- type: "metadata_field_select",
475
- is_contextable: true,
476
- default_value: true,
477
- use_default: true,
478
- },
123
+ description: { value: "", fieldid: "132", type: "metadata_field_text", is_contextable: true, default_value: true, use_default: true },
124
+ pageType: { value: "landing", fieldid: "680", type: "metadata_field_select", is_contextable: true, default_value: false, use_default: true },
125
+ displayBreadcrumbs: { value: "true", fieldid: "681", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
126
+ displayBanner: { value: "true", fieldid: "682", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
127
+ displayInPageNav: { value: "true", fieldid: "808", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
128
+ inPageNav_heading: { value: "On this page", fieldid: "809", type: "metadata_field_text", is_contextable: true, default_value: true, use_default: true },
129
+ inPageNav_headingType: { value: "h2", fieldid: "810", type: "metadata_field_select", is_contextable: true, default_value: true, use_default: true },
479
130
  },
480
131
  },
481
132
  home: 0,
482
133
  children: [
483
- {
484
- asset_assetid: "458",
485
- asset_url:
486
- "https://qhscb.squiz.cloud/components/accordion",
487
- asset_name: "Accordion",
488
- children: [],
489
- },
490
- {
491
- asset_assetid: "325",
492
- asset_url:
493
- "https://qhscb.squiz.cloud/components/callout",
494
- asset_name: "Callout",
495
- children: [],
496
- },
497
- {
498
- asset_assetid: "659",
499
- asset_url:
500
- "https://qhscb.squiz.cloud/components/card-listing",
501
- asset_name: "Card Listing",
502
- children: [],
503
- },
504
- {
505
- asset_assetid: "676",
506
- asset_url:
507
- "https://qhscb.squiz.cloud/components/links",
508
- asset_name: "Links",
509
- children: [],
510
- },
511
- {
512
- asset_assetid: "683",
513
- asset_url:
514
- "https://qhscb.squiz.cloud/components/search-box",
515
- asset_name: "Search Box",
516
- children: [],
517
- },
518
- {
519
- asset_assetid: "785",
520
- asset_url:
521
- "https://qhscb.squiz.cloud/components/page-alert",
522
- asset_name: "Page Alert",
523
- children: [],
524
- },
134
+ { asset_assetid: "458", asset_url: "https://qhscb.squiz.cloud/components/accordion", asset_name: "Accordion", children: [] },
135
+ { asset_assetid: "325", asset_url: "https://qhscb.squiz.cloud/components/callout", asset_name: "Callout", children: [] },
136
+ { asset_assetid: "659", asset_url: "https://qhscb.squiz.cloud/components/card-listing", asset_name: "Card Listing", children: [] },
137
+ { asset_assetid: "676", asset_url: "https://qhscb.squiz.cloud/components/links", asset_name: "Links", children: [] },
138
+ { asset_assetid: "683", asset_url: "https://qhscb.squiz.cloud/components/search-box", asset_name: "Search Box", children: [] },
139
+ { asset_assetid: "785", asset_url: "https://qhscb.squiz.cloud/components/page-alert", asset_name: "Page Alert", children: [] },
525
140
  ],
526
141
  lineage: [
527
- {
528
- asset_assetid: "136",
529
- asset_name: "Design System",
530
- asset_url: "https://qhscb.squiz.cloud",
531
- },
532
- {
533
- asset_assetid: "198",
534
- asset_name: "Components",
535
- asset_url: "https://qhscb.squiz.cloud/components",
536
- },
537
- {
538
- asset_assetid: "676",
539
- asset_name: "Links",
540
- asset_url:
541
- "https://qhscb.squiz.cloud/components/links",
542
- },
142
+ { asset_assetid: "136", asset_name: "Design System", asset_url: "https://qhscb.squiz.cloud" },
143
+ { asset_assetid: "198", asset_name: "Components", asset_url: "https://qhscb.squiz.cloud/components" },
144
+ { asset_assetid: "676", asset_name: "Links", asset_url: "https://qhscb.squiz.cloud/components/links" },
543
145
  ],
544
- top: {
545
- asset_assetid: "198",
546
- asset_name: "Components",
547
- asset_url: "https://qhscb.squiz.cloud/components",
548
- },
146
+ top: { asset_assetid: "198", asset_name: "Components", asset_url: "https://qhscb.squiz.cloud/components" },
549
147
  },
550
148
  };
551
149
  </script>
@@ -553,19 +151,13 @@
553
151
 
554
152
  <body class="qld__grid">
555
153
  <!--noindex-->
556
- ${require('../components/header/html/component.hbs')({
557
- "site":require('/src/data/site.json') })}
154
+ ${require('../components/header/html/component.hbs')({ "site":require('/src/data/site.json') })}
558
155
  <!--endnoindex-->
559
- ${require('../components/mega_main_navigation/html/component.hbs')({
560
- "site":require('/src/data/site.json') })}
156
+ ${require('../components/mega_main_navigation/html/component.hbs')({ "site":require('/src/data/site.json') })}
561
157
  <!-- MAIN BODY -->
562
158
  <main class="main" role="main">
563
159
  <section class="qld__body qld__body--breadcrumb">
564
- <div class="container-fluid">
565
- ${require('../components/breadcrumbs/html/component.hbs')({
566
- "site":require('/src/data/site.json'),
567
- "current":require('/src/data/current.json'), })}
568
- </div>
160
+ <div class="container-fluid">${require('../components/breadcrumbs/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json'), })}</div>
569
161
  </section>
570
162
  <!--CONTENT-->
571
163
  <div class="qld__body">
@@ -573,47 +165,24 @@
573
165
  <div class="row">
574
166
  <div class="col-xs-12 col-lg-4 col-xl-3">
575
167
  <!-- INTERNAL NAVIGATION -->
576
- ${require('../components/internal_navigation/html/component.hbs')({
577
- "site":require('/src/data/site.json'),
578
- "current":require('/src/data/current.json') })}
168
+ ${require('../components/internal_navigation/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json') })}
579
169
  </div>
580
170
  <div class="col-xs-12 col-lg-8 col-xl-8" id="content">
581
- ${require('../components/_global/html/component.hbs')({
582
- "manifest":require('../components/card_single_action/js/manifest.json'),
583
- "component":require('!url-loader!../components/card_single_action/html/component.hbs'),
584
- "component_output":require('../components/card_single_action/html/component.hbs')({
585
- "component":require('../components/card_single_action/js/manifest.json').component,
586
- "content":"Lorem Ipsum" }) })}
171
+ ${require('../components/_global/html/component.hbs')({ "manifest":require('../components/card_single_action/js/manifest.json'),
172
+ "component":require('!url-loader!../components/card_single_action/html/component.hbs'), "component_output":require('../components/card_single_action/html/component.hbs')({
173
+ "component":require('../components/card_single_action/js/manifest.json').component, "content":"Lorem Ipsum" }) })}
587
174
 
588
175
  <h2>Single action - base</h2>
589
- <ul
590
- class="qld__card-list qld__card-list--matchheight"
591
- >
176
+ <ul class="qld__card-list qld__card-list--matchheight">
592
177
  <li class="col-xs-12 col-md-6 col-xs-12">
593
178
  <div class="qld__card qld__card__action">
594
179
  <div class="qld__card__inner">
595
180
  <div class="qld__card__content">
596
- <div
597
- class="qld__card__content-inner"
598
- >
599
- <h3
600
- class="qld__card__title"
601
- >
602
- <a
603
- aria-label="Brand"
604
- aria-describedby="card-22724"
605
- class="qld__card--clickable__link"
606
- href="#"
607
- >Light</a
608
- >
181
+ <div class="qld__card__content-inner">
182
+ <h3 class="qld__card__title">
183
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
609
184
  </h3>
610
- <p
611
- id="card-22724"
612
- class="qld__card__description"
613
- >
614
- Additional text about
615
- the card
616
- </p>
185
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
617
186
  </div>
618
187
  </div>
619
188
  </div>
@@ -621,32 +190,14 @@
621
190
  </li>
622
191
 
623
192
  <li class="col-xs-12 col-md-6 col-xs-12">
624
- <div
625
- class="qld__card qld__card__action qld__card--alt"
626
- >
193
+ <div class="qld__card qld__card__action qld__card--alt">
627
194
  <div class="qld__card__inner">
628
195
  <div class="qld__card__content">
629
- <div
630
- class="qld__card__content-inner"
631
- >
632
- <h3
633
- class="qld__card__title"
634
- >
635
- <a
636
- aria-label="Content"
637
- aria-describedby="card-22725"
638
- class="qld__card--clickable__link"
639
- href="#"
640
- >Alternative</a
641
- >
196
+ <div class="qld__card__content-inner">
197
+ <h3 class="qld__card__title">
198
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
642
199
  </h3>
643
- <p
644
- id="card-22725"
645
- class="qld__card__description"
646
- >
647
- Additional text about
648
- the card
649
- </p>
200
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
650
201
  </div>
651
202
  </div>
652
203
  </div>
@@ -654,64 +205,28 @@
654
205
  </li>
655
206
 
656
207
  <li class="col-xs-12 col-md-6 col-xs-12">
657
- <div
658
- class="qld__card qld__card__action qld__card--dark"
659
- >
208
+ <div class="qld__card qld__card__action qld__card--dark">
660
209
  <div class="qld__card__inner">
661
210
  <div class="qld__card__content">
662
- <div
663
- class="qld__card__content-inner"
664
- >
665
- <h3
666
- class="qld__card__title"
667
- >
668
- <a
669
- aria-label="Components"
670
- aria-describedby="card-22726"
671
- class="qld__card--clickable__link"
672
- href="#"
673
- >Dark</a
674
- >
211
+ <div class="qld__card__content-inner">
212
+ <h3 class="qld__card__title">
213
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
675
214
  </h3>
676
- <p
677
- id="card-22726"
678
- class="qld__card__description"
679
- >
680
- Additional text about
681
- the card
682
- </p>
215
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
683
216
  </div>
684
217
  </div>
685
218
  </div>
686
219
  </div>
687
220
  </li>
688
221
  <li class="col-xs-12 col-md-6 col-xs-12">
689
- <div
690
- class="qld__card qld__card__action qld__card--dark-alt"
691
- >
222
+ <div class="qld__card qld__card__action qld__card--dark-alt">
692
223
  <div class="qld__card__inner">
693
224
  <div class="qld__card__content">
694
- <div
695
- class="qld__card__content-inner"
696
- >
697
- <h3
698
- class="qld__card__title"
699
- >
700
- <a
701
- aria-label="Components"
702
- aria-describedby="card-22726"
703
- class="qld__card--clickable__link"
704
- href="#"
705
- >Dark Alternative</a
706
- >
225
+ <div class="qld__card__content-inner">
226
+ <h3 class="qld__card__title">
227
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
707
228
  </h3>
708
- <p
709
- id="card-22726"
710
- class="qld__card__description"
711
- >
712
- Additional text about
713
- the card
714
- </p>
229
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
715
230
  </div>
716
231
  </div>
717
232
  </div>
@@ -720,173 +235,77 @@
720
235
  </ul>
721
236
 
722
237
  <h2>Single Action - with footer</h2>
723
- <ul
724
- class="qld__card-list qld__card-list--matchheight"
725
- >
238
+ <ul class="qld__card-list qld__card-list--matchheight">
726
239
  <li class="col-xs-12 col-md-6 col-xs-12">
727
240
  <div class="qld__card qld__card__action">
728
241
  <div class="qld__card__inner">
729
242
  <div class="qld__card__content">
730
- <div
731
- class="qld__card__content-inner"
732
- >
733
- <h3
734
- class="qld__card__title"
735
- >
736
- <a
737
- aria-label="Brand"
738
- aria-describedby="card-22724"
739
- class="qld__card--clickable__link"
740
- href="#"
741
- >Light</a
742
- >
243
+ <div class="qld__card__content-inner">
244
+ <h3 class="qld__card__title">
245
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
743
246
  </h3>
744
- <p
745
- id="card-22724"
746
- class="qld__card__description"
747
- >
748
- Additional text about
749
- the card
750
- </p>
247
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
751
248
  </div>
752
249
  </div>
753
250
  <div class="qld__card__footer">
754
- <hr
755
- class="qld__horizontal-rule"
756
- />
757
- <div
758
- class="qld__card__footer-inner"
759
- >
760
- Footer text
761
- </div>
251
+ <hr class="qld__horizontal-rule" />
252
+ <div class="qld__card__footer-inner">Footer text</div>
762
253
  </div>
763
254
  </div>
764
255
  </div>
765
256
  </li>
766
257
 
767
258
  <li class="col-xs-12 col-md-6 col-xs-12">
768
- <div
769
- class="qld__card qld__card__action qld__card--alt"
770
- >
259
+ <div class="qld__card qld__card__action qld__card--alt">
771
260
  <div class="qld__card__inner">
772
261
  <div class="qld__card__content">
773
- <div
774
- class="qld__card__content-inner"
775
- >
776
- <h3
777
- class="qld__card__title"
778
- >
779
- <a
780
- aria-label="Content"
781
- aria-describedby="card-22725"
782
- class="qld__card--clickable__link"
783
- href="#"
784
- >Alternative</a
785
- >
262
+ <div class="qld__card__content-inner">
263
+ <h3 class="qld__card__title">
264
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
786
265
  </h3>
787
- <p
788
- id="card-22725"
789
- class="qld__card__description"
790
- >
791
- Additional text about
792
- the card
793
- </p>
266
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
794
267
  </div>
795
268
  </div>
796
269
  <div class="qld__card__footer">
797
- <hr
798
- class="qld__horizontal-rule"
799
- />
800
- <div
801
- class="qld__card__footer-inner"
802
- >
803
- Footer text
804
- </div>
270
+ <hr class="qld__horizontal-rule" />
271
+ <div class="qld__card__footer-inner">Footer text</div>
805
272
  </div>
806
273
  </div>
807
274
  </div>
808
275
  </li>
809
276
 
810
277
  <li class="col-xs-12 col-md-6 col-xs-12">
811
- <div
812
- class="qld__card qld__card__action qld__card--dark"
813
- >
278
+ <div class="qld__card qld__card__action qld__card--dark">
814
279
  <div class="qld__card__inner">
815
280
  <div class="qld__card__content">
816
- <div
817
- class="qld__card__content-inner"
818
- >
819
- <h3
820
- class="qld__card__title"
821
- >
822
- <a
823
- aria-label="Components"
824
- aria-describedby="card-22726"
825
- class="qld__card--clickable__link"
826
- href="#"
827
- >Dark</a
828
- >
281
+ <div class="qld__card__content-inner">
282
+ <h3 class="qld__card__title">
283
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
829
284
  </h3>
830
- <p
831
- id="card-22726"
832
- class="qld__card__description"
833
- >
834
- Additional text about
835
- the card
836
- </p>
285
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
837
286
  </div>
838
287
  </div>
839
288
  <div class="qld__card__footer">
840
- <hr
841
- class="qld__horizontal-rule"
842
- />
843
- <div
844
- class="qld__card__footer-inner"
845
- >
846
- Footer text
847
- </div>
289
+ <hr class="qld__horizontal-rule" />
290
+ <div class="qld__card__footer-inner">Footer text</div>
848
291
  </div>
849
292
  </div>
850
293
  </div>
851
294
  </li>
852
295
  <li class="col-xs-12 col-md-6 col-xs-12">
853
- <div
854
- class="qld__card qld__card__action qld__card--dark-alt"
855
- >
296
+ <div class="qld__card qld__card__action qld__card--dark-alt">
856
297
  <div class="qld__card__inner">
857
298
  <div class="qld__card__content">
858
- <div
859
- class="qld__card__content-inner"
860
- >
861
- <h3
862
- class="qld__card__title"
863
- >
864
- <a
865
- aria-label="Components"
866
- aria-describedby="card-22726"
867
- class="qld__card--clickable__link"
868
- href="#"
869
- >Dark Alternative</a
870
- >
299
+ <div class="qld__card__content-inner">
300
+ <h3 class="qld__card__title">
301
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
871
302
  </h3>
872
- <p
873
- id="card-22726"
874
- class="qld__card__description"
875
- >
876
- Additional text about
877
- the card
878
- </p>
303
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
879
304
  </div>
880
305
  </div>
881
306
  <div class="qld__card__footer">
882
- <hr
883
- class="qld__horizontal-rule"
884
- />
885
- <div
886
- class="qld__card__footer-inner"
887
- >
888
- Footer text
889
- </div>
307
+ <hr class="qld__horizontal-rule" />
308
+ <div class="qld__card__footer-inner">Footer text</div>
890
309
  </div>
891
310
  </div>
892
311
  </div>
@@ -894,43 +313,18 @@
894
313
  </ul>
895
314
 
896
315
  <h2>Single Click - Image</h2>
897
- <ul
898
- class="qld__card-list qld__card-list--matchheight"
899
- >
316
+ <ul class="qld__card-list qld__card-list--matchheight">
900
317
  <li class="col-xs-12 col-md-6 col-xs-12">
901
- <div
902
- class="qld__card qld__card__action qld__card--image"
903
- >
904
- <div
905
- class="qld__responsive-media-img--bg"
906
- style="
907
- background-image: url('/mysource_files/img/card--content.png');
908
- "
909
- ></div>
318
+ <div class="qld__card qld__card__action qld__card--image">
319
+ <div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png')"></div>
910
320
 
911
321
  <div class="qld__card__inner">
912
322
  <div class="qld__card__content">
913
- <div
914
- class="qld__card__content-inner"
915
- >
916
- <h3
917
- class="qld__card__title"
918
- >
919
- <a
920
- aria-label="Brand"
921
- aria-describedby="card-22724"
922
- class="qld__card--clickable__link"
923
- href="#"
924
- >Light</a
925
- >
323
+ <div class="qld__card__content-inner">
324
+ <h3 class="qld__card__title">
325
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
926
326
  </h3>
927
- <p
928
- id="card-22724"
929
- class="qld__card__description"
930
- >
931
- Additional text about
932
- the card
933
- </p>
327
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
934
328
  </div>
935
329
  </div>
936
330
  </div>
@@ -938,39 +332,16 @@
938
332
  </li>
939
333
 
940
334
  <li class="col-xs-12 col-md-6 col-xs-12">
941
- <div
942
- class="qld__card qld__card__action qld__card--alt qld__card--image"
943
- >
944
- <div
945
- class="qld__responsive-media-img--bg"
946
- style="
947
- background-image: url('/mysource_files/img/card--content.png');
948
- "
949
- ></div>
335
+ <div class="qld__card qld__card__action qld__card--alt qld__card--image">
336
+ <div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png')"></div>
950
337
 
951
338
  <div class="qld__card__inner">
952
339
  <div class="qld__card__content">
953
- <div
954
- class="qld__card__content-inner"
955
- >
956
- <h3
957
- class="qld__card__title"
958
- >
959
- <a
960
- aria-label="Content"
961
- aria-describedby="card-22725"
962
- class="qld__card--clickable__link"
963
- href="#"
964
- >Alternative</a
965
- >
340
+ <div class="qld__card__content-inner">
341
+ <h3 class="qld__card__title">
342
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
966
343
  </h3>
967
- <p
968
- id="card-22725"
969
- class="qld__card__description"
970
- >
971
- Additional text about
972
- the card
973
- </p>
344
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
974
345
  </div>
975
346
  </div>
976
347
  </div>
@@ -978,78 +349,32 @@
978
349
  </li>
979
350
 
980
351
  <li class="col-xs-12 col-md-6 col-xs-12">
981
- <div
982
- class="qld__card qld__card__action qld__card--dark qld__card--image"
983
- >
984
- <div
985
- class="qld__responsive-media-img--bg"
986
- style="
987
- background-image: url('/mysource_files/img/card--content.png');
988
- "
989
- ></div>
352
+ <div class="qld__card qld__card__action qld__card--dark qld__card--image">
353
+ <div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png')"></div>
990
354
 
991
355
  <div class="qld__card__inner">
992
356
  <div class="qld__card__content">
993
- <div
994
- class="qld__card__content-inner"
995
- >
996
- <h3
997
- class="qld__card__title"
998
- >
999
- <a
1000
- aria-label="Components"
1001
- aria-describedby="card-22726"
1002
- class="qld__card--clickable__link"
1003
- href="#"
1004
- >Dark</a
1005
- >
357
+ <div class="qld__card__content-inner">
358
+ <h3 class="qld__card__title">
359
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
1006
360
  </h3>
1007
- <p
1008
- id="card-22726"
1009
- class="qld__card__description"
1010
- >
1011
- Additional text about
1012
- the card
1013
- </p>
361
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
1014
362
  </div>
1015
363
  </div>
1016
364
  </div>
1017
365
  </div>
1018
366
  </li>
1019
367
  <li class="col-xs-12 col-md-6 col-xs-12">
1020
- <div
1021
- class="qld__card qld__card__action qld__card--dark-alt qld__card--image"
1022
- >
1023
- <div
1024
- class="qld__responsive-media-img--bg"
1025
- style="
1026
- background-image: url('/mysource_files/img/card--content.png');
1027
- "
1028
- ></div>
368
+ <div class="qld__card qld__card__action qld__card--dark-alt qld__card--image">
369
+ <div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png')"></div>
1029
370
 
1030
371
  <div class="qld__card__inner">
1031
372
  <div class="qld__card__content">
1032
- <div
1033
- class="qld__card__content-inner"
1034
- >
1035
- <h3
1036
- class="qld__card__title"
1037
- >
1038
- <a
1039
- aria-label="Components"
1040
- aria-describedby="card-22726"
1041
- class="qld__card--clickable__link"
1042
- href="#"
1043
- >Dark Alternative</a
1044
- >
373
+ <div class="qld__card__content-inner">
374
+ <h3 class="qld__card__title">
375
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
1045
376
  </h3>
1046
- <p
1047
- id="card-22726"
1048
- class="qld__card__description"
1049
- >
1050
- Additional text about
1051
- the card
1052
- </p>
377
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
1053
378
  </div>
1054
379
  </div>
1055
380
  </div>
@@ -1059,43 +384,18 @@
1059
384
 
1060
385
  <h2>Single action - Icon</h2>
1061
386
 
1062
- <ul
1063
- class="qld__card-list qld__card-list--matchheight"
1064
- >
387
+ <ul class="qld__card-list qld__card-list--matchheight">
1065
388
  <li class="col-xs-12 col-md-6 col-xs-12">
1066
- <div
1067
- class="qld__card qld__card__action qld__card--icon"
1068
- >
1069
- <div class="qld__card__icon">
1070
- <i
1071
- class="fal fa-question-circle"
1072
- aria-hidden="true"
1073
- ></i>
1074
- </div>
389
+ <div class="qld__card qld__card__action qld__card--icon">
390
+ <div class="qld__card__icon"><i class="fal fa-question-circle" aria-hidden="true"></i></div>
1075
391
 
1076
392
  <div class="qld__card__inner">
1077
393
  <div class="qld__card__content">
1078
- <div
1079
- class="qld__card__content-inner"
1080
- >
1081
- <h3
1082
- class="qld__card__title"
1083
- >
1084
- <a
1085
- aria-label="Brand"
1086
- aria-describedby="card-22724"
1087
- class="qld__card--clickable__link"
1088
- href="#"
1089
- >Light</a
1090
- >
394
+ <div class="qld__card__content-inner">
395
+ <h3 class="qld__card__title">
396
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
1091
397
  </h3>
1092
- <p
1093
- id="card-22724"
1094
- class="qld__card__description"
1095
- >
1096
- Additional text about
1097
- the card
1098
- </p>
398
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
1099
399
  </div>
1100
400
  </div>
1101
401
  </div>
@@ -1103,39 +403,16 @@
1103
403
  </li>
1104
404
 
1105
405
  <li class="col-xs-12 col-md-6 col-xs-12">
1106
- <div
1107
- class="qld__card qld__card__action qld__card--alt qld__card--icon"
1108
- >
1109
- <div class="qld__card__icon">
1110
- <i
1111
- class="fal fa-stethoscope"
1112
- aria-hidden="true"
1113
- ></i>
1114
- </div>
406
+ <div class="qld__card qld__card__action qld__card--alt qld__card--icon">
407
+ <div class="qld__card__icon"><i class="fal fa-stethoscope" aria-hidden="true"></i></div>
1115
408
 
1116
409
  <div class="qld__card__inner">
1117
410
  <div class="qld__card__content">
1118
- <div
1119
- class="qld__card__content-inner"
1120
- >
1121
- <h3
1122
- class="qld__card__title"
1123
- >
1124
- <a
1125
- aria-label="Content"
1126
- aria-describedby="card-22725"
1127
- class="qld__card--clickable__link"
1128
- href="#"
1129
- >Alternative</a
1130
- >
411
+ <div class="qld__card__content-inner">
412
+ <h3 class="qld__card__title">
413
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
1131
414
  </h3>
1132
- <p
1133
- id="card-22725"
1134
- class="qld__card__description"
1135
- >
1136
- Additional text about
1137
- the card
1138
- </p>
415
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
1139
416
  </div>
1140
417
  </div>
1141
418
  </div>
@@ -1143,78 +420,32 @@
1143
420
  </li>
1144
421
 
1145
422
  <li class="col-xs-12 col-md-6 col-xs-12">
1146
- <div
1147
- class="qld__card qld__card__action qld__card--dark qld__card--icon"
1148
- >
1149
- <div class="qld__card__icon">
1150
- <i
1151
- class="fal fa-heart"
1152
- aria-hidden="true"
1153
- ></i>
1154
- </div>
423
+ <div class="qld__card qld__card__action qld__card--dark qld__card--icon">
424
+ <div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
1155
425
 
1156
426
  <div class="qld__card__inner">
1157
427
  <div class="qld__card__content">
1158
- <div
1159
- class="qld__card__content-inner"
1160
- >
1161
- <h3
1162
- class="qld__card__title"
1163
- >
1164
- <a
1165
- aria-label="Components"
1166
- aria-describedby="card-22726"
1167
- class="qld__card--clickable__link"
1168
- href="#"
1169
- >Dark</a
1170
- >
428
+ <div class="qld__card__content-inner">
429
+ <h3 class="qld__card__title">
430
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
1171
431
  </h3>
1172
- <p
1173
- id="card-22726"
1174
- class="qld__card__description"
1175
- >
1176
- Additional text about
1177
- the card
1178
- </p>
432
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
1179
433
  </div>
1180
434
  </div>
1181
435
  </div>
1182
436
  </div>
1183
437
  </li>
1184
438
  <li class="col-xs-12 col-md-6 col-xs-12">
1185
- <div
1186
- class="qld__card qld__card__action qld__card--dark-alt qld__card--icon"
1187
- >
1188
- <div class="qld__card__icon">
1189
- <i
1190
- class="fal fa-heart"
1191
- aria-hidden="true"
1192
- ></i>
1193
- </div>
439
+ <div class="qld__card qld__card__action qld__card--dark-alt qld__card--icon">
440
+ <div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
1194
441
 
1195
442
  <div class="qld__card__inner">
1196
443
  <div class="qld__card__content">
1197
- <div
1198
- class="qld__card__content-inner"
1199
- >
1200
- <h3
1201
- class="qld__card__title"
1202
- >
1203
- <a
1204
- aria-label="Components"
1205
- aria-describedby="card-22726"
1206
- class="qld__card--clickable__link"
1207
- href="#"
1208
- >Dark Alternative</a
1209
- >
444
+ <div class="qld__card__content-inner">
445
+ <h3 class="qld__card__title">
446
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
1210
447
  </h3>
1211
- <p
1212
- id="card-22726"
1213
- class="qld__card__description"
1214
- >
1215
- Additional text about
1216
- the card
1217
- </p>
448
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
1218
449
  </div>
1219
450
  </div>
1220
451
  </div>
@@ -1222,43 +453,18 @@
1222
453
  </li>
1223
454
  </ul>
1224
455
  <h2>Single action - Icon left</h2>
1225
- <ul
1226
- class="qld__card-list qld__card-list--matchheight"
1227
- >
456
+ <ul class="qld__card-list qld__card-list--matchheight">
1228
457
  <li class="col-xs-12 col-md-6 col-xs-12">
1229
- <div
1230
- class="qld__card qld__card__action qld__card--icon qld__card--icon-left"
1231
- >
1232
- <div class="qld__card__icon">
1233
- <i
1234
- class="fal fa-question-circle"
1235
- aria-hidden="true"
1236
- ></i>
1237
- </div>
458
+ <div class="qld__card qld__card__action qld__card--icon qld__card--icon-left">
459
+ <div class="qld__card__icon"><i class="fal fa-question-circle" aria-hidden="true"></i></div>
1238
460
 
1239
461
  <div class="qld__card__inner">
1240
462
  <div class="qld__card__content">
1241
- <div
1242
- class="qld__card__content-inner"
1243
- >
1244
- <h3
1245
- class="qld__card__title"
1246
- >
1247
- <a
1248
- aria-label="Brand"
1249
- aria-describedby="card-22724"
1250
- class="qld__card--clickable__link"
1251
- href="#"
1252
- >Light</a
1253
- >
463
+ <div class="qld__card__content-inner">
464
+ <h3 class="qld__card__title">
465
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
1254
466
  </h3>
1255
- <p
1256
- id="card-22724"
1257
- class="qld__card__description"
1258
- >
1259
- Additional text about
1260
- the card
1261
- </p>
467
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
1262
468
  </div>
1263
469
  </div>
1264
470
  </div>
@@ -1266,39 +472,16 @@
1266
472
  </li>
1267
473
 
1268
474
  <li class="col-xs-12 col-md-6 col-xs-12">
1269
- <div
1270
- class="qld__card qld__card__action qld__card--alt qld__card--icon qld__card--icon-left"
1271
- >
1272
- <div class="qld__card__icon">
1273
- <i
1274
- class="fal fa-stethoscope"
1275
- aria-hidden="true"
1276
- ></i>
1277
- </div>
475
+ <div class="qld__card qld__card__action qld__card--alt qld__card--icon qld__card--icon-left">
476
+ <div class="qld__card__icon"><i class="fal fa-stethoscope" aria-hidden="true"></i></div>
1278
477
 
1279
478
  <div class="qld__card__inner">
1280
479
  <div class="qld__card__content">
1281
- <div
1282
- class="qld__card__content-inner"
1283
- >
1284
- <h3
1285
- class="qld__card__title"
1286
- >
1287
- <a
1288
- aria-label="Content"
1289
- aria-describedby="card-22725"
1290
- class="qld__card--clickable__link"
1291
- href="#"
1292
- >Alternative</a
1293
- >
480
+ <div class="qld__card__content-inner">
481
+ <h3 class="qld__card__title">
482
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
1294
483
  </h3>
1295
- <p
1296
- id="card-22725"
1297
- class="qld__card__description"
1298
- >
1299
- Additional text about
1300
- the card
1301
- </p>
484
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
1302
485
  </div>
1303
486
  </div>
1304
487
  </div>
@@ -1306,78 +489,32 @@
1306
489
  </li>
1307
490
 
1308
491
  <li class="col-xs-12 col-md-6 col-xs-12">
1309
- <div
1310
- class="qld__card qld__card__action qld__card--dark qld__card--icon qld__card--icon-left"
1311
- >
1312
- <div class="qld__card__icon">
1313
- <i
1314
- class="fal fa-heart"
1315
- aria-hidden="true"
1316
- ></i>
1317
- </div>
492
+ <div class="qld__card qld__card__action qld__card--dark qld__card--icon qld__card--icon-left">
493
+ <div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
1318
494
 
1319
495
  <div class="qld__card__inner">
1320
496
  <div class="qld__card__content">
1321
- <div
1322
- class="qld__card__content-inner"
1323
- >
1324
- <h3
1325
- class="qld__card__title"
1326
- >
1327
- <a
1328
- aria-label="Components"
1329
- aria-describedby="card-22726"
1330
- class="qld__card--clickable__link"
1331
- href="#"
1332
- >Dark</a
1333
- >
497
+ <div class="qld__card__content-inner">
498
+ <h3 class="qld__card__title">
499
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
1334
500
  </h3>
1335
- <p
1336
- id="card-22726"
1337
- class="qld__card__description"
1338
- >
1339
- Additional text about
1340
- the card
1341
- </p>
501
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
1342
502
  </div>
1343
503
  </div>
1344
504
  </div>
1345
505
  </div>
1346
506
  </li>
1347
507
  <li class="col-xs-12 col-md-6 col-xs-12">
1348
- <div
1349
- class="qld__card qld__card__action qld__card--dark-alt qld__card--icon qld__card--icon-left"
1350
- >
1351
- <div class="qld__card__icon">
1352
- <i
1353
- class="fal fa-heart"
1354
- aria-hidden="true"
1355
- ></i>
1356
- </div>
508
+ <div class="qld__card qld__card__action qld__card--dark-alt qld__card--icon qld__card--icon-left">
509
+ <div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
1357
510
 
1358
511
  <div class="qld__card__inner">
1359
512
  <div class="qld__card__content">
1360
- <div
1361
- class="qld__card__content-inner"
1362
- >
1363
- <h3
1364
- class="qld__card__title"
1365
- >
1366
- <a
1367
- aria-label="Components"
1368
- aria-describedby="card-22726"
1369
- class="qld__card--clickable__link"
1370
- href="#"
1371
- >Dark Alternative</a
1372
- >
513
+ <div class="qld__card__content-inner">
514
+ <h3 class="qld__card__title">
515
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
1373
516
  </h3>
1374
- <p
1375
- id="card-22726"
1376
- class="qld__card__description"
1377
- >
1378
- Additional text about
1379
- the card
1380
- </p>
517
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
1381
518
  </div>
1382
519
  </div>
1383
520
  </div>
@@ -1386,147 +523,65 @@
1386
523
  </ul>
1387
524
 
1388
525
  <h2>Single Action - Arrow</h2>
1389
- <ul
1390
- class="qld__card-list qld__card-list--matchheight"
1391
- >
526
+ <ul class="qld__card-list qld__card-list--matchheight">
1392
527
  <li class="col-xs-12 col-md-6 col-xs-12">
1393
- <div
1394
- class="qld__card qld__card__action qld__card--arrow"
1395
- >
528
+ <div class="qld__card qld__card__action qld__card--arrow">
1396
529
  <div class="qld__card__inner">
1397
530
  <div class="qld__card__content">
1398
- <div
1399
- class="qld__card__content-inner"
1400
- >
1401
- <h3
1402
- class="qld__card__title"
1403
- >
1404
- <a
1405
- aria-label="Brand"
1406
- aria-describedby="card-22724"
1407
- class="qld__card--clickable__link"
1408
- href="#"
1409
- >Light</a
1410
- >
531
+ <div class="qld__card__content-inner">
532
+ <h3 class="qld__card__title">
533
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
1411
534
  </h3>
1412
- <p
1413
- id="card-22724"
1414
- class="qld__card__description"
1415
- >
1416
- Additional text about
1417
- the card
1418
- </p>
535
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
1419
536
  </div>
1420
- <div
1421
- class="qld__card__arrow"
1422
- ></div>
537
+ <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__card--arrow-icon qld__icon qld__icon--md"><use href="/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
1423
538
  </div>
1424
539
  </div>
1425
540
  </div>
1426
541
  </li>
1427
542
 
1428
543
  <li class="col-xs-12 col-md-6 col-xs-12">
1429
- <div
1430
- class="qld__card qld__card__action qld__card--arrow qld__card--alt"
1431
- >
544
+ <div class="qld__card qld__card__action qld__card--arrow qld__card--alt">
1432
545
  <div class="qld__card__inner">
1433
546
  <div class="qld__card__content">
1434
- <div
1435
- class="qld__card__content-inner"
1436
- >
1437
- <h3
1438
- class="qld__card__title"
1439
- >
1440
- <a
1441
- aria-label="Content"
1442
- aria-describedby="card-22725"
1443
- class="qld__card--clickable__link"
1444
- href="#"
1445
- >Alternative</a
1446
- >
547
+ <div class="qld__card__content-inner">
548
+ <h3 class="qld__card__title">
549
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
1447
550
  </h3>
1448
- <p
1449
- id="card-22725"
1450
- class="qld__card__description"
1451
- >
1452
- Additional text about
1453
- the card
1454
- </p>
551
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
1455
552
  </div>
1456
- <div
1457
- class="qld__card__arrow"
1458
- ></div>
553
+ <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__card--arrow-icon qld__icon qld__icon--md"><use href="/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
1459
554
  </div>
1460
555
  </div>
1461
556
  </div>
1462
557
  </li>
1463
558
 
1464
559
  <li class="col-xs-12 col-md-6 col-xs-12">
1465
- <div
1466
- class="qld__card qld__card__action qld__card--arrow qld__card--dark"
1467
- >
560
+ <div class="qld__card qld__card__action qld__card--arrow qld__card--dark">
1468
561
  <div class="qld__card__inner">
1469
562
  <div class="qld__card__content">
1470
- <div
1471
- class="qld__card__content-inner"
1472
- >
1473
- <h3
1474
- class="qld__card__title"
1475
- >
1476
- <a
1477
- aria-label="Components"
1478
- aria-describedby="card-22726"
1479
- class="qld__card--clickable__link"
1480
- href="#"
1481
- >Dark</a
1482
- >
563
+ <div class="qld__card__content-inner">
564
+ <h3 class="qld__card__title">
565
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
1483
566
  </h3>
1484
- <p
1485
- id="card-22726"
1486
- class="qld__card__description"
1487
- >
1488
- Additional text about
1489
- the card
1490
- </p>
567
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
1491
568
  </div>
1492
- <div
1493
- class="qld__card__arrow"
1494
- ></div>
569
+ <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__card--arrow-icon qld__icon qld__icon--md"><use href="/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
1495
570
  </div>
1496
571
  </div>
1497
572
  </div>
1498
573
  </li>
1499
574
  <li class="col-xs-12 col-md-6 col-xs-12">
1500
- <div
1501
- class="qld__card qld__card__action qld__card--arrow qld__card--dark-alt"
1502
- >
575
+ <div class="qld__card qld__card__action qld__card--arrow qld__card--dark-alt">
1503
576
  <div class="qld__card__inner">
1504
577
  <div class="qld__card__content">
1505
- <div
1506
- class="qld__card__content-inner"
1507
- >
1508
- <h3
1509
- class="qld__card__title"
1510
- >
1511
- <a
1512
- aria-label="Components"
1513
- aria-describedby="card-22726"
1514
- class="qld__card--clickable__link"
1515
- href="#"
1516
- >Dark Alternative</a
1517
- >
578
+ <div class="qld__card__content-inner">
579
+ <h3 class="qld__card__title">
580
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
1518
581
  </h3>
1519
- <p
1520
- id="card-22726"
1521
- class="qld__card__description"
1522
- >
1523
- Additional text about
1524
- the card
1525
- </p>
582
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
1526
583
  </div>
1527
- <div
1528
- class="qld__card__arrow"
1529
- ></div>
584
+ <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" class="qld__card--arrow-icon qld__icon qld__icon--md"><use href="/mysource_files/img/QLD-icons.svg#arrow-right"></use></svg>
1530
585
  </div>
1531
586
  </div>
1532
587
  </div>
@@ -1536,23 +591,12 @@
1536
591
  </div>
1537
592
  </div>
1538
593
  </div>
1539
- <!-- Page Footer Info -->
1540
- ${require('../components/prefooter/html/component.hbs')({
1541
- "site":require('/src/data/site.json'),
1542
- "current":require('/src/data/current.json') })}
1543
594
  </main>
1544
595
  <!-- END MAIN BODY -->
1545
596
 
1546
597
  <!-- FOOTER-->
1547
- ${require('../components/footer/html/component.hbs')({
1548
- "site":require('/src/data/site.json') })}
598
+ ${require('../components/footer/html/component.hbs')({ "site":require('/src/data/site.json') })}
1549
599
 
1550
- <div
1551
- class="footer-scripts"
1552
- id="footer_js"
1553
- style="display: none !important"
1554
- >
1555
- ${require('../components/_global/html/scripts.html')}
1556
- </div>
600
+ <div class="footer-scripts" id="footer_js" style="display: none !important">${require('../components/_global/html/scripts.html')}</div>
1557
601
  </body>
1558
602
  </html>