@qhealth-design-system/core 1.16.4 → 1.17.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 (103) 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/scripts.html +0 -2
  9. package/src/components/_global/js/cta_links/global.js +33 -0
  10. package/src/components/_global/js/global.js +175 -138
  11. package/src/components/_global/js/tabs/global.js +6 -2
  12. package/src/components/_template/html/component-page.html +25 -31
  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 +11 -11
  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/components/prefooter/css/component.scss +62 -0
  37. package/src/components/prefooter/js/manifest.json +9 -0
  38. package/src/data/current.json +3 -9
  39. package/src/data/site.json +3 -3
  40. package/src/html/component-a-z_listing.html +13 -41
  41. package/src/html/component-abstract.html +536 -40
  42. package/src/html/component-accordion.html +537 -41
  43. package/src/html/component-banner.html +537 -40
  44. package/src/html/component-banner_advanced.html +14 -41
  45. package/src/html/component-banner_basic.html +13 -40
  46. package/src/html/component-banner_intermediate.html +14 -41
  47. package/src/html/component-basic_search.html +10 -26
  48. package/src/html/component-body.html +541 -52
  49. package/src/html/component-breadcrumbs.html +538 -43
  50. package/src/html/component-btn.html +471 -69
  51. package/src/html/component-callout.html +536 -40
  52. package/src/html/component-card_feature.html +282 -312
  53. package/src/html/component-card_multi_action.html +651 -217
  54. package/src/html/component-card_no_action.html +163 -289
  55. package/src/html/component-card_single_action.html +283 -312
  56. package/src/html/component-code.html +13 -40
  57. package/src/html/component-file_upload.html +13 -41
  58. package/src/html/component-footer.html +537 -41
  59. package/src/html/component-forms.html +206 -72
  60. package/src/html/component-global-elements.html +720 -152
  61. package/src/html/component-global_alert.html +536 -41
  62. package/src/html/component-header.html +537 -42
  63. package/src/html/component-horizontal_rule.html +459 -65
  64. package/src/html/component-in_page_navigation.html +544 -48
  65. package/src/html/component-internal_navigation.html +537 -41
  66. package/src/html/component-left_hand_navigation.html +13 -41
  67. package/src/html/component-loading_spinner.html +13 -42
  68. package/src/html/component-main_navigation.html +537 -41
  69. package/src/html/component-mega_main_navigation.html +537 -42
  70. package/src/html/component-multi_column.html +536 -40
  71. package/src/html/component-overflow_menu.html +12 -35
  72. package/src/html/component-page_alert.html +536 -40
  73. package/src/html/component-page_footer_info.html +583 -0
  74. package/src/html/component-pagination.html +459 -65
  75. package/src/html/component-promo_panel.html +13 -43
  76. package/src/html/component-tab.html +13 -41
  77. package/src/html/component-tag_list.html +495 -77
  78. package/src/html/component-toggle_tip.html +2 -3
  79. package/src/html/component-tool_tip.html +2 -3
  80. package/src/html/component-video_player.html +13 -41
  81. package/src/html/components.html +306 -88
  82. package/src/html/home.html +1807 -628
  83. package/src/html/index.html +9 -22
  84. package/src/html/inner-with-nav.html +551 -137
  85. package/src/html/inner.html +570 -59
  86. package/src/stories/Checkboxes/Checkboxes.js +41 -0
  87. package/src/stories/Checkboxes/Checkboxes.mdx +45 -0
  88. package/src/stories/Checkboxes/Checkboxes.stories.js +209 -0
  89. package/src/stories/RadioButtons/RadioButtons.js +41 -0
  90. package/src/stories/RadioButtons/RadioButtons.mdx +45 -0
  91. package/src/stories/RadioButtons/RadioButtons.stories.js +209 -0
  92. package/src/styles/imports/mixins.scss +5 -43
  93. package/src/components/updated_date/css/component.scss +0 -24
  94. package/src/components/updated_date/js/manifest.json +0 -9
  95. package/src/components/widgets/css/component.scss +0 -130
  96. package/src/components/widgets/html/component.hbs +0 -8
  97. package/src/components/widgets/html/default.html +0 -3
  98. package/src/components/widgets/js/current.json +0 -471
  99. package/src/components/widgets/js/manifest.json +0 -9
  100. package/src/components/widgets/js/site.json +0 -350
  101. package/src/html/component-updated_date.html +0 -88
  102. package/src/html/component-widgets.html +0 -90
  103. /package/src/components/{updated_date → prefooter}/html/component.hbs +0 -0
package/src/html/component-card_single_action.html CHANGED
@@ -14,31 +14,150 @@
14
14
 
15
15
  <head>
16
16
  <title>Queensland Design System</title>
17
-
17
+
18
18
  ${require('../components/_global/html/head.html')}
19
19
  <script>
20
- var globals = {"site":{"data":{"assetid":"136","type_code":"site","version":"0.0.8","name":"Design System","short_name":"Design System","status":"2","force_secure":"0","languages":"en","charset":"utf-8","created":"2020-12-09 13:11:12","created_userid":"54","updated":"2021-01-20 15:08:30","updated_userid":"312","published":"Never","published_userid":"","status_changed":"2020-12-09 13:11:12","status_changed_userid":"54","thumbnail":"","attributes":{"name":{"attrid":"685","type":"text","value":"Design System","is_contextable":true,"use_default":true},"not_found_page_cache_globally":{"attrid":"686","type":"boolean","value":false,"is_contextable":false,"use_default":true},"available_conditions":{"attrid":"687","type":"serialise","value":[],"is_contextable":false,"use_default":true}},"metadata":{"displayInPageNav":{"value":"","fieldid":"808","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true},"inPageNav_heading":{"value":"On this page","fieldid":"809","type":"metadata_field_text","is_contextable":true,"default_value":true,"use_default":true},"inPageNav_headingType":{"value":"h2","fieldid":"810","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true},"siteTitle":{"value":"Queensland Health Design System","fieldid":"166","type":"metadata_field_text","is_contextable":true,"default_value":false,"use_default":true},"siteLogo":{"value":"169","fieldid":"127","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"siteFavicon":{"value":"106","fieldid":"128","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"siteAppleTouch":{"value":"106","fieldid":"129","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"sitePreHeaderLogo":{"value":"170","fieldid":"171","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"sitePreHeaderText":{"value":"digital.qld.gov.au","fieldid":"167","type":"metadata_field_text","is_contextable":true,"default_value":false,"use_default":true},"sitePreHeaderURL":{"value":"http://www.digital.qld.gov.au","fieldid":"168","type":"metadata_field_text","is_contextable":true,"default_value":false,"use_default":true},"showHomeIcon":{"value":"true","fieldid":"481","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true},"siteRepository":{"value":"164","fieldid":"213","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"footerLinks":{"value":"[\"186\",\"194\",\"198\",\"458\",\"676\"]","fieldid":"715","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"footerCopyrightMessage":{"value":"© The State of Queensland 2020","fieldid":"722","type":"metadata_field_text","is_contextable":true,"default_value":true,"use_default":true},"footerCopyrightLink":{"value":"206","fieldid":"723","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"footerCTAHeading":{"value":"Help us improve","fieldid":"724","type":"metadata_field_text","is_contextable":true,"default_value":false,"use_default":true},"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},"footerCTALink":{"value":"186","fieldid":"726","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true}}},"metadata":{"displayInPageNav":{"value":"","fieldid":"808","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true},"inPageNav_heading":{"value":"On this page","fieldid":"809","type":"metadata_field_text","is_contextable":true,"default_value":true,"use_default":true},"inPageNav_headingType":{"value":"h2","fieldid":"810","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true},"siteTitle":{"value":"Queensland Health Design System","fieldid":"166","type":"metadata_field_text","is_contextable":true,"default_value":false,"use_default":true},"siteLogo":{"value":"169","fieldid":"127","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"siteFavicon":{"value":"106","fieldid":"128","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"siteAppleTouch":{"value":"106","fieldid":"129","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"sitePreHeaderLogo":{"value":"170","fieldid":"171","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"sitePreHeaderText":{"value":"digital.qld.gov.au","fieldid":"167","type":"metadata_field_text","is_contextable":true,"default_value":false,"use_default":true},"sitePreHeaderURL":{"value":"http://www.digital.qld.gov.au","fieldid":"168","type":"metadata_field_text","is_contextable":true,"default_value":false,"use_default":true},"showHomeIcon":{"value":"true","fieldid":"481","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true},"siteRepository":{"value":"164","fieldid":"213","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"footerLinks":{"value":"[\"186\",\"194\",\"198\",\"458\",\"676\"]","fieldid":"715","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"footerCopyrightMessage":{"value":"© The State of Queensland 2020","fieldid":"722","type":"metadata_field_text","is_contextable":true,"default_value":true,"use_default":true},"footerCopyrightLink":{"value":"206","fieldid":"723","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true},"footerCTAHeading":{"value":"Help us improve","fieldid":"724","type":"metadata_field_text","is_contextable":true,"default_value":false,"use_default":true},"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},"footerCTALink":{"value":"186","fieldid":"726","type":"metadata_field_related_asset","is_contextable":true,"default_value":false,"use_default":true}},"children":[{"asset_name":"Get started","asset_assetid":"186"},{"asset_name":"Brand guidelines","asset_assetid":"190"},{"asset_name":"Content guidelines","asset_assetid":"194"},{"asset_name":"Components","asset_assetid":"198"},{"asset_name":"Examples","asset_assetid":"202"},{"asset_name":"Support","asset_assetid":"206"}]},"current":{"data":{"assetid":"676","type_code":"page_standard","version":"0.0.16","name":"Links","short_name":"Links","status":"2","force_secure":"0","languages":"en","charset":"utf-8","created":"2021-01-11 11:48:22","created_userid":"312","updated":"2021-01-20 15:08:29","updated_userid":"312","published":"Never","published_userid":"","status_changed":"2021-01-11 11:48:22","status_changed_userid":"312","thumbnail":"","attributes":{"name":{"attrid":"631","type":"text","value":"Links","is_contextable":true,"use_default":true},"short_name":{"attrid":"632","type":"text","value":"Links","is_contextable":true,"use_default":true},"available_conditions":{"attrid":"633","type":"serialise","value":[],"is_contextable":false,"use_default":true},"conditions":{"attrid":"634","type":"serialise","value":[],"is_contextable":true,"use_default":true}},"metadata":{"description":{"value":"","fieldid":"132","type":"metadata_field_text","is_contextable":true,"default_value":true,"use_default":true},"pageType":{"value":"landing","fieldid":"680","type":"metadata_field_select","is_contextable":true,"default_value":false,"use_default":true},"displayBreadcrumbs":{"value":"true","fieldid":"681","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true},"displayBanner":{"value":"true","fieldid":"682","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true},"displayInPageNav":{"value":"true","fieldid":"808","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true},"inPageNav_heading":{"value":"On this page","fieldid":"809","type":"metadata_field_text","is_contextable":true,"default_value":true,"use_default":true},"inPageNav_headingType":{"value":"h2","fieldid":"810","type":"metadata_field_select","is_contextable":true,"default_value":true,"use_default":true}}},"home":0,"children":[{"asset_assetid":"458","asset_url":"https://qhscb.squiz.cloud/components/accordion","asset_name":"Accordion","children":[]},{"asset_assetid":"325","asset_url":"https://qhscb.squiz.cloud/components/callout","asset_name":"Callout","children":[]},{"asset_assetid":"659","asset_url":"https://qhscb.squiz.cloud/components/card-listing","asset_name":"Card Listing","children":[]},{"asset_assetid":"676","asset_url":"https://qhscb.squiz.cloud/components/links","asset_name":"Links","children":[]},{"asset_assetid":"683","asset_url":"https://qhscb.squiz.cloud/components/search-box","asset_name":"Search Box","children":[]},{"asset_assetid":"785","asset_url":"https://qhscb.squiz.cloud/components/page-alert","asset_name":"Page Alert","children":[]}],"lineage":[{"asset_assetid":"136","asset_name":"Design System","asset_url":"https://qhscb.squiz.cloud"},{"asset_assetid":"198","asset_name":"Components","asset_url":"https://qhscb.squiz.cloud/components"},{"asset_assetid":"676","asset_name":"Links","asset_url":"https://qhscb.squiz.cloud/components/links"}],"top":{"asset_assetid":"198","asset_name":"Components","asset_url":"https://qhscb.squiz.cloud/components"}}};
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: { 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 },
45
+ },
46
+ metadata: {
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 },
65
+ },
66
+ },
67
+ metadata: {
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 },
86
+ },
87
+ children: [
88
+ { asset_name: "Get started", asset_assetid: "186" },
89
+ { asset_name: "Brand guidelines", asset_assetid: "190" },
90
+ { asset_name: "Content guidelines", asset_assetid: "194" },
91
+ { asset_name: "Components", asset_assetid: "198" },
92
+ { asset_name: "Examples", asset_assetid: "202" },
93
+ { asset_name: "Support", asset_assetid: "206" },
94
+ ],
95
+ },
96
+ current: {
97
+ data: {
98
+ assetid: "676",
99
+ type_code: "page_standard",
100
+ version: "0.0.16",
101
+ name: "Links",
102
+ short_name: "Links",
103
+ status: "2",
104
+ force_secure: "0",
105
+ languages: "en",
106
+ charset: "utf-8",
107
+ created: "2021-01-11 11:48:22",
108
+ created_userid: "312",
109
+ updated: "2021-01-20 15:08:29",
110
+ updated_userid: "312",
111
+ published: "Never",
112
+ published_userid: "",
113
+ status_changed: "2021-01-11 11:48:22",
114
+ status_changed_userid: "312",
115
+ thumbnail: "",
116
+ attributes: {
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 },
121
+ },
122
+ metadata: {
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 },
130
+ },
131
+ },
132
+ home: 0,
133
+ children: [
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: [] },
140
+ ],
141
+ lineage: [
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" },
145
+ ],
146
+ top: { asset_assetid: "198", asset_name: "Components", asset_url: "https://qhscb.squiz.cloud/components" },
147
+ },
148
+ };
21
149
  </script>
22
150
  </head>
23
151
 
24
152
  <body class="qld__grid">
25
153
  <!--noindex-->
26
- ${require('../components/header/html/component.hbs')({
27
- "site":require('/src/data/site.json')
28
- })}
154
+ ${require('../components/header/html/component.hbs')({ "site":require('/src/data/site.json') })}
29
155
  <!--endnoindex-->
30
- ${require('../components/mega_main_navigation/html/component.hbs')({
31
- "site":require('/src/data/site.json')
32
- })}
156
+ ${require('../components/mega_main_navigation/html/component.hbs')({ "site":require('/src/data/site.json') })}
33
157
  <!-- MAIN BODY -->
34
158
  <main class="main" role="main">
35
159
  <section class="qld__body qld__body--breadcrumb">
36
- <div class="container-fluid">
37
- ${require('../components/breadcrumbs/html/component.hbs')({
38
- "site":require('/src/data/site.json'),
39
- "current":require('/src/data/current.json'),
40
- })}
41
- </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>
42
161
  </section>
43
162
  <!--CONTENT-->
44
163
  <div class="qld__body">
@@ -46,99 +165,68 @@
46
165
  <div class="row">
47
166
  <div class="col-xs-12 col-lg-4 col-xl-3">
48
167
  <!-- INTERNAL NAVIGATION -->
49
- ${require('../components/internal_navigation/html/component.hbs')({
50
- "site":require('/src/data/site.json'),
51
- "current":require('/src/data/current.json')
52
- })}
168
+ ${require('../components/internal_navigation/html/component.hbs')({ "site":require('/src/data/site.json'), "current":require('/src/data/current.json') })}
53
169
  </div>
54
170
  <div class="col-xs-12 col-lg-8 col-xl-8" id="content">
55
-
56
- ${require('../components/_global/html/component.hbs')({
57
- "manifest":require('../components/card_single_action/js/manifest.json'),
58
- "component":require('!url-loader!../components/card_single_action/html/component.hbs'),
59
- "component_output":require('../components/card_single_action/html/component.hbs')({
60
- "component":require('../components/card_single_action/js/manifest.json').component,
61
- "content":"Lorem Ipsum"
62
- })
63
- })}
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" }) })}
64
174
 
65
175
  <h2>Single action - base</h2>
66
176
  <ul class="qld__card-list qld__card-list--matchheight">
67
-
68
-
69
- <li class="col-xs-12 col-md-6 col-xs-12">
70
-
71
- <div class="qld__card qld__card__action ">
72
-
73
-
177
+ <li class="col-xs-12 col-md-6 col-xs-12">
178
+ <div class="qld__card qld__card__action">
74
179
  <div class="qld__card__inner">
75
180
  <div class="qld__card__content">
76
181
  <div class="qld__card__content-inner">
77
182
  <h3 class="qld__card__title">
78
- <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
183
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
79
184
  </h3>
80
- <p id="card-22724" class="qld__card__description">
81
- Additional text about the card
82
- </p>
185
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
83
186
  </div>
84
187
  </div>
85
188
  </div>
86
189
  </div>
87
190
  </li>
88
-
89
- <li class="col-xs-12 col-md-6 col-xs-12">
90
-
91
- <div class="qld__card qld__card__action qld__card--alt ">
92
-
93
-
191
+
192
+ <li class="col-xs-12 col-md-6 col-xs-12">
193
+ <div class="qld__card qld__card__action qld__card--alt">
94
194
  <div class="qld__card__inner">
95
195
  <div class="qld__card__content">
96
196
  <div class="qld__card__content-inner">
97
197
  <h3 class="qld__card__title">
98
- <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
198
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
99
199
  </h3>
100
- <p id="card-22725" class="qld__card__description">
101
- Additional text about the card
102
- </p>
200
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
103
201
  </div>
104
202
  </div>
105
203
  </div>
106
204
  </div>
107
205
  </li>
108
-
109
- <li class="col-xs-12 col-md-6 col-xs-12">
110
-
111
- <div class="qld__card qld__card__action qld__card--dark ">
112
-
113
-
206
+
207
+ <li class="col-xs-12 col-md-6 col-xs-12">
208
+ <div class="qld__card qld__card__action qld__card--dark">
114
209
  <div class="qld__card__inner">
115
210
  <div class="qld__card__content">
116
211
  <div class="qld__card__content-inner">
117
212
  <h3 class="qld__card__title">
118
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
213
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
119
214
  </h3>
120
- <p id="card-22726" class="qld__card__description">
121
- Additional text about the card
122
- </p>
215
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
123
216
  </div>
124
217
  </div>
125
218
  </div>
126
219
  </div>
127
220
  </li>
128
- <li class="col-xs-12 col-md-6 col-xs-12">
129
-
130
- <div class="qld__card qld__card__action qld__card--dark-alt ">
131
-
132
-
221
+ <li class="col-xs-12 col-md-6 col-xs-12">
222
+ <div class="qld__card qld__card__action qld__card--dark-alt">
133
223
  <div class="qld__card__inner">
134
224
  <div class="qld__card__content">
135
225
  <div class="qld__card__content-inner">
136
226
  <h3 class="qld__card__title">
137
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
227
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
138
228
  </h3>
139
- <p id="card-22726" class="qld__card__description">
140
- Additional text about the card
141
- </p>
229
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
142
230
  </div>
143
231
  </div>
144
232
  </div>
@@ -148,106 +236,76 @@
148
236
 
149
237
  <h2>Single Action - with footer</h2>
150
238
  <ul class="qld__card-list qld__card-list--matchheight">
151
-
152
-
153
- <li class="col-xs-12 col-md-6 col-xs-12">
154
-
155
- <div class="qld__card qld__card__action ">
156
-
157
-
239
+ <li class="col-xs-12 col-md-6 col-xs-12">
240
+ <div class="qld__card qld__card__action">
158
241
  <div class="qld__card__inner">
159
242
  <div class="qld__card__content">
160
243
  <div class="qld__card__content-inner">
161
244
  <h3 class="qld__card__title">
162
- <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
245
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
163
246
  </h3>
164
- <p id="card-22724" class="qld__card__description">
165
- Additional text about the card
166
- </p>
247
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
167
248
  </div>
168
249
  </div>
169
250
  <div class="qld__card__footer">
170
- <hr class="qld__horizontal-rule">
171
- <div class="qld__card__footer-inner">
172
- Footer text
173
- </div>
251
+ <hr class="qld__horizontal-rule" />
252
+ <div class="qld__card__footer-inner">Footer text</div>
174
253
  </div>
175
254
  </div>
176
255
  </div>
177
256
  </li>
178
-
179
- <li class="col-xs-12 col-md-6 col-xs-12">
180
-
181
- <div class="qld__card qld__card__action qld__card--alt ">
182
-
183
-
257
+
258
+ <li class="col-xs-12 col-md-6 col-xs-12">
259
+ <div class="qld__card qld__card__action qld__card--alt">
184
260
  <div class="qld__card__inner">
185
261
  <div class="qld__card__content">
186
262
  <div class="qld__card__content-inner">
187
263
  <h3 class="qld__card__title">
188
- <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
264
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
189
265
  </h3>
190
- <p id="card-22725" class="qld__card__description">
191
- Additional text about the card
192
- </p>
266
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
193
267
  </div>
194
268
  </div>
195
269
  <div class="qld__card__footer">
196
- <hr class="qld__horizontal-rule">
197
- <div class="qld__card__footer-inner">
198
- Footer text
199
- </div>
270
+ <hr class="qld__horizontal-rule" />
271
+ <div class="qld__card__footer-inner">Footer text</div>
200
272
  </div>
201
273
  </div>
202
274
  </div>
203
275
  </li>
204
-
205
- <li class="col-xs-12 col-md-6 col-xs-12">
206
-
207
- <div class="qld__card qld__card__action qld__card--dark ">
208
-
209
-
276
+
277
+ <li class="col-xs-12 col-md-6 col-xs-12">
278
+ <div class="qld__card qld__card__action qld__card--dark">
210
279
  <div class="qld__card__inner">
211
280
  <div class="qld__card__content">
212
281
  <div class="qld__card__content-inner">
213
282
  <h3 class="qld__card__title">
214
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
283
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
215
284
  </h3>
216
- <p id="card-22726" class="qld__card__description">
217
- Additional text about the card
218
- </p>
285
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
219
286
  </div>
220
287
  </div>
221
288
  <div class="qld__card__footer">
222
- <hr class="qld__horizontal-rule">
223
- <div class="qld__card__footer-inner">
224
- Footer text
225
- </div>
289
+ <hr class="qld__horizontal-rule" />
290
+ <div class="qld__card__footer-inner">Footer text</div>
226
291
  </div>
227
292
  </div>
228
293
  </div>
229
294
  </li>
230
- <li class="col-xs-12 col-md-6 col-xs-12">
231
-
232
- <div class="qld__card qld__card__action qld__card--dark-alt ">
233
-
234
-
295
+ <li class="col-xs-12 col-md-6 col-xs-12">
296
+ <div class="qld__card qld__card__action qld__card--dark-alt">
235
297
  <div class="qld__card__inner">
236
298
  <div class="qld__card__content">
237
299
  <div class="qld__card__content-inner">
238
300
  <h3 class="qld__card__title">
239
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
301
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
240
302
  </h3>
241
- <p id="card-22726" class="qld__card__description">
242
- Additional text about the card
243
- </p>
303
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
244
304
  </div>
245
305
  </div>
246
306
  <div class="qld__card__footer">
247
- <hr class="qld__horizontal-rule">
248
- <div class="qld__card__footer-inner">
249
- Footer text
250
- </div>
307
+ <hr class="qld__horizontal-rule" />
308
+ <div class="qld__card__footer-inner">Footer text</div>
251
309
  </div>
252
310
  </div>
253
311
  </div>
@@ -256,85 +314,67 @@
256
314
 
257
315
  <h2>Single Click - Image</h2>
258
316
  <ul class="qld__card-list qld__card-list--matchheight">
317
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
259
320
 
260
-
261
- <li class="col-xs-12 col-md-6 col-xs-12">
262
-
263
- <div class="qld__card qld__card__action qld__card--image ">
264
-
265
- <div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png');"></div>
266
-
267
321
  <div class="qld__card__inner">
268
322
  <div class="qld__card__content">
269
323
  <div class="qld__card__content-inner">
270
324
  <h3 class="qld__card__title">
271
- <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
325
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
272
326
  </h3>
273
- <p id="card-22724" class="qld__card__description">
274
- Additional text about the card
275
- </p>
327
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
276
328
  </div>
277
329
  </div>
278
330
  </div>
279
331
  </div>
280
332
  </li>
281
-
282
- <li class="col-xs-12 col-md-6 col-xs-12">
283
-
284
- <div class="qld__card qld__card__action qld__card--alt qld__card--image ">
285
-
286
- <div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png');"></div>
287
-
333
+
334
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
337
+
288
338
  <div class="qld__card__inner">
289
339
  <div class="qld__card__content">
290
340
  <div class="qld__card__content-inner">
291
341
  <h3 class="qld__card__title">
292
- <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
342
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
293
343
  </h3>
294
- <p id="card-22725" class="qld__card__description">
295
- Additional text about the card
296
- </p>
344
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
297
345
  </div>
298
346
  </div>
299
347
  </div>
300
348
  </div>
301
349
  </li>
302
-
303
- <li class="col-xs-12 col-md-6 col-xs-12">
304
-
305
- <div class="qld__card qld__card__action qld__card--dark qld__card--image ">
306
-
307
- <div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png');"></div>
308
-
350
+
351
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
354
+
309
355
  <div class="qld__card__inner">
310
356
  <div class="qld__card__content">
311
357
  <div class="qld__card__content-inner">
312
358
  <h3 class="qld__card__title">
313
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
359
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
314
360
  </h3>
315
- <p id="card-22726" class="qld__card__description">
316
- Additional text about the card
317
- </p>
361
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
318
362
  </div>
319
363
  </div>
320
364
  </div>
321
365
  </div>
322
366
  </li>
323
- <li class="col-xs-12 col-md-6 col-xs-12">
324
-
325
- <div class="qld__card qld__card__action qld__card--dark-alt qld__card--image ">
326
-
327
- <div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png');"></div>
328
-
367
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
370
+
329
371
  <div class="qld__card__inner">
330
372
  <div class="qld__card__content">
331
373
  <div class="qld__card__content-inner">
332
374
  <h3 class="qld__card__title">
333
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
375
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
334
376
  </h3>
335
- <p id="card-22726" class="qld__card__description">
336
- Additional text about the card
337
- </p>
377
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
338
378
  </div>
339
379
  </div>
340
380
  </div>
@@ -345,172 +385,136 @@
345
385
  <h2>Single action - Icon</h2>
346
386
 
347
387
  <ul class="qld__card-list qld__card-list--matchheight">
388
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
348
391
 
349
-
350
- <li class="col-xs-12 col-md-6 col-xs-12">
351
-
352
- <div class="qld__card qld__card__action qld__card--icon ">
353
-
354
- <div class="qld__card__icon"><i class="fal fa-question-circle" aria-hidden="true"></i></div>
355
-
356
392
  <div class="qld__card__inner">
357
393
  <div class="qld__card__content">
358
394
  <div class="qld__card__content-inner">
359
395
  <h3 class="qld__card__title">
360
- <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
396
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
361
397
  </h3>
362
- <p id="card-22724" class="qld__card__description">
363
- Additional text about the card
364
- </p>
398
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
365
399
  </div>
366
400
  </div>
367
401
  </div>
368
402
  </div>
369
403
  </li>
370
-
371
- <li class="col-xs-12 col-md-6 col-xs-12">
372
-
373
- <div class="qld__card qld__card__action qld__card--alt qld__card--icon ">
374
-
375
- <div class="qld__card__icon"><i class="fal fa-stethoscope" aria-hidden="true"></i></div>
376
-
404
+
405
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
408
+
377
409
  <div class="qld__card__inner">
378
410
  <div class="qld__card__content">
379
411
  <div class="qld__card__content-inner">
380
412
  <h3 class="qld__card__title">
381
- <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
413
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
382
414
  </h3>
383
- <p id="card-22725" class="qld__card__description">
384
- Additional text about the card
385
- </p>
415
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
386
416
  </div>
387
417
  </div>
388
418
  </div>
389
419
  </div>
390
420
  </li>
391
-
392
- <li class="col-xs-12 col-md-6 col-xs-12">
393
-
394
- <div class="qld__card qld__card__action qld__card--dark qld__card--icon ">
395
-
396
- <div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
397
-
421
+
422
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
425
+
398
426
  <div class="qld__card__inner">
399
427
  <div class="qld__card__content">
400
428
  <div class="qld__card__content-inner">
401
429
  <h3 class="qld__card__title">
402
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
430
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
403
431
  </h3>
404
- <p id="card-22726" class="qld__card__description">
405
- Additional text about the card
406
- </p>
432
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
407
433
  </div>
408
434
  </div>
409
435
  </div>
410
436
  </div>
411
437
  </li>
412
- <li class="col-xs-12 col-md-6 col-xs-12">
413
-
414
- <div class="qld__card qld__card__action qld__card--dark-alt qld__card--icon ">
415
-
416
- <div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
417
-
438
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
441
+
418
442
  <div class="qld__card__inner">
419
443
  <div class="qld__card__content">
420
444
  <div class="qld__card__content-inner">
421
445
  <h3 class="qld__card__title">
422
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
446
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
423
447
  </h3>
424
- <p id="card-22726" class="qld__card__description">
425
- Additional text about the card
426
- </p>
448
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
427
449
  </div>
428
450
  </div>
429
451
  </div>
430
452
  </div>
431
453
  </li>
432
- </ul>
454
+ </ul>
433
455
  <h2>Single action - Icon left</h2>
434
456
  <ul class="qld__card-list qld__card-list--matchheight">
457
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
435
460
 
436
-
437
- <li class="col-xs-12 col-md-6 col-xs-12">
438
-
439
- <div class="qld__card qld__card__action qld__card--icon qld__card--icon-left ">
440
-
441
- <div class="qld__card__icon"><i class="fal fa-question-circle" aria-hidden="true"></i></div>
442
-
443
461
  <div class="qld__card__inner">
444
462
  <div class="qld__card__content">
445
463
  <div class="qld__card__content-inner">
446
464
  <h3 class="qld__card__title">
447
- <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
465
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
448
466
  </h3>
449
- <p id="card-22724" class="qld__card__description">
450
- Additional text about the card
451
- </p>
467
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
452
468
  </div>
453
469
  </div>
454
470
  </div>
455
471
  </div>
456
472
  </li>
457
-
458
- <li class="col-xs-12 col-md-6 col-xs-12">
459
-
460
- <div class="qld__card qld__card__action qld__card--alt qld__card--icon qld__card--icon-left ">
461
-
462
- <div class="qld__card__icon"><i class="fal fa-stethoscope" aria-hidden="true"></i></div>
463
-
473
+
474
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
477
+
464
478
  <div class="qld__card__inner">
465
479
  <div class="qld__card__content">
466
480
  <div class="qld__card__content-inner">
467
481
  <h3 class="qld__card__title">
468
- <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
482
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
469
483
  </h3>
470
- <p id="card-22725" class="qld__card__description">
471
- Additional text about the card
472
- </p>
484
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
473
485
  </div>
474
486
  </div>
475
487
  </div>
476
488
  </div>
477
489
  </li>
478
-
479
- <li class="col-xs-12 col-md-6 col-xs-12">
480
-
481
- <div class="qld__card qld__card__action qld__card--dark qld__card--icon qld__card--icon-left ">
482
-
483
- <div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
484
-
490
+
491
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
494
+
485
495
  <div class="qld__card__inner">
486
496
  <div class="qld__card__content">
487
497
  <div class="qld__card__content-inner">
488
498
  <h3 class="qld__card__title">
489
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
499
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
490
500
  </h3>
491
- <p id="card-22726" class="qld__card__description">
492
- Additional text about the card
493
- </p>
501
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
494
502
  </div>
495
503
  </div>
496
504
  </div>
497
505
  </div>
498
506
  </li>
499
- <li class="col-xs-12 col-md-6 col-xs-12">
500
-
501
- <div class="qld__card qld__card__action qld__card--dark-alt qld__card--icon qld__card--icon-left ">
502
-
503
- <div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
504
-
507
+ <li class="col-xs-12 col-md-6 col-xs-12">
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>
510
+
505
511
  <div class="qld__card__inner">
506
512
  <div class="qld__card__content">
507
513
  <div class="qld__card__content-inner">
508
514
  <h3 class="qld__card__title">
509
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
515
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
510
516
  </h3>
511
- <p id="card-22726" class="qld__card__description">
512
- Additional text about the card
513
- </p>
517
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
514
518
  </div>
515
519
  </div>
516
520
  </div>
@@ -520,112 +524,79 @@
520
524
 
521
525
  <h2>Single Action - Arrow</h2>
522
526
  <ul class="qld__card-list qld__card-list--matchheight">
523
-
524
-
525
- <li class="col-xs-12 col-md-6 col-xs-12">
526
-
527
- <div class="qld__card qld__card__action qld__card--arrow ">
528
-
529
-
527
+ <li class="col-xs-12 col-md-6 col-xs-12">
528
+ <div class="qld__card qld__card__action qld__card--arrow">
530
529
  <div class="qld__card__inner">
531
530
  <div class="qld__card__content">
532
531
  <div class="qld__card__content-inner">
533
532
  <h3 class="qld__card__title">
534
- <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
533
+ <a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
535
534
  </h3>
536
- <p id="card-22724" class="qld__card__description">
537
- Additional text about the card
538
- </p>
535
+ <p id="card-22724" class="qld__card__description">Additional text about the card</p>
539
536
  </div>
540
- <div class="qld__card__arrow"></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>
541
538
  </div>
542
-
543
539
  </div>
544
540
  </div>
545
541
  </li>
546
-
547
- <li class="col-xs-12 col-md-6 col-xs-12">
548
-
549
- <div class="qld__card qld__card__action qld__card--arrow qld__card--alt ">
550
-
551
-
542
+
543
+ <li class="col-xs-12 col-md-6 col-xs-12">
544
+ <div class="qld__card qld__card__action qld__card--arrow qld__card--alt">
552
545
  <div class="qld__card__inner">
553
546
  <div class="qld__card__content">
554
547
  <div class="qld__card__content-inner">
555
548
  <h3 class="qld__card__title">
556
- <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
549
+ <a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
557
550
  </h3>
558
- <p id="card-22725" class="qld__card__description">
559
- Additional text about the card
560
- </p>
551
+ <p id="card-22725" class="qld__card__description">Additional text about the card</p>
561
552
  </div>
562
- <div class="qld__card__arrow"></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>
563
554
  </div>
564
555
  </div>
565
556
  </div>
566
557
  </li>
567
-
568
- <li class="col-xs-12 col-md-6 col-xs-12">
569
-
570
- <div class="qld__card qld__card__action qld__card--arrow qld__card--dark ">
571
-
572
-
558
+
559
+ <li class="col-xs-12 col-md-6 col-xs-12">
560
+ <div class="qld__card qld__card__action qld__card--arrow qld__card--dark">
573
561
  <div class="qld__card__inner">
574
562
  <div class="qld__card__content">
575
563
  <div class="qld__card__content-inner">
576
564
  <h3 class="qld__card__title">
577
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
565
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
578
566
  </h3>
579
- <p id="card-22726" class="qld__card__description">
580
- Additional text about the card
581
- </p>
567
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
582
568
  </div>
583
- <div class="qld__card__arrow"></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>
584
570
  </div>
585
571
  </div>
586
572
  </div>
587
573
  </li>
588
- <li class="col-xs-12 col-md-6 col-xs-12">
589
-
590
- <div class="qld__card qld__card__action qld__card--arrow qld__card--dark-alt ">
591
-
592
-
574
+ <li class="col-xs-12 col-md-6 col-xs-12">
575
+ <div class="qld__card qld__card__action qld__card--arrow qld__card--dark-alt">
593
576
  <div class="qld__card__inner">
594
577
  <div class="qld__card__content">
595
578
  <div class="qld__card__content-inner">
596
579
  <h3 class="qld__card__title">
597
- <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
580
+ <a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
598
581
  </h3>
599
- <p id="card-22726" class="qld__card__description">
600
- Additional text about the card
601
- </p>
582
+ <p id="card-22726" class="qld__card__description">Additional text about the card</p>
602
583
  </div>
603
- <div class="qld__card__arrow"></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>
604
585
  </div>
605
586
  </div>
606
587
  </div>
607
588
  </li>
608
- </ul>
589
+ </ul>
609
590
  </div>
610
591
  </div>
611
592
  </div>
612
- </div>
593
+ </div>
613
594
  </main>
614
595
  <!-- END MAIN BODY -->
615
596
 
616
- <!-- WIDGETS -->
617
- ${require('../components/widgets/html/component.hbs')({
618
- "site":require('/src/data/site.json'),
619
- "current":require('/src/data/current.json')
620
- })}
621
-
622
597
  <!-- FOOTER-->
623
- ${require('../components/footer/html/component.hbs')({
624
- "site":require('/src/data/site.json')
625
- })}
598
+ ${require('../components/footer/html/component.hbs')({ "site":require('/src/data/site.json') })}
626
599
 
627
- <div class="footer-scripts" id="footer_js" style="display: none !important;">
628
- ${require('../components/_global/html/scripts.html')}
629
- </div>
600
+ <div class="footer-scripts" id="footer_js" style="display: none !important">${require('../components/_global/html/scripts.html')}</div>
630
601
  </body>
631
602
  </html>