@patternfly/patternfly 4.184.3 → 4.185.2

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 (45) hide show
  1. package/RELEASE-NOTES.md +22 -0
  2. package/assets/icons/iconUnicodes.json +1 -0
  3. package/assets/pficon/pficon.scss +6 -0
  4. package/assets/pficon/pficon.woff +0 -0
  5. package/assets/pficon/pficon.woff2 +0 -0
  6. package/base/patternfly-icons.css +5 -1
  7. package/base/patternfly-pf-icons.css +5 -1
  8. package/components/Form/form.css +4 -2
  9. package/components/Form/form.scss +4 -2
  10. package/components/Masthead/masthead.css +1 -1
  11. package/components/Masthead/masthead.scss +1 -1
  12. package/components/Menu/menu.css +1 -0
  13. package/components/Menu/menu.scss +1 -0
  14. package/docs/demos/AboutModal/examples/AboutModal.md +916 -1
  15. package/docs/demos/Alert/examples/Alert.md +2484 -490
  16. package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
  17. package/docs/demos/Banner/examples/Banner.md +2074 -1466
  18. package/docs/demos/Button/examples/Button.md +33 -21
  19. package/docs/demos/CardView/examples/CardView.md +1065 -260
  20. package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
  21. package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
  22. package/docs/demos/DataList/examples/DataList.md +3777 -1553
  23. package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
  24. package/docs/demos/Drawer/examples/Drawer.md +2554 -439
  25. package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
  26. package/docs/demos/Masthead/examples/Masthead.md +9 -20
  27. package/docs/demos/Modal/examples/Modal.md +5521 -34
  28. package/docs/demos/Nav/examples/Nav.md +6453 -1201
  29. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
  30. package/docs/demos/Page/examples/Page.md +14 -35
  31. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6003 -1512
  32. package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
  33. package/docs/demos/Table/examples/Table.md +26 -65
  34. package/docs/demos/Tabs/examples/Tabs.md +10149 -4897
  35. package/docs/demos/Toolbar/examples/Toolbar.md +797 -149
  36. package/docs/demos/Wizard/examples/Wizard.md +3418 -288
  37. package/docs/pages/icons.md +1 -0
  38. package/icons/pf-icons.json +1 -0
  39. package/package.json +1 -1
  40. package/patternfly-base-no-reset.css +5 -1
  41. package/patternfly-base.css +5 -1
  42. package/patternfly-no-reset.css +11 -4
  43. package/patternfly.css +11 -4
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/demos/AboutModal/examples/AboutModal.md CHANGED
@@ -8,7 +8,922 @@ section: components
8
8
  This demo implements the about modal, including the backdrop.
9
9
 
10
10
  ```html isFullscreen
11
- <div aria-hidden="true">Page content</div>
11
+ <div class="pf-c-page" id="modal-basic-example">
12
+ <a
13
+ class="pf-c-skip-to-content pf-c-button pf-m-primary"
14
+ href="#main-content-modal-basic-example"
15
+ >Skip to content</a>
16
+ <header class="pf-c-masthead" id="modal-basic-example-masthead">
17
+ <span class="pf-c-masthead__toggle">
18
+ <button
19
+ class="pf-c-button pf-m-plain"
20
+ type="button"
21
+ aria-label="Global navigation"
22
+ >
23
+ <i class="fas fa-bars" aria-hidden="true"></i>
24
+ </button>
25
+ </span>
26
+ <div class="pf-c-masthead__main">
27
+ <a class="pf-c-masthead__brand" href="#">
28
+ <picture
29
+ class="pf-c-brand pf-m-picture"
30
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
31
+ >
32
+ <source
33
+ media="(min-width: 768px)"
34
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
35
+ />
36
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
37
+ <img
38
+ src="/assets/images/logo__pf--reverse--base.png"
39
+ alt="Fallback patternFly default logo"
40
+ />
41
+ </picture>
42
+ </a>
43
+ </div>
44
+ <div class="pf-c-masthead__content">
45
+ <div
46
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
47
+ id="modal-basic-example-masthead-toolbar"
48
+ >
49
+ <div class="pf-c-toolbar__content">
50
+ <div class="pf-c-toolbar__content-section">
51
+ <div
52
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
53
+ >
54
+ <div class="pf-c-toolbar__item">
55
+ <button
56
+ class="pf-c-button pf-m-plain"
57
+ type="button"
58
+ aria-label="Notifications"
59
+ >
60
+ <span class="pf-c-notification-badge">
61
+ <i class="pf-icon-bell" aria-hidden="true"></i>
62
+ </span>
63
+ </button>
64
+ </div>
65
+ <div
66
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
67
+ >
68
+ <div class="pf-c-toolbar__item">
69
+ <nav
70
+ class="pf-c-app-launcher"
71
+ aria-label="Application launcher"
72
+ id="modal-basic-example-masthead-icon-group--app-launcher"
73
+ >
74
+ <button
75
+ class="pf-c-app-launcher__toggle"
76
+ type="button"
77
+ id="modal-basic-example-masthead-icon-group--app-launcher-button"
78
+ aria-expanded="false"
79
+ aria-label="Application launcher"
80
+ >
81
+ <i class="fas fa-th" aria-hidden="true"></i>
82
+ </button>
83
+ <div
84
+ class="pf-c-app-launcher__menu pf-m-align-right"
85
+ hidden
86
+ >
87
+ <div class="pf-c-app-launcher__menu-search">
88
+ <div class="pf-c-search-input">
89
+ <div class="pf-c-search-input__bar">
90
+ <span class="pf-c-search-input__text">
91
+ <span class="pf-c-search-input__icon">
92
+ <i
93
+ class="fas fa-search fa-fw"
94
+ aria-hidden="true"
95
+ ></i>
96
+ </span>
97
+ <input
98
+ class="pf-c-search-input__text-input"
99
+ type="text"
100
+ placeholder="Filter by name"
101
+ aria-label="Filter by name"
102
+ />
103
+ </span>
104
+ </div>
105
+ </div>
106
+ </div>
107
+ <section class="pf-c-app-launcher__group">
108
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
109
+ <ul>
110
+ <li
111
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
112
+ >
113
+ <a class="pf-c-app-launcher__menu-item">
114
+ Link 1
115
+ <span
116
+ class="pf-c-app-launcher__menu-item-external-icon"
117
+ >
118
+ <i
119
+ class="fas fa-external-link-alt"
120
+ aria-hidden="true"
121
+ ></i>
122
+ </span>
123
+ <span class="pf-screen-reader">(opens new window)</span>
124
+ </a>
125
+ <button
126
+ class="pf-c-app-launcher__menu-item pf-m-action"
127
+ type="button"
128
+ aria-label="Favorite"
129
+ >
130
+ <i class="fas fa-star" aria-hidden="true"></i>
131
+ </button>
132
+ </li>
133
+ <li
134
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
135
+ >
136
+ <a class="pf-c-app-launcher__menu-item">
137
+ Link 2
138
+ <span
139
+ class="pf-c-app-launcher__menu-item-external-icon"
140
+ >
141
+ <i
142
+ class="fas fa-external-link-alt"
143
+ aria-hidden="true"
144
+ ></i>
145
+ </span>
146
+ <span class="pf-screen-reader">(opens new window)</span>
147
+ </a>
148
+ <button
149
+ class="pf-c-app-launcher__menu-item pf-m-action"
150
+ type="button"
151
+ aria-label="Favorite"
152
+ >
153
+ <i class="fas fa-star" aria-hidden="true"></i>
154
+ </button>
155
+ </li>
156
+ </ul>
157
+ </section>
158
+ <hr class="pf-c-divider" />
159
+ <section class="pf-c-app-launcher__group">
160
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
161
+ <ul>
162
+ <li
163
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
164
+ >
165
+ <a class="pf-c-app-launcher__menu-item">
166
+ Link 1
167
+ <span
168
+ class="pf-c-app-launcher__menu-item-external-icon"
169
+ >
170
+ <i
171
+ class="fas fa-external-link-alt"
172
+ aria-hidden="true"
173
+ ></i>
174
+ </span>
175
+ <span class="pf-screen-reader">(opens new window)</span>
176
+ </a>
177
+ <button
178
+ class="pf-c-app-launcher__menu-item pf-m-action"
179
+ type="button"
180
+ aria-label="Favorite"
181
+ >
182
+ <i class="fas fa-star" aria-hidden="true"></i>
183
+ </button>
184
+ </li>
185
+ <li
186
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
187
+ >
188
+ <a class="pf-c-app-launcher__menu-item">
189
+ Link 2
190
+ <span
191
+ class="pf-c-app-launcher__menu-item-external-icon"
192
+ >
193
+ <i
194
+ class="fas fa-external-link-alt"
195
+ aria-hidden="true"
196
+ ></i>
197
+ </span>
198
+ <span class="pf-screen-reader">(opens new window)</span>
199
+ </a>
200
+ <button
201
+ class="pf-c-app-launcher__menu-item pf-m-action"
202
+ type="button"
203
+ aria-label="Favorite"
204
+ >
205
+ <i class="fas fa-star" aria-hidden="true"></i>
206
+ </button>
207
+ </li>
208
+ </ul>
209
+ </section>
210
+ </div>
211
+ </nav>
212
+ </div>
213
+ <div class="pf-c-toolbar__item">
214
+ <div class="pf-c-dropdown">
215
+ <button
216
+ class="pf-c-dropdown__toggle pf-m-plain"
217
+ id="modal-basic-example-masthead-settings-button"
218
+ aria-expanded="false"
219
+ type="button"
220
+ aria-label="Settings"
221
+ >
222
+ <i class="fas fa-cog" aria-hidden="true"></i>
223
+ </button>
224
+ <ul
225
+ class="pf-c-dropdown__menu pf-m-align-right"
226
+ aria-labelledby="modal-basic-example-masthead-settings-button"
227
+ hidden
228
+ >
229
+ <li>
230
+ <button
231
+ class="pf-c-dropdown__menu-item"
232
+ type="button"
233
+ >Settings</button>
234
+ </li>
235
+ <li>
236
+ <button
237
+ class="pf-c-dropdown__menu-item"
238
+ type="button"
239
+ >Use the beta release</button>
240
+ </li>
241
+ </ul>
242
+ </div>
243
+ </div>
244
+ <div class="pf-c-toolbar__item">
245
+ <div class="pf-c-dropdown">
246
+ <button
247
+ class="pf-c-dropdown__toggle pf-m-plain"
248
+ id="modal-basic-example-masthead-help-button"
249
+ aria-expanded="false"
250
+ type="button"
251
+ aria-label="Help"
252
+ >
253
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
254
+ </button>
255
+ <ul
256
+ class="pf-c-dropdown__menu pf-m-align-right"
257
+ aria-labelledby="modal-basic-example-masthead-help-button"
258
+ hidden
259
+ >
260
+ <li>
261
+ <button
262
+ class="pf-c-dropdown__menu-item"
263
+ type="button"
264
+ >Support options</button>
265
+ </li>
266
+ <li>
267
+ <button
268
+ class="pf-c-dropdown__menu-item"
269
+ type="button"
270
+ >Open support case</button>
271
+ </li>
272
+ <li>
273
+ <button
274
+ class="pf-c-dropdown__menu-item"
275
+ type="button"
276
+ >API documentation</button>
277
+ </li>
278
+ </ul>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
283
+ <div class="pf-c-dropdown">
284
+ <button
285
+ class="pf-c-menu-toggle pf-m-plain"
286
+ type="button"
287
+ aria-expanded="false"
288
+ aria-label="Actions"
289
+ >
290
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
291
+ </button>
292
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
293
+ <div class="pf-c-menu__content">
294
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
295
+ <ul class="pf-c-menu__list" role="menu">
296
+ <li
297
+ class="pf-c-menu__list-item pf-m-disabled"
298
+ role="none"
299
+ >
300
+ <button
301
+ class="pf-c-menu__item"
302
+ type="button"
303
+ disabled
304
+ role="menuitem"
305
+ >
306
+ <span class="pf-c-menu__item-description">
307
+ <div class="pf-u-font-size-sm">Username:</div>
308
+ <div class="pf-u-font-size-md">ned_username</div>
309
+ </span>
310
+ </button>
311
+ </li>
312
+ <li
313
+ class="pf-c-menu__list-item pf-m-disabled"
314
+ role="none"
315
+ >
316
+ <button
317
+ class="pf-c-menu__item"
318
+ type="button"
319
+ disabled
320
+ role="menuitem"
321
+ >
322
+ <span class="pf-c-menu__item-description">
323
+ <div class="pf-u-font-size-sm">Account number:</div>
324
+ <div class="pf-u-font-size-md">123456789</div>
325
+ </span>
326
+ </button>
327
+ </li>
328
+ <li class="pf-c-divider" role="separator"></li>
329
+ <li class="pf-c-menu__list-item" role="none">
330
+ <button
331
+ class="pf-c-menu__item"
332
+ type="button"
333
+ role="menuitem"
334
+ >
335
+ <span class="pf-c-menu__item-main">
336
+ <span class="pf-c-menu__item-text">My profile</span>
337
+ </span>
338
+ </button>
339
+ </li>
340
+ <li class="pf-c-menu__list-item" role="none">
341
+ <button
342
+ class="pf-c-menu__item"
343
+ type="button"
344
+ role="menuitem"
345
+ >
346
+ <span class="pf-c-menu__item-main">
347
+ <span
348
+ class="pf-c-menu__item-text"
349
+ >User management</span>
350
+ </span>
351
+ </button>
352
+ </li>
353
+ <li class="pf-c-menu__list-item" role="none">
354
+ <button
355
+ class="pf-c-menu__item"
356
+ type="button"
357
+ role="menuitem"
358
+ >
359
+ <span class="pf-c-menu__item-main">
360
+ <span class="pf-c-menu__item-text">Logout</span>
361
+ </span>
362
+ </button>
363
+ </li>
364
+ </ul>
365
+ </section>
366
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
367
+ <section class="pf-c-menu__group">
368
+ <ul class="pf-c-menu__list" role="menu">
369
+ <li class="pf-c-menu__list-item" role="none">
370
+ <button
371
+ class="pf-c-menu__item"
372
+ type="button"
373
+ role="menuitem"
374
+ aria-expanded="false"
375
+ >
376
+ <span class="pf-c-menu__item-main">
377
+ <span class="pf-c-menu__item-icon">
378
+ <i
379
+ class="fas fa-fw fa-cog"
380
+ aria-hidden="true"
381
+ ></i>
382
+ </span>
383
+ <span class="pf-c-menu__item-text">Settings</span>
384
+ <span class="pf-c-menu__item-toggle-icon">
385
+ <i class="fas fa-angle-right"></i>
386
+ </span>
387
+ </span>
388
+ </button>
389
+ <div class="pf-c-menu" hidden>
390
+ <div class="pf-c-menu__content">
391
+ <ul class="pf-c-menu__list" role="menu">
392
+ <li
393
+ class="pf-c-menu__list-item pf-m-drill-up"
394
+ role="none"
395
+ >
396
+ <button
397
+ class="pf-c-menu__item"
398
+ type="button"
399
+ role="menuitem"
400
+ >
401
+ <span class="pf-c-menu__item-main">
402
+ <span
403
+ class="pf-c-menu__item-toggle-icon"
404
+ >
405
+ <i class="fas fa-angle-left"></i>
406
+ </span>
407
+ <span class="pf-c-menu__item-icon">
408
+ <i
409
+ class="fas fa-fw fa-cog"
410
+ aria-hidden="true"
411
+ ></i>
412
+ </span>
413
+ <span
414
+ class="pf-c-menu__item-text"
415
+ >Settings</span>
416
+ </span>
417
+ </button>
418
+ </li>
419
+ <li class="pf-c-divider" role="separator"></li>
420
+ <li class="pf-c-menu__list-item" role="none">
421
+ <a
422
+ class="pf-c-menu__item"
423
+ href="#"
424
+ role="menuitem"
425
+ >
426
+ <span class="pf-c-menu__item-main">
427
+ <span
428
+ class="pf-c-menu__item-text"
429
+ >Customer support</span>
430
+ </span>
431
+ </a>
432
+ </li>
433
+ <li class="pf-c-menu__list-item" role="none">
434
+ <a
435
+ class="pf-c-menu__item"
436
+ href="#"
437
+ role="menuitem"
438
+ >
439
+ <span class="pf-c-menu__item-main">
440
+ <span class="pf-c-menu__item-text">About</span>
441
+ </span>
442
+ </a>
443
+ </li>
444
+ </ul>
445
+ </div>
446
+ </div>
447
+ </li>
448
+
449
+ <li class="pf-c-menu__list-item" role="none">
450
+ <button
451
+ class="pf-c-menu__item"
452
+ type="button"
453
+ role="menuitem"
454
+ aria-expanded="false"
455
+ >
456
+ <span class="pf-c-menu__item-main">
457
+ <span class="pf-c-menu__item-icon">
458
+ <i
459
+ class="fas fa-fw fa-pf-icon pf-icon-help"
460
+ aria-hidden="true"
461
+ ></i>
462
+ </span>
463
+ <span class="pf-c-menu__item-text">Help</span>
464
+ <span class="pf-c-menu__item-toggle-icon">
465
+ <i class="fas fa-angle-right"></i>
466
+ </span>
467
+ </span>
468
+ </button>
469
+ <div class="pf-c-menu" hidden>
470
+ <div class="pf-c-menu__content">
471
+ <ul class="pf-c-menu__list" role="menu">
472
+ <li
473
+ class="pf-c-menu__list-item pf-m-drill-up"
474
+ role="none"
475
+ >
476
+ <button
477
+ class="pf-c-menu__item"
478
+ type="button"
479
+ role="menuitem"
480
+ >
481
+ <span class="pf-c-menu__item-main">
482
+ <span
483
+ class="pf-c-menu__item-toggle-icon"
484
+ >
485
+ <i class="fas fa-angle-left"></i>
486
+ </span>
487
+ <span class="pf-c-menu__item-icon">
488
+ <i
489
+ class="fas fa-fw fa-pf-icon pf-icon-help"
490
+ aria-hidden="true"
491
+ ></i>
492
+ </span>
493
+ <span class="pf-c-menu__item-text">Help</span>
494
+ </span>
495
+ </button>
496
+ </li>
497
+ <li class="pf-c-divider" role="separator"></li>
498
+ <li class="pf-c-menu__list-item" role="none">
499
+ <a
500
+ class="pf-c-menu__item"
501
+ href="#"
502
+ role="menuitem"
503
+ >
504
+ <span class="pf-c-menu__item-main">
505
+ <span
506
+ class="pf-c-menu__item-text"
507
+ >Support options</span>
508
+ </span>
509
+ </a>
510
+ </li>
511
+ <li class="pf-c-menu__list-item" role="none">
512
+ <a
513
+ class="pf-c-menu__item"
514
+ href="#"
515
+ role="menuitem"
516
+ >
517
+ <span class="pf-c-menu__item-main">
518
+ <span
519
+ class="pf-c-menu__item-text"
520
+ >Open support case</span>
521
+ </span>
522
+ </a>
523
+ </li>
524
+ <li class="pf-c-menu__list-item" role="none">
525
+ <a
526
+ class="pf-c-menu__item"
527
+ href="#"
528
+ role="menuitem"
529
+ >
530
+ <span class="pf-c-menu__item-main">
531
+ <span
532
+ class="pf-c-menu__item-text"
533
+ >API documentation</span>
534
+ </span>
535
+ </a>
536
+ </li>
537
+ </ul>
538
+ </div>
539
+ </div>
540
+ </li>
541
+
542
+ <li class="pf-c-menu__list-item" role="none">
543
+ <button
544
+ class="pf-c-menu__item"
545
+ type="button"
546
+ role="menuitem"
547
+ >
548
+ <span class="pf-c-menu__item-main">
549
+ <span class="pf-c-menu__item-icon">
550
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
551
+ </span>
552
+ <span
553
+ class="pf-c-menu__item-text"
554
+ >Application launcher</span>
555
+ <span class="pf-c-menu__item-toggle-icon">
556
+ <i class="fas fa-angle-right"></i>
557
+ </span>
558
+ </span>
559
+ </button>
560
+ <div class="pf-c-menu" hidden>
561
+ <div class="pf-c-menu__header">
562
+ <button
563
+ class="pf-c-menu__item"
564
+ type="button"
565
+ role="menuitem"
566
+ >
567
+ <span class="pf-c-menu__item-main">
568
+ <span class="pf-c-menu__item-toggle-icon">
569
+ <i class="fas fa-angle-left"></i>
570
+ </span>
571
+ <span class="pf-c-menu__item-icon">
572
+ <i
573
+ class="fas fa-fw fa-th"
574
+ aria-hidden="true"
575
+ ></i>
576
+ </span>
577
+ <span
578
+ class="pf-c-menu__item-text"
579
+ >Application launcher</span>
580
+ </span>
581
+ </button>
582
+ </div>
583
+ <div class="pf-c-menu__search">
584
+ <div class="pf-c-menu__search-input">
585
+ <div class="pf-c-search-input">
586
+ <div class="pf-c-search-input__bar">
587
+ <span class="pf-c-search-input__text">
588
+ <span class="pf-c-search-input__icon">
589
+ <i
590
+ class="fas fa-search fa-fw"
591
+ aria-hidden="true"
592
+ ></i>
593
+ </span>
594
+ <input
595
+ class="pf-c-search-input__text-input"
596
+ type="text"
597
+ placeholder="Search"
598
+ aria-label="Search"
599
+ />
600
+ </span>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ </div>
605
+ <hr class="pf-c-divider" />
606
+ <section class="pf-c-menu__group">
607
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
608
+ <ul class="pf-c-menu__list" role="menu">
609
+ <li class="pf-c-menu__list-item" role="none">
610
+ <a
611
+ class="pf-c-menu__item"
612
+ href="#"
613
+ role="menuitem"
614
+ >
615
+ <span class="pf-c-menu__item-main">
616
+ <span
617
+ class="pf-c-menu__item-text"
618
+ >Link 1</span>
619
+ </span>
620
+ </a>
621
+ <button
622
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
623
+ type="button"
624
+ aria-label="Starred"
625
+ >
626
+ <span class="pf-c-menu__item-action-icon">
627
+ <i
628
+ class="fas fa-star"
629
+ aria-hidden="true"
630
+ ></i>
631
+ </span>
632
+ </button>
633
+ </li>
634
+ <li class="pf-c-menu__list-item" role="none">
635
+ <a
636
+ class="pf-c-menu__item"
637
+ href="#"
638
+ role="menuitem"
639
+ target="_blank"
640
+ >
641
+ <span class="pf-c-menu__item-main">
642
+ <span
643
+ class="pf-c-menu__item-text"
644
+ >Link 2</span>
645
+ <span
646
+ class="pf-c-menu__item-external-icon"
647
+ >
648
+ <i
649
+ class="fas fa-external-link-alt"
650
+ aria-hidden="true"
651
+ ></i>
652
+ </span>
653
+ <span
654
+ class="pf-screen-reader"
655
+ >(opens new window)</span>
656
+ </span>
657
+ </a>
658
+ <button
659
+ class="pf-c-menu__item-action pf-m-favorite"
660
+ type="button"
661
+ aria-label="Not starred"
662
+ >
663
+ <span class="pf-c-menu__item-action-icon">
664
+ <i
665
+ class="fas fa-star"
666
+ aria-hidden="true"
667
+ ></i>
668
+ </span>
669
+ </button>
670
+ </li>
671
+ </ul>
672
+ </section>
673
+ <hr class="pf-c-divider" />
674
+ <section class="pf-c-menu__group">
675
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
676
+ <ul class="pf-c-menu__list" role="menu">
677
+ <li class="pf-c-menu__list-item" role="none">
678
+ <a
679
+ class="pf-c-menu__item"
680
+ href="#"
681
+ role="menuitem"
682
+ >
683
+ <span class="pf-c-menu__item-main">
684
+ <span
685
+ class="pf-c-menu__item-text"
686
+ >Link 1</span>
687
+ </span>
688
+ </a>
689
+ <button
690
+ class="pf-c-menu__item-action pf-m-favorite"
691
+ type="button"
692
+ aria-label="Not starred"
693
+ >
694
+ <span class="pf-c-menu__item-action-icon">
695
+ <i
696
+ class="fas fa-star"
697
+ aria-hidden="true"
698
+ ></i>
699
+ </span>
700
+ </button>
701
+ </li>
702
+ <li class="pf-c-menu__list-item" role="none">
703
+ <a
704
+ class="pf-c-menu__item"
705
+ href="#"
706
+ role="menuitem"
707
+ target="_blank"
708
+ >
709
+ <span class="pf-c-menu__item-main">
710
+ <span
711
+ class="pf-c-menu__item-text"
712
+ >Link 2</span>
713
+ <span
714
+ class="pf-c-menu__item-external-icon"
715
+ >
716
+ <i
717
+ class="fas fa-external-link-alt"
718
+ aria-hidden="true"
719
+ ></i>
720
+ </span>
721
+ <span
722
+ class="pf-screen-reader"
723
+ >(opens new window)</span>
724
+ </span>
725
+ </a>
726
+ <button
727
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
728
+ type="button"
729
+ aria-label="Starred"
730
+ >
731
+ <span class="pf-c-menu__item-action-icon">
732
+ <i
733
+ class="fas fa-star"
734
+ aria-hidden="true"
735
+ ></i>
736
+ </span>
737
+ </button>
738
+ </li>
739
+ </ul>
740
+ </section>
741
+ </div>
742
+ </li>
743
+ </ul>
744
+ </section>
745
+ </div>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
751
+ <div
752
+ class="pf-c-dropdown pf-m-full-height"
753
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
754
+ >
755
+ <button
756
+ class="pf-c-dropdown__toggle"
757
+ id="modal-basic-example-masthead-profile-button"
758
+ aria-expanded="false"
759
+ type="button"
760
+ >
761
+ <span class="pf-c-dropdown__toggle-image">
762
+ <img
763
+ class="pf-c-avatar"
764
+ src="/assets/images/img_avatar.svg"
765
+ alt="Avatar image"
766
+ />
767
+ </span>
768
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
769
+ <span class="pf-c-dropdown__toggle-icon">
770
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
771
+ </span>
772
+ </button>
773
+ <div class="pf-c-dropdown__menu" hidden>
774
+ <section class="pf-c-dropdown__group">
775
+ <div class="pf-c-dropdown__menu-item pf-m-text">
776
+ <div class="pf-u-font-size-sm">Account number:</div>
777
+ <div>123456789</div>
778
+ </div>
779
+ <div class="pf-c-dropdown__menu-item pf-m-text">
780
+ <div class="pf-u-font-size-sm">Username:</div>
781
+ <div>mshaksho@redhat.com</div>
782
+ </div>
783
+ </section>
784
+ <hr class="pf-c-divider" />
785
+ <section class="pf-c-dropdown__group">
786
+ <ul>
787
+ <li>
788
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
789
+ </li>
790
+ <li>
791
+ <a
792
+ class="pf-c-dropdown__menu-item"
793
+ href="#"
794
+ >User management</a>
795
+ </li>
796
+ <li>
797
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
798
+ </li>
799
+ </ul>
800
+ </section>
801
+ </div>
802
+ </div>
803
+ </div>
804
+ </div>
805
+ </div>
806
+ </div>
807
+ </div>
808
+ </header>
809
+ <div class="pf-c-page__sidebar">
810
+ <div class="pf-c-page__sidebar-body">
811
+ <nav
812
+ class="pf-c-nav"
813
+ id="modal-basic-example-primary-nav"
814
+ aria-label="Global"
815
+ >
816
+ <ul class="pf-c-nav__list">
817
+ <li class="pf-c-nav__item">
818
+ <a href="#" class="pf-c-nav__link">System panel</a>
819
+ </li>
820
+ <li class="pf-c-nav__item">
821
+ <a
822
+ href="#"
823
+ class="pf-c-nav__link pf-m-current"
824
+ aria-current="page"
825
+ >Policy</a>
826
+ </li>
827
+ <li class="pf-c-nav__item">
828
+ <a href="#" class="pf-c-nav__link">Authentication</a>
829
+ </li>
830
+ <li class="pf-c-nav__item">
831
+ <a href="#" class="pf-c-nav__link">Network services</a>
832
+ </li>
833
+ <li class="pf-c-nav__item">
834
+ <a href="#" class="pf-c-nav__link">Server</a>
835
+ </li>
836
+ </ul>
837
+ </nav>
838
+ </div>
839
+ </div>
840
+ <main
841
+ class="pf-c-page__main"
842
+ tabindex="-1"
843
+ id="main-content-modal-basic-example"
844
+ >
845
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
846
+ <div class="pf-c-page__main-body">
847
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
848
+ <ol class="pf-c-breadcrumb__list">
849
+ <li class="pf-c-breadcrumb__item">
850
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
851
+ </li>
852
+ <li class="pf-c-breadcrumb__item">
853
+ <span class="pf-c-breadcrumb__item-divider">
854
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
855
+ </span>
856
+
857
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
858
+ </li>
859
+ <li class="pf-c-breadcrumb__item">
860
+ <span class="pf-c-breadcrumb__item-divider">
861
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
862
+ </span>
863
+
864
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
865
+ </li>
866
+ <li class="pf-c-breadcrumb__item">
867
+ <span class="pf-c-breadcrumb__item-divider">
868
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
869
+ </span>
870
+
871
+ <a
872
+ href="#"
873
+ class="pf-c-breadcrumb__link pf-m-current"
874
+ aria-current="page"
875
+ >Section landing</a>
876
+ </li>
877
+ </ol>
878
+ </nav>
879
+ </div>
880
+ </section>
881
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
882
+ <div class="pf-c-page__main-body">
883
+ <div class="pf-c-content">
884
+ <h1>Main title</h1>
885
+ <p>This is a full page demo.</p>
886
+ </div>
887
+ </div>
888
+ </section>
889
+ <section class="pf-c-page__main-section pf-m-limit-width">
890
+ <div class="pf-c-page__main-body">
891
+ <div class="pf-l-gallery pf-m-gutter">
892
+ <div class="pf-c-card">
893
+ <div class="pf-c-card__body">This is a card</div>
894
+ </div>
895
+ <div class="pf-c-card">
896
+ <div class="pf-c-card__body">This is a card</div>
897
+ </div>
898
+ <div class="pf-c-card">
899
+ <div class="pf-c-card__body">This is a card</div>
900
+ </div>
901
+ <div class="pf-c-card">
902
+ <div class="pf-c-card__body">This is a card</div>
903
+ </div>
904
+ <div class="pf-c-card">
905
+ <div class="pf-c-card__body">This is a card</div>
906
+ </div>
907
+ <div class="pf-c-card">
908
+ <div class="pf-c-card__body">This is a card</div>
909
+ </div>
910
+ <div class="pf-c-card">
911
+ <div class="pf-c-card__body">This is a card</div>
912
+ </div>
913
+ <div class="pf-c-card">
914
+ <div class="pf-c-card__body">This is a card</div>
915
+ </div>
916
+ <div class="pf-c-card">
917
+ <div class="pf-c-card__body">This is a card</div>
918
+ </div>
919
+ <div class="pf-c-card">
920
+ <div class="pf-c-card__body">This is a card</div>
921
+ </div>
922
+ </div>
923
+ </div>
924
+ </section>
925
+ </main>
926
+ </div>
12
927
  <div class="pf-c-backdrop">
13
928
  <div class="pf-l-bullseye">
14
929
  <div