@patternfly/patternfly 4.184.1 → 4.185.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 (111) hide show
  1. package/assets/icons/iconUnicodes.json +1 -0
  2. package/assets/pficon/pficon.scss +6 -0
  3. package/assets/pficon/pficon.woff +0 -0
  4. package/assets/pficon/pficon.woff2 +0 -0
  5. package/base/patternfly-icons.css +5 -1
  6. package/base/patternfly-pf-icons.css +5 -1
  7. package/components/Masthead/masthead.css +1 -1
  8. package/components/Masthead/masthead.scss +1 -1
  9. package/components/Menu/menu.css +1 -0
  10. package/components/Menu/menu.scss +1 -0
  11. package/docs/components/Form/examples/Form.md +118 -47
  12. package/docs/components/MenuToggle/examples/MenuToggle.md +17 -0
  13. package/docs/components/ModalBox/examples/ModalBox.md +1 -0
  14. package/docs/components/OptionsMenu/examples/options-menu.md +1 -1
  15. package/docs/components/Page/examples/Page.md +9 -8
  16. package/docs/components/Pagination/examples/Pagination.css +3 -0
  17. package/docs/components/Pagination/examples/Pagination.md +136 -158
  18. package/docs/components/Toolbar/examples/Toolbar.md +22 -26
  19. package/docs/components/Wizard/examples/Wizard.md +19 -18
  20. package/docs/demos/AboutModal/examples/AboutModal.md +916 -1
  21. package/docs/demos/Alert/examples/Alert.md +2484 -490
  22. package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
  23. package/docs/demos/Banner/examples/Banner.md +2074 -1466
  24. package/docs/demos/Button/examples/Button.md +33 -21
  25. package/docs/demos/CardView/examples/CardView.md +1086 -285
  26. package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
  27. package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
  28. package/docs/demos/DataList/examples/DataList.md +3703 -1495
  29. package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
  30. package/docs/demos/Drawer/examples/Drawer.md +2554 -439
  31. package/docs/demos/Form/examples/BasicForms.md +40 -8
  32. package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
  33. package/docs/demos/Masthead/examples/Masthead.md +9 -20
  34. package/docs/demos/Modal/examples/Modal.md +5525 -35
  35. package/docs/demos/Nav/examples/Nav.md +6453 -1201
  36. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
  37. package/docs/demos/Page/examples/Page.md +15 -35
  38. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +5 -1
  39. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +20 -4
  40. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6829 -2373
  41. package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
  42. package/docs/demos/Table/examples/Table.md +253 -338
  43. package/docs/demos/Tabs/examples/Tabs.md +8171 -2943
  44. package/docs/demos/Toolbar/examples/Toolbar.md +885 -253
  45. package/docs/demos/Wizard/examples/Wizard.md +3422 -292
  46. package/docs/pages/icons.md +1 -0
  47. package/icons/pf-icons.json +1 -0
  48. package/package.json +1 -1
  49. package/patternfly-base-no-reset.css +5 -1
  50. package/patternfly-base.css +5 -1
  51. package/patternfly-no-reset.css +7 -2
  52. package/patternfly-theme-dark.css +21 -21
  53. package/patternfly.css +7 -2
  54. package/patternfly.min.css +1 -1
  55. package/patternfly.min.css.map +1 -1
  56. package/themes/dark/_patternfly-theme-dark.scss +119 -0
  57. package/themes/dark/_variables.scss +94 -0
  58. package/themes/dark/colors.scss +16 -0
  59. package/themes/dark/globals.scss +7 -0
  60. package/themes/dark/mixins.scss +5 -0
  61. package/themes/dark/placeholders.scss +30 -0
  62. package/themes/dark/scss-variables.scss +85 -0
  63. package/components/AboutModalBox/themes/dark/about-modal-box.css +0 -0
  64. package/components/Accordion/themes/dark/accordion.css +0 -0
  65. package/components/Alert/themes/dark/alert.css +0 -0
  66. package/components/AppLauncher/themes/dark/app-launcher.css +0 -0
  67. package/components/Badge/themes/dark/badge.css +0 -0
  68. package/components/Banner/themes/dark/banner.css +0 -0
  69. package/components/Breadcrumb/themes/dark/breadcrumb.css +0 -0
  70. package/components/Button/themes/dark/button.css +0 -0
  71. package/components/CalendarMonth/themes/dark/calendar-month.css +0 -0
  72. package/components/Chip/themes/dark/chip.css +0 -0
  73. package/components/ClipboardCopy/themes/dark/clipboard-copy.css +0 -0
  74. package/components/CodeEditor/themes/dark/code-editor.css +0 -0
  75. package/components/ContextSelector/themes/dark/context-selector.css +0 -0
  76. package/components/DataList/themes/dark/data-list.css +0 -0
  77. package/components/DatePicker/themes/dark/date-picker.css +0 -0
  78. package/components/Drawer/themes/dark/drawer.css +0 -0
  79. package/components/Dropdown/themes/dark/dropdown.css +0 -0
  80. package/components/Form/themes/dark/form.css +0 -0
  81. package/components/FormControl/themes/dark/form-control.css +0 -0
  82. package/components/HelperText/themes/dark/helper-text.css +0 -0
  83. package/components/Hint/themes/dark/hint.css +0 -0
  84. package/components/InputGroup/themes/dark/input-group.css +0 -0
  85. package/components/Label/themes/dark/label.css +0 -0
  86. package/components/LogViewer/themes/dark/log-viewer.css +0 -0
  87. package/components/Login/themes/dark/login.css +0 -0
  88. package/components/Masthead/themes/dark/masthead.css +0 -0
  89. package/components/Menu/themes/dark/menu.css +0 -0
  90. package/components/MenuToggle/themes/dark/menu-toggle.css +0 -0
  91. package/components/ModalBox/themes/dark/modal-box.css +0 -0
  92. package/components/Nav/themes/dark/nav.css +0 -0
  93. package/components/NotificationBadge/themes/dark/notification-badge.css +0 -0
  94. package/components/NotificationDrawer/themes/dark/notification-drawer.css +0 -0
  95. package/components/OptionsMenu/themes/dark/options-menu.css +0 -0
  96. package/components/Page/themes/dark/page.css +0 -0
  97. package/components/Pagination/themes/dark/pagination.css +0 -0
  98. package/components/Popover/themes/dark/popover.css +0 -0
  99. package/components/Progress/themes/dark/progress.css +0 -0
  100. package/components/SearchInput/themes/dark/search-input.css +0 -0
  101. package/components/Select/themes/dark/select.css +0 -0
  102. package/components/SimpleList/themes/dark/simple-list.css +0 -0
  103. package/components/Skeleton/themes/dark/skeleton.css +0 -0
  104. package/components/Switch/themes/dark/switch.css +0 -0
  105. package/components/Table/themes/dark/table.css +0 -0
  106. package/components/Tabs/themes/dark/tabs.css +0 -0
  107. package/components/Tile/themes/dark/tile.css +0 -0
  108. package/components/ToggleGroup/themes/dark/toggle-group.css +0 -0
  109. package/components/Tooltip/themes/dark/tooltip.css +0 -0
  110. package/components/TreeView/themes/dark/tree-view.css +0 -0
  111. package/components/Wizard/themes/dark/wizard.css +0 -0
package/docs/demos/CardView/examples/CardView.md CHANGED
@@ -6,186 +6,912 @@ section: demos
6
6
  ### Card view
7
7
 
8
8
  ```html isFullscreen
9
- <div class="pf-c-page" id="card-view-example">
9
+ <div class="pf-c-page" id="card-view-basic-example">
10
10
  <a
11
11
  class="pf-c-skip-to-content pf-c-button pf-m-primary"
12
- href="#main-content-card-view-example"
12
+ href="#main-content-card-view-basic-example"
13
13
  >Skip to content</a>
14
- <header class="pf-c-page__header">
15
- <div class="pf-c-page__header-brand">
16
- <div class="pf-c-page__header-brand-toggle">
17
- <button
18
- class="pf-c-button pf-m-plain"
19
- type="button"
20
- id="card-view-example-nav-toggle"
21
- aria-label="Global navigation"
22
- aria-expanded="true"
23
- aria-controls="card-view-example-primary-nav"
14
+ <header class="pf-c-masthead" id="card-view-basic-example-masthead">
15
+ <span class="pf-c-masthead__toggle">
16
+ <button
17
+ class="pf-c-button pf-m-plain"
18
+ type="button"
19
+ aria-label="Global navigation"
20
+ >
21
+ <i class="fas fa-bars" aria-hidden="true"></i>
22
+ </button>
23
+ </span>
24
+ <div class="pf-c-masthead__main">
25
+ <a class="pf-c-masthead__brand" href="#">
26
+ <picture
27
+ class="pf-c-brand pf-m-picture"
28
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
24
29
  >
25
- <i class="fas fa-bars" aria-hidden="true"></i>
26
- </button>
27
- </div>
28
- <a href="#" class="pf-c-page__header-brand-link">
29
- <img
30
- class="pf-c-brand"
31
- src="/assets/images/PF-Masthead-Logo.svg"
32
- alt="PatternFly logo"
33
- />
30
+ <source
31
+ media="(min-width: 768px)"
32
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
33
+ />
34
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
35
+ <img
36
+ src="/assets/images/logo__pf--reverse--base.png"
37
+ alt="Fallback patternFly default logo"
38
+ />
39
+ </picture>
34
40
  </a>
35
41
  </div>
36
-
37
- <div class="pf-c-page__header-tools">
38
- <div class="pf-c-page__header-tools-group">
39
- <div
40
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
41
- >
42
- <button
43
- class="pf-c-button pf-m-plain"
44
- type="button"
45
- aria-label="Settings"
46
- >
47
- <i class="fas fa-cog" aria-hidden="true"></i>
48
- </button>
49
- </div>
50
- <div
51
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
52
- >
53
- <button
54
- class="pf-c-button pf-m-plain"
55
- type="button"
56
- aria-label="Help"
57
- >
58
- <i class="fas fa-question-circle" aria-hidden="true"></i>
59
- </button>
60
- </div>
61
- </div>
62
- <div class="pf-c-page__header-tools-group">
63
- <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
64
- <div class="pf-c-dropdown">
65
- <button
66
- class="pf-c-dropdown__toggle pf-m-plain"
67
- id="card-view-example-dropdown-kebab-1-button"
68
- aria-expanded="false"
69
- type="button"
70
- aria-label="Actions"
71
- >
72
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
73
- </button>
74
- <ul
75
- class="pf-c-dropdown__menu pf-m-align-right"
76
- aria-labelledby="card-view-example-dropdown-kebab-1-button"
77
- hidden
42
+ <div class="pf-c-masthead__content">
43
+ <div
44
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
45
+ id="card-view-basic-example-masthead-toolbar"
46
+ >
47
+ <div class="pf-c-toolbar__content">
48
+ <div class="pf-c-toolbar__content-section">
49
+ <div
50
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
78
51
  >
79
- <li>
80
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
81
- </li>
82
- <li>
83
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
84
- </li>
85
- <li>
86
- <a
87
- class="pf-c-dropdown__menu-item pf-m-disabled"
88
- href="#"
89
- aria-disabled="true"
90
- tabindex="-1"
91
- >Disabled link</a>
92
- </li>
93
- <li>
52
+ <div class="pf-c-toolbar__item">
94
53
  <button
95
- class="pf-c-dropdown__menu-item"
54
+ class="pf-c-button pf-m-plain"
96
55
  type="button"
97
- disabled
98
- >Disabled action</button>
99
- </li>
100
- <li class="pf-c-divider" role="separator"></li>
101
- <li>
102
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
103
- </li>
104
- </ul>
105
- </div>
106
- </div>
107
- <div
108
- class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
109
- >
110
- <div class="pf-c-dropdown">
111
- <button
112
- class="pf-c-dropdown__toggle pf-m-plain"
113
- id="card-view-example-dropdown-kebab-2-button"
114
- aria-expanded="false"
115
- type="button"
116
- >
117
- <span class="pf-c-dropdown__toggle-text">John Smith</span>
118
- <span class="pf-c-dropdown__toggle-icon">
119
- <i class="fas fa-caret-down" aria-hidden="true"></i>
120
- </span>
121
- </button>
122
- <ul
123
- class="pf-c-dropdown__menu"
124
- aria-labelledby="card-view-example-dropdown-kebab-2-button"
125
- hidden
126
- >
127
- <li>
128
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
129
- </li>
130
- <li>
131
- <button class="pf-c-dropdown__menu-item" type="button">Action</button>
132
- </li>
133
- <li>
134
- <a
135
- class="pf-c-dropdown__menu-item pf-m-disabled"
136
- href="#"
137
- aria-disabled="true"
138
- tabindex="-1"
139
- >Disabled link</a>
140
- </li>
141
- <li>
56
+ aria-label="Notifications"
57
+ >
58
+ <span class="pf-c-notification-badge">
59
+ <i class="pf-icon-bell" aria-hidden="true"></i>
60
+ </span>
61
+ </button>
62
+ </div>
63
+ <div
64
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
65
+ >
66
+ <div class="pf-c-toolbar__item">
67
+ <nav
68
+ class="pf-c-app-launcher"
69
+ aria-label="Application launcher"
70
+ id="card-view-basic-example-masthead-icon-group--app-launcher"
71
+ >
72
+ <button
73
+ class="pf-c-app-launcher__toggle"
74
+ type="button"
75
+ id="card-view-basic-example-masthead-icon-group--app-launcher-button"
76
+ aria-expanded="false"
77
+ aria-label="Application launcher"
78
+ >
79
+ <i class="fas fa-th" aria-hidden="true"></i>
80
+ </button>
81
+ <div
82
+ class="pf-c-app-launcher__menu pf-m-align-right"
83
+ hidden
84
+ >
85
+ <div class="pf-c-app-launcher__menu-search">
86
+ <div class="pf-c-search-input">
87
+ <div class="pf-c-search-input__bar">
88
+ <span class="pf-c-search-input__text">
89
+ <span class="pf-c-search-input__icon">
90
+ <i
91
+ class="fas fa-search fa-fw"
92
+ aria-hidden="true"
93
+ ></i>
94
+ </span>
95
+ <input
96
+ class="pf-c-search-input__text-input"
97
+ type="text"
98
+ placeholder="Filter by name"
99
+ aria-label="Filter by name"
100
+ />
101
+ </span>
102
+ </div>
103
+ </div>
104
+ </div>
105
+ <section class="pf-c-app-launcher__group">
106
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
107
+ <ul>
108
+ <li
109
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
110
+ >
111
+ <a class="pf-c-app-launcher__menu-item">
112
+ Link 1
113
+ <span
114
+ class="pf-c-app-launcher__menu-item-external-icon"
115
+ >
116
+ <i
117
+ class="fas fa-external-link-alt"
118
+ aria-hidden="true"
119
+ ></i>
120
+ </span>
121
+ <span class="pf-screen-reader">(opens new window)</span>
122
+ </a>
123
+ <button
124
+ class="pf-c-app-launcher__menu-item pf-m-action"
125
+ type="button"
126
+ aria-label="Favorite"
127
+ >
128
+ <i class="fas fa-star" aria-hidden="true"></i>
129
+ </button>
130
+ </li>
131
+ <li
132
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
133
+ >
134
+ <a class="pf-c-app-launcher__menu-item">
135
+ Link 2
136
+ <span
137
+ class="pf-c-app-launcher__menu-item-external-icon"
138
+ >
139
+ <i
140
+ class="fas fa-external-link-alt"
141
+ aria-hidden="true"
142
+ ></i>
143
+ </span>
144
+ <span class="pf-screen-reader">(opens new window)</span>
145
+ </a>
146
+ <button
147
+ class="pf-c-app-launcher__menu-item pf-m-action"
148
+ type="button"
149
+ aria-label="Favorite"
150
+ >
151
+ <i class="fas fa-star" aria-hidden="true"></i>
152
+ </button>
153
+ </li>
154
+ </ul>
155
+ </section>
156
+ <hr class="pf-c-divider" />
157
+ <section class="pf-c-app-launcher__group">
158
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
159
+ <ul>
160
+ <li
161
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
162
+ >
163
+ <a class="pf-c-app-launcher__menu-item">
164
+ Link 1
165
+ <span
166
+ class="pf-c-app-launcher__menu-item-external-icon"
167
+ >
168
+ <i
169
+ class="fas fa-external-link-alt"
170
+ aria-hidden="true"
171
+ ></i>
172
+ </span>
173
+ <span class="pf-screen-reader">(opens new window)</span>
174
+ </a>
175
+ <button
176
+ class="pf-c-app-launcher__menu-item pf-m-action"
177
+ type="button"
178
+ aria-label="Favorite"
179
+ >
180
+ <i class="fas fa-star" aria-hidden="true"></i>
181
+ </button>
182
+ </li>
183
+ <li
184
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
185
+ >
186
+ <a class="pf-c-app-launcher__menu-item">
187
+ Link 2
188
+ <span
189
+ class="pf-c-app-launcher__menu-item-external-icon"
190
+ >
191
+ <i
192
+ class="fas fa-external-link-alt"
193
+ aria-hidden="true"
194
+ ></i>
195
+ </span>
196
+ <span class="pf-screen-reader">(opens new window)</span>
197
+ </a>
198
+ <button
199
+ class="pf-c-app-launcher__menu-item pf-m-action"
200
+ type="button"
201
+ aria-label="Favorite"
202
+ >
203
+ <i class="fas fa-star" aria-hidden="true"></i>
204
+ </button>
205
+ </li>
206
+ </ul>
207
+ </section>
208
+ </div>
209
+ </nav>
210
+ </div>
211
+ <div class="pf-c-toolbar__item">
212
+ <div class="pf-c-dropdown">
213
+ <button
214
+ class="pf-c-dropdown__toggle pf-m-plain"
215
+ id="card-view-basic-example-masthead-settings-button"
216
+ aria-expanded="false"
217
+ type="button"
218
+ aria-label="Settings"
219
+ >
220
+ <i class="fas fa-cog" aria-hidden="true"></i>
221
+ </button>
222
+ <ul
223
+ class="pf-c-dropdown__menu pf-m-align-right"
224
+ aria-labelledby="card-view-basic-example-masthead-settings-button"
225
+ hidden
226
+ >
227
+ <li>
228
+ <button
229
+ class="pf-c-dropdown__menu-item"
230
+ type="button"
231
+ >Settings</button>
232
+ </li>
233
+ <li>
234
+ <button
235
+ class="pf-c-dropdown__menu-item"
236
+ type="button"
237
+ >Use the beta release</button>
238
+ </li>
239
+ </ul>
240
+ </div>
241
+ </div>
242
+ <div class="pf-c-toolbar__item">
243
+ <div class="pf-c-dropdown">
244
+ <button
245
+ class="pf-c-dropdown__toggle pf-m-plain"
246
+ id="card-view-basic-example-masthead-help-button"
247
+ aria-expanded="false"
248
+ type="button"
249
+ aria-label="Help"
250
+ >
251
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
252
+ </button>
253
+ <ul
254
+ class="pf-c-dropdown__menu pf-m-align-right"
255
+ aria-labelledby="card-view-basic-example-masthead-help-button"
256
+ hidden
257
+ >
258
+ <li>
259
+ <button
260
+ class="pf-c-dropdown__menu-item"
261
+ type="button"
262
+ >Support options</button>
263
+ </li>
264
+ <li>
265
+ <button
266
+ class="pf-c-dropdown__menu-item"
267
+ type="button"
268
+ >Open support case</button>
269
+ </li>
270
+ <li>
271
+ <button
272
+ class="pf-c-dropdown__menu-item"
273
+ type="button"
274
+ >API documentation</button>
275
+ </li>
276
+ </ul>
277
+ </div>
278
+ </div>
279
+ </div>
280
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
281
+ <div class="pf-c-dropdown">
282
+ <button
283
+ class="pf-c-menu-toggle pf-m-plain"
284
+ type="button"
285
+ aria-expanded="false"
286
+ aria-label="Actions"
287
+ >
288
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
289
+ </button>
290
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
291
+ <div class="pf-c-menu__content">
292
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
293
+ <ul class="pf-c-menu__list" role="menu">
294
+ <li
295
+ class="pf-c-menu__list-item pf-m-disabled"
296
+ role="none"
297
+ >
298
+ <button
299
+ class="pf-c-menu__item"
300
+ type="button"
301
+ disabled
302
+ role="menuitem"
303
+ >
304
+ <span class="pf-c-menu__item-description">
305
+ <div class="pf-u-font-size-sm">Username:</div>
306
+ <div class="pf-u-font-size-md">ned_username</div>
307
+ </span>
308
+ </button>
309
+ </li>
310
+ <li
311
+ class="pf-c-menu__list-item pf-m-disabled"
312
+ role="none"
313
+ >
314
+ <button
315
+ class="pf-c-menu__item"
316
+ type="button"
317
+ disabled
318
+ role="menuitem"
319
+ >
320
+ <span class="pf-c-menu__item-description">
321
+ <div class="pf-u-font-size-sm">Account number:</div>
322
+ <div class="pf-u-font-size-md">123456789</div>
323
+ </span>
324
+ </button>
325
+ </li>
326
+ <li class="pf-c-divider" role="separator"></li>
327
+ <li class="pf-c-menu__list-item" role="none">
328
+ <button
329
+ class="pf-c-menu__item"
330
+ type="button"
331
+ role="menuitem"
332
+ >
333
+ <span class="pf-c-menu__item-main">
334
+ <span class="pf-c-menu__item-text">My profile</span>
335
+ </span>
336
+ </button>
337
+ </li>
338
+ <li class="pf-c-menu__list-item" role="none">
339
+ <button
340
+ class="pf-c-menu__item"
341
+ type="button"
342
+ role="menuitem"
343
+ >
344
+ <span class="pf-c-menu__item-main">
345
+ <span
346
+ class="pf-c-menu__item-text"
347
+ >User management</span>
348
+ </span>
349
+ </button>
350
+ </li>
351
+ <li class="pf-c-menu__list-item" role="none">
352
+ <button
353
+ class="pf-c-menu__item"
354
+ type="button"
355
+ role="menuitem"
356
+ >
357
+ <span class="pf-c-menu__item-main">
358
+ <span class="pf-c-menu__item-text">Logout</span>
359
+ </span>
360
+ </button>
361
+ </li>
362
+ </ul>
363
+ </section>
364
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
365
+ <section class="pf-c-menu__group">
366
+ <ul class="pf-c-menu__list" role="menu">
367
+ <li class="pf-c-menu__list-item" role="none">
368
+ <button
369
+ class="pf-c-menu__item"
370
+ type="button"
371
+ role="menuitem"
372
+ aria-expanded="false"
373
+ >
374
+ <span class="pf-c-menu__item-main">
375
+ <span class="pf-c-menu__item-icon">
376
+ <i
377
+ class="fas fa-fw fa-cog"
378
+ aria-hidden="true"
379
+ ></i>
380
+ </span>
381
+ <span class="pf-c-menu__item-text">Settings</span>
382
+ <span class="pf-c-menu__item-toggle-icon">
383
+ <i class="fas fa-angle-right"></i>
384
+ </span>
385
+ </span>
386
+ </button>
387
+ <div class="pf-c-menu" hidden>
388
+ <div class="pf-c-menu__content">
389
+ <ul class="pf-c-menu__list" role="menu">
390
+ <li
391
+ class="pf-c-menu__list-item pf-m-drill-up"
392
+ role="none"
393
+ >
394
+ <button
395
+ class="pf-c-menu__item"
396
+ type="button"
397
+ role="menuitem"
398
+ >
399
+ <span class="pf-c-menu__item-main">
400
+ <span
401
+ class="pf-c-menu__item-toggle-icon"
402
+ >
403
+ <i class="fas fa-angle-left"></i>
404
+ </span>
405
+ <span class="pf-c-menu__item-icon">
406
+ <i
407
+ class="fas fa-fw fa-cog"
408
+ aria-hidden="true"
409
+ ></i>
410
+ </span>
411
+ <span
412
+ class="pf-c-menu__item-text"
413
+ >Settings</span>
414
+ </span>
415
+ </button>
416
+ </li>
417
+ <li class="pf-c-divider" role="separator"></li>
418
+ <li class="pf-c-menu__list-item" role="none">
419
+ <a
420
+ class="pf-c-menu__item"
421
+ href="#"
422
+ role="menuitem"
423
+ >
424
+ <span class="pf-c-menu__item-main">
425
+ <span
426
+ class="pf-c-menu__item-text"
427
+ >Customer support</span>
428
+ </span>
429
+ </a>
430
+ </li>
431
+ <li class="pf-c-menu__list-item" role="none">
432
+ <a
433
+ class="pf-c-menu__item"
434
+ href="#"
435
+ role="menuitem"
436
+ >
437
+ <span class="pf-c-menu__item-main">
438
+ <span class="pf-c-menu__item-text">About</span>
439
+ </span>
440
+ </a>
441
+ </li>
442
+ </ul>
443
+ </div>
444
+ </div>
445
+ </li>
446
+
447
+ <li class="pf-c-menu__list-item" role="none">
448
+ <button
449
+ class="pf-c-menu__item"
450
+ type="button"
451
+ role="menuitem"
452
+ aria-expanded="false"
453
+ >
454
+ <span class="pf-c-menu__item-main">
455
+ <span class="pf-c-menu__item-icon">
456
+ <i
457
+ class="fas fa-fw fa-pf-icon pf-icon-help"
458
+ aria-hidden="true"
459
+ ></i>
460
+ </span>
461
+ <span class="pf-c-menu__item-text">Help</span>
462
+ <span class="pf-c-menu__item-toggle-icon">
463
+ <i class="fas fa-angle-right"></i>
464
+ </span>
465
+ </span>
466
+ </button>
467
+ <div class="pf-c-menu" hidden>
468
+ <div class="pf-c-menu__content">
469
+ <ul class="pf-c-menu__list" role="menu">
470
+ <li
471
+ class="pf-c-menu__list-item pf-m-drill-up"
472
+ role="none"
473
+ >
474
+ <button
475
+ class="pf-c-menu__item"
476
+ type="button"
477
+ role="menuitem"
478
+ >
479
+ <span class="pf-c-menu__item-main">
480
+ <span
481
+ class="pf-c-menu__item-toggle-icon"
482
+ >
483
+ <i class="fas fa-angle-left"></i>
484
+ </span>
485
+ <span class="pf-c-menu__item-icon">
486
+ <i
487
+ class="fas fa-fw fa-pf-icon pf-icon-help"
488
+ aria-hidden="true"
489
+ ></i>
490
+ </span>
491
+ <span class="pf-c-menu__item-text">Help</span>
492
+ </span>
493
+ </button>
494
+ </li>
495
+ <li class="pf-c-divider" role="separator"></li>
496
+ <li class="pf-c-menu__list-item" role="none">
497
+ <a
498
+ class="pf-c-menu__item"
499
+ href="#"
500
+ role="menuitem"
501
+ >
502
+ <span class="pf-c-menu__item-main">
503
+ <span
504
+ class="pf-c-menu__item-text"
505
+ >Support options</span>
506
+ </span>
507
+ </a>
508
+ </li>
509
+ <li class="pf-c-menu__list-item" role="none">
510
+ <a
511
+ class="pf-c-menu__item"
512
+ href="#"
513
+ role="menuitem"
514
+ >
515
+ <span class="pf-c-menu__item-main">
516
+ <span
517
+ class="pf-c-menu__item-text"
518
+ >Open support case</span>
519
+ </span>
520
+ </a>
521
+ </li>
522
+ <li class="pf-c-menu__list-item" role="none">
523
+ <a
524
+ class="pf-c-menu__item"
525
+ href="#"
526
+ role="menuitem"
527
+ >
528
+ <span class="pf-c-menu__item-main">
529
+ <span
530
+ class="pf-c-menu__item-text"
531
+ >API documentation</span>
532
+ </span>
533
+ </a>
534
+ </li>
535
+ </ul>
536
+ </div>
537
+ </div>
538
+ </li>
539
+
540
+ <li class="pf-c-menu__list-item" role="none">
541
+ <button
542
+ class="pf-c-menu__item"
543
+ type="button"
544
+ role="menuitem"
545
+ >
546
+ <span class="pf-c-menu__item-main">
547
+ <span class="pf-c-menu__item-icon">
548
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
549
+ </span>
550
+ <span
551
+ class="pf-c-menu__item-text"
552
+ >Application launcher</span>
553
+ <span class="pf-c-menu__item-toggle-icon">
554
+ <i class="fas fa-angle-right"></i>
555
+ </span>
556
+ </span>
557
+ </button>
558
+ <div class="pf-c-menu" hidden>
559
+ <div class="pf-c-menu__header">
560
+ <button
561
+ class="pf-c-menu__item"
562
+ type="button"
563
+ role="menuitem"
564
+ >
565
+ <span class="pf-c-menu__item-main">
566
+ <span class="pf-c-menu__item-toggle-icon">
567
+ <i class="fas fa-angle-left"></i>
568
+ </span>
569
+ <span class="pf-c-menu__item-icon">
570
+ <i
571
+ class="fas fa-fw fa-th"
572
+ aria-hidden="true"
573
+ ></i>
574
+ </span>
575
+ <span
576
+ class="pf-c-menu__item-text"
577
+ >Application launcher</span>
578
+ </span>
579
+ </button>
580
+ </div>
581
+ <div class="pf-c-menu__search">
582
+ <div class="pf-c-menu__search-input">
583
+ <div class="pf-c-search-input">
584
+ <div class="pf-c-search-input__bar">
585
+ <span class="pf-c-search-input__text">
586
+ <span class="pf-c-search-input__icon">
587
+ <i
588
+ class="fas fa-search fa-fw"
589
+ aria-hidden="true"
590
+ ></i>
591
+ </span>
592
+ <input
593
+ class="pf-c-search-input__text-input"
594
+ type="text"
595
+ placeholder="Search"
596
+ aria-label="Search"
597
+ />
598
+ </span>
599
+ </div>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ <hr class="pf-c-divider" />
604
+ <section class="pf-c-menu__group">
605
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
606
+ <ul class="pf-c-menu__list" role="menu">
607
+ <li class="pf-c-menu__list-item" role="none">
608
+ <a
609
+ class="pf-c-menu__item"
610
+ href="#"
611
+ role="menuitem"
612
+ >
613
+ <span class="pf-c-menu__item-main">
614
+ <span
615
+ class="pf-c-menu__item-text"
616
+ >Link 1</span>
617
+ </span>
618
+ </a>
619
+ <button
620
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
621
+ type="button"
622
+ aria-label="Starred"
623
+ >
624
+ <span class="pf-c-menu__item-action-icon">
625
+ <i
626
+ class="fas fa-star"
627
+ aria-hidden="true"
628
+ ></i>
629
+ </span>
630
+ </button>
631
+ </li>
632
+ <li class="pf-c-menu__list-item" role="none">
633
+ <a
634
+ class="pf-c-menu__item"
635
+ href="#"
636
+ role="menuitem"
637
+ target="_blank"
638
+ >
639
+ <span class="pf-c-menu__item-main">
640
+ <span
641
+ class="pf-c-menu__item-text"
642
+ >Link 2</span>
643
+ <span
644
+ class="pf-c-menu__item-external-icon"
645
+ >
646
+ <i
647
+ class="fas fa-external-link-alt"
648
+ aria-hidden="true"
649
+ ></i>
650
+ </span>
651
+ <span
652
+ class="pf-screen-reader"
653
+ >(opens new window)</span>
654
+ </span>
655
+ </a>
656
+ <button
657
+ class="pf-c-menu__item-action pf-m-favorite"
658
+ type="button"
659
+ aria-label="Not starred"
660
+ >
661
+ <span class="pf-c-menu__item-action-icon">
662
+ <i
663
+ class="fas fa-star"
664
+ aria-hidden="true"
665
+ ></i>
666
+ </span>
667
+ </button>
668
+ </li>
669
+ </ul>
670
+ </section>
671
+ <hr class="pf-c-divider" />
672
+ <section class="pf-c-menu__group">
673
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
674
+ <ul class="pf-c-menu__list" role="menu">
675
+ <li class="pf-c-menu__list-item" role="none">
676
+ <a
677
+ class="pf-c-menu__item"
678
+ href="#"
679
+ role="menuitem"
680
+ >
681
+ <span class="pf-c-menu__item-main">
682
+ <span
683
+ class="pf-c-menu__item-text"
684
+ >Link 1</span>
685
+ </span>
686
+ </a>
687
+ <button
688
+ class="pf-c-menu__item-action pf-m-favorite"
689
+ type="button"
690
+ aria-label="Not starred"
691
+ >
692
+ <span class="pf-c-menu__item-action-icon">
693
+ <i
694
+ class="fas fa-star"
695
+ aria-hidden="true"
696
+ ></i>
697
+ </span>
698
+ </button>
699
+ </li>
700
+ <li class="pf-c-menu__list-item" role="none">
701
+ <a
702
+ class="pf-c-menu__item"
703
+ href="#"
704
+ role="menuitem"
705
+ target="_blank"
706
+ >
707
+ <span class="pf-c-menu__item-main">
708
+ <span
709
+ class="pf-c-menu__item-text"
710
+ >Link 2</span>
711
+ <span
712
+ class="pf-c-menu__item-external-icon"
713
+ >
714
+ <i
715
+ class="fas fa-external-link-alt"
716
+ aria-hidden="true"
717
+ ></i>
718
+ </span>
719
+ <span
720
+ class="pf-screen-reader"
721
+ >(opens new window)</span>
722
+ </span>
723
+ </a>
724
+ <button
725
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
726
+ type="button"
727
+ aria-label="Starred"
728
+ >
729
+ <span class="pf-c-menu__item-action-icon">
730
+ <i
731
+ class="fas fa-star"
732
+ aria-hidden="true"
733
+ ></i>
734
+ </span>
735
+ </button>
736
+ </li>
737
+ </ul>
738
+ </section>
739
+ </div>
740
+ </li>
741
+ </ul>
742
+ </section>
743
+ </div>
744
+ </div>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
749
+ <div
750
+ class="pf-c-dropdown pf-m-full-height"
751
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
752
+ >
142
753
  <button
143
- class="pf-c-dropdown__menu-item"
754
+ class="pf-c-dropdown__toggle"
755
+ id="card-view-basic-example-masthead-profile-button"
756
+ aria-expanded="false"
144
757
  type="button"
145
- disabled
146
- >Disabled action</button>
147
- </li>
148
- <li class="pf-c-divider" role="separator"></li>
149
- <li>
150
- <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
151
- </li>
152
- </ul>
758
+ >
759
+ <span class="pf-c-dropdown__toggle-image">
760
+ <img
761
+ class="pf-c-avatar"
762
+ src="/assets/images/img_avatar.svg"
763
+ alt="Avatar image"
764
+ />
765
+ </span>
766
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
767
+ <span class="pf-c-dropdown__toggle-icon">
768
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
769
+ </span>
770
+ </button>
771
+ <div class="pf-c-dropdown__menu" hidden>
772
+ <section class="pf-c-dropdown__group">
773
+ <div class="pf-c-dropdown__menu-item pf-m-text">
774
+ <div class="pf-u-font-size-sm">Account number:</div>
775
+ <div>123456789</div>
776
+ </div>
777
+ <div class="pf-c-dropdown__menu-item pf-m-text">
778
+ <div class="pf-u-font-size-sm">Username:</div>
779
+ <div>mshaksho@redhat.com</div>
780
+ </div>
781
+ </section>
782
+ <hr class="pf-c-divider" />
783
+ <section class="pf-c-dropdown__group">
784
+ <ul>
785
+ <li>
786
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
787
+ </li>
788
+ <li>
789
+ <a
790
+ class="pf-c-dropdown__menu-item"
791
+ href="#"
792
+ >User management</a>
793
+ </li>
794
+ <li>
795
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
796
+ </li>
797
+ </ul>
798
+ </section>
799
+ </div>
800
+ </div>
801
+ </div>
153
802
  </div>
154
803
  </div>
155
804
  </div>
156
- <img
157
- class="pf-c-avatar"
158
- src="/assets/images/img_avatar.svg"
159
- alt="Avatar image"
160
- />
161
805
  </div>
162
806
  </header>
163
807
  <div class="pf-c-page__sidebar">
164
808
  <div class="pf-c-page__sidebar-body">
165
809
  <nav
166
810
  class="pf-c-nav"
167
- id="card-view-example-primary-nav"
811
+ id="card-view-basic-example-expandable-nav"
168
812
  aria-label="Global"
169
813
  >
170
814
  <ul class="pf-c-nav__list">
171
- <li class="pf-c-nav__item">
172
- <a
173
- href="#"
174
- class="pf-c-nav__link pf-m-current"
175
- aria-current="page"
176
- >System Panel</a>
177
- </li>
178
- <li class="pf-c-nav__item">
179
- <a href="#" class="pf-c-nav__link">Policy</a>
180
- </li>
181
- <li class="pf-c-nav__item">
182
- <a href="#" class="pf-c-nav__link">Authentication</a>
815
+ <li class="pf-c-nav__item pf-m-expandable pf-m-expanded pf-m-current">
816
+ <button
817
+ class="pf-c-nav__link"
818
+ id="card-view-basic-example-expandable-nav-link1"
819
+ aria-expanded="true"
820
+ >
821
+ System panel
822
+ <span class="pf-c-nav__toggle">
823
+ <span class="pf-c-nav__toggle-icon">
824
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
825
+ </span>
826
+ </span>
827
+ </button>
828
+ <section
829
+ class="pf-c-nav__subnav"
830
+ aria-labelledby="card-view-basic-example-expandable-nav-link1"
831
+ >
832
+ <ul class="pf-c-nav__list">
833
+ <li class="pf-c-nav__item">
834
+ <a href="#" class="pf-c-nav__link">Overview</a>
835
+ </li>
836
+ <li class="pf-c-nav__item">
837
+ <a
838
+ href="#"
839
+ class="pf-c-nav__link pf-m-current"
840
+ aria-current="page"
841
+ >Resource usage</a>
842
+ </li>
843
+ <li class="pf-c-nav__item">
844
+ <a href="#" class="pf-c-nav__link">Hypervisors</a>
845
+ </li>
846
+ <li class="pf-c-divider" role="separator"></li>
847
+
848
+ <li class="pf-c-nav__item">
849
+ <a href="#" class="pf-c-nav__link">Instances</a>
850
+ </li>
851
+ <li class="pf-c-nav__item">
852
+ <a href="#" class="pf-c-nav__link">Volumes</a>
853
+ </li>
854
+ <li class="pf-c-nav__item">
855
+ <a href="#" class="pf-c-nav__link">Networks</a>
856
+ </li>
857
+ </ul>
858
+ </section>
183
859
  </li>
184
- <li class="pf-c-nav__item">
185
- <a href="#" class="pf-c-nav__link">Network Services</a>
860
+ <li class="pf-c-nav__item pf-m-expandable">
861
+ <button
862
+ class="pf-c-nav__link"
863
+ id="card-view-basic-example-expandable-nav-link2"
864
+ aria-expanded="false"
865
+ >
866
+ Policy
867
+ <span class="pf-c-nav__toggle">
868
+ <span class="pf-c-nav__toggle-icon">
869
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
870
+ </span>
871
+ </span>
872
+ </button>
873
+ <section
874
+ class="pf-c-nav__subnav"
875
+ aria-labelledby="card-view-basic-example-expandable-nav-link2"
876
+ hidden
877
+ >
878
+ <ul class="pf-c-nav__list">
879
+ <li class="pf-c-nav__item">
880
+ <a href="#" class="pf-c-nav__link">Subnav link 1</a>
881
+ </li>
882
+ <li class="pf-c-nav__item">
883
+ <a href="#" class="pf-c-nav__link">Subnav link 2</a>
884
+ </li>
885
+ </ul>
886
+ </section>
186
887
  </li>
187
- <li class="pf-c-nav__item">
188
- <a href="#" class="pf-c-nav__link">Server</a>
888
+ <li class="pf-c-nav__item pf-m-expandable">
889
+ <button
890
+ class="pf-c-nav__link"
891
+ id="card-view-basic-example-expandable-nav-link3"
892
+ aria-expanded="false"
893
+ >
894
+ Authentication
895
+ <span class="pf-c-nav__toggle">
896
+ <span class="pf-c-nav__toggle-icon">
897
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
898
+ </span>
899
+ </span>
900
+ </button>
901
+ <section
902
+ class="pf-c-nav__subnav"
903
+ aria-labelledby="card-view-basic-example-expandable-nav-link3"
904
+ hidden
905
+ >
906
+ <ul class="pf-c-nav__list">
907
+ <li class="pf-c-nav__item">
908
+ <a href="#" class="pf-c-nav__link">Subnav link 1</a>
909
+ </li>
910
+ <li class="pf-c-nav__item">
911
+ <a href="#" class="pf-c-nav__link">Subnav link 2</a>
912
+ </li>
913
+ </ul>
914
+ </section>
189
915
  </li>
190
916
  </ul>
191
917
  </nav>
@@ -194,16 +920,57 @@ section: demos
194
920
  <main
195
921
  class="pf-c-page__main"
196
922
  tabindex="-1"
197
- id="main-content-card-view-example"
923
+ id="main-content-card-view-basic-example"
198
924
  >
199
- <section class="pf-c-page__main-section pf-m-light">
200
- <div class="pf-c-content">
201
- <h1>Projects</h1>
202
- <p>This is a demo that showcases PatternFly cards.</p>
925
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
926
+ <div class="pf-c-page__main-body">
927
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
928
+ <ol class="pf-c-breadcrumb__list">
929
+ <li class="pf-c-breadcrumb__item">
930
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
931
+ </li>
932
+ <li class="pf-c-breadcrumb__item">
933
+ <span class="pf-c-breadcrumb__item-divider">
934
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
935
+ </span>
936
+
937
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
938
+ </li>
939
+ <li class="pf-c-breadcrumb__item">
940
+ <span class="pf-c-breadcrumb__item-divider">
941
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
942
+ </span>
943
+
944
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
945
+ </li>
946
+ <li class="pf-c-breadcrumb__item">
947
+ <span class="pf-c-breadcrumb__item-divider">
948
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
949
+ </span>
950
+
951
+ <a
952
+ href="#"
953
+ class="pf-c-breadcrumb__link pf-m-current"
954
+ aria-current="page"
955
+ >Section landing</a>
956
+ </li>
957
+ </ol>
958
+ </nav>
959
+ </div>
960
+ </section>
961
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
962
+ <div class="pf-c-page__main-body">
963
+ <div class="pf-c-content">
964
+ <h1>Main title</h1>
965
+ <p>This is a full page demo.</p>
966
+ </div>
203
967
  </div>
204
968
  </section>
205
969
  <section class="pf-c-page__main-section pf-m-light pf-m-no-padding">
206
- <div class="pf-c-toolbar">
970
+ <div
971
+ class="pf-c-toolbar pf-m-page-insets"
972
+ id="card-view-basic-example-toolbar"
973
+ >
207
974
  <div class="pf-c-toolbar__content">
208
975
  <div class="pf-c-toolbar__content-section pf-m-nowrap">
209
976
  <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl">
@@ -213,7 +980,7 @@ section: demos
213
980
  type="button"
214
981
  aria-label="Show filters"
215
982
  aria-expanded="false"
216
- aria-controls="-expandable-content"
983
+ aria-controls="card-view-basic-example-toolbar-expandable-content"
217
984
  >
218
985
  <i class="fas fa-filter" aria-hidden="true"></i>
219
986
  </button>
@@ -223,11 +990,11 @@ section: demos
223
990
  <div class="pf-c-dropdown__toggle pf-m-split-button">
224
991
  <label
225
992
  class="pf-c-dropdown__toggle-check"
226
- for="-bulk-select-toggle-check"
993
+ for="card-view-basic-example-toolbar-bulk-select-toggle-check"
227
994
  >
228
995
  <input
229
996
  type="checkbox"
230
- id="-bulk-select-toggle-check"
997
+ id="card-view-basic-example-toolbar-bulk-select-toggle-check"
231
998
  aria-label="Select all"
232
999
  />
233
1000
  </label>
@@ -236,7 +1003,7 @@ section: demos
236
1003
  class="pf-c-dropdown__toggle-button"
237
1004
  type="button"
238
1005
  aria-expanded="false"
239
- id="-bulk-select-toggle-button"
1006
+ id="card-view-basic-example-toolbar-bulk-select-toggle-button"
240
1007
  aria-label="Dropdown toggle"
241
1008
  >
242
1009
  <i class="fas fa-caret-down" aria-hidden="true"></i>
@@ -267,15 +1034,18 @@ section: demos
267
1034
 
268
1035
  <div class="pf-c-toolbar__item">
269
1036
  <div class="pf-c-select">
270
- <span id="-select-checkbox-status-label" hidden>Choose one</span>
1037
+ <span
1038
+ id="card-view-basic-example-toolbar-select-checkbox-status-label"
1039
+ hidden
1040
+ >Choose one</span>
271
1041
 
272
1042
  <button
273
1043
  class="pf-c-select__toggle"
274
1044
  type="button"
275
- id="-select-checkbox-status-toggle"
1045
+ id="card-view-basic-example-toolbar-select-checkbox-status-toggle"
276
1046
  aria-haspopup="true"
277
1047
  aria-expanded="false"
278
- aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
1048
+ aria-labelledby="card-view-basic-example-toolbar-select-checkbox-status-label card-view-basic-example-toolbar-select-checkbox-status-toggle"
279
1049
  >
280
1050
  <div class="pf-c-select__toggle-wrapper">
281
1051
  <span class="pf-c-select__toggle-text">Status</span>
@@ -292,13 +1062,13 @@ section: demos
292
1062
  >
293
1063
  <label
294
1064
  class="pf-c-check pf-c-select__menu-item pf-m-description"
295
- for="-select-checkbox-status-active"
1065
+ for="card-view-basic-example-toolbar-select-checkbox-status-active"
296
1066
  >
297
1067
  <input
298
1068
  class="pf-c-check__input"
299
1069
  type="checkbox"
300
- id="-select-checkbox-status-active"
301
- name="-select-checkbox-status-active"
1070
+ id="card-view-basic-example-toolbar-select-checkbox-status-active"
1071
+ name="card-view-basic-example-toolbar-select-checkbox-status-active"
302
1072
  />
303
1073
 
304
1074
  <span class="pf-c-check__label">Active</span>
@@ -308,13 +1078,13 @@ section: demos
308
1078
  </label>
309
1079
  <label
310
1080
  class="pf-c-check pf-c-select__menu-item pf-m-description"
311
- for="-select-checkbox-status-canceled"
1081
+ for="card-view-basic-example-toolbar-select-checkbox-status-canceled"
312
1082
  >
313
1083
  <input
314
1084
  class="pf-c-check__input"
315
1085
  type="checkbox"
316
- id="-select-checkbox-status-canceled"
317
- name="-select-checkbox-status-canceled"
1086
+ id="card-view-basic-example-toolbar-select-checkbox-status-canceled"
1087
+ name="card-view-basic-example-toolbar-select-checkbox-status-canceled"
318
1088
  />
319
1089
 
320
1090
  <span class="pf-c-check__label">Canceled</span>
@@ -324,39 +1094,39 @@ section: demos
324
1094
  </label>
325
1095
  <label
326
1096
  class="pf-c-check pf-c-select__menu-item"
327
- for="-select-checkbox-status-paused"
1097
+ for="card-view-basic-example-toolbar-select-checkbox-status-paused"
328
1098
  >
329
1099
  <input
330
1100
  class="pf-c-check__input"
331
1101
  type="checkbox"
332
- id="-select-checkbox-status-paused"
333
- name="-select-checkbox-status-paused"
1102
+ id="card-view-basic-example-toolbar-select-checkbox-status-paused"
1103
+ name="card-view-basic-example-toolbar-select-checkbox-status-paused"
334
1104
  />
335
1105
 
336
1106
  <span class="pf-c-check__label">Paused</span>
337
1107
  </label>
338
1108
  <label
339
1109
  class="pf-c-check pf-c-select__menu-item"
340
- for="-select-checkbox-status-warning"
1110
+ for="card-view-basic-example-toolbar-select-checkbox-status-warning"
341
1111
  >
342
1112
  <input
343
1113
  class="pf-c-check__input"
344
1114
  type="checkbox"
345
- id="-select-checkbox-status-warning"
346
- name="-select-checkbox-status-warning"
1115
+ id="card-view-basic-example-toolbar-select-checkbox-status-warning"
1116
+ name="card-view-basic-example-toolbar-select-checkbox-status-warning"
347
1117
  />
348
1118
 
349
1119
  <span class="pf-c-check__label">Warning</span>
350
1120
  </label>
351
1121
  <label
352
1122
  class="pf-c-check pf-c-select__menu-item"
353
- for="-select-checkbox-status-restarted"
1123
+ for="card-view-basic-example-toolbar-select-checkbox-status-restarted"
354
1124
  >
355
1125
  <input
356
1126
  class="pf-c-check__input"
357
1127
  type="checkbox"
358
- id="-select-checkbox-status-restarted"
359
- name="-select-checkbox-status-restarted"
1128
+ id="card-view-basic-example-toolbar-select-checkbox-status-restarted"
1129
+ name="card-view-basic-example-toolbar-select-checkbox-status-restarted"
360
1130
  />
361
1131
 
362
1132
  <span class="pf-c-check__label">Restarted</span>
@@ -367,7 +1137,10 @@ section: demos
367
1137
  </div>
368
1138
  </div>
369
1139
 
370
- <div class="pf-c-overflow-menu" id="-overflow-menu">
1140
+ <div
1141
+ class="pf-c-overflow-menu"
1142
+ id="card-view-basic-example-toolbar-overflow-menu"
1143
+ >
371
1144
  <div
372
1145
  class="pf-c-overflow-menu__content pf-u-display-none pf-u-display-flex-on-lg"
373
1146
  >
@@ -385,7 +1158,7 @@ section: demos
385
1158
  <button
386
1159
  class="pf-c-button pf-c-dropdown__toggle pf-m-plain"
387
1160
  type="button"
388
- id="-overflow-menu-dropdown-toggle"
1161
+ id="card-view-basic-example-toolbar-overflow-menu-dropdown-toggle"
389
1162
  aria-label="Dropdown with additional options"
390
1163
  aria-expanded="false"
391
1164
  >
@@ -393,7 +1166,7 @@ section: demos
393
1166
  </button>
394
1167
  <ul
395
1168
  class="pf-c-dropdown__menu"
396
- aria-labelledby="-overflow-menu-dropdown-toggle"
1169
+ aria-labelledby="card-view-basic-example-toolbar-overflow-menu-dropdown-toggle"
397
1170
  hidden
398
1171
  >
399
1172
  <li>
@@ -407,26 +1180,24 @@ section: demos
407
1180
  <div class="pf-c-toolbar__item pf-m-pagination">
408
1181
  <div class="pf-c-pagination pf-m-compact">
409
1182
  <div class="pf-c-options-menu">
410
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
1183
+ <button
1184
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
1185
+ type="button"
1186
+ id="card-view-basic-example-toolbar-top-pagination-toggle"
1187
+ aria-haspopup="listbox"
1188
+ aria-expanded="false"
1189
+ >
411
1190
  <span class="pf-c-options-menu__toggle-text">
412
1191
  <b>1 - 10</b>&nbsp;of&nbsp;
413
1192
  <b>36</b>
414
1193
  </span>
415
- <button
416
- class="pf-c-options-menu__toggle-button"
417
- id="-top-pagination-toggle"
418
- aria-haspopup="listbox"
419
- aria-expanded="false"
420
- aria-label="Items per page"
421
- >
422
- <span class="pf-c-options-menu__toggle-button-icon">
423
- <i class="fas fa-caret-down" aria-hidden="true"></i>
424
- </span>
425
- </button>
426
- </div>
1194
+ <div class="pf-c-options-menu__toggle-icon">
1195
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1196
+ </div>
1197
+ </button>
427
1198
  <ul
428
1199
  class="pf-c-options-menu__menu"
429
- aria-labelledby="-top-pagination-toggle"
1200
+ aria-labelledby="card-view-basic-example-toolbar-top-pagination-toggle"
430
1201
  hidden
431
1202
  >
432
1203
  <li>
@@ -484,7 +1255,7 @@ section: demos
484
1255
 
485
1256
  <div
486
1257
  class="pf-c-toolbar__expandable-content pf-m-hidden"
487
- id="-expandable-content"
1258
+ id="card-view-basic-example-toolbar-expandable-content"
488
1259
  hidden
489
1260
  ></div>
490
1261
  </div>
@@ -494,7 +1265,7 @@ section: demos
494
1265
  <div class="pf-l-gallery pf-m-gutter">
495
1266
  <div
496
1267
  class="pf-c-card pf-m-selectable-raised pf-m-compact"
497
- id="card-empty-state"
1268
+ id="card-view-basic-example-gallery-card-empty-state"
498
1269
  >
499
1270
  <div class="pf-l-bullseye">
500
1271
  <div class="pf-c-empty-state pf-m-xs">
@@ -508,14 +1279,17 @@ section: demos
508
1279
  </div>
509
1280
  </div>
510
1281
  </div>
511
- <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-1">
1282
+ <div
1283
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
1284
+ id="card-view-basic-example-gallery-card-1"
1285
+ >
512
1286
  <div class="pf-c-card__header">
513
1287
  <img src="/assets/images/pf-logo-small.svg" alt="PatternFly logo" />
514
1288
  <div class="pf-c-card__actions">
515
1289
  <div class="pf-c-dropdown">
516
1290
  <button
517
1291
  class="pf-c-dropdown__toggle pf-m-plain"
518
- id="card-1-dropdown-kebab-button"
1292
+ id="card-view-basic-example-gallery-card-1-dropdown-kebab-button"
519
1293
  aria-expanded="false"
520
1294
  type="button"
521
1295
  aria-label="Actions"
@@ -524,7 +1298,7 @@ section: demos
524
1298
  </button>
525
1299
  <ul
526
1300
  class="pf-c-dropdown__menu pf-m-align-right"
527
- aria-labelledby="card-1-dropdown-kebab-button"
1301
+ aria-labelledby="card-view-basic-example-gallery-card-1-dropdown-kebab-button"
528
1302
  hidden
529
1303
  >
530
1304
  <li>
@@ -561,15 +1335,17 @@ section: demos
561
1335
  <input
562
1336
  class="pf-c-check__input"
563
1337
  type="checkbox"
564
- id="card-1-check"
565
- name="card-1-check"
566
- aria-labelledby="card-1-check-label"
1338
+ id="card-view-basic-example-gallery-card-1-check"
1339
+ name="card-view-basic-example-gallery-card-1-check"
1340
+ aria-labelledby="card-view-basic-example-gallery-card-1-check-label"
567
1341
  />
568
1342
  </div>
569
1343
  </div>
570
1344
  </div>
571
1345
  <div class="pf-c-card__title">
572
- <p id="card-1-check-label">Patternfly</p>
1346
+ <p
1347
+ id="card-view-basic-example-gallery-card-1-check-label"
1348
+ >Patternfly</p>
573
1349
  <div class="pf-c-content">
574
1350
  <small>Provided by Red Hat</small>
575
1351
  </div>
@@ -578,7 +1354,10 @@ section: demos
578
1354
  class="pf-c-card__body"
579
1355
  >PatternFly is a community project that promotes design commonality and improves user experience.</div>
580
1356
  </div>
581
- <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-2">
1357
+ <div
1358
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
1359
+ id="card-view-basic-example-gallery-card-2"
1360
+ >
582
1361
  <div class="pf-c-card__header">
583
1362
  <img
584
1363
  src="/assets/images/activemq-core_200x150.png"
@@ -589,7 +1368,7 @@ section: demos
589
1368
  <div class="pf-c-dropdown">
590
1369
  <button
591
1370
  class="pf-c-dropdown__toggle pf-m-plain"
592
- id="card-2-dropdown-kebab-button"
1371
+ id="card-view-basic-example-gallery-card-2-dropdown-kebab-button"
593
1372
  aria-expanded="false"
594
1373
  type="button"
595
1374
  aria-label="Actions"
@@ -598,7 +1377,7 @@ section: demos
598
1377
  </button>
599
1378
  <ul
600
1379
  class="pf-c-dropdown__menu pf-m-align-right"
601
- aria-labelledby="card-2-dropdown-kebab-button"
1380
+ aria-labelledby="card-view-basic-example-gallery-card-2-dropdown-kebab-button"
602
1381
  hidden
603
1382
  >
604
1383
  <li>
@@ -635,15 +1414,15 @@ section: demos
635
1414
  <input
636
1415
  class="pf-c-check__input"
637
1416
  type="checkbox"
638
- id="card-2-check"
639
- name="card-2-check"
640
- aria-labelledby="card-2-check-label"
1417
+ id="card-view-basic-example-gallery-card-2-check"
1418
+ name="card-view-basic-example-gallery-card-2-check"
1419
+ aria-labelledby="card-view-basic-example-gallery-card-2-check-label"
641
1420
  />
642
1421
  </div>
643
1422
  </div>
644
1423
  </div>
645
1424
  <div class="pf-c-card__title">
646
- <p id="card-2-check-label">ActiveMQ</p>
1425
+ <p id="card-view-basic-example-gallery-card-2-check-label">ActiveMQ</p>
647
1426
  <div class="pf-c-content">
648
1427
  <small>Provided by Red Hat</small>
649
1428
  </div>
@@ -652,7 +1431,10 @@ section: demos
652
1431
  class="pf-c-card__body"
653
1432
  >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
654
1433
  </div>
655
- <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-3">
1434
+ <div
1435
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
1436
+ id="card-view-basic-example-gallery-card-3"
1437
+ >
656
1438
  <div class="pf-c-card__header">
657
1439
  <img
658
1440
  src="/assets/images/camel-spark_200x150.png"
@@ -663,7 +1445,7 @@ section: demos
663
1445
  <div class="pf-c-dropdown">
664
1446
  <button
665
1447
  class="pf-c-dropdown__toggle pf-m-plain"
666
- id="card-3-dropdown-kebab-button"
1448
+ id="card-view-basic-example-gallery-card-3-dropdown-kebab-button"
667
1449
  aria-expanded="false"
668
1450
  type="button"
669
1451
  aria-label="Actions"
@@ -672,7 +1454,7 @@ section: demos
672
1454
  </button>
673
1455
  <ul
674
1456
  class="pf-c-dropdown__menu pf-m-align-right"
675
- aria-labelledby="card-3-dropdown-kebab-button"
1457
+ aria-labelledby="card-view-basic-example-gallery-card-3-dropdown-kebab-button"
676
1458
  hidden
677
1459
  >
678
1460
  <li>
@@ -709,15 +1491,17 @@ section: demos
709
1491
  <input
710
1492
  class="pf-c-check__input"
711
1493
  type="checkbox"
712
- id="card-3-check"
713
- name="card-3-check"
714
- aria-labelledby="card-3-check-label"
1494
+ id="card-view-basic-example-gallery-card-3-check"
1495
+ name="card-view-basic-example-gallery-card-3-check"
1496
+ aria-labelledby="card-view-basic-example-gallery-card-3-check-label"
715
1497
  />
716
1498
  </div>
717
1499
  </div>
718
1500
  </div>
719
1501
  <div class="pf-c-card__title">
720
- <p id="card-3-check-label">Apache Spark</p>
1502
+ <p
1503
+ id="card-view-basic-example-gallery-card-3-check-label"
1504
+ >Apache Spark</p>
721
1505
  <div class="pf-c-content">
722
1506
  <small>Provided by Red Hat</small>
723
1507
  </div>
@@ -726,7 +1510,10 @@ section: demos
726
1510
  class="pf-c-card__body"
727
1511
  >This documentation page covers the Apache Spark component for the Apache Camel.</div>
728
1512
  </div>
729
- <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-4">
1513
+ <div
1514
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
1515
+ id="card-view-basic-example-gallery-card-4"
1516
+ >
730
1517
  <div class="pf-c-card__header">
731
1518
  <img
732
1519
  src="/assets/images/camel-avro_200x150.png"
@@ -737,7 +1524,7 @@ section: demos
737
1524
  <div class="pf-c-dropdown">
738
1525
  <button
739
1526
  class="pf-c-dropdown__toggle pf-m-plain"
740
- id="card-4-dropdown-kebab-button"
1527
+ id="card-view-basic-example-gallery-card-4-dropdown-kebab-button"
741
1528
  aria-expanded="false"
742
1529
  type="button"
743
1530
  aria-label="Actions"
@@ -746,7 +1533,7 @@ section: demos
746
1533
  </button>
747
1534
  <ul
748
1535
  class="pf-c-dropdown__menu pf-m-align-right"
749
- aria-labelledby="card-4-dropdown-kebab-button"
1536
+ aria-labelledby="card-view-basic-example-gallery-card-4-dropdown-kebab-button"
750
1537
  hidden
751
1538
  >
752
1539
  <li>
@@ -783,15 +1570,15 @@ section: demos
783
1570
  <input
784
1571
  class="pf-c-check__input"
785
1572
  type="checkbox"
786
- id="card-4-check"
787
- name="card-4-check"
788
- aria-labelledby="card-4-check-label"
1573
+ id="card-view-basic-example-gallery-card-4-check"
1574
+ name="card-view-basic-example-gallery-card-4-check"
1575
+ aria-labelledby="card-view-basic-example-gallery-card-4-check-label"
789
1576
  />
790
1577
  </div>
791
1578
  </div>
792
1579
  </div>
793
1580
  <div class="pf-c-card__title">
794
- <p id="card-4-check-label">Avro</p>
1581
+ <p id="card-view-basic-example-gallery-card-4-check-label">Avro</p>
795
1582
  <div class="pf-c-content">
796
1583
  <small>Provided by Red Hat</small>
797
1584
  </div>
@@ -802,7 +1589,7 @@ section: demos
802
1589
  </div>
803
1590
  <div
804
1591
  class="pf-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
805
- id="card-5"
1592
+ id="card-view-basic-example-gallery-card-5"
806
1593
  >
807
1594
  <div class="pf-c-card__header">
808
1595
  <img
@@ -814,7 +1601,7 @@ section: demos
814
1601
  <div class="pf-c-dropdown">
815
1602
  <button
816
1603
  class="pf-c-dropdown__toggle pf-m-plain"
817
- id="card-5-dropdown-kebab-button"
1604
+ id="card-view-basic-example-gallery-card-5-dropdown-kebab-button"
818
1605
  aria-expanded="false"
819
1606
  type="button"
820
1607
  aria-label="Actions"
@@ -823,7 +1610,7 @@ section: demos
823
1610
  </button>
824
1611
  <ul
825
1612
  class="pf-c-dropdown__menu pf-m-align-right"
826
- aria-labelledby="card-5-dropdown-kebab-button"
1613
+ aria-labelledby="card-view-basic-example-gallery-card-5-dropdown-kebab-button"
827
1614
  hidden
828
1615
  >
829
1616
  <li>
@@ -860,15 +1647,17 @@ section: demos
860
1647
  <input
861
1648
  class="pf-c-check__input"
862
1649
  type="checkbox"
863
- id="card-5-check"
864
- name="card-5-check"
865
- aria-labelledby="card-5-check-label"
1650
+ id="card-view-basic-example-gallery-card-5-check"
1651
+ name="card-view-basic-example-gallery-card-5-check"
1652
+ aria-labelledby="card-view-basic-example-gallery-card-5-check-label"
866
1653
  />
867
1654
  </div>
868
1655
  </div>
869
1656
  </div>
870
1657
  <div class="pf-c-card__title">
871
- <p id="card-5-check-label">Azure Services</p>
1658
+ <p
1659
+ id="card-view-basic-example-gallery-card-5-check-label"
1660
+ >Azure Services</p>
872
1661
  <div class="pf-c-content">
873
1662
  <small>Provided by Red Hat</small>
874
1663
  </div>
@@ -879,7 +1668,7 @@ section: demos
879
1668
  </div>
880
1669
  <div
881
1670
  class="pf-c-card pf-m-non-selectable-raised pf-m-compact"
882
- id="card-6"
1671
+ id="card-view-basic-example-gallery-card-6"
883
1672
  >
884
1673
  <div class="pf-c-card__header">
885
1674
  <img
@@ -891,7 +1680,7 @@ section: demos
891
1680
  <div class="pf-c-dropdown">
892
1681
  <button
893
1682
  class="pf-c-dropdown__toggle pf-m-plain"
894
- id="card-6-dropdown-kebab-button"
1683
+ id="card-view-basic-example-gallery-card-6-dropdown-kebab-button"
895
1684
  aria-expanded="false"
896
1685
  type="button"
897
1686
  aria-label="Actions"
@@ -900,7 +1689,7 @@ section: demos
900
1689
  </button>
901
1690
  <ul
902
1691
  class="pf-c-dropdown__menu pf-m-align-right"
903
- aria-labelledby="card-6-dropdown-kebab-button"
1692
+ aria-labelledby="card-view-basic-example-gallery-card-6-dropdown-kebab-button"
904
1693
  hidden
905
1694
  >
906
1695
  <li>
@@ -937,16 +1726,16 @@ section: demos
937
1726
  <input
938
1727
  class="pf-c-check__input"
939
1728
  type="checkbox"
940
- id="card-6-check"
941
- name="card-6-check"
1729
+ id="card-view-basic-example-gallery-card-6-check"
1730
+ name="card-view-basic-example-gallery-card-6-check"
942
1731
  disabled
943
- aria-labelledby="card-6-check-label"
1732
+ aria-labelledby="card-view-basic-example-gallery-card-6-check-label"
944
1733
  />
945
1734
  </div>
946
1735
  </div>
947
1736
  </div>
948
1737
  <div class="pf-c-card__title">
949
- <p id="card-6-check-label">Crypto</p>
1738
+ <p id="card-view-basic-example-gallery-card-6-check-label">Crypto</p>
950
1739
  <div class="pf-c-content">
951
1740
  <small>Provided by Red Hat</small>
952
1741
  </div>
@@ -955,7 +1744,10 @@ section: demos
955
1744
  class="pf-c-card__body"
956
1745
  >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
957
1746
  </div>
958
- <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-7">
1747
+ <div
1748
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
1749
+ id="card-view-basic-example-gallery-card-7"
1750
+ >
959
1751
  <div class="pf-c-card__header">
960
1752
  <img
961
1753
  src="/assets/images/camel-dropbox_200x150.png"
@@ -966,7 +1758,7 @@ section: demos
966
1758
  <div class="pf-c-dropdown">
967
1759
  <button
968
1760
  class="pf-c-dropdown__toggle pf-m-plain"
969
- id="card-7-dropdown-kebab-button"
1761
+ id="card-view-basic-example-gallery-card-7-dropdown-kebab-button"
970
1762
  aria-expanded="false"
971
1763
  type="button"
972
1764
  aria-label="Actions"
@@ -975,7 +1767,7 @@ section: demos
975
1767
  </button>
976
1768
  <ul
977
1769
  class="pf-c-dropdown__menu pf-m-align-right"
978
- aria-labelledby="card-7-dropdown-kebab-button"
1770
+ aria-labelledby="card-view-basic-example-gallery-card-7-dropdown-kebab-button"
979
1771
  hidden
980
1772
  >
981
1773
  <li>
@@ -1012,15 +1804,15 @@ section: demos
1012
1804
  <input
1013
1805
  class="pf-c-check__input"
1014
1806
  type="checkbox"
1015
- id="card-7-check"
1016
- name="card-7-check"
1017
- aria-labelledby="card-7-check-label"
1807
+ id="card-view-basic-example-gallery-card-7-check"
1808
+ name="card-view-basic-example-gallery-card-7-check"
1809
+ aria-labelledby="card-view-basic-example-gallery-card-7-check-label"
1018
1810
  />
1019
1811
  </div>
1020
1812
  </div>
1021
1813
  </div>
1022
1814
  <div class="pf-c-card__title">
1023
- <p id="card-7-check-label">DropBox</p>
1815
+ <p id="card-view-basic-example-gallery-card-7-check-label">DropBox</p>
1024
1816
  <div class="pf-c-content">
1025
1817
  <small>Provided by Red Hat</small>
1026
1818
  </div>
@@ -1029,7 +1821,10 @@ section: demos
1029
1821
  class="pf-c-card__body"
1030
1822
  >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
1031
1823
  </div>
1032
- <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-8">
1824
+ <div
1825
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
1826
+ id="card-view-basic-example-gallery-card-8"
1827
+ >
1033
1828
  <div class="pf-c-card__header">
1034
1829
  <img
1035
1830
  src="/assets/images/camel-infinispan_200x150.png"
@@ -1040,7 +1835,7 @@ section: demos
1040
1835
  <div class="pf-c-dropdown">
1041
1836
  <button
1042
1837
  class="pf-c-dropdown__toggle pf-m-plain"
1043
- id="card-8-dropdown-kebab-button"
1838
+ id="card-view-basic-example-gallery-card-8-dropdown-kebab-button"
1044
1839
  aria-expanded="false"
1045
1840
  type="button"
1046
1841
  aria-label="Actions"
@@ -1049,7 +1844,7 @@ section: demos
1049
1844
  </button>
1050
1845
  <ul
1051
1846
  class="pf-c-dropdown__menu pf-m-align-right"
1052
- aria-labelledby="card-8-dropdown-kebab-button"
1847
+ aria-labelledby="card-view-basic-example-gallery-card-8-dropdown-kebab-button"
1053
1848
  hidden
1054
1849
  >
1055
1850
  <li>
@@ -1086,15 +1881,17 @@ section: demos
1086
1881
  <input
1087
1882
  class="pf-c-check__input"
1088
1883
  type="checkbox"
1089
- id="card-8-check"
1090
- name="card-8-check"
1091
- aria-labelledby="card-8-check-label"
1884
+ id="card-view-basic-example-gallery-card-8-check"
1885
+ name="card-view-basic-example-gallery-card-8-check"
1886
+ aria-labelledby="card-view-basic-example-gallery-card-8-check-label"
1092
1887
  />
1093
1888
  </div>
1094
1889
  </div>
1095
1890
  </div>
1096
1891
  <div class="pf-c-card__title">
1097
- <p id="card-8-check-label">JBoss Data Grid</p>
1892
+ <p
1893
+ id="card-view-basic-example-gallery-card-8-check-label"
1894
+ >JBoss Data Grid</p>
1098
1895
  <div class="pf-c-content">
1099
1896
  <small>Provided by Red Hat</small>
1100
1897
  </div>
@@ -1103,7 +1900,10 @@ section: demos
1103
1900
  class="pf-c-card__body"
1104
1901
  >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
1105
1902
  </div>
1106
- <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-9">
1903
+ <div
1904
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
1905
+ id="card-view-basic-example-gallery-card-9"
1906
+ >
1107
1907
  <div class="pf-c-card__header">
1108
1908
  <img
1109
1909
  src="/assets/images/FuseConnector_Icons_REST.png"
@@ -1114,7 +1914,7 @@ section: demos
1114
1914
  <div class="pf-c-dropdown">
1115
1915
  <button
1116
1916
  class="pf-c-dropdown__toggle pf-m-plain"
1117
- id="card-9-dropdown-kebab-button"
1917
+ id="card-view-basic-example-gallery-card-9-dropdown-kebab-button"
1118
1918
  aria-expanded="false"
1119
1919
  type="button"
1120
1920
  aria-label="Actions"
@@ -1123,7 +1923,7 @@ section: demos
1123
1923
  </button>
1124
1924
  <ul
1125
1925
  class="pf-c-dropdown__menu pf-m-align-right"
1126
- aria-labelledby="card-9-dropdown-kebab-button"
1926
+ aria-labelledby="card-view-basic-example-gallery-card-9-dropdown-kebab-button"
1127
1927
  hidden
1128
1928
  >
1129
1929
  <li>
@@ -1160,15 +1960,15 @@ section: demos
1160
1960
  <input
1161
1961
  class="pf-c-check__input"
1162
1962
  type="checkbox"
1163
- id="card-9-check"
1164
- name="card-9-check"
1165
- aria-labelledby="card-9-check-label"
1963
+ id="card-view-basic-example-gallery-card-9-check"
1964
+ name="card-view-basic-example-gallery-card-9-check"
1965
+ aria-labelledby="card-view-basic-example-gallery-card-9-check-label"
1166
1966
  />
1167
1967
  </div>
1168
1968
  </div>
1169
1969
  </div>
1170
1970
  <div class="pf-c-card__title">
1171
- <p id="card-9-check-label">REST</p>
1971
+ <p id="card-view-basic-example-gallery-card-9-check-label">REST</p>
1172
1972
  <div class="pf-c-content">
1173
1973
  <small>Provided by Red Hat</small>
1174
1974
  </div>
@@ -1178,7 +1978,10 @@ section: demos
1178
1978
  From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
1179
1979
  </div>
1180
1980
  </div>
1181
- <div class="pf-c-card pf-m-selectable-raised pf-m-compact" id="card-10">
1981
+ <div
1982
+ class="pf-c-card pf-m-selectable-raised pf-m-compact"
1983
+ id="card-view-basic-example-gallery-card-10"
1984
+ >
1182
1985
  <div class="pf-c-card__header">
1183
1986
  <img
1184
1987
  src="/assets/images/camel-swagger-java_200x150.png"
@@ -1189,7 +1992,7 @@ section: demos
1189
1992
  <div class="pf-c-dropdown">
1190
1993
  <button
1191
1994
  class="pf-c-dropdown__toggle pf-m-plain"
1192
- id="card-10-dropdown-kebab-button"
1995
+ id="card-view-basic-example-gallery-card-10-dropdown-kebab-button"
1193
1996
  aria-expanded="false"
1194
1997
  type="button"
1195
1998
  aria-label="Actions"
@@ -1198,7 +2001,7 @@ section: demos
1198
2001
  </button>
1199
2002
  <ul
1200
2003
  class="pf-c-dropdown__menu pf-m-align-right"
1201
- aria-labelledby="card-10-dropdown-kebab-button"
2004
+ aria-labelledby="card-view-basic-example-gallery-card-10-dropdown-kebab-button"
1202
2005
  hidden
1203
2006
  >
1204
2007
  <li>
@@ -1235,15 +2038,15 @@ section: demos
1235
2038
  <input
1236
2039
  class="pf-c-check__input"
1237
2040
  type="checkbox"
1238
- id="card-10-check"
1239
- name="card-10-check"
1240
- aria-labelledby="card-10-check-label"
2041
+ id="card-view-basic-example-gallery-card-10-check"
2042
+ name="card-view-basic-example-gallery-card-10-check"
2043
+ aria-labelledby="card-view-basic-example-gallery-card-10-check-label"
1241
2044
  />
1242
2045
  </div>
1243
2046
  </div>
1244
2047
  </div>
1245
2048
  <div class="pf-c-card__title">
1246
- <p id="card-10-check-label">SWAGGER</p>
2049
+ <p id="card-view-basic-example-gallery-card-10-check-label">SWAGGER</p>
1247
2050
  <div class="pf-c-content">
1248
2051
  <small>Provided by Red Hat</small>
1249
2052
  </div>
@@ -1259,23 +2062,21 @@ section: demos
1259
2062
  >
1260
2063
  <div class="pf-c-pagination pf-m-bottom">
1261
2064
  <div class="pf-c-options-menu pf-m-top">
1262
- <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
2065
+ <button
2066
+ class="pf-c-options-menu__toggle pf-m-text pf-m-plain"
2067
+ type="button"
2068
+ id="pagination-options-menu-bottom-example-toggle"
2069
+ aria-haspopup="listbox"
2070
+ aria-expanded="false"
2071
+ >
1263
2072
  <span class="pf-c-options-menu__toggle-text">
1264
2073
  <b>1 - 10</b>&nbsp;of&nbsp;
1265
2074
  <b>36</b>
1266
2075
  </span>
1267
- <button
1268
- class="pf-c-options-menu__toggle-button"
1269
- id="pagination-options-menu-bottom-example-toggle"
1270
- aria-haspopup="listbox"
1271
- aria-expanded="false"
1272
- aria-label="Items per page"
1273
- >
1274
- <span class="pf-c-options-menu__toggle-button-icon">
1275
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1276
- </span>
1277
- </button>
1278
- </div>
2076
+ <div class="pf-c-options-menu__toggle-icon">
2077
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
2078
+ </div>
2079
+ </button>
1279
2080
  <ul
1280
2081
  class="pf-c-options-menu__menu pf-m-top"
1281
2082
  aria-labelledby="pagination-options-menu-bottom-example-toggle"