material-inspired-component-library 2.0.0 → 3.0.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/CODE_OF_CONDUCT.md +128 -0
- package/README.md +14 -0
- package/components/README.md +2 -0
- package/components/appbar/README.md +94 -0
- package/components/appbar/index.scss +216 -0
- package/components/badge/README.md +5 -5
- package/components/badge/index.scss +20 -27
- package/components/bottomsheet/README.md +29 -17
- package/components/bottomsheet/index.scss +23 -23
- package/components/bottomsheet/index.ts +25 -24
- package/components/button/README.md +1 -1
- package/components/button/index.scss +70 -65
- package/components/button/index.ts +1 -1
- package/components/card/index.scss +1 -1
- package/components/checkbox/index.scss +4 -0
- package/components/dialog/README.md +9 -9
- package/components/iconbutton/index.scss +111 -111
- package/components/iconbutton/index.ts +1 -1
- package/components/navigationrail/README.md +16 -16
- package/components/navigationrail/index.scss +20 -12
- package/components/radio/index.scss +1 -1
- package/components/sidesheet/README.md +32 -17
- package/components/sidesheet/index.scss +43 -47
- package/components/slider/README.md +5 -5
- package/dist/appbar.css +1 -0
- package/dist/appbar.js +1 -0
- package/dist/badge.css +1 -1
- package/dist/bottomsheet.css +1 -1
- package/dist/button.css +1 -1
- package/dist/card.css +1 -1
- package/dist/checkbox.css +1 -1
- package/dist/dialog.css +1 -1
- package/dist/iconbutton.css +1 -1
- package/dist/list.css +1 -1
- package/dist/micl.css +1 -1
- package/dist/micl.js +1 -1
- package/dist/navigationrail.css +1 -1
- package/dist/radio.css +1 -1
- package/dist/select.css +1 -1
- package/dist/sidesheet.css +1 -1
- package/dist/slider.css +1 -1
- package/dist/switch.css +1 -1
- package/dist/textfield.css +1 -1
- package/docs/accordion.html +298 -254
- package/docs/bottomsheet.html +194 -114
- package/docs/button.html +210 -182
- package/docs/card.html +107 -72
- package/docs/checkbox.html +92 -65
- package/docs/dialog.html +154 -123
- package/docs/divider.html +96 -67
- package/docs/docs.css +14 -24
- package/docs/docs.js +4 -2
- package/docs/iconbutton.html +196 -171
- package/docs/index.html +298 -288
- package/docs/list.html +260 -216
- package/docs/menu.html +260 -220
- package/docs/micl.css +1 -1
- package/docs/micl.js +1 -1
- package/docs/navigationrail.html +38 -36
- package/docs/radio.html +93 -68
- package/docs/select.html +213 -173
- package/docs/sidesheet.html +105 -73
- package/docs/slider.html +105 -72
- package/docs/switch.html +126 -101
- package/docs/textfield.html +181 -138
- package/layout/README.md +122 -0
- package/layout/index.scss +258 -0
- package/package.json +1 -1
- package/styles/statelayer.scss +2 -0
- package/styles.scss +13 -0
- package/styles/layout.scss +0 -74
package/docs/list.html
CHANGED
|
@@ -3,237 +3,281 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="Demonstrating MICL Lists">
|
|
6
7
|
<title>MICL Lists</title>
|
|
7
8
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap">
|
|
8
|
-
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,keyboard_arrow_right,more_horiz,person,search,settings&display=block">
|
|
9
|
+
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL@0..1&icon_names=confirmation_number,dark_mode,home,keyboard_arrow_right,more_horiz,person,search,settings&display=block">
|
|
9
10
|
<link rel="stylesheet" href="themes/airblue/theme.css" id="theme-link">
|
|
10
11
|
<link rel="stylesheet" href="micl.css">
|
|
11
12
|
<link rel="stylesheet" href="docs.css">
|
|
12
13
|
<style>
|
|
13
|
-
.micl-card__content {
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-direction: column;
|
|
16
|
-
row-gap: 8px;
|
|
17
|
-
padding-block: 16px;
|
|
18
|
-
}
|
|
19
14
|
input[type=checkbox].micl-switch {
|
|
20
15
|
--md-sys-switch-selected-icon: "";
|
|
21
16
|
--md-sys-switch-unselected-icon: "";
|
|
22
17
|
}
|
|
23
18
|
</style>
|
|
24
19
|
</head>
|
|
25
|
-
<body class="light">
|
|
26
|
-
<
|
|
27
|
-
<
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
<body class="micl-window light">
|
|
21
|
+
<main class="micl-body micl-body--stacked-to-extralarge">
|
|
22
|
+
<section class="micl-pane">
|
|
23
|
+
<header class="micl-appbar">
|
|
24
|
+
<a href="index.html" class="micl-appbar__leading-icon micl-link micl-iconbutton-standard-m" aria-label="Navigate to the main MICL Showcase page">
|
|
25
|
+
<span class="material-symbols-outlined" aria-hidden="true">home</span>
|
|
26
|
+
</a>
|
|
27
|
+
<div class="micl-appbar__headline micl-appbar__headline--center">
|
|
28
|
+
<h1>Lists</h1>
|
|
29
|
+
<p class="micl-appbar__subtitle">Showcasing MICL lists</p>
|
|
30
|
+
</div>
|
|
31
|
+
<div id="settings-placeholder" class="micl-appbar__trailing"></div>
|
|
32
|
+
</header>
|
|
30
33
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
<
|
|
103
|
-
<
|
|
104
|
-
<
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
<
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
<
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
34
|
+
<div class="micl-pane__columns micl-pane__columns--evenly micl-pane__columns--stacked-to-large">
|
|
35
|
+
<div class="micl-pane__column">
|
|
36
|
+
<div class="micl-card-elevated">
|
|
37
|
+
<div class="micl-card__content">
|
|
38
|
+
<ul class="micl-list" role="listbox">
|
|
39
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
40
|
+
<span class="micl-list-item__text">
|
|
41
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
42
|
+
</span>
|
|
43
|
+
</li>
|
|
44
|
+
</ul>
|
|
45
|
+
<ul class="micl-list" role="listbox">
|
|
46
|
+
<li class="micl-list-item-two" tabindex="0">
|
|
47
|
+
<span class="micl-list-item__text">
|
|
48
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
49
|
+
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
50
|
+
</span>
|
|
51
|
+
</li>
|
|
52
|
+
</ul>
|
|
53
|
+
<ul class="micl-list" role="listbox">
|
|
54
|
+
<li class="micl-list-item-three" tabindex="0">
|
|
55
|
+
<span class="micl-list-item__text">
|
|
56
|
+
<span class="micl-list-item__headline">Headline 1</span>
|
|
57
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
58
|
+
</span>
|
|
59
|
+
</li>
|
|
60
|
+
<li class="micl-list-item-three micl-list-item--disabled">
|
|
61
|
+
<span class="micl-list-item__text">
|
|
62
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
63
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
64
|
+
</span>
|
|
65
|
+
</li>
|
|
66
|
+
</ul>
|
|
67
|
+
<ul class="micl-list" role="listbox">
|
|
68
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
69
|
+
<span class="material-symbols-outlined micl-list-item__icon">settings</span>
|
|
70
|
+
<span class="micl-list-item__text">
|
|
71
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
72
|
+
</span>
|
|
73
|
+
<span class="material-symbols-outlined micl-list-item__icon">more_horiz</span>
|
|
74
|
+
</li>
|
|
75
|
+
</ul>
|
|
76
|
+
<ul class="micl-list" role="listbox">
|
|
77
|
+
<li class="micl-list-item-two" tabindex="0">
|
|
78
|
+
<span class="material-symbols-outlined micl-list-item__icon">person</span>
|
|
79
|
+
<span class="micl-list-item__text">
|
|
80
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
81
|
+
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
82
|
+
</span>
|
|
83
|
+
<span class="material-symbols-outlined micl-list-item__icon">keyboard_arrow_right</span>
|
|
84
|
+
</li>
|
|
85
|
+
</ul>
|
|
86
|
+
<ul class="micl-list" role="listbox">
|
|
87
|
+
<li class="micl-list-item-three" tabindex="0">
|
|
88
|
+
<span class="material-symbols-outlined micl-list-item__icon">search</span>
|
|
89
|
+
<span class="micl-list-item__text">
|
|
90
|
+
<span class="micl-list-item__headline">Headline 1</span>
|
|
91
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
92
|
+
</span>
|
|
93
|
+
</li>
|
|
94
|
+
<li class="micl-list-item-three">
|
|
95
|
+
<span class="material-symbols-outlined micl-list-item__icon">confirmation_number</span>
|
|
96
|
+
<span class="micl-list-item__text">
|
|
97
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
98
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
99
|
+
</span>
|
|
100
|
+
</li>
|
|
101
|
+
</ul>
|
|
102
|
+
</div>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
<div class="micl-pane__column">
|
|
106
|
+
<div class="micl-card-filled">
|
|
107
|
+
<div class="micl-card__content">
|
|
108
|
+
<ul class="micl-list" role="listbox">
|
|
109
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
110
|
+
<span class="micl-list-item__avatar">3</span>
|
|
111
|
+
<span class="micl-list-item__text">
|
|
112
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
113
|
+
</span>
|
|
114
|
+
</li>
|
|
115
|
+
</ul>
|
|
116
|
+
<ul class="micl-list" role="listbox">
|
|
117
|
+
<li class="micl-list-item-two" tabindex="0">
|
|
118
|
+
<span class="micl-list-item__avatar">17</span>
|
|
119
|
+
<span class="micl-list-item__text">
|
|
120
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
121
|
+
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
122
|
+
</span>
|
|
123
|
+
</li>
|
|
124
|
+
</ul>
|
|
125
|
+
<ul class="micl-list" role="listbox">
|
|
126
|
+
<li class="micl-list-item-three" tabindex="0">
|
|
127
|
+
<a href="https://www.thetimes.com/" tabindex="-1">
|
|
128
|
+
<span class="micl-list-item__avatar">T</span>
|
|
129
|
+
<span class="micl-list-item__text">
|
|
130
|
+
<span class="micl-list-item__headline">The Times</span>
|
|
131
|
+
<span class="micl-list-item__supporting-text">Selecting this item opens the front page of The Times.</span>
|
|
132
|
+
</span>
|
|
133
|
+
</a>
|
|
134
|
+
</li>
|
|
135
|
+
<li class="micl-list-item-three micl-list-item--disabled">
|
|
136
|
+
<span class="micl-list-item__avatar">H</span>
|
|
137
|
+
<span class="micl-list-item__text">
|
|
138
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
139
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
140
|
+
</span>
|
|
141
|
+
</li>
|
|
142
|
+
</ul>
|
|
143
|
+
<ul class="micl-list" role="listbox">
|
|
144
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
145
|
+
<span class="micl-list-item__image" style="background-image:url(card-city.webp)"></span>
|
|
146
|
+
<span class="micl-list-item__text">
|
|
147
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
148
|
+
</span>
|
|
149
|
+
<span class="micl-list-item__trailing-text">100+</span>
|
|
150
|
+
</li>
|
|
151
|
+
</ul>
|
|
152
|
+
<ul class="micl-list" role="listbox">
|
|
153
|
+
<li class="micl-list-item-two" tabindex="0">
|
|
154
|
+
<label>
|
|
155
|
+
<span class="micl-list-item__image" style="background-image:url(card-holiday.webp)"></span>
|
|
156
|
+
<span class="micl-list-item__text">
|
|
157
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
158
|
+
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
159
|
+
</span>
|
|
160
|
+
<input type="checkbox" class="micl-switch" id="myswitch" value="c1" tabindex="-1">
|
|
161
|
+
</label>
|
|
162
|
+
</li>
|
|
163
|
+
</ul>
|
|
164
|
+
<ul class="micl-list" role="listbox">
|
|
165
|
+
<li class="micl-list-item-three" tabindex="0">
|
|
166
|
+
<span class="micl-list-item__image" style="background-image:url(card-cabinet.webp)"></span>
|
|
167
|
+
<span class="micl-list-item__text">
|
|
168
|
+
<span class="micl-list-item__headline">Headline 1</span>
|
|
169
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
170
|
+
</span>
|
|
171
|
+
</li>
|
|
172
|
+
<li class="micl-list-item-three">
|
|
173
|
+
<span class="micl-list-item__image" style="background-image:url(card-awards.webp)"></span>
|
|
174
|
+
<span class="micl-list-item__text">
|
|
175
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
176
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines</span>
|
|
177
|
+
</span>
|
|
178
|
+
</li>
|
|
179
|
+
</ul>
|
|
180
|
+
</div>
|
|
181
|
+
</div>
|
|
182
|
+
</div>
|
|
183
|
+
<div class="micl-pane__column">
|
|
184
|
+
<div class="micl-card-outlined">
|
|
185
|
+
<div class="micl-card__content">
|
|
186
|
+
<ul class="micl-list" role="listbox">
|
|
187
|
+
<li class="micl-list-item-one" tabindex="0">
|
|
188
|
+
<span class="micl-list-item__thumbnail" style="background-image:url(card-city.webp)"></span>
|
|
189
|
+
<span class="micl-list-item__text">
|
|
190
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
191
|
+
</span>
|
|
192
|
+
</li>
|
|
193
|
+
</ul>
|
|
194
|
+
<ul class="micl-list" role="listbox">
|
|
195
|
+
<li class="micl-list-item-two" tabindex="0">
|
|
196
|
+
<label>
|
|
197
|
+
<span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
|
|
198
|
+
<span class="micl-list-item__text">
|
|
199
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
200
|
+
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
201
|
+
</span>
|
|
202
|
+
<input type="checkbox" id="cb1" class="micl-checkbox" value="c1" tabindex="-1">
|
|
203
|
+
</label>
|
|
204
|
+
</li>
|
|
205
|
+
</ul>
|
|
206
|
+
<ul class="micl-list micl-list__divider" role="listbox">
|
|
207
|
+
<li class="micl-list-item-three" tabindex="0">
|
|
208
|
+
<span class="micl-list-item__thumbnail" style="background-image:url(card-cabinet.webp)"></span>
|
|
209
|
+
<span class="micl-list-item__text">
|
|
210
|
+
<span class="micl-list-item__headline">Headline 1</span>
|
|
211
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
|
|
212
|
+
</span>
|
|
213
|
+
</li>
|
|
214
|
+
<li class="micl-list-item-three">
|
|
215
|
+
<span class="micl-list-item__thumbnail" style="background-image:url(card-awards.webp)"></span>
|
|
216
|
+
<span class="micl-list-item__text">
|
|
217
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
218
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
|
|
219
|
+
</span>
|
|
220
|
+
</li>
|
|
221
|
+
</ul>
|
|
222
|
+
<ul class="micl-list micl-list__divider" role="listbox">
|
|
223
|
+
<li class="micl-list-item-three" tabindex="0">
|
|
224
|
+
<label>
|
|
225
|
+
<span class="micl-list-item__text">
|
|
226
|
+
<span class="micl-list-item__headline">Headline 1</span>
|
|
227
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
|
|
228
|
+
</span>
|
|
229
|
+
<input type="checkbox" id="cb2" class="micl-checkbox" value="c2" tabindex="-1">
|
|
230
|
+
</label>
|
|
231
|
+
</li>
|
|
232
|
+
<li class="micl-list-item-three">
|
|
233
|
+
<label>
|
|
234
|
+
<span class="micl-list-item__text">
|
|
235
|
+
<span class="micl-list-item__headline">Headline 2</span>
|
|
236
|
+
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
|
|
237
|
+
</span>
|
|
238
|
+
<input type="checkbox" id="cb3" class="micl-checkbox" value="c3" tabindex="-1">
|
|
239
|
+
</label>
|
|
240
|
+
</li>
|
|
241
|
+
</ul>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
174
245
|
</div>
|
|
175
|
-
</
|
|
176
|
-
<
|
|
177
|
-
<div class="micl-
|
|
178
|
-
<
|
|
179
|
-
<
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
</
|
|
206
|
-
|
|
207
|
-
<span class="micl-list-item__thumbnail" style="background-image:url(card-awards.webp)"></span>
|
|
208
|
-
<span class="micl-list-item__text">
|
|
209
|
-
<span class="micl-list-item__headline">Headline 2</span>
|
|
210
|
-
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
|
|
211
|
-
</span>
|
|
212
|
-
</li>
|
|
213
|
-
</ul>
|
|
214
|
-
<ul class="micl-list micl-list__divider" role="listbox">
|
|
215
|
-
<li class="micl-list-item-three" tabindex="0">
|
|
216
|
-
<label>
|
|
217
|
-
<span class="micl-list-item__text">
|
|
218
|
-
<span class="micl-list-item__headline">Headline 1</span>
|
|
219
|
-
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
|
|
220
|
-
</span>
|
|
221
|
-
<input type="checkbox" id="cb2" class="micl-checkbox" value="c2" tabindex="-1">
|
|
222
|
-
</label>
|
|
223
|
-
</li>
|
|
224
|
-
<li class="micl-list-item-three">
|
|
225
|
-
<label>
|
|
226
|
-
<span class="micl-list-item__text">
|
|
227
|
-
<span class="micl-list-item__headline">Headline 2</span>
|
|
228
|
-
<span class="micl-list-item__supporting-text">Supporting text that is long enough to fill up multiple lines of text with words and sentences</span>
|
|
229
|
-
</span>
|
|
230
|
-
<input type="checkbox" id="cb3" class="micl-checkbox" value="c3" tabindex="-1">
|
|
231
|
-
</label>
|
|
232
|
-
</li>
|
|
233
|
-
</ul>
|
|
246
|
+
</section>
|
|
247
|
+
<section class="micl-pane">
|
|
248
|
+
<div class="micl-card-filled">
|
|
249
|
+
<div class="micl-card__headline-s">
|
|
250
|
+
<h2>Code example</h2>
|
|
251
|
+
</div>
|
|
252
|
+
<div class="micl-card__content docs-code">
|
|
253
|
+
<pre><code>
|
|
254
|
+
<ul class="micl-list" role="listbox">
|
|
255
|
+
<li class="micl-list-item-two" tabindex="0">
|
|
256
|
+
<span class="micl-list-item__avatar">17</span>
|
|
257
|
+
<span class="micl-list-item__text">
|
|
258
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
259
|
+
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
260
|
+
</span>
|
|
261
|
+
</li>
|
|
262
|
+
</ul>
|
|
263
|
+
|
|
264
|
+
<ul class="micl-list" role="listbox">
|
|
265
|
+
<li class="micl-list-item-two" tabindex="0">
|
|
266
|
+
<label>
|
|
267
|
+
<span class="micl-list-item__thumbnail" style="background-image:url(card-holiday.webp)"></span>
|
|
268
|
+
<span class="micl-list-item__text">
|
|
269
|
+
<span class="micl-list-item__headline">Headline</span>
|
|
270
|
+
<span class="micl-list-item__supporting-text">Supporting text</span>
|
|
271
|
+
</span>
|
|
272
|
+
<input type="checkbox" id="id0" class="micl-checkbox" value="v0" tabindex="-1">
|
|
273
|
+
</label>
|
|
274
|
+
</li>
|
|
275
|
+
</ul>
|
|
276
|
+
</code></pre>
|
|
277
|
+
</div>
|
|
234
278
|
</div>
|
|
235
|
-
</
|
|
236
|
-
</
|
|
279
|
+
</section>
|
|
280
|
+
</main>
|
|
237
281
|
|
|
238
282
|
<script src="micl.js"></script>
|
|
239
283
|
<script src="docs.js"></script>
|