@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.
- package/.storybook/assets/storybook.css +1 -1
- package/.storybook/globals.js +10 -0
- package/CHANGELOG.md +4 -0
- package/package.json +1 -1
- package/src/components/_global/css/cta_links/component.scss +107 -14
- package/src/components/_global/css/forms/control_inputs/component.scss +65 -77
- package/src/components/_global/css/link_columns/component.scss +2 -2
- package/src/components/_global/html/scripts.html +0 -2
- package/src/components/_global/js/cta_links/global.js +33 -0
- package/src/components/_global/js/global.js +175 -138
- package/src/components/_global/js/tabs/global.js +6 -2
- package/src/components/_template/html/component-page.html +25 -31
- package/src/components/banner_advanced/html/component.hbs +1 -1
- package/src/components/breadcrumbs/js/global.js +17 -4
- package/src/components/card_feature/html/component.hbs +1 -1
- package/src/components/card_multi_action/html/component.hbs +1 -1
- package/src/components/card_single_action/css/component.scss +38 -47
- package/src/components/card_single_action/html/component.hbs +1 -1
- package/src/components/code/css/component.scss +72 -73
- package/src/components/code/html/component.hbs +62 -19
- package/src/components/code/js/global.js +102 -86
- package/src/components/footer/css/component.scss +2 -4
- package/src/components/footer/html/component.hbs +11 -8
- package/src/components/header/css/component.scss +11 -11
- package/src/components/header/html/component.hbs +3 -3
- package/src/components/header/js/global.js +58 -65
- package/src/components/in_page_navigation/js/global.js +34 -31
- package/src/components/internal_navigation/js/global.js +13 -3
- package/src/components/main_navigation/css/component.scss +79 -13
- package/src/components/main_navigation/html/component.hbs +5 -5
- package/src/components/main_navigation/js/global.js +94 -115
- package/src/components/mega_main_navigation/css/component.scss +27 -14
- package/src/components/mega_main_navigation/html/component.hbs +5 -5
- package/src/components/mega_main_navigation/js/global.js +50 -55
- package/src/components/page_alert/css/component.scss +141 -179
- package/src/components/prefooter/css/component.scss +62 -0
- package/src/components/prefooter/js/manifest.json +9 -0
- package/src/data/current.json +3 -9
- package/src/data/site.json +3 -3
- package/src/html/component-a-z_listing.html +13 -41
- package/src/html/component-abstract.html +536 -40
- package/src/html/component-accordion.html +537 -41
- package/src/html/component-banner.html +537 -40
- package/src/html/component-banner_advanced.html +14 -41
- package/src/html/component-banner_basic.html +13 -40
- package/src/html/component-banner_intermediate.html +14 -41
- package/src/html/component-basic_search.html +10 -26
- package/src/html/component-body.html +541 -52
- package/src/html/component-breadcrumbs.html +538 -43
- package/src/html/component-btn.html +471 -69
- package/src/html/component-callout.html +536 -40
- package/src/html/component-card_feature.html +282 -312
- package/src/html/component-card_multi_action.html +651 -217
- package/src/html/component-card_no_action.html +163 -289
- package/src/html/component-card_single_action.html +283 -312
- package/src/html/component-code.html +13 -40
- package/src/html/component-file_upload.html +13 -41
- package/src/html/component-footer.html +537 -41
- package/src/html/component-forms.html +206 -72
- package/src/html/component-global-elements.html +720 -152
- package/src/html/component-global_alert.html +536 -41
- package/src/html/component-header.html +537 -42
- package/src/html/component-horizontal_rule.html +459 -65
- package/src/html/component-in_page_navigation.html +544 -48
- package/src/html/component-internal_navigation.html +537 -41
- package/src/html/component-left_hand_navigation.html +13 -41
- package/src/html/component-loading_spinner.html +13 -42
- package/src/html/component-main_navigation.html +537 -41
- package/src/html/component-mega_main_navigation.html +537 -42
- package/src/html/component-multi_column.html +536 -40
- package/src/html/component-overflow_menu.html +12 -35
- package/src/html/component-page_alert.html +536 -40
- package/src/html/component-page_footer_info.html +583 -0
- package/src/html/component-pagination.html +459 -65
- package/src/html/component-promo_panel.html +13 -43
- package/src/html/component-tab.html +13 -41
- package/src/html/component-tag_list.html +495 -77
- package/src/html/component-toggle_tip.html +2 -3
- package/src/html/component-tool_tip.html +2 -3
- package/src/html/component-video_player.html +13 -41
- package/src/html/components.html +306 -88
- package/src/html/home.html +1807 -628
- package/src/html/index.html +9 -22
- package/src/html/inner-with-nav.html +551 -137
- package/src/html/inner.html +570 -59
- package/src/stories/Checkboxes/Checkboxes.js +41 -0
- package/src/stories/Checkboxes/Checkboxes.mdx +45 -0
- package/src/stories/Checkboxes/Checkboxes.stories.js +209 -0
- package/src/stories/RadioButtons/RadioButtons.js +41 -0
- package/src/stories/RadioButtons/RadioButtons.mdx +45 -0
- package/src/stories/RadioButtons/RadioButtons.stories.js +209 -0
- package/src/styles/imports/mixins.scss +5 -43
- package/src/components/updated_date/css/component.scss +0 -24
- package/src/components/updated_date/js/manifest.json +0 -9
- package/src/components/widgets/css/component.scss +0 -130
- package/src/components/widgets/html/component.hbs +0 -8
- package/src/components/widgets/html/default.html +0 -3
- package/src/components/widgets/js/current.json +0 -471
- package/src/components/widgets/js/manifest.json +0 -9
- package/src/components/widgets/js/site.json +0 -350
- package/src/html/component-updated_date.html +0 -88
- package/src/html/component-widgets.html +0 -90
- /package/src/components/{updated_date → prefooter}/html/component.hbs +0 -0
|
@@ -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 = {
|
|
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,67 @@
|
|
|
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
|
-
|
|
57
|
-
"manifest":require('../components/card_feature/js/manifest.json'),
|
|
58
|
-
"component":require('!url-loader!../components/card_feature/html/component.hbs'),
|
|
59
|
-
"component_output":require('../components/card_feature/html/component.hbs')({
|
|
60
|
-
"component":require('../components/card_feature/js/manifest.json').component,
|
|
61
|
-
"content":"Lorem Ipsum"
|
|
62
|
-
})
|
|
63
|
-
})}
|
|
171
|
+
${require('../components/_global/html/component.hbs')({ "manifest":require('../components/card_feature/js/manifest.json'), "component":require('!url-loader!../components/card_feature/html/component.hbs'),
|
|
172
|
+
"component_output":require('../components/card_feature/html/component.hbs')({ "component":require('../components/card_feature/js/manifest.json').component, "content":"Lorem Ipsum" }) })}
|
|
64
173
|
|
|
65
174
|
<h2>Single action - base</h2>
|
|
66
175
|
<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
|
-
|
|
176
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
177
|
+
<div class="qld__card qld__card__action">
|
|
74
178
|
<div class="qld__card__inner">
|
|
75
179
|
<div class="qld__card__content">
|
|
76
180
|
<div class="qld__card__content-inner">
|
|
77
181
|
<h3 class="qld__card__title">
|
|
78
|
-
|
|
182
|
+
<a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
|
|
79
183
|
</h3>
|
|
80
|
-
<p id="card-22724" class="qld__card__description">
|
|
81
|
-
Additional text about the card
|
|
82
|
-
</p>
|
|
184
|
+
<p id="card-22724" class="qld__card__description">Additional text about the card</p>
|
|
83
185
|
</div>
|
|
84
186
|
</div>
|
|
85
187
|
</div>
|
|
86
188
|
</div>
|
|
87
189
|
</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
|
-
|
|
190
|
+
|
|
191
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
192
|
+
<div class="qld__card qld__card__action qld__card--alt">
|
|
94
193
|
<div class="qld__card__inner">
|
|
95
194
|
<div class="qld__card__content">
|
|
96
195
|
<div class="qld__card__content-inner">
|
|
97
196
|
<h3 class="qld__card__title">
|
|
98
|
-
|
|
197
|
+
<a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
|
|
99
198
|
</h3>
|
|
100
|
-
<p id="card-22725" class="qld__card__description">
|
|
101
|
-
Additional text about the card
|
|
102
|
-
</p>
|
|
199
|
+
<p id="card-22725" class="qld__card__description">Additional text about the card</p>
|
|
103
200
|
</div>
|
|
104
201
|
</div>
|
|
105
202
|
</div>
|
|
106
203
|
</div>
|
|
107
204
|
</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
|
-
|
|
205
|
+
|
|
206
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
207
|
+
<div class="qld__card qld__card__action qld__card--dark">
|
|
114
208
|
<div class="qld__card__inner">
|
|
115
209
|
<div class="qld__card__content">
|
|
116
210
|
<div class="qld__card__content-inner">
|
|
117
211
|
<h3 class="qld__card__title">
|
|
118
|
-
|
|
212
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
|
|
119
213
|
</h3>
|
|
120
|
-
<p id="card-22726" class="qld__card__description">
|
|
121
|
-
Additional text about the card
|
|
122
|
-
</p>
|
|
214
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
123
215
|
</div>
|
|
124
216
|
</div>
|
|
125
217
|
</div>
|
|
126
218
|
</div>
|
|
127
219
|
</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
|
-
|
|
220
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
221
|
+
<div class="qld__card qld__card__action qld__card--dark-alt">
|
|
133
222
|
<div class="qld__card__inner">
|
|
134
223
|
<div class="qld__card__content">
|
|
135
224
|
<div class="qld__card__content-inner">
|
|
136
225
|
<h3 class="qld__card__title">
|
|
137
|
-
|
|
226
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
|
|
138
227
|
</h3>
|
|
139
|
-
<p id="card-22726" class="qld__card__description">
|
|
140
|
-
Additional text about the card
|
|
141
|
-
</p>
|
|
228
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
142
229
|
</div>
|
|
143
230
|
</div>
|
|
144
231
|
</div>
|
|
@@ -148,106 +235,76 @@
|
|
|
148
235
|
|
|
149
236
|
<h2>Single Action - with footer</h2>
|
|
150
237
|
<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
|
-
|
|
238
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
239
|
+
<div class="qld__card qld__card__action">
|
|
158
240
|
<div class="qld__card__inner">
|
|
159
241
|
<div class="qld__card__content">
|
|
160
242
|
<div class="qld__card__content-inner">
|
|
161
243
|
<h3 class="qld__card__title">
|
|
162
|
-
|
|
244
|
+
<a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
|
|
163
245
|
</h3>
|
|
164
|
-
<p id="card-22724" class="qld__card__description">
|
|
165
|
-
Additional text about the card
|
|
166
|
-
</p>
|
|
246
|
+
<p id="card-22724" class="qld__card__description">Additional text about the card</p>
|
|
167
247
|
</div>
|
|
168
248
|
</div>
|
|
169
249
|
<div class="qld__card__footer">
|
|
170
|
-
<hr class="qld__horizontal-rule"
|
|
171
|
-
<div class="qld__card__footer-inner">
|
|
172
|
-
Footer text
|
|
173
|
-
</div>
|
|
250
|
+
<hr class="qld__horizontal-rule" />
|
|
251
|
+
<div class="qld__card__footer-inner">Footer text</div>
|
|
174
252
|
</div>
|
|
175
253
|
</div>
|
|
176
254
|
</div>
|
|
177
255
|
</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
|
-
|
|
256
|
+
|
|
257
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
258
|
+
<div class="qld__card qld__card__action qld__card--alt">
|
|
184
259
|
<div class="qld__card__inner">
|
|
185
260
|
<div class="qld__card__content">
|
|
186
261
|
<div class="qld__card__content-inner">
|
|
187
262
|
<h3 class="qld__card__title">
|
|
188
|
-
|
|
263
|
+
<a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
|
|
189
264
|
</h3>
|
|
190
|
-
<p id="card-22725" class="qld__card__description">
|
|
191
|
-
Additional text about the card
|
|
192
|
-
</p>
|
|
265
|
+
<p id="card-22725" class="qld__card__description">Additional text about the card</p>
|
|
193
266
|
</div>
|
|
194
267
|
</div>
|
|
195
268
|
<div class="qld__card__footer">
|
|
196
|
-
<hr class="qld__horizontal-rule"
|
|
197
|
-
<div class="qld__card__footer-inner">
|
|
198
|
-
Footer text
|
|
199
|
-
</div>
|
|
269
|
+
<hr class="qld__horizontal-rule" />
|
|
270
|
+
<div class="qld__card__footer-inner">Footer text</div>
|
|
200
271
|
</div>
|
|
201
272
|
</div>
|
|
202
273
|
</div>
|
|
203
274
|
</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
|
-
|
|
275
|
+
|
|
276
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
277
|
+
<div class="qld__card qld__card__action qld__card--dark">
|
|
210
278
|
<div class="qld__card__inner">
|
|
211
279
|
<div class="qld__card__content">
|
|
212
280
|
<div class="qld__card__content-inner">
|
|
213
281
|
<h3 class="qld__card__title">
|
|
214
|
-
|
|
282
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
|
|
215
283
|
</h3>
|
|
216
|
-
<p id="card-22726" class="qld__card__description">
|
|
217
|
-
Additional text about the card
|
|
218
|
-
</p>
|
|
284
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
219
285
|
</div>
|
|
220
286
|
</div>
|
|
221
287
|
<div class="qld__card__footer">
|
|
222
|
-
<hr class="qld__horizontal-rule"
|
|
223
|
-
<div class="qld__card__footer-inner">
|
|
224
|
-
Footer text
|
|
225
|
-
</div>
|
|
288
|
+
<hr class="qld__horizontal-rule" />
|
|
289
|
+
<div class="qld__card__footer-inner">Footer text</div>
|
|
226
290
|
</div>
|
|
227
291
|
</div>
|
|
228
292
|
</div>
|
|
229
293
|
</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
|
-
|
|
294
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
295
|
+
<div class="qld__card qld__card__action qld__card--dark-alt">
|
|
235
296
|
<div class="qld__card__inner">
|
|
236
297
|
<div class="qld__card__content">
|
|
237
298
|
<div class="qld__card__content-inner">
|
|
238
299
|
<h3 class="qld__card__title">
|
|
239
|
-
|
|
300
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
|
|
240
301
|
</h3>
|
|
241
|
-
<p id="card-22726" class="qld__card__description">
|
|
242
|
-
Additional text about the card
|
|
243
|
-
</p>
|
|
302
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
244
303
|
</div>
|
|
245
304
|
</div>
|
|
246
305
|
<div class="qld__card__footer">
|
|
247
|
-
<hr class="qld__horizontal-rule"
|
|
248
|
-
<div class="qld__card__footer-inner">
|
|
249
|
-
Footer text
|
|
250
|
-
</div>
|
|
306
|
+
<hr class="qld__horizontal-rule" />
|
|
307
|
+
<div class="qld__card__footer-inner">Footer text</div>
|
|
251
308
|
</div>
|
|
252
309
|
</div>
|
|
253
310
|
</div>
|
|
@@ -256,85 +313,67 @@
|
|
|
256
313
|
|
|
257
314
|
<h2>Single Click - Image</h2>
|
|
258
315
|
<ul class="qld__card-list qld__card-list--matchheight">
|
|
316
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
317
|
+
<div class="qld__card qld__card__action qld__card--image">
|
|
318
|
+
<div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png')"></div>
|
|
259
319
|
|
|
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
320
|
<div class="qld__card__inner">
|
|
268
321
|
<div class="qld__card__content">
|
|
269
322
|
<div class="qld__card__content-inner">
|
|
270
323
|
<h3 class="qld__card__title">
|
|
271
|
-
|
|
324
|
+
<a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
|
|
272
325
|
</h3>
|
|
273
|
-
<p id="card-22724" class="qld__card__description">
|
|
274
|
-
Additional text about the card
|
|
275
|
-
</p>
|
|
326
|
+
<p id="card-22724" class="qld__card__description">Additional text about the card</p>
|
|
276
327
|
</div>
|
|
277
328
|
</div>
|
|
278
329
|
</div>
|
|
279
330
|
</div>
|
|
280
331
|
</li>
|
|
281
|
-
|
|
282
|
-
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
<div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png');"></div>
|
|
287
|
-
|
|
332
|
+
|
|
333
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
334
|
+
<div class="qld__card qld__card__action qld__card--alt qld__card--image">
|
|
335
|
+
<div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png')"></div>
|
|
336
|
+
|
|
288
337
|
<div class="qld__card__inner">
|
|
289
338
|
<div class="qld__card__content">
|
|
290
339
|
<div class="qld__card__content-inner">
|
|
291
340
|
<h3 class="qld__card__title">
|
|
292
|
-
|
|
341
|
+
<a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
|
|
293
342
|
</h3>
|
|
294
|
-
<p id="card-22725" class="qld__card__description">
|
|
295
|
-
Additional text about the card
|
|
296
|
-
</p>
|
|
343
|
+
<p id="card-22725" class="qld__card__description">Additional text about the card</p>
|
|
297
344
|
</div>
|
|
298
345
|
</div>
|
|
299
346
|
</div>
|
|
300
347
|
</div>
|
|
301
348
|
</li>
|
|
302
|
-
|
|
303
|
-
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
<div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png');"></div>
|
|
308
|
-
|
|
349
|
+
|
|
350
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
351
|
+
<div class="qld__card qld__card__action qld__card--dark qld__card--image">
|
|
352
|
+
<div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png')"></div>
|
|
353
|
+
|
|
309
354
|
<div class="qld__card__inner">
|
|
310
355
|
<div class="qld__card__content">
|
|
311
356
|
<div class="qld__card__content-inner">
|
|
312
357
|
<h3 class="qld__card__title">
|
|
313
|
-
|
|
358
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
|
|
314
359
|
</h3>
|
|
315
|
-
<p id="card-22726" class="qld__card__description">
|
|
316
|
-
Additional text about the card
|
|
317
|
-
</p>
|
|
360
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
318
361
|
</div>
|
|
319
362
|
</div>
|
|
320
363
|
</div>
|
|
321
364
|
</div>
|
|
322
365
|
</li>
|
|
323
|
-
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
<div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png');"></div>
|
|
328
|
-
|
|
366
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
367
|
+
<div class="qld__card qld__card__action qld__card--dark-alt qld__card--image">
|
|
368
|
+
<div class="qld__responsive-media-img--bg" style="background-image: url('/mysource_files/img/card--content.png')"></div>
|
|
369
|
+
|
|
329
370
|
<div class="qld__card__inner">
|
|
330
371
|
<div class="qld__card__content">
|
|
331
372
|
<div class="qld__card__content-inner">
|
|
332
373
|
<h3 class="qld__card__title">
|
|
333
|
-
|
|
374
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
|
|
334
375
|
</h3>
|
|
335
|
-
<p id="card-22726" class="qld__card__description">
|
|
336
|
-
Additional text about the card
|
|
337
|
-
</p>
|
|
376
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
338
377
|
</div>
|
|
339
378
|
</div>
|
|
340
379
|
</div>
|
|
@@ -345,172 +384,136 @@
|
|
|
345
384
|
<h2>Single action - Icon</h2>
|
|
346
385
|
|
|
347
386
|
<ul class="qld__card-list qld__card-list--matchheight">
|
|
387
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
388
|
+
<div class="qld__card qld__card__action qld__card--icon">
|
|
389
|
+
<div class="qld__card__icon"><i class="fal fa-question-circle" aria-hidden="true"></i></div>
|
|
348
390
|
|
|
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
391
|
<div class="qld__card__inner">
|
|
357
392
|
<div class="qld__card__content">
|
|
358
393
|
<div class="qld__card__content-inner">
|
|
359
394
|
<h3 class="qld__card__title">
|
|
360
|
-
|
|
395
|
+
<a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
|
|
361
396
|
</h3>
|
|
362
|
-
<p id="card-22724" class="qld__card__description">
|
|
363
|
-
Additional text about the card
|
|
364
|
-
</p>
|
|
397
|
+
<p id="card-22724" class="qld__card__description">Additional text about the card</p>
|
|
365
398
|
</div>
|
|
366
399
|
</div>
|
|
367
400
|
</div>
|
|
368
401
|
</div>
|
|
369
402
|
</li>
|
|
370
|
-
|
|
371
|
-
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
<div class="qld__card__icon"><i class="fal fa-stethoscope" aria-hidden="true"></i></div>
|
|
376
|
-
|
|
403
|
+
|
|
404
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
405
|
+
<div class="qld__card qld__card__action qld__card--alt qld__card--icon">
|
|
406
|
+
<div class="qld__card__icon"><i class="fal fa-stethoscope" aria-hidden="true"></i></div>
|
|
407
|
+
|
|
377
408
|
<div class="qld__card__inner">
|
|
378
409
|
<div class="qld__card__content">
|
|
379
410
|
<div class="qld__card__content-inner">
|
|
380
411
|
<h3 class="qld__card__title">
|
|
381
|
-
|
|
412
|
+
<a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
|
|
382
413
|
</h3>
|
|
383
|
-
<p id="card-22725" class="qld__card__description">
|
|
384
|
-
Additional text about the card
|
|
385
|
-
</p>
|
|
414
|
+
<p id="card-22725" class="qld__card__description">Additional text about the card</p>
|
|
386
415
|
</div>
|
|
387
416
|
</div>
|
|
388
417
|
</div>
|
|
389
418
|
</div>
|
|
390
419
|
</li>
|
|
391
|
-
|
|
392
|
-
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
<div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
|
|
397
|
-
|
|
420
|
+
|
|
421
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
422
|
+
<div class="qld__card qld__card__action qld__card--dark qld__card--icon">
|
|
423
|
+
<div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
|
|
424
|
+
|
|
398
425
|
<div class="qld__card__inner">
|
|
399
426
|
<div class="qld__card__content">
|
|
400
427
|
<div class="qld__card__content-inner">
|
|
401
428
|
<h3 class="qld__card__title">
|
|
402
|
-
|
|
429
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
|
|
403
430
|
</h3>
|
|
404
|
-
<p id="card-22726" class="qld__card__description">
|
|
405
|
-
Additional text about the card
|
|
406
|
-
</p>
|
|
431
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
407
432
|
</div>
|
|
408
433
|
</div>
|
|
409
434
|
</div>
|
|
410
435
|
</div>
|
|
411
436
|
</li>
|
|
412
|
-
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
<div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
|
|
417
|
-
|
|
437
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
438
|
+
<div class="qld__card qld__card__action qld__card--dark-alt qld__card--icon">
|
|
439
|
+
<div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
|
|
440
|
+
|
|
418
441
|
<div class="qld__card__inner">
|
|
419
442
|
<div class="qld__card__content">
|
|
420
443
|
<div class="qld__card__content-inner">
|
|
421
444
|
<h3 class="qld__card__title">
|
|
422
|
-
|
|
445
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
|
|
423
446
|
</h3>
|
|
424
|
-
<p id="card-22726" class="qld__card__description">
|
|
425
|
-
Additional text about the card
|
|
426
|
-
</p>
|
|
447
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
427
448
|
</div>
|
|
428
449
|
</div>
|
|
429
450
|
</div>
|
|
430
451
|
</div>
|
|
431
452
|
</li>
|
|
432
|
-
|
|
453
|
+
</ul>
|
|
433
454
|
<h2>Single action - Icon left</h2>
|
|
434
455
|
<ul class="qld__card-list qld__card-list--matchheight">
|
|
456
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
457
|
+
<div class="qld__card qld__card__action qld__card--icon qld__card--icon-left">
|
|
458
|
+
<div class="qld__card__icon"><i class="fal fa-question-circle" aria-hidden="true"></i></div>
|
|
435
459
|
|
|
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
460
|
<div class="qld__card__inner">
|
|
444
461
|
<div class="qld__card__content">
|
|
445
462
|
<div class="qld__card__content-inner">
|
|
446
463
|
<h3 class="qld__card__title">
|
|
447
|
-
|
|
464
|
+
<a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
|
|
448
465
|
</h3>
|
|
449
|
-
<p id="card-22724" class="qld__card__description">
|
|
450
|
-
Additional text about the card
|
|
451
|
-
</p>
|
|
466
|
+
<p id="card-22724" class="qld__card__description">Additional text about the card</p>
|
|
452
467
|
</div>
|
|
453
468
|
</div>
|
|
454
469
|
</div>
|
|
455
470
|
</div>
|
|
456
471
|
</li>
|
|
457
|
-
|
|
458
|
-
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
<div class="qld__card__icon"><i class="fal fa-stethoscope" aria-hidden="true"></i></div>
|
|
463
|
-
|
|
472
|
+
|
|
473
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
474
|
+
<div class="qld__card qld__card__action qld__card--alt qld__card--icon qld__card--icon-left">
|
|
475
|
+
<div class="qld__card__icon"><i class="fal fa-stethoscope" aria-hidden="true"></i></div>
|
|
476
|
+
|
|
464
477
|
<div class="qld__card__inner">
|
|
465
478
|
<div class="qld__card__content">
|
|
466
479
|
<div class="qld__card__content-inner">
|
|
467
480
|
<h3 class="qld__card__title">
|
|
468
|
-
|
|
481
|
+
<a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
|
|
469
482
|
</h3>
|
|
470
|
-
<p id="card-22725" class="qld__card__description">
|
|
471
|
-
Additional text about the card
|
|
472
|
-
</p>
|
|
483
|
+
<p id="card-22725" class="qld__card__description">Additional text about the card</p>
|
|
473
484
|
</div>
|
|
474
485
|
</div>
|
|
475
486
|
</div>
|
|
476
487
|
</div>
|
|
477
488
|
</li>
|
|
478
|
-
|
|
479
|
-
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
<div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
|
|
484
|
-
|
|
489
|
+
|
|
490
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
491
|
+
<div class="qld__card qld__card__action qld__card--dark qld__card--icon qld__card--icon-left">
|
|
492
|
+
<div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
|
|
493
|
+
|
|
485
494
|
<div class="qld__card__inner">
|
|
486
495
|
<div class="qld__card__content">
|
|
487
496
|
<div class="qld__card__content-inner">
|
|
488
497
|
<h3 class="qld__card__title">
|
|
489
|
-
|
|
498
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
|
|
490
499
|
</h3>
|
|
491
|
-
<p id="card-22726" class="qld__card__description">
|
|
492
|
-
Additional text about the card
|
|
493
|
-
</p>
|
|
500
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
494
501
|
</div>
|
|
495
502
|
</div>
|
|
496
503
|
</div>
|
|
497
504
|
</div>
|
|
498
505
|
</li>
|
|
499
|
-
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
<div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
|
|
504
|
-
|
|
506
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
507
|
+
<div class="qld__card qld__card__action qld__card--dark-alt qld__card--icon qld__card--icon-left">
|
|
508
|
+
<div class="qld__card__icon"><i class="fal fa-heart" aria-hidden="true"></i></div>
|
|
509
|
+
|
|
505
510
|
<div class="qld__card__inner">
|
|
506
511
|
<div class="qld__card__content">
|
|
507
512
|
<div class="qld__card__content-inner">
|
|
508
513
|
<h3 class="qld__card__title">
|
|
509
|
-
|
|
514
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
|
|
510
515
|
</h3>
|
|
511
|
-
<p id="card-22726" class="qld__card__description">
|
|
512
|
-
Additional text about the card
|
|
513
|
-
</p>
|
|
516
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
514
517
|
</div>
|
|
515
518
|
</div>
|
|
516
519
|
</div>
|
|
@@ -520,112 +523,79 @@
|
|
|
520
523
|
|
|
521
524
|
<h2>Single Action - Arrow</h2>
|
|
522
525
|
<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
|
-
|
|
526
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
527
|
+
<div class="qld__card qld__card__action qld__card--arrow">
|
|
530
528
|
<div class="qld__card__inner">
|
|
531
529
|
<div class="qld__card__content">
|
|
532
530
|
<div class="qld__card__content-inner">
|
|
533
531
|
<h3 class="qld__card__title">
|
|
534
|
-
|
|
532
|
+
<a aria-label="Brand" aria-describedby="card-22724" class="qld__card--clickable__link" href="#">Light</a>
|
|
535
533
|
</h3>
|
|
536
|
-
<p id="card-22724" class="qld__card__description">
|
|
537
|
-
Additional text about the card
|
|
538
|
-
</p>
|
|
534
|
+
<p id="card-22724" class="qld__card__description">Additional text about the card</p>
|
|
539
535
|
</div>
|
|
540
|
-
<
|
|
536
|
+
<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
537
|
</div>
|
|
542
|
-
|
|
543
538
|
</div>
|
|
544
539
|
</div>
|
|
545
540
|
</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
|
-
|
|
541
|
+
|
|
542
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
543
|
+
<div class="qld__card qld__card__action qld__card--arrow qld__card--alt">
|
|
552
544
|
<div class="qld__card__inner">
|
|
553
545
|
<div class="qld__card__content">
|
|
554
546
|
<div class="qld__card__content-inner">
|
|
555
547
|
<h3 class="qld__card__title">
|
|
556
|
-
|
|
548
|
+
<a aria-label="Content" aria-describedby="card-22725" class="qld__card--clickable__link" href="#">Alternative</a>
|
|
557
549
|
</h3>
|
|
558
|
-
<p id="card-22725" class="qld__card__description">
|
|
559
|
-
Additional text about the card
|
|
560
|
-
</p>
|
|
550
|
+
<p id="card-22725" class="qld__card__description">Additional text about the card</p>
|
|
561
551
|
</div>
|
|
562
|
-
<
|
|
552
|
+
<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
553
|
</div>
|
|
564
554
|
</div>
|
|
565
555
|
</div>
|
|
566
556
|
</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
|
-
|
|
557
|
+
|
|
558
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
559
|
+
<div class="qld__card qld__card__action qld__card--arrow qld__card--dark">
|
|
573
560
|
<div class="qld__card__inner">
|
|
574
561
|
<div class="qld__card__content">
|
|
575
562
|
<div class="qld__card__content-inner">
|
|
576
563
|
<h3 class="qld__card__title">
|
|
577
|
-
|
|
564
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark</a>
|
|
578
565
|
</h3>
|
|
579
|
-
<p id="card-22726" class="qld__card__description">
|
|
580
|
-
Additional text about the card
|
|
581
|
-
</p>
|
|
566
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
582
567
|
</div>
|
|
583
|
-
<
|
|
568
|
+
<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
569
|
</div>
|
|
585
570
|
</div>
|
|
586
571
|
</div>
|
|
587
572
|
</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
|
-
|
|
573
|
+
<li class="col-xs-12 col-md-6 col-xs-12">
|
|
574
|
+
<div class="qld__card qld__card__action qld__card--arrow qld__card--dark-alt">
|
|
593
575
|
<div class="qld__card__inner">
|
|
594
576
|
<div class="qld__card__content">
|
|
595
577
|
<div class="qld__card__content-inner">
|
|
596
578
|
<h3 class="qld__card__title">
|
|
597
|
-
|
|
579
|
+
<a aria-label="Components" aria-describedby="card-22726" class="qld__card--clickable__link" href="#">Dark Alternative</a>
|
|
598
580
|
</h3>
|
|
599
|
-
<p id="card-22726" class="qld__card__description">
|
|
600
|
-
Additional text about the card
|
|
601
|
-
</p>
|
|
581
|
+
<p id="card-22726" class="qld__card__description">Additional text about the card</p>
|
|
602
582
|
</div>
|
|
603
|
-
<
|
|
583
|
+
<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
584
|
</div>
|
|
605
585
|
</div>
|
|
606
586
|
</div>
|
|
607
587
|
</li>
|
|
608
|
-
|
|
588
|
+
</ul>
|
|
609
589
|
</div>
|
|
610
590
|
</div>
|
|
611
591
|
</div>
|
|
612
|
-
</div>
|
|
592
|
+
</div>
|
|
613
593
|
</main>
|
|
614
594
|
<!-- END MAIN BODY -->
|
|
615
595
|
|
|
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
596
|
<!-- FOOTER-->
|
|
623
|
-
${require('../components/footer/html/component.hbs')({
|
|
624
|
-
"site":require('/src/data/site.json')
|
|
625
|
-
})}
|
|
597
|
+
${require('../components/footer/html/component.hbs')({ "site":require('/src/data/site.json') })}
|
|
626
598
|
|
|
627
|
-
<div class="footer-scripts" id="footer_js" style="display: none !important
|
|
628
|
-
${require('../components/_global/html/scripts.html')}
|
|
629
|
-
</div>
|
|
599
|
+
<div class="footer-scripts" id="footer_js" style="display: none !important">${require('../components/_global/html/scripts.html')}</div>
|
|
630
600
|
</body>
|
|
631
601
|
</html>
|