@qhealth-design-system/core 1.22.2 → 1.23.0

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 (78) hide show
  1. package/.storybook/assets/image-position-demo-portrait.svg +54 -0
  2. package/.storybook/assets/image-position-demo.svg +55 -0
  3. package/.storybook/globals.js +9 -0
  4. package/.storybook/preview.js +8 -1
  5. package/CHANGELOG.md +2 -0
  6. package/README.md +0 -6
  7. package/package.json +13 -33
  8. package/src/assets/img/svg-icons.svg +154 -154
  9. package/src/component-loader.js +11 -2
  10. package/src/components/_global/css/admin/component.scss +1 -0
  11. package/src/components/_global/css/btn/component.scss +9 -0
  12. package/src/components/_global/css/img/image-position-utility-classes.scss +30 -0
  13. package/src/components/_global/css/img/image-ratio-utility-classes.scss +41 -0
  14. package/src/components/_global/css/img/images.scss +74 -5
  15. package/src/components/_global/css/modal/component.scss +1 -0
  16. package/src/components/_global/js/animate/global.js +272 -294
  17. package/src/components/_global/js/collapsible.js +3 -3
  18. package/src/components/_global/js/global.js +304 -316
  19. package/src/components/_global/js/legacyGlobal.js +63 -0
  20. package/src/components/_global/js/modal/global.js +218 -223
  21. package/src/components/_global/js/popover/controller.js +4 -4
  22. package/src/components/_global/js/tabs/global.js +264 -276
  23. package/src/components/a-z_listing/js/global.js +106 -92
  24. package/src/components/accordion/css/component.scss +24 -41
  25. package/src/components/accordion/html/component.hbs +23 -5
  26. package/src/components/accordion/js/global.js +5 -10
  27. package/src/components/basic_search/js/global.js +0 -7
  28. package/src/components/code/js/global.js +6 -12
  29. package/src/components/file_upload/js/global.js +1 -5
  30. package/src/components/internal_navigation/css/component.scss +2 -2
  31. package/src/components/internal_navigation/html/component.hbs +16 -1
  32. package/src/components/main_navigation/js/global.js +341 -335
  33. package/src/components/overflow_menu/css/component.scss +1 -0
  34. package/src/components/search_box/css/component.scss +0 -1
  35. package/src/components/tab/js/global.js +5 -10
  36. package/src/components/toggle_tip/js/global.js +0 -6
  37. package/src/components/tool_tip/js/global.js +0 -6
  38. package/src/components/video_player/css/component.scss +27 -9
  39. package/src/components/video_player/html/component.hbs +32 -6
  40. package/src/components/video_player/js/global.js +8 -1
  41. package/src/index.js +4 -0
  42. package/src/stories/Accordion/accordion.stories.js +1 -0
  43. package/src/stories/Banner/bannerContained.stories.js +123 -0
  44. package/src/stories/Flexbox/Flexbox.stories.js +316 -0
  45. package/src/stories/Image/Image.stories.js +182 -0
  46. package/src/stories/Templates/ContentPage.stories.js +101 -0
  47. package/src/stories/Templates/LandingPage.stories.js +193 -0
  48. package/src/stories/Templates/templateHelpers.js +102 -0
  49. package/src/stories/VideoPlayer/VideoPlayer.stories.js +16 -0
  50. package/src/styles/imports/utilities.scss +15 -25
  51. package/src/styles/imports/variables.scss +26 -0
  52. package/src/components/_global/html/head.html +0 -22
  53. package/src/components/_global/html/scripts.html +0 -28
  54. package/src/components/_global/js/_polyfills/global.js +0 -19
  55. package/src/components/_template/html/component-page.html +0 -75
  56. package/src/components/_template/js/global.js +0 -3
  57. package/src/components/accordion/html/accordion-group.html +0 -163
  58. package/src/components/accordion/html/default.html +0 -99
  59. package/src/components/banner_basic/js/global.js +0 -3
  60. package/src/components/loading_spinner/js/global.js +0 -3
  61. package/src/components/pagination/html/default.html +0 -39
  62. package/src/components/search_box/html/component.html +0 -26
  63. package/src/data/current.json +0 -400
  64. package/src/data/current_admin.json +0 -305
  65. package/src/data/model_component.js +0 -14
  66. package/src/data/site.json +0 -977
  67. package/src/externals/tinymce_classes.css +0 -62
  68. package/src/html/component-global-elements.html +0 -2857
  69. package/src/html/component-horizontal_rule.html +0 -647
  70. package/src/html/component-internal_navigation.html +0 -583
  71. package/src/html/component-left_hand_navigation.html +0 -57
  72. package/src/html/component-main_navigation.html +0 -583
  73. package/src/html/component-multi_column.html +0 -582
  74. package/src/html/components.html +0 -354
  75. package/src/html/home.html +0 -1898
  76. package/src/html/index.html +0 -129
  77. package/src/html/inner-with-nav.html +0 -605
  78. package/src/html/inner.html +0 -618
package/src/html/component-global-elements.html DELETED
@@ -1,2857 +0,0 @@
1
- <!DOCTYPE html>
2
- <!--[if lt IE 8]>
3
- <html class="no-js lt-ie8 lt-ie9" lang="en">
4
- <![endif]-->
5
- <!--[if IE 8]>
6
- <html class="no-js lt-ie9 ie8" lang="en">
7
- <![endif]-->
8
- <!--[if IE 9]>
9
- <html class="no-js ie9" lang="en">
10
- <![endif]-->
11
- <!--[if !(IE)]><!-->
12
- <html class="no-js" lang="en">
13
- <!--<![endif]-->
14
-
15
- <head>
16
- <title>Queensland Design System</title>
17
-
18
- ${require('../components/_global/html/head.html')}
19
- <script>
20
- var globals = {
21
- site: {
22
- data: {
23
- assetid: "136",
24
- type_code: "site",
25
- version: "0.0.8",
26
- name: "Design System",
27
- short_name: "Design System",
28
- status: "2",
29
- force_secure: "0",
30
- languages: "en",
31
- charset: "utf-8",
32
- created: "2020-12-09 13:11:12",
33
- created_userid: "54",
34
- updated: "2021-01-20 15:08:30",
35
- updated_userid: "312",
36
- published: "Never",
37
- published_userid: "",
38
- status_changed: "2020-12-09 13:11:12",
39
- status_changed_userid: "54",
40
- thumbnail: "",
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
- },
63
- },
64
- 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
- },
209
- },
210
- },
211
- 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
- },
356
- },
357
- children: [
358
- { 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
- },
367
- { asset_name: "Components", asset_assetid: "198" },
368
- { asset_name: "Examples", asset_assetid: "202" },
369
- { asset_name: "Support", asset_assetid: "206" },
370
- ],
371
- },
372
- current: {
373
- data: {
374
- assetid: "676",
375
- type_code: "page_standard",
376
- version: "0.0.16",
377
- name: "Links",
378
- short_name: "Links",
379
- status: "2",
380
- force_secure: "0",
381
- languages: "en",
382
- charset: "utf-8",
383
- created: "2021-01-11 11:48:22",
384
- created_userid: "312",
385
- updated: "2021-01-20 15:08:29",
386
- updated_userid: "312",
387
- published: "Never",
388
- published_userid: "",
389
- status_changed: "2021-01-11 11:48:22",
390
- status_changed_userid: "312",
391
- thumbnail: "",
392
- 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
- },
421
- },
422
- 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
- },
479
- },
480
- },
481
- home: 0,
482
- children: [
483
- {
484
- asset_assetid: "458",
485
- asset_url: "https://qhscb.squiz.cloud/components/accordion",
486
- asset_name: "Accordion",
487
- children: [],
488
- },
489
- {
490
- asset_assetid: "325",
491
- asset_url: "https://qhscb.squiz.cloud/components/callout",
492
- asset_name: "Callout",
493
- children: [],
494
- },
495
- {
496
- asset_assetid: "659",
497
- asset_url: "https://qhscb.squiz.cloud/components/card-listing",
498
- asset_name: "Card Listing",
499
- children: [],
500
- },
501
- {
502
- asset_assetid: "676",
503
- asset_url: "https://qhscb.squiz.cloud/components/links",
504
- asset_name: "Links",
505
- children: [],
506
- },
507
- {
508
- asset_assetid: "683",
509
- asset_url: "https://qhscb.squiz.cloud/components/search-box",
510
- asset_name: "Search Box",
511
- children: [],
512
- },
513
- {
514
- asset_assetid: "785",
515
- asset_url: "https://qhscb.squiz.cloud/components/page-alert",
516
- asset_name: "Page Alert",
517
- children: [],
518
- },
519
- ],
520
- lineage: [
521
- {
522
- asset_assetid: "136",
523
- asset_name: "Design System",
524
- asset_url: "https://qhscb.squiz.cloud",
525
- },
526
- {
527
- asset_assetid: "198",
528
- asset_name: "Components",
529
- asset_url: "https://qhscb.squiz.cloud/components",
530
- },
531
- {
532
- asset_assetid: "676",
533
- asset_name: "Links",
534
- asset_url: "https://qhscb.squiz.cloud/components/links",
535
- },
536
- ],
537
- top: {
538
- asset_assetid: "198",
539
- asset_name: "Components",
540
- asset_url: "https://qhscb.squiz.cloud/components",
541
- },
542
- },
543
- };
544
- </script>
545
- </head>
546
-
547
- <body class="qld__grid">
548
- <!--noindex-->
549
- ${require('../components/header/html/component.hbs')({ "site":require('/src/data/site.json') })}
550
- <!--endnoindex-->
551
- ${require('../components/mega_main_navigation/html/component.hbs')({ "site":require('/src/data/site.json') })}
552
- <!-- MAIN BODY -->
553
- <main class="main" role="main">
554
- <section class="qld__body qld__body--breadcrumb">
555
- <div class="container-fluid">${require('../components/breadcrumbs/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json'), })}</div>
556
- </section>
557
- <!--CONTENT-->
558
- <div class="qld__body">
559
- <div class="container-fluid">
560
- <div class="row">
561
- <div class="col-xs-12 col-lg-4 col-xl-3">
562
- <!-- INTERNAL NAVIGATION -->
563
- ${require('../components/internal_navigation/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json') })}
564
- </div>
565
- <div class="col-xs-12 col-lg-8 col-xl-8" id="content">
566
- <h1>Global elements</h1>
567
- <div class="qld__abstract">
568
- <p>Global elements</p>
569
- </div>
570
- <div class="qld__body">
571
- <div class="container-fluid">
572
- <h1>Heading 1</h1>
573
- <p>Paragraph</p>
574
- <h2>Heading 2</h2>
575
- <p>Paragraph</p>
576
- <h3>Heading 3</h3>
577
- <p>Paragraph</p>
578
- <h4>Heading 4</h4>
579
- <p>Paragraph</p>
580
- <h5>Heading 5</h5>
581
- <p>Paragraph</p>
582
- <h6>Heading 6</h6>
583
- <p>Paragraph</p>
584
- <p class="qld__display-xxxl">qld__display-xxxl</p>
585
- <p class="qld__display-xxl">qld__display-xxl</p>
586
- <p class="qld__display-xl">qld__display-xl</p>
587
- <p class="qld__display-lg">qld__display-lg</p>
588
- <p class="qld__display-md">qld__display-md</p>
589
- <p class="qld__display-sm">qld__display-sm</p>
590
- <p class="qld__display-xs">qld__display-xs</p>
591
-
592
- <h2 style="margin-bottom: 2rem">Default (Light)</h2>
593
- <h3>Blockquote</h3>
594
- <figure class="qld__block-quote">
595
- <blockquote>
596
- A respected paediatrician and tireless advocate for abused children, and a dedicated oncology nurse and long-standing volunteer for Camp Quality have been honoured for the exceptional and enduring
597
- contribution they made to improving the lives of children<br />
598
- and young people.
599
- </blockquote>
600
- <figcaption class="qld__quote-source">Source text</figcaption>
601
- </figure>
602
-
603
- <h3>Modal</h3>
604
- <button class="qld__btn qld__btn--icon-trail qld__open-modal" data-modaltarget="qld__share-modal">
605
- Modal button
606
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
607
- <use href="/mysource_files/img/QLD-icons.svg#share"></use>
608
- </svg>
609
- </button>
610
- <div id="qld__share-modal" class="qld__modal" tabindex="-1">
611
- <div class="qld__modal__underlay"></div>
612
- <div class="qld__modal__inner">
613
- <div class="qld__modal__header">
614
- <svg class="qld__icon qld__icon--md qld__modal__header-icon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
615
- <use href="/mysource_files/img/QLD-icons.svg#share"></use>
616
- </svg>
617
- <span class="qld__modal__header-heading qld__display-lg">Modal Header</span>
618
- <button class="qld__btn qld__btn--close" data-action="close">
619
- <span class="sr-only"> Close modal </span>
620
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
621
- <use href="/mysource_files/img/QLD-icons.svg#close"></use>
622
- </svg>
623
- </button>
624
- </div>
625
- <div class="qld__modal__content">
626
- <p>Modal Body</p>
627
- </div>
628
- <div class="qld__modal__footer">
629
- <hr class="qld__horizontal-rule qld__horizontal-rule--md" />
630
- <button class="qld__btn">Primary</button>
631
- <button class="qld__btn qld__btn--secondary">secondary</button>
632
- </div>
633
- </div>
634
- </div>
635
-
636
- <h3>Primary Buttons</h3>
637
- <ul class="qld__link-list qld__link-list--inline">
638
- <!-- Link button -->
639
- <li>
640
- <a href="#" class="qld__btn" hover="">Link</a>
641
- </li>
642
- <!-- Default button -->
643
- <li>
644
- <button type="button" class="qld__btn">Default</button>
645
- </li>
646
- <!-- Leading icon -->
647
- <li>
648
- <button type="button" class="qld__btn qld__btn--icon-lead">
649
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
650
- <use href="/mysource_files/img/QLD-icons.svg#announcement"></use>
651
- </svg>
652
- Leading icon
653
- </button>
654
- </li>
655
- <!-- Trailing icon -->
656
- <li>
657
- <button type="button" class="qld__btn qld__btn--icon-trail">
658
- Trailing icon
659
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
660
- <use href="/mysource_files/img/QLD-icons.svg#announcement"></use>
661
- </svg>
662
- </button>
663
- </li>
664
- <!-- Disabled -->
665
- <li>
666
- <button type="button" class="qld__btn" disabled="">Disabled</button>
667
- </li>
668
- </ul>
669
-
670
- <h3>Secondary Buttons</h3>
671
- <ul class="qld__link-list qld__link-list--inline">
672
- <!-- Link button -->
673
- <li>
674
- <a href="#" class="qld__btn qld__btn--secondary" hover="">Link</a>
675
- </li>
676
- <!-- Default button -->
677
- <li>
678
- <button type="button" class="qld__btn qld__btn--secondary">Default</button>
679
- </li>
680
- <!-- Leading icon -->
681
- <li>
682
- <button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-lead">
683
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
684
- <use href="/mysource_files/img/QLD-icons.svg#announcement"></use>
685
- </svg>
686
- Leading icon
687
- </button>
688
- </li>
689
- <!-- Trailing icon -->
690
- <li>
691
- <button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-trail">
692
- Trailing icon
693
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
694
- <use href="/mysource_files/img/QLD-icons.svg#announcement"></use>
695
- </svg>
696
- </button>
697
- </li>
698
- <!-- Disabled -->
699
- <li>
700
- <button type="button" class="qld__btn qld__btn--secondary" disabled="">Disabled</button>
701
- </li>
702
- </ul>
703
-
704
- <h3>Tertiary Buttons</h3>
705
- <ul class="qld__link-list qld__link-list--inline">
706
- <!-- Link button -->
707
- <li>
708
- <a href="#" class="qld__btn qld__btn--tertiary" hover="">Link</a>
709
- </li>
710
- <!-- Default button -->
711
- <li>
712
- <button type="button" class="qld__btn qld__btn--tertiary">Default</button>
713
- </li>
714
- <!-- Leading icon -->
715
- <li>
716
- <button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-lead">
717
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
718
- <use href="/mysource_files/img/QLD-icons.svg#announcement"></use>
719
- </svg>
720
- Leading icon
721
- </button>
722
- </li>
723
- <!-- Trailing icon -->
724
- <li>
725
- <button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-trail">
726
- Trailing icon
727
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
728
- <use href="/mysource_files/img/QLD-icons.svg#announcement"></use>
729
- </svg>
730
- </button>
731
- </li>
732
- <!-- Disabled -->
733
- <li>
734
- <button type="button" class="qld__btn qld__btn--tertiary" disabled="">Disabled</button>
735
- </li>
736
- </ul>
737
-
738
- <h3 style="margin-bottom: 2rem">CTA links</h3>
739
- <a href="#" class="qld__cta-link">Link</a>
740
- <a href="#" class="qld__cta-link" disabled>Link - disabled</a>
741
- <a href="#" class="qld__cta-link qld__cta-link--view-all">Link - view all</a>
742
-
743
- <h3 style="margin-bottom: 2rem">Direction links</h3>
744
- <a href="#" class="qld__direction-link--left">Link</a>
745
- <a href="#" class="qld__direction-link--right">Link</a>
746
- <a href="#" class="qld__direction-link--up">Link</a>
747
- <a href="#" class="qld__direction-link--down">Link</a>
748
-
749
- <h3 style="margin-bottom: 2rem">Link columns</h3>
750
- <ul aria-label="Related links" class="qld__link-columns">
751
- <li><a href="#">Contact us</a></li>
752
- <li><a href="#">About us</a></li>
753
- <li><a href="#">Products</a></li>
754
- <li><a href="#">FAQ</a></li>
755
- <li>
756
- <a href="#">Terms and conditions</a>
757
- </li>
758
- <li><a href="#">Privacy policy</a></li>
759
- <li class="qld__link-columns__all-link">
760
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
761
- </li>
762
- </ul>
763
- <ul aria-label="Related links" class="qld__link-columns qld__link-columns--2-col">
764
- <li><a href="#">Contact us</a></li>
765
- <li><a href="#">About us</a></li>
766
- <li><a href="#">Products</a></li>
767
- <li><a href="#">FAQ</a></li>
768
- <li>
769
- <a href="#">Terms and conditions</a>
770
- </li>
771
- <li><a href="#">Privacy policy</a></li>
772
- <li class="qld__link-columns__all-link">
773
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
774
- </li>
775
- </ul>
776
- <ul aria-label="Related links" class="qld__link-columns qld__link-columns--3-col">
777
- <li><a href="#">Contact us</a></li>
778
- <li><a href="#">About us</a></li>
779
- <li><a href="#">Products</a></li>
780
- <li><a href="#">FAQ</a></li>
781
- <li>
782
- <a href="#">Terms and conditions</a>
783
- </li>
784
- <li><a href="#">Privacy policy</a></li>
785
- <li class="qld__link-columns__all-link">
786
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
787
- </li>
788
- </ul>
789
-
790
- <h3 style="margin-bottom: 2rem">Link list - WIP</h3>
791
- <ul class="qld__link-list">
792
- <li><a href="#">List item</a></li>
793
- <li><a href="#">List item</a></li>
794
- <li><a href="#">List item</a></li>
795
- </ul>
796
-
797
- <h3 style="margin-bottom: 2rem">Table</h3>
798
- <table class="qld__table">
799
- <thead>
800
- <tr>
801
- <th>Date</th>
802
- <th>Event</th>
803
- <th>Venue</th>
804
- </tr>
805
- </thead>
806
- <tbody>
807
- <tr>
808
- <td>12 February</td>
809
- <td>Waltz with Strauss</td>
810
- <td>Main Hall</td>
811
- </tr>
812
- <tr>
813
- <td>12 February</td>
814
- <td>Waltz with Strauss</td>
815
- <td>Main Hall</td>
816
- </tr>
817
- </tbody>
818
- </table>
819
- <table class="qld__table qld__table--striped">
820
- <thead>
821
- <tr>
822
- <th>Date</th>
823
- <th>Event</th>
824
- <th>Venue</th>
825
- </tr>
826
- </thead>
827
- <tbody>
828
- <tr>
829
- <td>12 February</td>
830
- <td>Waltz with Strauss</td>
831
- <td>Main Hall</td>
832
- </tr>
833
- <tr>
834
- <td>12 February</td>
835
- <td>Waltz with Strauss</td>
836
- <td>Main Hall</td>
837
- </tr>
838
- </tbody>
839
- </table>
840
-
841
- <form role="search" aria-label="sitewide" class="qld__search qld__search--responsive" action="https://qhscb.squiz.cloud/wog-design-system/search">
842
- <label for="qld__search__query" class="qld__search__label">Search this website</label>
843
- <div class="qld__search__inner">
844
- <span class="twitter-typeahead" style="position: relative; display: inline-block">
845
- <input
846
- type="search"
847
- class="qld__text-input tt-hint"
848
- autocomplete="off"
849
- readonly=""
850
- spellcheck="false"
851
- tabindex="-1"
852
- aria-hidden="true"
853
- style="
854
- position: absolute;
855
- top: 0px;
856
- left: 0px;
857
- border-color: transparent;
858
- box-shadow: none;
859
- opacity: 1;
860
- background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);
861
- "
862
- dir="ltr"
863
- /><input
864
- type="search"
865
- id="qld__header__search-query"
866
- name="query"
867
- class="qld__text-input tt-input"
868
- autocomplete="off"
869
- spellcheck="false"
870
- dir="auto"
871
- aria-owns="qld__header__search-query_listbox"
872
- role="combobox"
873
- aria-autocomplete="list"
874
- aria-expanded="false"
875
- style="position: relative; vertical-align: top; background-color: transparent"
876
- /><span
877
- role="status"
878
- aria-live="polite"
879
- style="
880
- position: absolute;
881
- padding: 0px;
882
- border: 0px;
883
- height: 1px;
884
- width: 1px;
885
- margin-bottom: -1px;
886
- margin-right: -1px;
887
- overflow: hidden;
888
- clip: rect(0px, 0px, 0px, 0px);
889
- white-space: nowrap;
890
- "
891
- ></span>
892
- <pre
893
- aria-hidden="true"
894
- style="
895
- position: absolute;
896
- visibility: hidden;
897
- white-space: pre;
898
- font-family: Lato, -apple-system, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
899
- font-size: 16px;
900
- font-style: normal;
901
- font-variant: normal;
902
- font-weight: 400;
903
- word-spacing: 0px;
904
- letter-spacing: 0px;
905
- text-indent: 0px;
906
- text-rendering: auto;
907
- text-transform: none;
908
- "
909
- ></pre>
910
- <div role="listbox" class="tt-menu" id="qld__search__query-listbox" aria-expanded="false" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none">
911
- <div role="presentation" class="tt-dataset tt-dataset-organic"></div>
912
- </div>
913
- </span>
914
- <div class="qld__search__btn">
915
- <button class="qld__btn qld__btn--search" type="submit" aria-label="Search">
916
- <span class="qld__btn__icon"></span>
917
- <span class="qld__btn__text">Search</span>
918
- </button>
919
- </div>
920
- </div>
921
- </form>
922
-
923
- <section class="qld__body qld__card--wrapper qld__card--slider">
924
- <div class="container-fluid">
925
- <div class="row">
926
- <div class="qld__card-intro col-xs-12 qld__card-intro--no-top-p">
927
- <h2>Audio and podcasts</h2>
928
- </div>
929
- </div>
930
- <div class="row">
931
- <ul class="qld__card-list qld__card-list--matchheight slick-initialized slick-slider" data-action="slick-slider" data-type="four">
932
- <div class="slick-list draggable">
933
- <div class="slick-track" style="opacity: 1; width: 385px; transform: translate3d(0px, 0px, 0px)">
934
- <div class="slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 385px">
935
- <div>
936
- <li class="col-xs-12 col-md-3" style="width: 100%; display: inline-block">
937
- <div class="qld__card qld__card__multi-action qld__card--image">
938
- <a href="https://qhscb.squiz.cloud/wog-design-system/qh-extended/article-home/podcasts/podcast-series/podcast-episode-1" class="qld__card__image-link" tabindex="0">
939
- <div
940
- class="qld__responsive-media-img--bg"
941
- style="background-image: url('https://qhscb.squiz.cloud/wog-design-system/_media/images/banner2.png')"
942
- alt="Image for Podcast Episode 1"
943
- ></div>
944
- <div class="qld__card__image-tag">
945
- <div class="qld__card__image-tag--title">
946
- <i class="fa-light fa-podcast"></i>
947
- <span class="qld__card__image-tag__text--bold">Listen</span>
948
- </div>
949
- <div class="qld__card__image-tag--length">
950
- <i class="far fa-clock" aria-hidden="true"></i>
951
- <span class="qld__card__image-tag__text--small">27:30</span>
952
- </div>
953
- </div>
954
- </a>
955
- <div class="qld__card__inner">
956
- <div class="qld__card__content">
957
- <div class="qld__card__content-inner">
958
- <p class="qld__card__date">19.09.2022</p>
959
- <h3 class="qld__card__title">
960
- <a
961
- class="qld__card--clickable__link"
962
- href="https://qhscb.squiz.cloud/wog-design-system/qh-extended/article-home/podcasts/podcast-series/podcast-episode-1"
963
- tabindex="0"
964
- >Podcast Episode 1</a
965
- >
966
- </h3>
967
- </div>
968
- </div>
969
- <div class="qld__card__footer">
970
- <hr class="qld__horizontal-rule" />
971
- <div class="qld__card__footer-inner">
972
- <ul class="qld__card__tags qld__tag-list">
973
- <li>
974
- <a
975
- href="https://qhscb.squiz.cloud/wog-design-system/qh-extended/article-home/featured-articles?tag=first_aid"
976
- class="qld__tag qld__tag--link"
977
- tabindex="0"
978
- >First aid</a
979
- >
980
- </li>
981
- <li>
982
- <a
983
- href="https://qhscb.squiz.cloud/wog-design-system/qh-extended/article-home/featured-articles?tag=facilities"
984
- class="qld__tag qld__tag--link"
985
- tabindex="0"
986
- >Facilities</a
987
- >
988
- </li>
989
- </ul>
990
- </div>
991
- </div>
992
- </div>
993
- </div>
994
- </li>
995
- </div>
996
- </div>
997
- </div>
998
- </div>
999
- </ul>
1000
- <div class="qld__card-list__footer col-xs-12">
1001
- <div class="qld__slick-controls"></div>
1002
- <a class="qld__cta-link qld__cta-link--view-all" href="https://qhscb.squiz.cloud/wog-design-system/qh-extended/article-home/podcasts">All podcasts</a>
1003
- </div>
1004
- </div>
1005
- </div>
1006
- </section>
1007
- </div>
1008
- </div>
1009
- <div class="qld__body qld__body--alt">
1010
- <div class="container-fluid">
1011
- <h2 style="margin-bottom: 2rem">Alternative</h2>
1012
- <h3>Blockquote</h3>
1013
- <figure class="qld__block-quote">
1014
- <blockquote>
1015
- A respected paediatrician and tireless advocate for abused children, and a dedicated oncology nurse and long-standing volunteer for Camp Quality have been honoured for the exceptional and enduring
1016
- contribution they made to improving the lives of children<br />
1017
- and young people.
1018
- </blockquote>
1019
- <figcaption class="qld__quote-source">Source text</figcaption>
1020
- </figure>
1021
-
1022
- <h3>Primary Buttons</h3>
1023
- <ul class="qld__link-list qld__link-list--inline">
1024
- <!-- Link button -->
1025
- <li>
1026
- <a href="#" class="qld__btn" hover="">Link</a>
1027
- </li>
1028
- <!-- Default button -->
1029
- <li>
1030
- <button type="button" class="qld__btn">Default</button>
1031
- </li>
1032
- <!-- Leading icon -->
1033
- <li>
1034
- <button type="button" class="qld__btn qld__btn--icon-lead">
1035
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1036
- <use href="/mysource_files/img/QLD-icons.svg#design"></use>
1037
- </svg>
1038
- Leading icon
1039
- </button>
1040
- </li>
1041
- <!-- Trailing icon -->
1042
- <li>
1043
- <button type="button" class="qld__btn qld__btn--icon-trail">
1044
- Trailing icon
1045
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1046
- <use href="/mysource_files/img/QLD-icons.svg#design"></use>
1047
- </svg>
1048
- </button>
1049
- </li>
1050
- <!-- Disabled -->
1051
- <li>
1052
- <button type="button" class="qld__btn" disabled="">Disabled</button>
1053
- </li>
1054
- </ul>
1055
-
1056
- <h3>Secondary Buttons</h3>
1057
- <ul class="qld__link-list qld__link-list--inline">
1058
- <!-- Link button -->
1059
- <li>
1060
- <a href="#" class="qld__btn qld__btn--secondary" hover="">Link</a>
1061
- </li>
1062
- <!-- Default button -->
1063
- <li>
1064
- <button type="button" class="qld__btn qld__btn--secondary">Default</button>
1065
- </li>
1066
- <!-- Leading icon -->
1067
- <li>
1068
- <button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-lead">
1069
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1070
- <use href="/mysource_files/img/QLD-icons.svg#design"></use>
1071
- </svg>
1072
- Leading icon
1073
- </button>
1074
- </li>
1075
- <!-- Trailing icon -->
1076
- <li>
1077
- <button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-trail">
1078
- Trailing icon
1079
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1080
- <use href="/mysource_files/img/QLD-icons.svg#design"></use>
1081
- </svg>
1082
- </button>
1083
- </li>
1084
- <!-- Disabled -->
1085
- <li>
1086
- <button type="button" class="qld__btn qld__btn--secondary" disabled="">Disabled</button>
1087
- </li>
1088
- </ul>
1089
-
1090
- <h3>Tertiary Buttons</h3>
1091
- <ul class="qld__link-list qld__link-list--inline">
1092
- <!-- Link button -->
1093
- <li>
1094
- <a href="#" class="qld__btn qld__btn--tertiary" hover="">Link</a>
1095
- </li>
1096
- <!-- Default button -->
1097
- <li>
1098
- <button type="button" class="qld__btn qld__btn--tertiary">Default</button>
1099
- </li>
1100
- <!-- Leading icon -->
1101
- <li>
1102
- <button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-lead">
1103
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1104
- <use href="/mysource_files/img/QLD-icons.svg#design"></use>
1105
- </svg>
1106
- Leading icon
1107
- </button>
1108
- </li>
1109
- <!-- Trailing icon -->
1110
- <li>
1111
- <button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-trail">
1112
- Trailing icon
1113
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1114
- <use href="/mysource_files/img/QLD-icons.svg#design"></use>
1115
- </svg>
1116
- </button>
1117
- </li>
1118
- <!-- Disabled -->
1119
- <li>
1120
- <button type="button" class="qld__btn qld__btn--tertiary" disabled="">Disabled</button>
1121
- </li>
1122
- </ul>
1123
-
1124
- <h3 style="margin-bottom: 2rem">CTA links</h3>
1125
- <a href="#" class="qld__cta-link">Link</a>
1126
- <a href="#" class="qld__cta-link" disabled>Link - disabled</a>
1127
- <a href="#" class="qld__cta-link qld__cta-link--view-all">Link - view all</a>
1128
-
1129
- <h3 style="margin-bottom: 2rem">Direction links</h3>
1130
- <a href="#" class="qld__direction-link--left">Link</a>
1131
- <a href="#" class="qld__direction-link--right">Link</a>
1132
- <a href="#" class="qld__direction-link--up">Link</a>
1133
- <a href="#" class="qld__direction-link--down">Link</a>
1134
-
1135
- <h3 style="margin-bottom: 2rem">Link columns</h3>
1136
- <ul aria-label="Related links" class="qld__link-columns">
1137
- <li><a href="#">Contact us</a></li>
1138
- <li><a href="#">About us</a></li>
1139
- <li><a href="#">Products</a></li>
1140
- <li><a href="#">FAQ</a></li>
1141
- <li>
1142
- <a href="#">Terms and conditions</a>
1143
- </li>
1144
- <li><a href="#">Privacy policy</a></li>
1145
- <li class="qld__link-columns__all-link">
1146
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
1147
- </li>
1148
- </ul>
1149
- <ul aria-label="Related links" class="qld__link-columns qld__link-columns--2-col">
1150
- <li><a href="#">Contact us</a></li>
1151
- <li><a href="#">About us</a></li>
1152
- <li><a href="#">Products</a></li>
1153
- <li><a href="#">FAQ</a></li>
1154
- <li>
1155
- <a href="#">Terms and conditions</a>
1156
- </li>
1157
- <li><a href="#">Privacy policy</a></li>
1158
- <li class="qld__link-columns__all-link">
1159
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
1160
- </li>
1161
- </ul>
1162
- <ul aria-label="Related links" class="qld__link-columns qld__link-columns--3-col">
1163
- <li><a href="#">Contact us</a></li>
1164
- <li><a href="#">About us</a></li>
1165
- <li><a href="#">Products</a></li>
1166
- <li><a href="#">FAQ</a></li>
1167
- <li>
1168
- <a href="#">Terms and conditions</a>
1169
- </li>
1170
- <li><a href="#">Privacy policy</a></li>
1171
- <li class="qld__link-columns__all-link">
1172
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
1173
- </li>
1174
- </ul>
1175
-
1176
- <h3 style="margin-bottom: 2rem">Link list - WIP</h3>
1177
- <ul class="qld__link-list">
1178
- <li><a href="#">List item</a></li>
1179
- <li><a href="#">List item</a></li>
1180
- <li><a href="#">List item</a></li>
1181
- </ul>
1182
-
1183
- <h3 style="margin-bottom: 2rem">Table</h3>
1184
- <table class="qld__table">
1185
- <thead>
1186
- <tr>
1187
- <th>Date</th>
1188
- <th>Event</th>
1189
- <th>Venue</th>
1190
- </tr>
1191
- </thead>
1192
- <tbody>
1193
- <tr>
1194
- <td>12 February</td>
1195
- <td>Waltz with Strauss</td>
1196
- <td>Main Hall</td>
1197
- </tr>
1198
- <tr>
1199
- <td>12 February</td>
1200
- <td>Waltz with Strauss</td>
1201
- <td>Main Hall</td>
1202
- </tr>
1203
- </tbody>
1204
- </table>
1205
- <table class="qld__table qld__table--striped">
1206
- <thead>
1207
- <tr>
1208
- <th>Date</th>
1209
- <th>Event</th>
1210
- <th>Venue</th>
1211
- </tr>
1212
- </thead>
1213
- <tbody>
1214
- <tr>
1215
- <td>12 February</td>
1216
- <td>Waltz with Strauss</td>
1217
- <td>Main Hall</td>
1218
- </tr>
1219
- <tr>
1220
- <td>12 February</td>
1221
- <td>Waltz with Strauss</td>
1222
- <td>Main Hall</td>
1223
- </tr>
1224
- </tbody>
1225
- </table>
1226
- <form role="search" aria-label="sitewide" class="qld__search qld__search--responsive" action="https://qhscb.squiz.cloud/wog-design-system/search">
1227
- <label for="qld__search__query" class="qld__search__label">Search this website</label>
1228
- <div class="qld__search__inner">
1229
- <span class="twitter-typeahead" style="position: relative; display: inline-block">
1230
- <input
1231
- type="search"
1232
- class="qld__text-input tt-hint"
1233
- autocomplete="off"
1234
- readonly=""
1235
- spellcheck="false"
1236
- tabindex="-1"
1237
- aria-hidden="true"
1238
- style="
1239
- position: absolute;
1240
- top: 0px;
1241
- left: 0px;
1242
- border-color: transparent;
1243
- box-shadow: none;
1244
- opacity: 1;
1245
- background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);
1246
- "
1247
- dir="ltr"
1248
- /><input
1249
- type="search"
1250
- id="qld__header__search-query"
1251
- name="query"
1252
- class="qld__text-input tt-input"
1253
- autocomplete="off"
1254
- spellcheck="false"
1255
- dir="auto"
1256
- aria-owns="qld__header__search-query_listbox"
1257
- role="combobox"
1258
- aria-autocomplete="list"
1259
- aria-expanded="false"
1260
- style="position: relative; vertical-align: top; background-color: transparent"
1261
- /><span
1262
- role="status"
1263
- aria-live="polite"
1264
- style="
1265
- position: absolute;
1266
- padding: 0px;
1267
- border: 0px;
1268
- height: 1px;
1269
- width: 1px;
1270
- margin-bottom: -1px;
1271
- margin-right: -1px;
1272
- overflow: hidden;
1273
- clip: rect(0px, 0px, 0px, 0px);
1274
- white-space: nowrap;
1275
- "
1276
- ></span>
1277
- <pre
1278
- aria-hidden="true"
1279
- style="
1280
- position: absolute;
1281
- visibility: hidden;
1282
- white-space: pre;
1283
- font-family: Lato, -apple-system, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
1284
- font-size: 16px;
1285
- font-style: normal;
1286
- font-variant: normal;
1287
- font-weight: 400;
1288
- word-spacing: 0px;
1289
- letter-spacing: 0px;
1290
- text-indent: 0px;
1291
- text-rendering: auto;
1292
- text-transform: none;
1293
- "
1294
- ></pre>
1295
- <div role="listbox" class="tt-menu" id="qld__search__query-listbox" aria-expanded="false" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none">
1296
- <div role="presentation" class="tt-dataset tt-dataset-organic"></div>
1297
- </div>
1298
- </span>
1299
- <div class="qld__search__btn">
1300
- <button class="qld__btn qld__btn--search" type="submit" aria-label="Search">
1301
- <span class="qld__btn__icon"></span>
1302
- <span class="qld__btn__text">Search</span>
1303
- </button>
1304
- </div>
1305
- </div>
1306
- </form>
1307
- </div>
1308
- </div>
1309
- <div class="qld__body qld__body--dark">
1310
- <div class="container-fluid">
1311
- <h2 style="margin-bottom: 2rem">Dark</h2>
1312
- <h3>Blockquote</h3>
1313
- <figure class="qld__block-quote">
1314
- <blockquote>
1315
- A respected paediatrician and tireless advocate for abused children, and a dedicated oncology nurse and long-standing volunteer for Camp Quality have been honoured for the exceptional and enduring
1316
- contribution they made to improving the lives of children<br />
1317
- and young people.
1318
- </blockquote>
1319
- <figcaption class="qld__quote-source">Source text</figcaption>
1320
- </figure>
1321
-
1322
- <h3>Primary Buttons</h3>
1323
- <ul class="qld__link-list qld__link-list--inline">
1324
- <!-- Link button -->
1325
- <li>
1326
- <a href="#" class="qld__btn" hover="">Link</a>
1327
- </li>
1328
- <!-- Default button -->
1329
- <li>
1330
- <button type="button" class="qld__btn">Default</button>
1331
- </li>
1332
- <!-- Leading icon -->
1333
- <li>
1334
- <button type="button" class="qld__btn qld__btn--icon-lead">
1335
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1336
- <use href="/mysource_files/img/QLD-icons.svg#identity"></use>
1337
- </svg>
1338
- Leading icon
1339
- </button>
1340
- </li>
1341
- <!-- Trailing icon -->
1342
- <li>
1343
- <button type="button" class="qld__btn qld__btn--icon-trail">
1344
- Trailing icon
1345
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1346
- <use href="/mysource_files/img/QLD-icons.svg#identity"></use>
1347
- </svg>
1348
- </button>
1349
- </li>
1350
- <!-- Disabled -->
1351
- <li>
1352
- <button type="button" class="qld__btn" disabled="">Disabled</button>
1353
- </li>
1354
- </ul>
1355
-
1356
- <h3>Secondary Buttons</h3>
1357
- <ul class="qld__link-list qld__link-list--inline">
1358
- <!-- Link button -->
1359
- <li>
1360
- <a href="#" class="qld__btn qld__btn--secondary" hover="">Link</a>
1361
- </li>
1362
- <!-- Default button -->
1363
- <li>
1364
- <button type="button" class="qld__btn qld__btn--secondary">Default</button>
1365
- </li>
1366
- <!-- Leading icon -->
1367
- <li>
1368
- <button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-lead">
1369
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1370
- <use href="/mysource_files/img/QLD-icons.svg#identity"></use>
1371
- </svg>
1372
- Leading icon
1373
- </button>
1374
- </li>
1375
- <!-- Trailing icon -->
1376
- <li>
1377
- <button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-trail">
1378
- Trailing icon
1379
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1380
- <use href="/mysource_files/img/QLD-icons.svg#identity"></use>
1381
- </svg>
1382
- </button>
1383
- </li>
1384
- <!-- Disabled -->
1385
- <li>
1386
- <button type="button" class="qld__btn qld__btn--secondary" disabled="">Disabled</button>
1387
- </li>
1388
- </ul>
1389
-
1390
- <h3>Tertiary Buttons</h3>
1391
- <ul class="qld__link-list qld__link-list--inline">
1392
- <!-- Link button -->
1393
- <li>
1394
- <a href="#" class="qld__btn qld__btn--tertiary" hover="">Link</a>
1395
- </li>
1396
- <!-- Default button -->
1397
- <li>
1398
- <button type="button" class="qld__btn qld__btn--tertiary">Default</button>
1399
- </li>
1400
- <!-- Leading icon -->
1401
- <li>
1402
- <button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-lead">
1403
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1404
- <use href="/mysource_files/img/QLD-icons.svg#identity"></use>
1405
- </svg>
1406
- Leading icon
1407
- </button>
1408
- </li>
1409
- <!-- Trailing icon -->
1410
- <li>
1411
- <button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-trail">
1412
- Trailing icon
1413
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1414
- <use href="/mysource_files/img/QLD-icons.svg#identity"></use>
1415
- </svg>
1416
- </button>
1417
- </li>
1418
- <!-- Disabled -->
1419
- <li>
1420
- <button type="button" class="qld__btn qld__btn--tertiary" disabled="">Disabled</button>
1421
- </li>
1422
- </ul>
1423
-
1424
- <h3 style="margin-bottom: 2rem">Links</h3>
1425
- <a href="#" class="qld__cta-link">Link</a>
1426
- <a href="#" class="qld__cta-link" disabled>Link - disabled</a>
1427
- <a href="#" class="qld__cta-link qld__cta-link--view-all">Link - view all</a>
1428
-
1429
- <h3 style="margin-bottom: 2rem">Direction links</h3>
1430
- <a href="#" class="qld__direction-link--left">Link</a>
1431
- <a href="#" class="qld__direction-link--right">Link</a>
1432
- <a href="#" class="qld__direction-link--up">Link</a>
1433
- <a href="#" class="qld__direction-link--down">Link</a>
1434
-
1435
- <h3 style="margin-bottom: 2rem">Link columns</h3>
1436
- <ul aria-label="Related links" class="qld__link-columns">
1437
- <li><a href="#">Contact us</a></li>
1438
- <li><a href="#">About us</a></li>
1439
- <li><a href="#">Products</a></li>
1440
- <li><a href="#">FAQ</a></li>
1441
- <li>
1442
- <a href="#">Terms and conditions</a>
1443
- </li>
1444
- <li><a href="#">Privacy policy</a></li>
1445
- <li class="qld__link-columns__all-link">
1446
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
1447
- </li>
1448
- </ul>
1449
- <ul aria-label="Related links" class="qld__link-columns qld__link-columns--2-col">
1450
- <li><a href="#">Contact us</a></li>
1451
- <li><a href="#">About us</a></li>
1452
- <li><a href="#">Products</a></li>
1453
- <li><a href="#">FAQ</a></li>
1454
- <li>
1455
- <a href="#">Terms and conditions</a>
1456
- </li>
1457
- <li><a href="#">Privacy policy</a></li>
1458
- <li class="qld__link-columns__all-link">
1459
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
1460
- </li>
1461
- </ul>
1462
- <ul aria-label="Related links" class="qld__link-columns qld__link-columns--3-col">
1463
- <li><a href="#">Contact us</a></li>
1464
- <li><a href="#">About us</a></li>
1465
- <li><a href="#">Products</a></li>
1466
- <li><a href="#">FAQ</a></li>
1467
- <li>
1468
- <a href="#">Terms and conditions</a>
1469
- </li>
1470
- <li><a href="#">Privacy policy</a></li>
1471
- <li class="qld__link-columns__all-link">
1472
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
1473
- </li>
1474
- </ul>
1475
-
1476
- <h3 style="margin-bottom: 2rem">Link list - WIP</h3>
1477
- <ul class="qld__link-list">
1478
- <li><a href="#">List item</a></li>
1479
- <li><a href="#">List item</a></li>
1480
- <li><a href="#">List item</a></li>
1481
- </ul>
1482
-
1483
- <h3 style="margin-bottom: 2rem">Table</h3>
1484
- <table class="qld__table">
1485
- <thead>
1486
- <tr>
1487
- <th>Date</th>
1488
- <th>Event</th>
1489
- <th>Venue</th>
1490
- </tr>
1491
- </thead>
1492
- <tbody>
1493
- <tr>
1494
- <td>12 February</td>
1495
- <td>Waltz with Strauss</td>
1496
- <td>Main Hall</td>
1497
- </tr>
1498
- <tr>
1499
- <td>12 February</td>
1500
- <td>Waltz with Strauss</td>
1501
- <td>Main Hall</td>
1502
- </tr>
1503
- </tbody>
1504
- </table>
1505
- <table class="qld__table qld__table--striped">
1506
- <thead>
1507
- <tr>
1508
- <th>Date</th>
1509
- <th>Event</th>
1510
- <th>Venue</th>
1511
- </tr>
1512
- </thead>
1513
- <tbody>
1514
- <tr>
1515
- <td>12 February</td>
1516
- <td>Waltz with Strauss</td>
1517
- <td>Main Hall</td>
1518
- </tr>
1519
- <tr>
1520
- <td>12 February</td>
1521
- <td>Waltz with Strauss</td>
1522
- <td>Main Hall</td>
1523
- </tr>
1524
- </tbody>
1525
- </table>
1526
- <form role="search" aria-label="sitewide" class="qld__search qld__search--responsive" action="https://qhscb.squiz.cloud/wog-design-system/search">
1527
- <label for="qld__search__query" class="qld__search__label">Search this website</label>
1528
- <div class="qld__search__inner">
1529
- <span class="twitter-typeahead" style="position: relative; display: inline-block">
1530
- <input
1531
- type="search"
1532
- class="qld__text-input tt-hint"
1533
- autocomplete="off"
1534
- readonly=""
1535
- spellcheck="false"
1536
- tabindex="-1"
1537
- aria-hidden="true"
1538
- style="
1539
- position: absolute;
1540
- top: 0px;
1541
- left: 0px;
1542
- border-color: transparent;
1543
- box-shadow: none;
1544
- opacity: 1;
1545
- background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);
1546
- "
1547
- dir="ltr"
1548
- /><input
1549
- type="search"
1550
- id="qld__header__search-query"
1551
- name="query"
1552
- class="qld__text-input tt-input"
1553
- autocomplete="off"
1554
- spellcheck="false"
1555
- dir="auto"
1556
- aria-owns="qld__header__search-query_listbox"
1557
- role="combobox"
1558
- aria-autocomplete="list"
1559
- aria-expanded="false"
1560
- style="position: relative; vertical-align: top; background-color: transparent"
1561
- /><span
1562
- role="status"
1563
- aria-live="polite"
1564
- style="
1565
- position: absolute;
1566
- padding: 0px;
1567
- border: 0px;
1568
- height: 1px;
1569
- width: 1px;
1570
- margin-bottom: -1px;
1571
- margin-right: -1px;
1572
- overflow: hidden;
1573
- clip: rect(0px, 0px, 0px, 0px);
1574
- white-space: nowrap;
1575
- "
1576
- ></span>
1577
- <pre
1578
- aria-hidden="true"
1579
- style="
1580
- position: absolute;
1581
- visibility: hidden;
1582
- white-space: pre;
1583
- font-family: Lato, -apple-system, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
1584
- font-size: 16px;
1585
- font-style: normal;
1586
- font-variant: normal;
1587
- font-weight: 400;
1588
- word-spacing: 0px;
1589
- letter-spacing: 0px;
1590
- text-indent: 0px;
1591
- text-rendering: auto;
1592
- text-transform: none;
1593
- "
1594
- ></pre>
1595
- <div role="listbox" class="tt-menu" id="qld__search__query-listbox" aria-expanded="false" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none">
1596
- <div role="presentation" class="tt-dataset tt-dataset-organic"></div>
1597
- </div>
1598
- </span>
1599
- <div class="qld__search__btn">
1600
- <button class="qld__btn qld__btn--search" type="submit" aria-label="Search">
1601
- <span class="qld__btn__icon"></span>
1602
- <span class="qld__btn__text">Search</span>
1603
- </button>
1604
- </div>
1605
- </div>
1606
- </form>
1607
- </div>
1608
- </div>
1609
- <div class="qld__body qld__body--dark-alt">
1610
- <div class="container-fluid">
1611
- <h2 style="margin-bottom: 2rem">Dark Alternative</h2>
1612
- <h3>Blockquote</h3>
1613
- <figure class="qld__block-quote">
1614
- <blockquote>
1615
- A respected paediatrician and tireless advocate for abused children, and a dedicated oncology nurse and long-standing volunteer for Camp Quality have been honoured for the exceptional and enduring
1616
- contribution they made to improving the lives of children<br />
1617
- and young people.
1618
- </blockquote>
1619
- <figcaption class="qld__quote-source">Source text</figcaption>
1620
- </figure>
1621
-
1622
- <h3>Primary Buttons</h3>
1623
- <ul class="qld__link-list qld__link-list--inline">
1624
- <!-- Link button -->
1625
- <li>
1626
- <a href="#" class="qld__btn" hover="">Link</a>
1627
- </li>
1628
- <!-- Default button -->
1629
- <li>
1630
- <button type="button" class="qld__btn">Default</button>
1631
- </li>
1632
- <!-- Leading icon -->
1633
- <li>
1634
- <button type="button" class="qld__btn qld__btn--icon-lead">
1635
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1636
- <use href="/mysource_files/img/QLD-icons.svg#wheelchair"></use>
1637
- </svg>
1638
- Leading icon
1639
- </button>
1640
- </li>
1641
- <!-- Trailing icon -->
1642
- <li>
1643
- <button type="button" class="qld__btn qld__btn--icon-trail">
1644
- Trailing icon
1645
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1646
- <use href="/mysource_files/img/QLD-icons.svg#wheelchair"></use>
1647
- </svg>
1648
- </button>
1649
- </li>
1650
- <!-- Disabled -->
1651
- <li>
1652
- <button type="button" class="qld__btn" disabled="">Disabled</button>
1653
- </li>
1654
- </ul>
1655
-
1656
- <h3>Secondary Buttons</h3>
1657
- <ul class="qld__link-list qld__link-list--inline">
1658
- <!-- Link button -->
1659
- <li>
1660
- <a href="#" class="qld__btn qld__btn--secondary" hover="">Link</a>
1661
- </li>
1662
- <!-- Default button -->
1663
- <li>
1664
- <button type="button" class="qld__btn qld__btn--secondary">Default</button>
1665
- </li>
1666
- <!-- Leading icon -->
1667
- <li>
1668
- <button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-lead">
1669
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1670
- <use href="/mysource_files/img/QLD-icons.svg#wheelchair"></use>
1671
- </svg>
1672
- Leading icon
1673
- </button>
1674
- </li>
1675
- <!-- Trailing icon -->
1676
- <li>
1677
- <button type="button" class="qld__btn qld__btn--secondary qld__btn--icon-trail">
1678
- Trailing icon
1679
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1680
- <use href="/mysource_files/img/QLD-icons.svg#wheelchair"></use>
1681
- </svg>
1682
- </button>
1683
- </li>
1684
- <!-- Disabled -->
1685
- <li>
1686
- <button type="button" class="qld__btn qld__btn--secondary" disabled="">Disabled</button>
1687
- </li>
1688
- </ul>
1689
-
1690
- <h3>Tertiary Buttons</h3>
1691
- <ul class="qld__link-list qld__link-list--inline">
1692
- <!-- Link button -->
1693
- <li>
1694
- <a href="#" class="qld__btn qld__btn--tertiary" hover="">Link</a>
1695
- </li>
1696
- <!-- Default button -->
1697
- <li>
1698
- <button type="button" class="qld__btn qld__btn--tertiary">Default</button>
1699
- </li>
1700
- <!-- Leading icon -->
1701
- <li>
1702
- <button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-lead">
1703
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1704
- <use href="/mysource_files/img/QLD-icons.svg#wheelchair"></use>
1705
- </svg>
1706
- Leading icon
1707
- </button>
1708
- </li>
1709
- <!-- Trailing icon -->
1710
- <li>
1711
- <button type="button" class="qld__btn qld__btn--tertiary qld__btn--icon-trail">
1712
- Trailing icon
1713
- <svg class="qld__icon qld__icon--sm" aria-hidden="true" xmlns="http://www.w3.org/2000/svg">
1714
- <use href="/mysource_files/img/QLD-icons.svg#wheelchair"></use>
1715
- </svg>
1716
- </button>
1717
- </li>
1718
- <!-- Disabled -->
1719
- <li>
1720
- <button type="button" class="qld__btn qld__btn--tertiary" disabled="">Disabled</button>
1721
- </li>
1722
- </ul>
1723
-
1724
- <h3 style="margin-bottom: 2rem">Links</h3>
1725
- <a href="#" class="qld__cta-link">Link</a>
1726
- <a href="#" class="qld__cta-link" disabled>Link - disabled</a>
1727
- <a href="#" class="qld__cta-link qld__cta-link--view-all">Link - view all</a>
1728
-
1729
- <h3 style="margin-bottom: 2rem">Direction links</h3>
1730
- <a href="#" class="qld__direction-link--left">Link</a>
1731
- <a href="#" class="qld__direction-link--right">Link</a>
1732
- <a href="#" class="qld__direction-link--up">Link</a>
1733
- <a href="#" class="qld__direction-link--down">Link</a>
1734
-
1735
- <h3 style="margin-bottom: 2rem">Link columns</h3>
1736
- <ul aria-label="Related links" class="qld__link-columns">
1737
- <li><a href="#">Contact us</a></li>
1738
- <li><a href="#">About us</a></li>
1739
- <li><a href="#">Products</a></li>
1740
- <li><a href="#">FAQ</a></li>
1741
- <li>
1742
- <a href="#">Terms and conditions</a>
1743
- </li>
1744
- <li><a href="#">Privacy policy</a></li>
1745
- <li class="qld__link-columns__all-link">
1746
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
1747
- </li>
1748
- </ul>
1749
- <ul aria-label="Related links" class="qld__link-columns qld__link-columns--2-col">
1750
- <li><a href="#">Contact us</a></li>
1751
- <li><a href="#">About us</a></li>
1752
- <li><a href="#">Products</a></li>
1753
- <li><a href="#">FAQ</a></li>
1754
- <li>
1755
- <a href="#">Terms and conditions</a>
1756
- </li>
1757
- <li><a href="#">Privacy policy</a></li>
1758
- <li class="qld__link-columns__all-link">
1759
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
1760
- </li>
1761
- </ul>
1762
- <ul aria-label="Related links" class="qld__link-columns qld__link-columns--3-col">
1763
- <li><a href="#">Contact us</a></li>
1764
- <li><a href="#">About us</a></li>
1765
- <li><a href="#">Products</a></li>
1766
- <li><a href="#">FAQ</a></li>
1767
- <li>
1768
- <a href="#">Terms and conditions</a>
1769
- </li>
1770
- <li><a href="#">Privacy policy</a></li>
1771
- <li class="qld__link-columns__all-link">
1772
- <a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a>
1773
- </li>
1774
- </ul>
1775
-
1776
- <h3 style="margin-bottom: 2rem">Link list - WIP</h3>
1777
- <ul class="qld__link-list">
1778
- <li><a href="#">List item</a></li>
1779
- <li><a href="#">List item</a></li>
1780
- <li><a href="#">List item</a></li>
1781
- </ul>
1782
-
1783
- <h3 style="margin-bottom: 2rem">Table</h3>
1784
- <table class="qld__table">
1785
- <thead>
1786
- <tr>
1787
- <th>Date</th>
1788
- <th>Event</th>
1789
- <th>Venue</th>
1790
- </tr>
1791
- </thead>
1792
- <tbody>
1793
- <tr>
1794
- <td>12 February</td>
1795
- <td>Waltz with Strauss</td>
1796
- <td>Main Hall</td>
1797
- </tr>
1798
- <tr>
1799
- <td>12 February</td>
1800
- <td>Waltz with Strauss</td>
1801
- <td>Main Hall</td>
1802
- </tr>
1803
- </tbody>
1804
- </table>
1805
- <table class="qld__table qld__table--striped">
1806
- <thead>
1807
- <tr>
1808
- <th>Date</th>
1809
- <th>Event</th>
1810
- <th>Venue</th>
1811
- </tr>
1812
- </thead>
1813
- <tbody>
1814
- <tr>
1815
- <td>12 February</td>
1816
- <td>Waltz with Strauss</td>
1817
- <td>Main Hall</td>
1818
- </tr>
1819
- <tr>
1820
- <td>12 February</td>
1821
- <td>Waltz with Strauss</td>
1822
- <td>Main Hall</td>
1823
- </tr>
1824
- </tbody>
1825
- </table>
1826
- <form role="search" aria-label="sitewide" class="qld__search qld__search--responsive" action="https://qhscb.squiz.cloud/wog-design-system/search">
1827
- <label for="qld__search__query" class="qld__search__label">Search this website</label>
1828
- <div class="qld__search__inner">
1829
- <span class="twitter-typeahead" style="position: relative; display: inline-block">
1830
- <input
1831
- type="search"
1832
- class="qld__text-input tt-hint"
1833
- autocomplete="off"
1834
- readonly=""
1835
- spellcheck="false"
1836
- tabindex="-1"
1837
- aria-hidden="true"
1838
- style="
1839
- position: absolute;
1840
- top: 0px;
1841
- left: 0px;
1842
- border-color: transparent;
1843
- box-shadow: none;
1844
- opacity: 1;
1845
- background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);
1846
- "
1847
- dir="ltr"
1848
- /><input
1849
- type="search"
1850
- id="qld__header__search-query"
1851
- name="query"
1852
- class="qld__text-input tt-input"
1853
- autocomplete="off"
1854
- spellcheck="false"
1855
- dir="auto"
1856
- aria-owns="qld__header__search-query_listbox"
1857
- role="combobox"
1858
- aria-autocomplete="list"
1859
- aria-expanded="false"
1860
- style="position: relative; vertical-align: top; background-color: transparent"
1861
- /><span
1862
- role="status"
1863
- aria-live="polite"
1864
- style="
1865
- position: absolute;
1866
- padding: 0px;
1867
- border: 0px;
1868
- height: 1px;
1869
- width: 1px;
1870
- margin-bottom: -1px;
1871
- margin-right: -1px;
1872
- overflow: hidden;
1873
- clip: rect(0px, 0px, 0px, 0px);
1874
- white-space: nowrap;
1875
- "
1876
- ></span>
1877
- <pre
1878
- aria-hidden="true"
1879
- style="
1880
- position: absolute;
1881
- visibility: hidden;
1882
- white-space: pre;
1883
- font-family: Lato, -apple-system, 'system-ui', 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
1884
- font-size: 16px;
1885
- font-style: normal;
1886
- font-variant: normal;
1887
- font-weight: 400;
1888
- word-spacing: 0px;
1889
- letter-spacing: 0px;
1890
- text-indent: 0px;
1891
- text-rendering: auto;
1892
- text-transform: none;
1893
- "
1894
- ></pre>
1895
- <div role="listbox" class="tt-menu" id="qld__search__query-listbox" aria-expanded="false" style="position: absolute; top: 100%; left: 0px; z-index: 100; display: none">
1896
- <div role="presentation" class="tt-dataset tt-dataset-organic"></div>
1897
- </div>
1898
- </span>
1899
- <div class="qld__search__btn">
1900
- <button class="qld__btn qld__btn--search" type="submit" aria-label="Search">
1901
- <span class="qld__btn__icon"></span>
1902
- <span class="qld__btn__text">Search</span>
1903
- </button>
1904
- </div>
1905
- </div>
1906
- </form>
1907
- </div>
1908
- </div>
1909
- <section class="qld__body">
1910
- <div class="container-fluid">
1911
- <h2>Regular table light</h2>
1912
- <table class="qld__table">
1913
- <caption>
1914
- Table caption<br />
1915
- <span class="qld__caption">Table is ordered by</span>
1916
- </caption>
1917
- <thead>
1918
- <tr>
1919
- <th scope="col">Header</th>
1920
- <th scope="col">Header</th>
1921
- <th scope="col">Header</th>
1922
- </tr>
1923
- </thead>
1924
- <tbody>
1925
- <tr>
1926
- <td>Cell</td>
1927
- <td>Cell</td>
1928
- <td>Cell</td>
1929
- </tr>
1930
- <tr>
1931
- <td>Cell</td>
1932
- <td>Cell</td>
1933
- <td>Cell</td>
1934
- </tr>
1935
- <tr>
1936
- <td>Cell</td>
1937
- <td>Cell</td>
1938
- <td>Cell</td>
1939
- </tr>
1940
- <tr>
1941
- <td>Cell</td>
1942
- <td>Cell</td>
1943
- <td>Cell</td>
1944
- </tr>
1945
- <tr>
1946
- <td>Cell</td>
1947
- <td>Cell</td>
1948
- <td>Cell</td>
1949
- </tr>
1950
- </tbody>
1951
- <tfoot>
1952
- <tr>
1953
- <td>Footer</td>
1954
- <td>Footer</td>
1955
- <td>Footer</td>
1956
- </tr>
1957
- </tfoot>
1958
- </table>
1959
- </div>
1960
- </section>
1961
-
1962
- <section class="qld__body qld__body--dark">
1963
- <div class="container-fluid">
1964
- <h2>Regular table dark</h2>
1965
- <table class="qld__table">
1966
- <caption>
1967
- Table caption<br />
1968
- <span class="qld__caption">Table is ordered by</span>
1969
- </caption>
1970
- <thead>
1971
- <tr>
1972
- <th scope="col">Header</th>
1973
- <th scope="col">Header</th>
1974
- <th scope="col">Header</th>
1975
- </tr>
1976
- </thead>
1977
- <tbody>
1978
- <tr>
1979
- <td>Cell</td>
1980
- <td>Cell</td>
1981
- <td>Cell</td>
1982
- </tr>
1983
- <tr>
1984
- <td>Cell</td>
1985
- <td>Cell</td>
1986
- <td>Cell</td>
1987
- </tr>
1988
- <tr>
1989
- <td>Cell</td>
1990
- <td>Cell</td>
1991
- <td>Cell</td>
1992
- </tr>
1993
- <tr>
1994
- <td>Cell</td>
1995
- <td>Cell</td>
1996
- <td>Cell</td>
1997
- </tr>
1998
- <tr>
1999
- <td>Cell</td>
2000
- <td>Cell</td>
2001
- <td>Cell</td>
2002
- </tr>
2003
- </tbody>
2004
- <tfoot>
2005
- <tr>
2006
- <td>Footer</td>
2007
- <td>Footer</td>
2008
- <td>Footer</td>
2009
- </tr>
2010
- </tfoot>
2011
- </table>
2012
- </div>
2013
- </section>
2014
-
2015
- <section class="qld__body">
2016
- <div class="container-fluid">
2017
- <h2>Contained table light</h2>
2018
-
2019
- <div class="qld__table--contained">
2020
- <table class="qld__table">
2021
- <caption>
2022
- Table caption<br />
2023
- <span class="qld__caption">Table is ordered by</span>
2024
- </caption>
2025
- <thead>
2026
- <tr>
2027
- <th scope="col">Header</th>
2028
- <th scope="col">Header</th>
2029
- <th scope="col">Header</th>
2030
- </tr>
2031
- </thead>
2032
- <tbody>
2033
- <tr>
2034
- <td>Cell</td>
2035
- <td>Cell</td>
2036
- <td>Cell</td>
2037
- </tr>
2038
- <tr>
2039
- <td>Cell</td>
2040
- <td>Cell</td>
2041
- <td>Cell</td>
2042
- </tr>
2043
- <tr>
2044
- <td>Cell</td>
2045
- <td>Cell</td>
2046
- <td>Cell</td>
2047
- </tr>
2048
- <tr>
2049
- <td>Cell</td>
2050
- <td>Cell</td>
2051
- <td>Cell</td>
2052
- </tr>
2053
- <tr>
2054
- <td>Cell</td>
2055
- <td>Cell</td>
2056
- <td>Cell</td>
2057
- </tr>
2058
- </tbody>
2059
- <tfoot>
2060
- <tr>
2061
- <td>Footer</td>
2062
- <td>Footer</td>
2063
- <td>Footer</td>
2064
- </tr>
2065
- </tfoot>
2066
- </table>
2067
- </div>
2068
- </div>
2069
- </section>
2070
-
2071
- <section class="qld__body qld__body--dark">
2072
- <div class="container-fluid">
2073
- <h2>Contained table dark</h2>
2074
- <div class="qld__table--contained">
2075
- <table class="qld__table">
2076
- <caption>
2077
- Table caption<br />
2078
- <span class="qld__caption">Table is ordered by</span>
2079
- </caption>
2080
- <thead>
2081
- <tr>
2082
- <th scope="col">Header</th>
2083
- <th scope="col">Header</th>
2084
- <th scope="col">Header</th>
2085
- </tr>
2086
- </thead>
2087
- <tbody>
2088
- <tr>
2089
- <td>Cell</td>
2090
- <td>Cell</td>
2091
- <td>Cell</td>
2092
- </tr>
2093
- <tr>
2094
- <td>Cell</td>
2095
- <td>Cell</td>
2096
- <td>Cell</td>
2097
- </tr>
2098
- <tr>
2099
- <td>Cell</td>
2100
- <td>Cell</td>
2101
- <td>Cell</td>
2102
- </tr>
2103
- <tr>
2104
- <td>Cell</td>
2105
- <td>Cell</td>
2106
- <td>Cell</td>
2107
- </tr>
2108
- <tr>
2109
- <td>Cell</td>
2110
- <td>Cell</td>
2111
- <td>Cell</td>
2112
- </tr>
2113
- </tbody>
2114
- <tfoot>
2115
- <tr>
2116
- <td>Footer</td>
2117
- <td>Footer</td>
2118
- <td>Footer</td>
2119
- </tr>
2120
- </tfoot>
2121
- </table>
2122
- </div>
2123
- </div>
2124
- </section>
2125
-
2126
- <section class="qld__body">
2127
- <div class="container-fluid">
2128
- <h2>Contained table light striped</h2>
2129
-
2130
- <div class="qld__table--contained">
2131
- <table class="qld__table qld__table--striped">
2132
- <caption>
2133
- Table caption<br />
2134
- <span class="qld__caption">Table is ordered by</span>
2135
- </caption>
2136
- <thead>
2137
- <tr>
2138
- <th scope="col">Header</th>
2139
- <th scope="col">Header</th>
2140
- <th scope="col">Header</th>
2141
- </tr>
2142
- </thead>
2143
- <tbody>
2144
- <tr>
2145
- <td>Cell</td>
2146
- <td>Cell</td>
2147
- <td>Cell</td>
2148
- </tr>
2149
- <tr>
2150
- <td>Cell</td>
2151
- <td>Cell</td>
2152
- <td>Cell</td>
2153
- </tr>
2154
- <tr>
2155
- <td>Cell</td>
2156
- <td>Cell</td>
2157
- <td>Cell</td>
2158
- </tr>
2159
- <tr>
2160
- <td>Cell</td>
2161
- <td>Cell</td>
2162
- <td>Cell</td>
2163
- </tr>
2164
- <tr>
2165
- <td>Cell</td>
2166
- <td>Cell</td>
2167
- <td>Cell</td>
2168
- </tr>
2169
- </tbody>
2170
- <tfoot>
2171
- <tr>
2172
- <td>Footer</td>
2173
- <td>Footer</td>
2174
- <td>Footer</td>
2175
- </tr>
2176
- </tfoot>
2177
- </table>
2178
- </div>
2179
- </div>
2180
- </section>
2181
-
2182
- <section class="qld__body qld__body--dark">
2183
- <div class="container-fluid">
2184
- <h2>Contained table dark striped</h2>
2185
- <div class="qld__table--contained">
2186
- <table class="qld__table qld__table--striped">
2187
- <caption>
2188
- Table caption<br />
2189
- <span class="qld__caption">Table is ordered by</span>
2190
- </caption>
2191
- <thead>
2192
- <tr>
2193
- <th scope="col">Header</th>
2194
- <th scope="col">Header</th>
2195
- <th scope="col">Header</th>
2196
- </tr>
2197
- </thead>
2198
- <tbody>
2199
- <tr>
2200
- <td>Cell</td>
2201
- <td>Cell</td>
2202
- <td>Cell</td>
2203
- </tr>
2204
- <tr>
2205
- <td>Cell</td>
2206
- <td>Cell</td>
2207
- <td>Cell</td>
2208
- </tr>
2209
- <tr>
2210
- <td>Cell</td>
2211
- <td>Cell</td>
2212
- <td>Cell</td>
2213
- </tr>
2214
- <tr>
2215
- <td>Cell</td>
2216
- <td>Cell</td>
2217
- <td>Cell</td>
2218
- </tr>
2219
- <tr>
2220
- <td>Cell</td>
2221
- <td>Cell</td>
2222
- <td>Cell</td>
2223
- </tr>
2224
- </tbody>
2225
- <tfoot>
2226
- <tr>
2227
- <td>Footer</td>
2228
- <td>Footer</td>
2229
- <td>Footer</td>
2230
- </tr>
2231
- </tfoot>
2232
- </table>
2233
- </div>
2234
- </div>
2235
- </section>
2236
-
2237
- <section class="qld__body">
2238
- <div class="container-fluid">
2239
- <h2>Multi-level table</h2>
2240
- <div class="qld__table--contained">
2241
- <table class="qld__table qld__table--striped qld__table__col-2-left-border qld__table__col-3-left-border">
2242
- <caption>
2243
- Table caption<br />
2244
- <span class="qld__caption">Table is ordered by</span>
2245
- </caption>
2246
- <thead>
2247
- <tr>
2248
- <th rowspan="2" scope="col">Header</th>
2249
- <th colspan="3" scope="col-group" class="qld__table__cell-left-border qld__table__cell--middle">Header</th>
2250
- </tr>
2251
- <tr>
2252
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2253
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2254
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2255
- </tr>
2256
- </thead>
2257
- <tbody>
2258
- <tr>
2259
- <td>Cell</td>
2260
- <td>Cell</td>
2261
- <td>Cell</td>
2262
- <td>Cell</td>
2263
- </tr>
2264
- <tr>
2265
- <td>Cell</td>
2266
- <td>Cell</td>
2267
- <td>Cell</td>
2268
- <td>Cell</td>
2269
- </tr>
2270
- <tr>
2271
- <td>Cell</td>
2272
- <td>Cell</td>
2273
- <td>Cell</td>
2274
- <td>Cell</td>
2275
- </tr>
2276
- <tr>
2277
- <td>Cell</td>
2278
- <td>Cell</td>
2279
- <td>Cell</td>
2280
- <td>Cell</td>
2281
- </tr>
2282
- <tr>
2283
- <td>Cell</td>
2284
- <td>Cell</td>
2285
- <td>Cell</td>
2286
- <td>Cell</td>
2287
- </tr>
2288
- </tbody>
2289
- <tfoot>
2290
- <tr>
2291
- <td>Footer</td>
2292
- <td>Footer</td>
2293
- <td>Footer</td>
2294
- <td>Footer</td>
2295
- </tr>
2296
- </tfoot>
2297
- </table>
2298
- </div>
2299
- </div>
2300
- </section>
2301
-
2302
- <section class="qld__body">
2303
- <div class="container-fluid">
2304
- <h2>Multi-level table borderless</h2>
2305
- <table class="qld__table qld__table--striped qld__table__col-2-left-border qld__table__col-3-left-border">
2306
- <caption>
2307
- Table caption<br />
2308
- <span class="qld__caption">Table is ordered by</span>
2309
- </caption>
2310
- <thead>
2311
- <tr>
2312
- <th rowspan="2" scope="col">Header</th>
2313
- <th colspan="3" scope="col-group" class="qld__table__cell-left-border qld__table__cell--middle">Header</th>
2314
- </tr>
2315
- <tr>
2316
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2317
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2318
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2319
- </tr>
2320
- </thead>
2321
- <tbody>
2322
- <tr>
2323
- <td>Cell</td>
2324
- <td>Cell</td>
2325
- <td>Cell</td>
2326
- <td>Cell</td>
2327
- </tr>
2328
- <tr>
2329
- <td>Cell</td>
2330
- <td>Cell</td>
2331
- <td>Cell</td>
2332
- <td>Cell</td>
2333
- </tr>
2334
- <tr>
2335
- <td>Cell</td>
2336
- <td>Cell</td>
2337
- <td>Cell</td>
2338
- <td>Cell</td>
2339
- </tr>
2340
- <tr>
2341
- <td>Cell</td>
2342
- <td>Cell</td>
2343
- <td>Cell</td>
2344
- <td>Cell</td>
2345
- </tr>
2346
- <tr>
2347
- <td>Cell</td>
2348
- <td>Cell</td>
2349
- <td>Cell</td>
2350
- <td>Cell</td>
2351
- </tr>
2352
- </tbody>
2353
- <tfoot>
2354
- <tr>
2355
- <td>Footer</td>
2356
- <td>Footer</td>
2357
- <td>Footer</td>
2358
- <td>Footer</td>
2359
- </tr>
2360
- </tfoot>
2361
- </table>
2362
- </div>
2363
- </section>
2364
-
2365
- <section class="qld__body">
2366
- <div class="container-fluid">
2367
- <h2>Numbered cells</h2>
2368
- <div class="qld__table--contained">
2369
- <table class="qld__table qld__table--striped qld__table__col-2-left-border qld__table__col-3-left-border qld__table__col-4-num">
2370
- <caption>
2371
- Table caption<br />
2372
- <span class="qld__caption">Table is ordered by</span>
2373
- </caption>
2374
- <thead>
2375
- <tr>
2376
- <th rowspan="2" scope="col">Header</th>
2377
- <th colspan="3" scope="col-group" class="qld__table__cell-left-border qld__table__cell--middle">Header</th>
2378
- </tr>
2379
- <tr>
2380
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2381
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2382
- <th scope="col" class="qld__table__cell-left-border qld__table__cell--numeric">Number %</th>
2383
- </tr>
2384
- </thead>
2385
- <tbody>
2386
- <tr>
2387
- <td>Cell</td>
2388
- <td>Cell</td>
2389
- <td>Cell</td>
2390
- <td>5</td>
2391
- </tr>
2392
- <tr>
2393
- <td>Cell</td>
2394
- <td>Cell</td>
2395
- <td>Cell</td>
2396
- <td>10</td>
2397
- </tr>
2398
- <tr>
2399
- <td>Cell</td>
2400
- <td>Cell</td>
2401
- <td>Cell</td>
2402
- <td>15</td>
2403
- </tr>
2404
- <tr>
2405
- <td>Cell</td>
2406
- <td>Cell</td>
2407
- <td>Cell</td>
2408
- <td>20</td>
2409
- </tr>
2410
- <tr>
2411
- <td>Cell</td>
2412
- <td>Cell</td>
2413
- <td>Cell</td>
2414
- <td>25</td>
2415
- </tr>
2416
- </tbody>
2417
- <tfoot>
2418
- <tr>
2419
- <td>Footer</td>
2420
- <td>Footer</td>
2421
- <td>Footer</td>
2422
- <td>Footer</td>
2423
- </tr>
2424
- </tfoot>
2425
- </table>
2426
- </div>
2427
- </div>
2428
- </section>
2429
-
2430
- <section class="qld__body">
2431
- <div class="container-fluid">
2432
- <h2>Multi-level header with scroll light</h2>
2433
- <div class="qld__table--scroll" tabindex="0">
2434
- <table class="qld__table qld__table--striped qld__table__col-2-left-border qld__table__col-3-left-border">
2435
- <caption>
2436
- Table caption<br />
2437
- <span class="qld__caption">Table is ordered by</span>
2438
- </caption>
2439
- <thead>
2440
- <tr>
2441
- <th rowspan="2" scope="col">Header</th>
2442
- <th colspan="3" scope="col-group" class="qld__table__cell-left-border qld__table__cell--middle">Header</th>
2443
- </tr>
2444
- <tr>
2445
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2446
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2447
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2448
- </tr>
2449
- </thead>
2450
- <tbody>
2451
- <tr>
2452
- <td>Cell</td>
2453
- <td>Cell</td>
2454
- <td>Cell</td>
2455
- <td>Cell</td>
2456
- </tr>
2457
- <tr>
2458
- <td>Cell</td>
2459
- <td>Cell</td>
2460
- <td>Cell</td>
2461
- <td>Cell</td>
2462
- </tr>
2463
- <tr>
2464
- <td>Cell</td>
2465
- <td>Cell</td>
2466
- <td>Cell</td>
2467
- <td>Cell</td>
2468
- </tr>
2469
- <tr>
2470
- <td>Cell</td>
2471
- <td>Cell</td>
2472
- <td>Cell</td>
2473
- <td>Cell</td>
2474
- </tr>
2475
- <tr>
2476
- <td>Cell</td>
2477
- <td>Cell</td>
2478
- <td>Cell</td>
2479
- <td>Cell</td>
2480
- </tr>
2481
- <tr>
2482
- <td>Cell</td>
2483
- <td>Cell</td>
2484
- <td>Cell</td>
2485
- <td>Cell</td>
2486
- </tr>
2487
- <tr>
2488
- <td>Cell</td>
2489
- <td>Cell</td>
2490
- <td>Cell</td>
2491
- <td>Cell</td>
2492
- </tr>
2493
- <tr>
2494
- <td>Cell</td>
2495
- <td>Cell</td>
2496
- <td>Cell</td>
2497
- <td>Cell</td>
2498
- </tr>
2499
- <tr>
2500
- <td>Cell</td>
2501
- <td>Cell</td>
2502
- <td>Cell</td>
2503
- <td>Cell</td>
2504
- </tr>
2505
- <tr>
2506
- <td>Cell</td>
2507
- <td>Cell</td>
2508
- <td>Cell</td>
2509
- <td>Cell</td>
2510
- </tr>
2511
- <tr>
2512
- <td>Cell</td>
2513
- <td>Cell</td>
2514
- <td>Cell</td>
2515
- <td>Cell</td>
2516
- </tr>
2517
- <tr>
2518
- <td>Cell</td>
2519
- <td>Cell</td>
2520
- <td>Cell</td>
2521
- <td>Cell</td>
2522
- </tr>
2523
- <tr>
2524
- <td>Cell</td>
2525
- <td>Cell</td>
2526
- <td>Cell</td>
2527
- <td>Cell</td>
2528
- </tr>
2529
- <tr>
2530
- <td>Cell</td>
2531
- <td>Cell</td>
2532
- <td>Cell</td>
2533
- <td>Cell</td>
2534
- </tr>
2535
- <tr>
2536
- <td>Cell</td>
2537
- <td>Cell</td>
2538
- <td>Cell</td>
2539
- <td>Cell</td>
2540
- </tr>
2541
- <tr>
2542
- <td>Cell</td>
2543
- <td>Cell</td>
2544
- <td>Cell</td>
2545
- <td>Cell</td>
2546
- </tr>
2547
- <tr>
2548
- <td>Cell</td>
2549
- <td>Cell</td>
2550
- <td>Cell</td>
2551
- <td>Cell</td>
2552
- </tr>
2553
- <tr>
2554
- <td>Cell</td>
2555
- <td>Cell</td>
2556
- <td>Cell</td>
2557
- <td>Cell</td>
2558
- </tr>
2559
- <tr>
2560
- <td>Cell</td>
2561
- <td>Cell</td>
2562
- <td>Cell</td>
2563
- <td>Cell</td>
2564
- </tr>
2565
- <tr>
2566
- <td>Cell</td>
2567
- <td>Cell</td>
2568
- <td>Cell</td>
2569
- <td>Cell</td>
2570
- </tr>
2571
- </tbody>
2572
- <tfoot>
2573
- <tr>
2574
- <td>Footer</td>
2575
- <td>Footer</td>
2576
- <td>Footer</td>
2577
- <td>Footer</td>
2578
- </tr>
2579
- </tfoot>
2580
- </table>
2581
- </div>
2582
- </div>
2583
- </section>
2584
- <section class="qld__body qld__body--dark">
2585
- <div class="container-fluid">
2586
- <h2>Multi-level header with scroll</h2>
2587
- <div class="qld__table--scroll" tabindex="0">
2588
- <table class="qld__table qld__table--striped qld__table__col-2-left-border qld__table__col-3-left-border qld__table__col-4-left-border">
2589
- <caption>
2590
- Table caption<br />
2591
- <span class="qld__caption">Table is ordered by</span>
2592
- </caption>
2593
- <thead>
2594
- <tr>
2595
- <th rowspan="2" scope="col">Header</th>
2596
- <th colspan="3" scope="col-group" class="qld__table__cell-left-border qld__table__cell--middle">Header</th>
2597
- </tr>
2598
- <tr>
2599
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2600
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2601
- <th scope="col" class="qld__table__cell-left-border">Header</th>
2602
- </tr>
2603
- </thead>
2604
- <tbody>
2605
- <tr>
2606
- <td>Cell</td>
2607
- <td>Cell</td>
2608
- <td>Cell</td>
2609
- <td>Cell</td>
2610
- </tr>
2611
- <tr>
2612
- <td>Cell</td>
2613
- <td>Cell</td>
2614
- <td>Cell</td>
2615
- <td>Cell</td>
2616
- </tr>
2617
- <tr>
2618
- <td>Cell</td>
2619
- <td>Cell</td>
2620
- <td>Cell</td>
2621
- <td>Cell</td>
2622
- </tr>
2623
- <tr>
2624
- <td>Cell</td>
2625
- <td>Cell</td>
2626
- <td>Cell</td>
2627
- <td>Cell</td>
2628
- </tr>
2629
- <tr>
2630
- <td>Cell</td>
2631
- <td>Cell</td>
2632
- <td>Cell</td>
2633
- <td>Cell</td>
2634
- </tr>
2635
- <tr>
2636
- <td>Cell</td>
2637
- <td>Cell</td>
2638
- <td>Cell</td>
2639
- <td>Cell</td>
2640
- </tr>
2641
- <tr>
2642
- <td>Cell</td>
2643
- <td>Cell</td>
2644
- <td>Cell</td>
2645
- <td>Cell</td>
2646
- </tr>
2647
- <tr>
2648
- <td>Cell</td>
2649
- <td>Cell</td>
2650
- <td>Cell</td>
2651
- <td>Cell</td>
2652
- </tr>
2653
- <tr>
2654
- <td>Cell</td>
2655
- <td>Cell</td>
2656
- <td>Cell</td>
2657
- <td>Cell</td>
2658
- </tr>
2659
- <tr>
2660
- <td>Cell</td>
2661
- <td>Cell</td>
2662
- <td>Cell</td>
2663
- <td>Cell</td>
2664
- </tr>
2665
- <tr>
2666
- <td>Cell</td>
2667
- <td>Cell</td>
2668
- <td>Cell</td>
2669
- <td>Cell</td>
2670
- </tr>
2671
- <tr>
2672
- <td>Cell</td>
2673
- <td>Cell</td>
2674
- <td>Cell</td>
2675
- <td>Cell</td>
2676
- </tr>
2677
- <tr>
2678
- <td>Cell</td>
2679
- <td>Cell</td>
2680
- <td>Cell</td>
2681
- <td>Cell</td>
2682
- </tr>
2683
- <tr>
2684
- <td>Cell</td>
2685
- <td>Cell</td>
2686
- <td>Cell</td>
2687
- <td>Cell</td>
2688
- </tr>
2689
- <tr>
2690
- <td>Cell</td>
2691
- <td>Cell</td>
2692
- <td>Cell</td>
2693
- <td>Cell</td>
2694
- </tr>
2695
- <tr>
2696
- <td>Cell</td>
2697
- <td>Cell</td>
2698
- <td>Cell</td>
2699
- <td>Cell</td>
2700
- </tr>
2701
- <tr>
2702
- <td>Cell</td>
2703
- <td>Cell</td>
2704
- <td>Cell</td>
2705
- <td>Cell</td>
2706
- </tr>
2707
- <tr>
2708
- <td>Cell</td>
2709
- <td>Cell</td>
2710
- <td>Cell</td>
2711
- <td>Cell</td>
2712
- </tr>
2713
- <tr>
2714
- <td>Cell</td>
2715
- <td>Cell</td>
2716
- <td>Cell</td>
2717
- <td>Cell</td>
2718
- </tr>
2719
- <tr>
2720
- <td>Cell</td>
2721
- <td>Cell</td>
2722
- <td>Cell</td>
2723
- <td>Cell</td>
2724
- </tr>
2725
- </tbody>
2726
- <tfoot>
2727
- <tr>
2728
- <td>Footer</td>
2729
- <td>Footer</td>
2730
- <td>Footer</td>
2731
- <td>Footer</td>
2732
- </tr>
2733
- </tfoot>
2734
- </table>
2735
- </div>
2736
- </div>
2737
- </section>
2738
- <section class="qld__body">
2739
- <div class="container-fluid">
2740
- <h2>Table col width overrides</h2>
2741
- <caption>
2742
- Table caption<br />
2743
- <span class="qld__caption">Table is ordered out of it</span>
2744
- </caption>
2745
- <table class="qld__table qld__table__col-2-left-border qld__table__col-3-left-border">
2746
- <thead>
2747
- <tr>
2748
- <th scope="col" class="qld__table__header--width-10">Header</th>
2749
- <th scope="col">Header</th>
2750
- <th scope="col" class="qld__table__header--width-50">Header</th>
2751
- </tr>
2752
- </thead>
2753
- <tbody>
2754
- <tr>
2755
- <td>Cell</td>
2756
- <td>Cell</td>
2757
- <td>Cell</td>
2758
- </tr>
2759
- <tr>
2760
- <td>Cell</td>
2761
- <td>Cell</td>
2762
- <td>Cell</td>
2763
- </tr>
2764
- <tr>
2765
- <td>Cell</td>
2766
- <td>Cell</td>
2767
- <td>Cell</td>
2768
- </tr>
2769
- <tr>
2770
- <td>Cell</td>
2771
- <td>Cell</td>
2772
- <td>Cell</td>
2773
- </tr>
2774
- <tr>
2775
- <td>Cell</td>
2776
- <td>Cell</td>
2777
- <td>Cell</td>
2778
- </tr>
2779
- </tbody>
2780
- <tfoot>
2781
- <tr>
2782
- <td>Footer</td>
2783
- <td>Footer</td>
2784
- <td>Footer</td>
2785
- </tr>
2786
- </tfoot>
2787
- </table>
2788
- </div>
2789
- </section>
2790
- <section class="qld__body">
2791
- <div class="container-fluid">
2792
- <h2>Unordered list</h2>
2793
- <ul>
2794
- <li>
2795
- item 1
2796
- <ul>
2797
- <li>
2798
- item 1a
2799
- <ul>
2800
- <li>item 1aa</li>
2801
- <li>item 1ab</li>
2802
- </ul>
2803
- </li>
2804
- <li>item 1b</li>
2805
- </ul>
2806
- </li>
2807
- <li>
2808
- item 2
2809
- <ul>
2810
- <li>item 2a</li>
2811
- </ul>
2812
- </li>
2813
- <li>item 3</li>
2814
- </ul>
2815
- </div>
2816
- </section>
2817
- <section class="qld__body">
2818
- <div class="container-fluid">
2819
- <h2>Ordered list</h2>
2820
- <ol>
2821
- <li>
2822
- item 1
2823
- <ol>
2824
- <li>
2825
- item 1a
2826
- <ol>
2827
- <li>item 1aa</li>
2828
- <li>item 1ab</li>
2829
- </ol>
2830
- </li>
2831
- <li>item 1b</li>
2832
- </ol>
2833
- </li>
2834
- <li>
2835
- item 2
2836
- <ol>
2837
- <li>item 2a</li>
2838
- </ol>
2839
- </li>
2840
- </ol>
2841
- </div>
2842
- </section>
2843
- </div>
2844
- </div>
2845
- </div>
2846
- </div>
2847
- <!-- Page Footer Info -->
2848
- ${require('../components/prefooter/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json') })}
2849
- </main>
2850
- <!-- END MAIN BODY -->
2851
-
2852
- <!-- FOOTER-->
2853
- ${require('../components/footer/html/component.hbs')({ "site":require('/src/data/site.json') })}
2854
-
2855
- <div class="footer-scripts" id="footer_js" style="display: none !important">${require('../components/_global/html/scripts.html')}</div>
2856
- </body>
2857
- </html>