@patternfly/patternfly 4.184.3 → 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.
- package/assets/icons/iconUnicodes.json +1 -0
- package/assets/pficon/pficon.scss +6 -0
- package/assets/pficon/pficon.woff +0 -0
- package/assets/pficon/pficon.woff2 +0 -0
- package/base/patternfly-icons.css +5 -1
- package/base/patternfly-pf-icons.css +5 -1
- package/components/Masthead/masthead.css +1 -1
- package/components/Masthead/masthead.scss +1 -1
- package/components/Menu/menu.css +1 -0
- package/components/Menu/menu.scss +1 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +916 -1
- package/docs/demos/Alert/examples/Alert.md +2484 -490
- package/docs/demos/BackToTop/examples/BackToTop.md +785 -140
- package/docs/demos/Banner/examples/Banner.md +2074 -1466
- package/docs/demos/Button/examples/Button.md +33 -21
- package/docs/demos/CardView/examples/CardView.md +1065 -260
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1580 -1638
- package/docs/demos/Dashboard/examples/Dashboard.md +40 -6
- package/docs/demos/DataList/examples/DataList.md +3777 -1553
- package/docs/demos/DescriptionList/examples/DescriptionList.md +55 -61
- package/docs/demos/Drawer/examples/Drawer.md +2554 -439
- package/docs/demos/JumpLinks/examples/JumpLinks.md +3223 -596
- package/docs/demos/Masthead/examples/Masthead.md +9 -20
- package/docs/demos/Modal/examples/Modal.md +5521 -34
- package/docs/demos/Nav/examples/Nav.md +6453 -1201
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +4036 -940
- package/docs/demos/Page/examples/Page.md +14 -35
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +6003 -1512
- package/docs/demos/Skeleton/examples/Skeleton.md +831 -149
- package/docs/demos/Table/examples/Table.md +26 -65
- package/docs/demos/Tabs/examples/Tabs.md +10149 -4897
- package/docs/demos/Toolbar/examples/Toolbar.md +797 -149
- package/docs/demos/Wizard/examples/Wizard.md +3418 -288
- package/docs/pages/icons.md +1 -0
- package/icons/pf-icons.json +1 -0
- package/package.json +1 -1
- package/patternfly-base-no-reset.css +5 -1
- package/patternfly-base.css +5 -1
- package/patternfly-no-reset.css +7 -2
- package/patternfly.css +7 -2
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -11,7 +11,6 @@ section: components
|
|
|
11
11
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
12
12
|
href="#main-content-context-selector-in-masthead"
|
|
13
13
|
>Skip to content</a>
|
|
14
|
-
|
|
15
14
|
<header class="pf-c-masthead" id="context-selector-in-masthead-masthead">
|
|
16
15
|
<span class="pf-c-masthead__toggle">
|
|
17
16
|
<button
|
|
@@ -305,861 +304,806 @@ section: components
|
|
|
305
304
|
### Context selector in sidebar
|
|
306
305
|
|
|
307
306
|
```html isFullscreen
|
|
308
|
-
<div class="pf-c-page" id="context-selector-in-sidebar">
|
|
309
|
-
<
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
307
|
+
<div class="pf-c-page" id="context-selector-in-sidebar-example">
|
|
308
|
+
<a
|
|
309
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
310
|
+
href="#main-content-context-selector-in-sidebar-example"
|
|
311
|
+
>Skip to content</a>
|
|
312
|
+
<header
|
|
313
|
+
class="pf-c-masthead"
|
|
314
|
+
id="context-selector-in-sidebar-example-masthead"
|
|
315
|
+
>
|
|
316
|
+
<span class="pf-c-masthead__toggle">
|
|
317
|
+
<button
|
|
318
|
+
class="pf-c-button pf-m-plain"
|
|
319
|
+
type="button"
|
|
320
|
+
aria-label="Global navigation"
|
|
321
|
+
>
|
|
322
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
323
|
+
</button>
|
|
324
|
+
</span>
|
|
325
|
+
<div class="pf-c-masthead__main">
|
|
326
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
327
|
+
<picture
|
|
328
|
+
class="pf-c-brand pf-m-picture"
|
|
329
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
321
330
|
>
|
|
322
|
-
<
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
327
|
-
<
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
331
|
+
<source
|
|
332
|
+
media="(min-width: 768px)"
|
|
333
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
334
|
+
/>
|
|
335
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
336
|
+
<img
|
|
337
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
338
|
+
alt="Fallback patternFly default logo"
|
|
339
|
+
/>
|
|
340
|
+
</picture>
|
|
341
|
+
</a>
|
|
342
|
+
</div>
|
|
343
|
+
<div class="pf-c-masthead__content">
|
|
344
|
+
<div
|
|
345
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
346
|
+
id="context-selector-in-sidebar-example-masthead-toolbar"
|
|
347
|
+
>
|
|
348
|
+
<div class="pf-c-toolbar__content">
|
|
349
|
+
<div class="pf-c-toolbar__content-section">
|
|
350
|
+
<div
|
|
351
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
352
|
+
>
|
|
353
|
+
<div class="pf-c-toolbar__item">
|
|
354
|
+
<button
|
|
355
|
+
class="pf-c-button pf-m-plain"
|
|
356
|
+
type="button"
|
|
357
|
+
aria-label="Notifications"
|
|
358
|
+
>
|
|
359
|
+
<span class="pf-c-notification-badge">
|
|
360
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
361
|
+
</span>
|
|
362
|
+
</button>
|
|
363
|
+
</div>
|
|
347
364
|
<div
|
|
348
|
-
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-
|
|
365
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
349
366
|
>
|
|
350
367
|
<div class="pf-c-toolbar__item">
|
|
351
|
-
<
|
|
352
|
-
class="pf-c-
|
|
353
|
-
|
|
354
|
-
|
|
368
|
+
<nav
|
|
369
|
+
class="pf-c-app-launcher"
|
|
370
|
+
aria-label="Application launcher"
|
|
371
|
+
id="context-selector-in-sidebar-example-masthead-icon-group--app-launcher"
|
|
355
372
|
>
|
|
356
|
-
<
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
<div
|
|
362
|
-
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
363
|
-
>
|
|
364
|
-
<div class="pf-c-toolbar__item">
|
|
365
|
-
<nav
|
|
366
|
-
class="pf-c-app-launcher"
|
|
373
|
+
<button
|
|
374
|
+
class="pf-c-app-launcher__toggle"
|
|
375
|
+
type="button"
|
|
376
|
+
id="context-selector-in-sidebar-example-masthead-icon-group--app-launcher-button"
|
|
377
|
+
aria-expanded="false"
|
|
367
378
|
aria-label="Application launcher"
|
|
368
|
-
id="-icon-group--app-launcher"
|
|
369
379
|
>
|
|
370
|
-
<
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
>
|
|
377
|
-
<
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
<div class="pf-c-search-input__bar">
|
|
386
|
-
<span class="pf-c-search-input__text">
|
|
387
|
-
<span class="pf-c-search-input__icon">
|
|
388
|
-
<i
|
|
389
|
-
class="fas fa-search fa-fw"
|
|
390
|
-
aria-hidden="true"
|
|
391
|
-
></i>
|
|
392
|
-
</span>
|
|
393
|
-
<input
|
|
394
|
-
class="pf-c-search-input__text-input"
|
|
395
|
-
type="text"
|
|
396
|
-
placeholder="Filter by name"
|
|
397
|
-
aria-label="Filter by name"
|
|
398
|
-
/>
|
|
380
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
381
|
+
</button>
|
|
382
|
+
<div
|
|
383
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
384
|
+
hidden
|
|
385
|
+
>
|
|
386
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
387
|
+
<div class="pf-c-search-input">
|
|
388
|
+
<div class="pf-c-search-input__bar">
|
|
389
|
+
<span class="pf-c-search-input__text">
|
|
390
|
+
<span class="pf-c-search-input__icon">
|
|
391
|
+
<i
|
|
392
|
+
class="fas fa-search fa-fw"
|
|
393
|
+
aria-hidden="true"
|
|
394
|
+
></i>
|
|
399
395
|
</span>
|
|
400
|
-
|
|
396
|
+
<input
|
|
397
|
+
class="pf-c-search-input__text-input"
|
|
398
|
+
type="text"
|
|
399
|
+
placeholder="Filter by name"
|
|
400
|
+
aria-label="Filter by name"
|
|
401
|
+
/>
|
|
402
|
+
</span>
|
|
401
403
|
</div>
|
|
402
404
|
</div>
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
<i
|
|
415
|
-
class="fas fa-external-link-alt"
|
|
416
|
-
aria-hidden="true"
|
|
417
|
-
></i>
|
|
418
|
-
</span>
|
|
419
|
-
<span
|
|
420
|
-
class="pf-screen-reader"
|
|
421
|
-
>(opens new window)</span>
|
|
422
|
-
</a>
|
|
423
|
-
<button
|
|
424
|
-
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
425
|
-
type="button"
|
|
426
|
-
aria-label="Favorite"
|
|
405
|
+
</div>
|
|
406
|
+
<section class="pf-c-app-launcher__group">
|
|
407
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
408
|
+
<ul>
|
|
409
|
+
<li
|
|
410
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
411
|
+
>
|
|
412
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
413
|
+
Link 1
|
|
414
|
+
<span
|
|
415
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
427
416
|
>
|
|
428
|
-
<i
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
417
|
+
<i
|
|
418
|
+
class="fas fa-external-link-alt"
|
|
419
|
+
aria-hidden="true"
|
|
420
|
+
></i>
|
|
421
|
+
</span>
|
|
422
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
423
|
+
</a>
|
|
424
|
+
<button
|
|
425
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
426
|
+
type="button"
|
|
427
|
+
aria-label="Favorite"
|
|
433
428
|
>
|
|
434
|
-
<
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
<span
|
|
445
|
-
class="pf-screen-reader"
|
|
446
|
-
>(opens new window)</span>
|
|
447
|
-
</a>
|
|
448
|
-
<button
|
|
449
|
-
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
450
|
-
type="button"
|
|
451
|
-
aria-label="Favorite"
|
|
429
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
430
|
+
</button>
|
|
431
|
+
</li>
|
|
432
|
+
<li
|
|
433
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
434
|
+
>
|
|
435
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
436
|
+
Link 2
|
|
437
|
+
<span
|
|
438
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
452
439
|
>
|
|
453
|
-
<i
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
440
|
+
<i
|
|
441
|
+
class="fas fa-external-link-alt"
|
|
442
|
+
aria-hidden="true"
|
|
443
|
+
></i>
|
|
444
|
+
</span>
|
|
445
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
446
|
+
</a>
|
|
447
|
+
<button
|
|
448
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
449
|
+
type="button"
|
|
450
|
+
aria-label="Favorite"
|
|
464
451
|
>
|
|
465
|
-
<
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
<
|
|
480
|
-
class="pf-c-app-launcher__menu-item
|
|
481
|
-
type="button"
|
|
482
|
-
aria-label="Favorite"
|
|
452
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
453
|
+
</button>
|
|
454
|
+
</li>
|
|
455
|
+
</ul>
|
|
456
|
+
</section>
|
|
457
|
+
<hr class="pf-c-divider" />
|
|
458
|
+
<section class="pf-c-app-launcher__group">
|
|
459
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
460
|
+
<ul>
|
|
461
|
+
<li
|
|
462
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
463
|
+
>
|
|
464
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
465
|
+
Link 1
|
|
466
|
+
<span
|
|
467
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
483
468
|
>
|
|
484
|
-
<i
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
469
|
+
<i
|
|
470
|
+
class="fas fa-external-link-alt"
|
|
471
|
+
aria-hidden="true"
|
|
472
|
+
></i>
|
|
473
|
+
</span>
|
|
474
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
475
|
+
</a>
|
|
476
|
+
<button
|
|
477
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
478
|
+
type="button"
|
|
479
|
+
aria-label="Favorite"
|
|
489
480
|
>
|
|
490
|
-
<
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
<span
|
|
501
|
-
class="pf-screen-reader"
|
|
502
|
-
>(opens new window)</span>
|
|
503
|
-
</a>
|
|
504
|
-
<button
|
|
505
|
-
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
506
|
-
type="button"
|
|
507
|
-
aria-label="Favorite"
|
|
481
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
482
|
+
</button>
|
|
483
|
+
</li>
|
|
484
|
+
<li
|
|
485
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
486
|
+
>
|
|
487
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
488
|
+
Link 2
|
|
489
|
+
<span
|
|
490
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
508
491
|
>
|
|
509
|
-
<i
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
525
|
-
>
|
|
526
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
527
|
-
</button>
|
|
528
|
-
<ul
|
|
529
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
530
|
-
aria-labelledby="-settings-button"
|
|
531
|
-
hidden
|
|
532
|
-
>
|
|
533
|
-
<li>
|
|
534
|
-
<button
|
|
535
|
-
class="pf-c-dropdown__menu-item"
|
|
536
|
-
type="button"
|
|
537
|
-
>Settings</button>
|
|
538
|
-
</li>
|
|
539
|
-
<li>
|
|
540
|
-
<button
|
|
541
|
-
class="pf-c-dropdown__menu-item"
|
|
542
|
-
type="button"
|
|
543
|
-
>Use the beta release</button>
|
|
544
|
-
</li>
|
|
545
|
-
</ul>
|
|
546
|
-
</div>
|
|
547
|
-
</div>
|
|
548
|
-
<div class="pf-c-toolbar__item">
|
|
549
|
-
<div class="pf-c-dropdown">
|
|
550
|
-
<button
|
|
551
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
552
|
-
id="-help-button"
|
|
553
|
-
aria-expanded="false"
|
|
554
|
-
type="button"
|
|
555
|
-
aria-label="Help"
|
|
556
|
-
>
|
|
557
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
558
|
-
</button>
|
|
559
|
-
<ul
|
|
560
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
561
|
-
aria-labelledby="-help-button"
|
|
562
|
-
hidden
|
|
563
|
-
>
|
|
564
|
-
<li>
|
|
565
|
-
<button
|
|
566
|
-
class="pf-c-dropdown__menu-item"
|
|
567
|
-
type="button"
|
|
568
|
-
>Support options</button>
|
|
569
|
-
</li>
|
|
570
|
-
<li>
|
|
571
|
-
<button
|
|
572
|
-
class="pf-c-dropdown__menu-item"
|
|
573
|
-
type="button"
|
|
574
|
-
>Open support case</button>
|
|
575
|
-
</li>
|
|
576
|
-
<li>
|
|
577
|
-
<button
|
|
578
|
-
class="pf-c-dropdown__menu-item"
|
|
579
|
-
type="button"
|
|
580
|
-
>API documentation</button>
|
|
581
|
-
</li>
|
|
582
|
-
</ul>
|
|
492
|
+
<i
|
|
493
|
+
class="fas fa-external-link-alt"
|
|
494
|
+
aria-hidden="true"
|
|
495
|
+
></i>
|
|
496
|
+
</span>
|
|
497
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
498
|
+
</a>
|
|
499
|
+
<button
|
|
500
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
501
|
+
type="button"
|
|
502
|
+
aria-label="Favorite"
|
|
503
|
+
>
|
|
504
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
505
|
+
</button>
|
|
506
|
+
</li>
|
|
507
|
+
</ul>
|
|
508
|
+
</section>
|
|
583
509
|
</div>
|
|
584
|
-
</
|
|
510
|
+
</nav>
|
|
585
511
|
</div>
|
|
586
|
-
<div class="pf-c-toolbar__item
|
|
512
|
+
<div class="pf-c-toolbar__item">
|
|
587
513
|
<div class="pf-c-dropdown">
|
|
588
514
|
<button
|
|
589
|
-
class="pf-c-
|
|
590
|
-
|
|
515
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
516
|
+
id="context-selector-in-sidebar-example-masthead-settings-button"
|
|
591
517
|
aria-expanded="false"
|
|
592
|
-
|
|
518
|
+
type="button"
|
|
519
|
+
aria-label="Settings"
|
|
593
520
|
>
|
|
594
|
-
<i class="fas fa-
|
|
521
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
595
522
|
</button>
|
|
596
|
-
<
|
|
597
|
-
class="pf-c-
|
|
523
|
+
<ul
|
|
524
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
525
|
+
aria-labelledby="context-selector-in-sidebar-example-masthead-settings-button"
|
|
598
526
|
hidden
|
|
599
527
|
>
|
|
600
|
-
<
|
|
601
|
-
<
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
528
|
+
<li>
|
|
529
|
+
<button
|
|
530
|
+
class="pf-c-dropdown__menu-item"
|
|
531
|
+
type="button"
|
|
532
|
+
>Settings</button>
|
|
533
|
+
</li>
|
|
534
|
+
<li>
|
|
535
|
+
<button
|
|
536
|
+
class="pf-c-dropdown__menu-item"
|
|
537
|
+
type="button"
|
|
538
|
+
>Use the beta release</button>
|
|
539
|
+
</li>
|
|
540
|
+
</ul>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
<div class="pf-c-toolbar__item">
|
|
544
|
+
<div class="pf-c-dropdown">
|
|
545
|
+
<button
|
|
546
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
547
|
+
id="context-selector-in-sidebar-example-masthead-help-button"
|
|
548
|
+
aria-expanded="false"
|
|
549
|
+
type="button"
|
|
550
|
+
aria-label="Help"
|
|
551
|
+
>
|
|
552
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
553
|
+
</button>
|
|
554
|
+
<ul
|
|
555
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
556
|
+
aria-labelledby="context-selector-in-sidebar-example-masthead-help-button"
|
|
557
|
+
hidden
|
|
558
|
+
>
|
|
559
|
+
<li>
|
|
560
|
+
<button
|
|
561
|
+
class="pf-c-dropdown__menu-item"
|
|
562
|
+
type="button"
|
|
563
|
+
>Support options</button>
|
|
564
|
+
</li>
|
|
565
|
+
<li>
|
|
566
|
+
<button
|
|
567
|
+
class="pf-c-dropdown__menu-item"
|
|
568
|
+
type="button"
|
|
569
|
+
>Open support case</button>
|
|
570
|
+
</li>
|
|
571
|
+
<li>
|
|
572
|
+
<button
|
|
573
|
+
class="pf-c-dropdown__menu-item"
|
|
574
|
+
type="button"
|
|
575
|
+
>API documentation</button>
|
|
576
|
+
</li>
|
|
577
|
+
</ul>
|
|
578
|
+
</div>
|
|
579
|
+
</div>
|
|
580
|
+
</div>
|
|
581
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
582
|
+
<div class="pf-c-dropdown">
|
|
583
|
+
<button
|
|
584
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
585
|
+
type="button"
|
|
586
|
+
aria-expanded="false"
|
|
587
|
+
aria-label="Actions"
|
|
588
|
+
>
|
|
589
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
590
|
+
</button>
|
|
591
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
592
|
+
<div class="pf-c-menu__content">
|
|
593
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
594
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
595
|
+
<li
|
|
596
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
597
|
+
role="none"
|
|
598
|
+
>
|
|
599
|
+
<button
|
|
600
|
+
class="pf-c-menu__item"
|
|
601
|
+
type="button"
|
|
602
|
+
disabled
|
|
603
|
+
role="menuitem"
|
|
606
604
|
>
|
|
607
|
-
<
|
|
608
|
-
class="pf-
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
class="pf-c-menu__list-item pf-m-disabled"
|
|
623
|
-
role="none"
|
|
605
|
+
<span class="pf-c-menu__item-description">
|
|
606
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
607
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
608
|
+
</span>
|
|
609
|
+
</button>
|
|
610
|
+
</li>
|
|
611
|
+
<li
|
|
612
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
613
|
+
role="none"
|
|
614
|
+
>
|
|
615
|
+
<button
|
|
616
|
+
class="pf-c-menu__item"
|
|
617
|
+
type="button"
|
|
618
|
+
disabled
|
|
619
|
+
role="menuitem"
|
|
624
620
|
>
|
|
625
|
-
<
|
|
626
|
-
class="pf-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
|
|
647
|
-
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
<
|
|
680
|
-
class="pf-c-menu__item"
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
<span class="pf-c-menu__item-main">
|
|
686
|
-
<span class="pf-c-menu__item-icon">
|
|
687
|
-
<i
|
|
688
|
-
class="fas fa-fw fa-cog"
|
|
689
|
-
aria-hidden="true"
|
|
690
|
-
></i>
|
|
691
|
-
</span>
|
|
692
|
-
<span class="pf-c-menu__item-text">Settings</span>
|
|
693
|
-
<span class="pf-c-menu__item-toggle-icon">
|
|
694
|
-
<i class="fas fa-angle-right"></i>
|
|
695
|
-
</span>
|
|
696
|
-
</span>
|
|
697
|
-
</button>
|
|
698
|
-
<div class="pf-c-menu" hidden>
|
|
699
|
-
<div class="pf-c-menu__content">
|
|
700
|
-
<ul class="pf-c-menu__list" role="menu">
|
|
701
|
-
<li
|
|
702
|
-
class="pf-c-menu__list-item pf-m-drill-up"
|
|
703
|
-
role="none"
|
|
704
|
-
>
|
|
705
|
-
<button
|
|
706
|
-
class="pf-c-menu__item"
|
|
707
|
-
type="button"
|
|
708
|
-
role="menuitem"
|
|
709
|
-
>
|
|
710
|
-
<span class="pf-c-menu__item-main">
|
|
711
|
-
<span
|
|
712
|
-
class="pf-c-menu__item-toggle-icon"
|
|
713
|
-
>
|
|
714
|
-
<i class="fas fa-angle-left"></i>
|
|
715
|
-
</span>
|
|
716
|
-
<span class="pf-c-menu__item-icon">
|
|
717
|
-
<i
|
|
718
|
-
class="fas fa-fw fa-cog"
|
|
719
|
-
aria-hidden="true"
|
|
720
|
-
></i>
|
|
721
|
-
</span>
|
|
722
|
-
<span
|
|
723
|
-
class="pf-c-menu__item-text"
|
|
724
|
-
>Settings</span>
|
|
725
|
-
</span>
|
|
726
|
-
</button>
|
|
727
|
-
</li>
|
|
728
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
729
|
-
<li
|
|
730
|
-
class="pf-c-menu__list-item"
|
|
731
|
-
role="none"
|
|
732
|
-
>
|
|
733
|
-
<a
|
|
734
|
-
class="pf-c-menu__item"
|
|
735
|
-
href="#"
|
|
736
|
-
role="menuitem"
|
|
737
|
-
>
|
|
738
|
-
<span class="pf-c-menu__item-main">
|
|
739
|
-
<span
|
|
740
|
-
class="pf-c-menu__item-text"
|
|
741
|
-
>Customer support</span>
|
|
742
|
-
</span>
|
|
743
|
-
</a>
|
|
744
|
-
</li>
|
|
745
|
-
<li
|
|
746
|
-
class="pf-c-menu__list-item"
|
|
747
|
-
role="none"
|
|
748
|
-
>
|
|
749
|
-
<a
|
|
750
|
-
class="pf-c-menu__item"
|
|
751
|
-
href="#"
|
|
752
|
-
role="menuitem"
|
|
753
|
-
>
|
|
754
|
-
<span class="pf-c-menu__item-main">
|
|
755
|
-
<span
|
|
756
|
-
class="pf-c-menu__item-text"
|
|
757
|
-
>About</span>
|
|
758
|
-
</span>
|
|
759
|
-
</a>
|
|
760
|
-
</li>
|
|
761
|
-
</ul>
|
|
762
|
-
</div>
|
|
763
|
-
</div>
|
|
764
|
-
</li>
|
|
765
|
-
|
|
766
|
-
<li class="pf-c-menu__list-item" role="none">
|
|
767
|
-
<button
|
|
768
|
-
class="pf-c-menu__item"
|
|
769
|
-
type="button"
|
|
770
|
-
role="menuitem"
|
|
771
|
-
aria-expanded="false"
|
|
772
|
-
>
|
|
773
|
-
<span class="pf-c-menu__item-main">
|
|
774
|
-
<span class="pf-c-menu__item-icon">
|
|
775
|
-
<i
|
|
776
|
-
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
777
|
-
aria-hidden="true"
|
|
778
|
-
></i>
|
|
779
|
-
</span>
|
|
780
|
-
<span class="pf-c-menu__item-text">Help</span>
|
|
781
|
-
<span class="pf-c-menu__item-toggle-icon">
|
|
782
|
-
<i class="fas fa-angle-right"></i>
|
|
783
|
-
</span>
|
|
621
|
+
<span class="pf-c-menu__item-description">
|
|
622
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
623
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
624
|
+
</span>
|
|
625
|
+
</button>
|
|
626
|
+
</li>
|
|
627
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
628
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
629
|
+
<button
|
|
630
|
+
class="pf-c-menu__item"
|
|
631
|
+
type="button"
|
|
632
|
+
role="menuitem"
|
|
633
|
+
>
|
|
634
|
+
<span class="pf-c-menu__item-main">
|
|
635
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
636
|
+
</span>
|
|
637
|
+
</button>
|
|
638
|
+
</li>
|
|
639
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
640
|
+
<button
|
|
641
|
+
class="pf-c-menu__item"
|
|
642
|
+
type="button"
|
|
643
|
+
role="menuitem"
|
|
644
|
+
>
|
|
645
|
+
<span class="pf-c-menu__item-main">
|
|
646
|
+
<span
|
|
647
|
+
class="pf-c-menu__item-text"
|
|
648
|
+
>User management</span>
|
|
649
|
+
</span>
|
|
650
|
+
</button>
|
|
651
|
+
</li>
|
|
652
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
653
|
+
<button
|
|
654
|
+
class="pf-c-menu__item"
|
|
655
|
+
type="button"
|
|
656
|
+
role="menuitem"
|
|
657
|
+
>
|
|
658
|
+
<span class="pf-c-menu__item-main">
|
|
659
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
660
|
+
</span>
|
|
661
|
+
</button>
|
|
662
|
+
</li>
|
|
663
|
+
</ul>
|
|
664
|
+
</section>
|
|
665
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
666
|
+
<section class="pf-c-menu__group">
|
|
667
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
668
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
669
|
+
<button
|
|
670
|
+
class="pf-c-menu__item"
|
|
671
|
+
type="button"
|
|
672
|
+
role="menuitem"
|
|
673
|
+
aria-expanded="false"
|
|
674
|
+
>
|
|
675
|
+
<span class="pf-c-menu__item-main">
|
|
676
|
+
<span class="pf-c-menu__item-icon">
|
|
677
|
+
<i
|
|
678
|
+
class="fas fa-fw fa-cog"
|
|
679
|
+
aria-hidden="true"
|
|
680
|
+
></i>
|
|
784
681
|
</span>
|
|
785
|
-
|
|
786
|
-
|
|
787
|
-
|
|
788
|
-
<ul class="pf-c-menu__list" role="menu">
|
|
789
|
-
<li
|
|
790
|
-
class="pf-c-menu__list-item pf-m-drill-up"
|
|
791
|
-
role="none"
|
|
792
|
-
>
|
|
793
|
-
<button
|
|
794
|
-
class="pf-c-menu__item"
|
|
795
|
-
type="button"
|
|
796
|
-
role="menuitem"
|
|
797
|
-
>
|
|
798
|
-
<span class="pf-c-menu__item-main">
|
|
799
|
-
<span
|
|
800
|
-
class="pf-c-menu__item-toggle-icon"
|
|
801
|
-
>
|
|
802
|
-
<i class="fas fa-angle-left"></i>
|
|
803
|
-
</span>
|
|
804
|
-
<span class="pf-c-menu__item-icon">
|
|
805
|
-
<i
|
|
806
|
-
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
807
|
-
aria-hidden="true"
|
|
808
|
-
></i>
|
|
809
|
-
</span>
|
|
810
|
-
<span
|
|
811
|
-
class="pf-c-menu__item-text"
|
|
812
|
-
>Help</span>
|
|
813
|
-
</span>
|
|
814
|
-
</button>
|
|
815
|
-
</li>
|
|
816
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
817
|
-
<li
|
|
818
|
-
class="pf-c-menu__list-item"
|
|
819
|
-
role="none"
|
|
820
|
-
>
|
|
821
|
-
<a
|
|
822
|
-
class="pf-c-menu__item"
|
|
823
|
-
href="#"
|
|
824
|
-
role="menuitem"
|
|
825
|
-
>
|
|
826
|
-
<span class="pf-c-menu__item-main">
|
|
827
|
-
<span
|
|
828
|
-
class="pf-c-menu__item-text"
|
|
829
|
-
>Support options</span>
|
|
830
|
-
</span>
|
|
831
|
-
</a>
|
|
832
|
-
</li>
|
|
833
|
-
<li
|
|
834
|
-
class="pf-c-menu__list-item"
|
|
835
|
-
role="none"
|
|
836
|
-
>
|
|
837
|
-
<a
|
|
838
|
-
class="pf-c-menu__item"
|
|
839
|
-
href="#"
|
|
840
|
-
role="menuitem"
|
|
841
|
-
>
|
|
842
|
-
<span class="pf-c-menu__item-main">
|
|
843
|
-
<span
|
|
844
|
-
class="pf-c-menu__item-text"
|
|
845
|
-
>Open support case</span>
|
|
846
|
-
</span>
|
|
847
|
-
</a>
|
|
848
|
-
</li>
|
|
849
|
-
<li
|
|
850
|
-
class="pf-c-menu__list-item"
|
|
851
|
-
role="none"
|
|
852
|
-
>
|
|
853
|
-
<a
|
|
854
|
-
class="pf-c-menu__item"
|
|
855
|
-
href="#"
|
|
856
|
-
role="menuitem"
|
|
857
|
-
>
|
|
858
|
-
<span class="pf-c-menu__item-main">
|
|
859
|
-
<span
|
|
860
|
-
class="pf-c-menu__item-text"
|
|
861
|
-
>API documentation</span>
|
|
862
|
-
</span>
|
|
863
|
-
</a>
|
|
864
|
-
</li>
|
|
865
|
-
</ul>
|
|
866
|
-
</div>
|
|
867
|
-
</div>
|
|
868
|
-
</li>
|
|
869
|
-
|
|
870
|
-
<li class="pf-c-menu__list-item" role="none">
|
|
871
|
-
<button
|
|
872
|
-
class="pf-c-menu__item"
|
|
873
|
-
type="button"
|
|
874
|
-
role="menuitem"
|
|
875
|
-
>
|
|
876
|
-
<span class="pf-c-menu__item-main">
|
|
877
|
-
<span class="pf-c-menu__item-icon">
|
|
878
|
-
<i
|
|
879
|
-
class="fas fa-fw fa-th"
|
|
880
|
-
aria-hidden="true"
|
|
881
|
-
></i>
|
|
882
|
-
</span>
|
|
883
|
-
<span
|
|
884
|
-
class="pf-c-menu__item-text"
|
|
885
|
-
>Application launcher</span>
|
|
886
|
-
<span class="pf-c-menu__item-toggle-icon">
|
|
887
|
-
<i class="fas fa-angle-right"></i>
|
|
888
|
-
</span>
|
|
682
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
683
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
684
|
+
<i class="fas fa-angle-right"></i>
|
|
889
685
|
</span>
|
|
890
|
-
</
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
686
|
+
</span>
|
|
687
|
+
</button>
|
|
688
|
+
<div class="pf-c-menu" hidden>
|
|
689
|
+
<div class="pf-c-menu__content">
|
|
690
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
691
|
+
<li
|
|
692
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
693
|
+
role="none"
|
|
897
694
|
>
|
|
898
|
-
<
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
<span class="pf-c-menu__item-icon">
|
|
903
|
-
<i
|
|
904
|
-
class="fas fa-fw fa-th"
|
|
905
|
-
aria-hidden="true"
|
|
906
|
-
></i>
|
|
907
|
-
</span>
|
|
908
|
-
<span
|
|
909
|
-
class="pf-c-menu__item-text"
|
|
910
|
-
>Application launcher</span>
|
|
911
|
-
</span>
|
|
912
|
-
</button>
|
|
913
|
-
</div>
|
|
914
|
-
<div class="pf-c-menu__search">
|
|
915
|
-
<div class="pf-c-menu__search-input">
|
|
916
|
-
<div class="pf-c-search-input">
|
|
917
|
-
<div class="pf-c-search-input__bar">
|
|
918
|
-
<span class="pf-c-search-input__text">
|
|
919
|
-
<span class="pf-c-search-input__icon">
|
|
920
|
-
<i
|
|
921
|
-
class="fas fa-search fa-fw"
|
|
922
|
-
aria-hidden="true"
|
|
923
|
-
></i>
|
|
924
|
-
</span>
|
|
925
|
-
<input
|
|
926
|
-
class="pf-c-search-input__text-input"
|
|
927
|
-
type="text"
|
|
928
|
-
placeholder="Search"
|
|
929
|
-
aria-label="Search"
|
|
930
|
-
/>
|
|
931
|
-
</span>
|
|
932
|
-
</div>
|
|
933
|
-
</div>
|
|
934
|
-
</div>
|
|
935
|
-
</div>
|
|
936
|
-
<hr class="pf-c-divider" />
|
|
937
|
-
<section class="pf-c-menu__group">
|
|
938
|
-
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
939
|
-
<ul class="pf-c-menu__list" role="menu">
|
|
940
|
-
<li
|
|
941
|
-
class="pf-c-menu__list-item"
|
|
942
|
-
role="none"
|
|
695
|
+
<button
|
|
696
|
+
class="pf-c-menu__item"
|
|
697
|
+
type="button"
|
|
698
|
+
role="menuitem"
|
|
943
699
|
>
|
|
944
|
-
<
|
|
945
|
-
class="pf-c-menu__item"
|
|
946
|
-
href="#"
|
|
947
|
-
role="menuitem"
|
|
948
|
-
>
|
|
949
|
-
<span class="pf-c-menu__item-main">
|
|
950
|
-
<span
|
|
951
|
-
class="pf-c-menu__item-text"
|
|
952
|
-
>Link 1</span>
|
|
953
|
-
</span>
|
|
954
|
-
</a>
|
|
955
|
-
<button
|
|
956
|
-
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
957
|
-
type="button"
|
|
958
|
-
aria-label="Starred"
|
|
959
|
-
>
|
|
700
|
+
<span class="pf-c-menu__item-main">
|
|
960
701
|
<span
|
|
961
|
-
class="pf-c-menu__item-
|
|
702
|
+
class="pf-c-menu__item-toggle-icon"
|
|
962
703
|
>
|
|
963
|
-
<i
|
|
964
|
-
class="fas fa-star"
|
|
965
|
-
aria-hidden="true"
|
|
966
|
-
></i>
|
|
967
|
-
</span>
|
|
968
|
-
</button>
|
|
969
|
-
</li>
|
|
970
|
-
<li
|
|
971
|
-
class="pf-c-menu__list-item"
|
|
972
|
-
role="none"
|
|
973
|
-
>
|
|
974
|
-
<a
|
|
975
|
-
class="pf-c-menu__item"
|
|
976
|
-
href="#"
|
|
977
|
-
role="menuitem"
|
|
978
|
-
target="_blank"
|
|
979
|
-
>
|
|
980
|
-
<span class="pf-c-menu__item-main">
|
|
981
|
-
<span
|
|
982
|
-
class="pf-c-menu__item-text"
|
|
983
|
-
>Link 2</span>
|
|
984
|
-
<span
|
|
985
|
-
class="pf-c-menu__item-external-icon"
|
|
986
|
-
>
|
|
987
|
-
<i
|
|
988
|
-
class="fas fa-external-link-alt"
|
|
989
|
-
aria-hidden="true"
|
|
990
|
-
></i>
|
|
991
|
-
</span>
|
|
992
|
-
<span
|
|
993
|
-
class="pf-screen-reader"
|
|
994
|
-
>(opens new window)</span>
|
|
704
|
+
<i class="fas fa-angle-left"></i>
|
|
995
705
|
</span>
|
|
996
|
-
|
|
997
|
-
<button
|
|
998
|
-
class="pf-c-menu__item-action pf-m-favorite"
|
|
999
|
-
type="button"
|
|
1000
|
-
aria-label="Not starred"
|
|
1001
|
-
>
|
|
1002
|
-
<span
|
|
1003
|
-
class="pf-c-menu__item-action-icon"
|
|
1004
|
-
>
|
|
706
|
+
<span class="pf-c-menu__item-icon">
|
|
1005
707
|
<i
|
|
1006
|
-
class="fas fa-
|
|
708
|
+
class="fas fa-fw fa-cog"
|
|
1007
709
|
aria-hidden="true"
|
|
1008
710
|
></i>
|
|
1009
711
|
</span>
|
|
1010
|
-
</button>
|
|
1011
|
-
</li>
|
|
1012
|
-
</ul>
|
|
1013
|
-
</section>
|
|
1014
|
-
<hr class="pf-c-divider" />
|
|
1015
|
-
<section class="pf-c-menu__group">
|
|
1016
|
-
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
1017
|
-
<ul class="pf-c-menu__list" role="menu">
|
|
1018
|
-
<li
|
|
1019
|
-
class="pf-c-menu__list-item"
|
|
1020
|
-
role="none"
|
|
1021
|
-
>
|
|
1022
|
-
<a
|
|
1023
|
-
class="pf-c-menu__item"
|
|
1024
|
-
href="#"
|
|
1025
|
-
role="menuitem"
|
|
1026
|
-
>
|
|
1027
|
-
<span class="pf-c-menu__item-main">
|
|
1028
|
-
<span
|
|
1029
|
-
class="pf-c-menu__item-text"
|
|
1030
|
-
>Link 1</span>
|
|
1031
|
-
</span>
|
|
1032
|
-
</a>
|
|
1033
|
-
<button
|
|
1034
|
-
class="pf-c-menu__item-action pf-m-favorite"
|
|
1035
|
-
type="button"
|
|
1036
|
-
aria-label="Not starred"
|
|
1037
|
-
>
|
|
1038
712
|
<span
|
|
1039
|
-
class="pf-c-menu__item-
|
|
1040
|
-
>
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
role="none"
|
|
713
|
+
class="pf-c-menu__item-text"
|
|
714
|
+
>Settings</span>
|
|
715
|
+
</span>
|
|
716
|
+
</button>
|
|
717
|
+
</li>
|
|
718
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
719
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
720
|
+
<a
|
|
721
|
+
class="pf-c-menu__item"
|
|
722
|
+
href="#"
|
|
723
|
+
role="menuitem"
|
|
1051
724
|
>
|
|
1052
|
-
<
|
|
1053
|
-
class="pf-c-menu__item"
|
|
1054
|
-
href="#"
|
|
1055
|
-
role="menuitem"
|
|
1056
|
-
target="_blank"
|
|
1057
|
-
>
|
|
1058
|
-
<span class="pf-c-menu__item-main">
|
|
1059
|
-
<span
|
|
1060
|
-
class="pf-c-menu__item-text"
|
|
1061
|
-
>Link 2</span>
|
|
1062
|
-
<span
|
|
1063
|
-
class="pf-c-menu__item-external-icon"
|
|
1064
|
-
>
|
|
1065
|
-
<i
|
|
1066
|
-
class="fas fa-external-link-alt"
|
|
1067
|
-
aria-hidden="true"
|
|
1068
|
-
></i>
|
|
1069
|
-
</span>
|
|
1070
|
-
<span
|
|
1071
|
-
class="pf-screen-reader"
|
|
1072
|
-
>(opens new window)</span>
|
|
1073
|
-
</span>
|
|
1074
|
-
</a>
|
|
1075
|
-
<button
|
|
1076
|
-
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1077
|
-
type="button"
|
|
1078
|
-
aria-label="Starred"
|
|
1079
|
-
>
|
|
725
|
+
<span class="pf-c-menu__item-main">
|
|
1080
726
|
<span
|
|
1081
|
-
class="pf-c-menu__item-
|
|
1082
|
-
>
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
727
|
+
class="pf-c-menu__item-text"
|
|
728
|
+
>Customer support</span>
|
|
729
|
+
</span>
|
|
730
|
+
</a>
|
|
731
|
+
</li>
|
|
732
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
733
|
+
<a
|
|
734
|
+
class="pf-c-menu__item"
|
|
735
|
+
href="#"
|
|
736
|
+
role="menuitem"
|
|
737
|
+
>
|
|
738
|
+
<span class="pf-c-menu__item-main">
|
|
739
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
740
|
+
</span>
|
|
741
|
+
</a>
|
|
742
|
+
</li>
|
|
743
|
+
</ul>
|
|
744
|
+
</div>
|
|
745
|
+
</div>
|
|
746
|
+
</li>
|
|
747
|
+
|
|
748
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
749
|
+
<button
|
|
750
|
+
class="pf-c-menu__item"
|
|
751
|
+
type="button"
|
|
752
|
+
role="menuitem"
|
|
753
|
+
aria-expanded="false"
|
|
754
|
+
>
|
|
755
|
+
<span class="pf-c-menu__item-main">
|
|
756
|
+
<span class="pf-c-menu__item-icon">
|
|
757
|
+
<i
|
|
758
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
759
|
+
aria-hidden="true"
|
|
760
|
+
></i>
|
|
761
|
+
</span>
|
|
762
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
763
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
764
|
+
<i class="fas fa-angle-right"></i>
|
|
765
|
+
</span>
|
|
766
|
+
</span>
|
|
767
|
+
</button>
|
|
768
|
+
<div class="pf-c-menu" hidden>
|
|
769
|
+
<div class="pf-c-menu__content">
|
|
770
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
771
|
+
<li
|
|
772
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
773
|
+
role="none"
|
|
774
|
+
>
|
|
775
|
+
<button
|
|
776
|
+
class="pf-c-menu__item"
|
|
777
|
+
type="button"
|
|
778
|
+
role="menuitem"
|
|
779
|
+
>
|
|
780
|
+
<span class="pf-c-menu__item-main">
|
|
781
|
+
<span
|
|
782
|
+
class="pf-c-menu__item-toggle-icon"
|
|
783
|
+
>
|
|
784
|
+
<i class="fas fa-angle-left"></i>
|
|
785
|
+
</span>
|
|
786
|
+
<span class="pf-c-menu__item-icon">
|
|
787
|
+
<i
|
|
788
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
789
|
+
aria-hidden="true"
|
|
790
|
+
></i>
|
|
791
|
+
</span>
|
|
792
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
793
|
+
</span>
|
|
794
|
+
</button>
|
|
795
|
+
</li>
|
|
796
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
797
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
798
|
+
<a
|
|
799
|
+
class="pf-c-menu__item"
|
|
800
|
+
href="#"
|
|
801
|
+
role="menuitem"
|
|
802
|
+
>
|
|
803
|
+
<span class="pf-c-menu__item-main">
|
|
804
|
+
<span
|
|
805
|
+
class="pf-c-menu__item-text"
|
|
806
|
+
>Support options</span>
|
|
807
|
+
</span>
|
|
808
|
+
</a>
|
|
809
|
+
</li>
|
|
810
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
811
|
+
<a
|
|
812
|
+
class="pf-c-menu__item"
|
|
813
|
+
href="#"
|
|
814
|
+
role="menuitem"
|
|
815
|
+
>
|
|
816
|
+
<span class="pf-c-menu__item-main">
|
|
817
|
+
<span
|
|
818
|
+
class="pf-c-menu__item-text"
|
|
819
|
+
>Open support case</span>
|
|
820
|
+
</span>
|
|
821
|
+
</a>
|
|
822
|
+
</li>
|
|
823
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
824
|
+
<a
|
|
825
|
+
class="pf-c-menu__item"
|
|
826
|
+
href="#"
|
|
827
|
+
role="menuitem"
|
|
828
|
+
>
|
|
829
|
+
<span class="pf-c-menu__item-main">
|
|
830
|
+
<span
|
|
831
|
+
class="pf-c-menu__item-text"
|
|
832
|
+
>API documentation</span>
|
|
833
|
+
</span>
|
|
834
|
+
</a>
|
|
835
|
+
</li>
|
|
836
|
+
</ul>
|
|
837
|
+
</div>
|
|
838
|
+
</div>
|
|
839
|
+
</li>
|
|
840
|
+
|
|
841
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
842
|
+
<button
|
|
843
|
+
class="pf-c-menu__item"
|
|
844
|
+
type="button"
|
|
845
|
+
role="menuitem"
|
|
846
|
+
>
|
|
847
|
+
<span class="pf-c-menu__item-main">
|
|
848
|
+
<span class="pf-c-menu__item-icon">
|
|
849
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
850
|
+
</span>
|
|
851
|
+
<span
|
|
852
|
+
class="pf-c-menu__item-text"
|
|
853
|
+
>Application launcher</span>
|
|
854
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
855
|
+
<i class="fas fa-angle-right"></i>
|
|
856
|
+
</span>
|
|
857
|
+
</span>
|
|
858
|
+
</button>
|
|
859
|
+
<div class="pf-c-menu" hidden>
|
|
860
|
+
<div class="pf-c-menu__header">
|
|
861
|
+
<button
|
|
862
|
+
class="pf-c-menu__item"
|
|
863
|
+
type="button"
|
|
864
|
+
role="menuitem"
|
|
865
|
+
>
|
|
866
|
+
<span class="pf-c-menu__item-main">
|
|
867
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
868
|
+
<i class="fas fa-angle-left"></i>
|
|
869
|
+
</span>
|
|
870
|
+
<span class="pf-c-menu__item-icon">
|
|
871
|
+
<i
|
|
872
|
+
class="fas fa-fw fa-th"
|
|
873
|
+
aria-hidden="true"
|
|
874
|
+
></i>
|
|
875
|
+
</span>
|
|
876
|
+
<span
|
|
877
|
+
class="pf-c-menu__item-text"
|
|
878
|
+
>Application launcher</span>
|
|
879
|
+
</span>
|
|
880
|
+
</button>
|
|
881
|
+
</div>
|
|
882
|
+
<div class="pf-c-menu__search">
|
|
883
|
+
<div class="pf-c-menu__search-input">
|
|
884
|
+
<div class="pf-c-search-input">
|
|
885
|
+
<div class="pf-c-search-input__bar">
|
|
886
|
+
<span class="pf-c-search-input__text">
|
|
887
|
+
<span class="pf-c-search-input__icon">
|
|
888
|
+
<i
|
|
889
|
+
class="fas fa-search fa-fw"
|
|
890
|
+
aria-hidden="true"
|
|
891
|
+
></i>
|
|
892
|
+
</span>
|
|
893
|
+
<input
|
|
894
|
+
class="pf-c-search-input__text-input"
|
|
895
|
+
type="text"
|
|
896
|
+
placeholder="Search"
|
|
897
|
+
aria-label="Search"
|
|
898
|
+
/>
|
|
899
|
+
</span>
|
|
900
|
+
</div>
|
|
901
|
+
</div>
|
|
902
|
+
</div>
|
|
903
|
+
</div>
|
|
904
|
+
<hr class="pf-c-divider" />
|
|
905
|
+
<section class="pf-c-menu__group">
|
|
906
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
907
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
908
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
909
|
+
<a
|
|
910
|
+
class="pf-c-menu__item"
|
|
911
|
+
href="#"
|
|
912
|
+
role="menuitem"
|
|
913
|
+
>
|
|
914
|
+
<span class="pf-c-menu__item-main">
|
|
915
|
+
<span
|
|
916
|
+
class="pf-c-menu__item-text"
|
|
917
|
+
>Link 1</span>
|
|
918
|
+
</span>
|
|
919
|
+
</a>
|
|
920
|
+
<button
|
|
921
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
922
|
+
type="button"
|
|
923
|
+
aria-label="Starred"
|
|
924
|
+
>
|
|
925
|
+
<span class="pf-c-menu__item-action-icon">
|
|
926
|
+
<i
|
|
927
|
+
class="fas fa-star"
|
|
928
|
+
aria-hidden="true"
|
|
929
|
+
></i>
|
|
930
|
+
</span>
|
|
931
|
+
</button>
|
|
932
|
+
</li>
|
|
933
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
934
|
+
<a
|
|
935
|
+
class="pf-c-menu__item"
|
|
936
|
+
href="#"
|
|
937
|
+
role="menuitem"
|
|
938
|
+
target="_blank"
|
|
939
|
+
>
|
|
940
|
+
<span class="pf-c-menu__item-main">
|
|
941
|
+
<span
|
|
942
|
+
class="pf-c-menu__item-text"
|
|
943
|
+
>Link 2</span>
|
|
944
|
+
<span
|
|
945
|
+
class="pf-c-menu__item-external-icon"
|
|
946
|
+
>
|
|
947
|
+
<i
|
|
948
|
+
class="fas fa-external-link-alt"
|
|
949
|
+
aria-hidden="true"
|
|
950
|
+
></i>
|
|
951
|
+
</span>
|
|
952
|
+
<span
|
|
953
|
+
class="pf-screen-reader"
|
|
954
|
+
>(opens new window)</span>
|
|
955
|
+
</span>
|
|
956
|
+
</a>
|
|
957
|
+
<button
|
|
958
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
959
|
+
type="button"
|
|
960
|
+
aria-label="Not starred"
|
|
961
|
+
>
|
|
962
|
+
<span class="pf-c-menu__item-action-icon">
|
|
963
|
+
<i
|
|
964
|
+
class="fas fa-star"
|
|
965
|
+
aria-hidden="true"
|
|
966
|
+
></i>
|
|
967
|
+
</span>
|
|
968
|
+
</button>
|
|
969
|
+
</li>
|
|
970
|
+
</ul>
|
|
971
|
+
</section>
|
|
972
|
+
<hr class="pf-c-divider" />
|
|
973
|
+
<section class="pf-c-menu__group">
|
|
974
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
975
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
976
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
977
|
+
<a
|
|
978
|
+
class="pf-c-menu__item"
|
|
979
|
+
href="#"
|
|
980
|
+
role="menuitem"
|
|
981
|
+
>
|
|
982
|
+
<span class="pf-c-menu__item-main">
|
|
983
|
+
<span
|
|
984
|
+
class="pf-c-menu__item-text"
|
|
985
|
+
>Link 1</span>
|
|
986
|
+
</span>
|
|
987
|
+
</a>
|
|
988
|
+
<button
|
|
989
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
990
|
+
type="button"
|
|
991
|
+
aria-label="Not starred"
|
|
992
|
+
>
|
|
993
|
+
<span class="pf-c-menu__item-action-icon">
|
|
994
|
+
<i
|
|
995
|
+
class="fas fa-star"
|
|
996
|
+
aria-hidden="true"
|
|
997
|
+
></i>
|
|
998
|
+
</span>
|
|
999
|
+
</button>
|
|
1000
|
+
</li>
|
|
1001
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1002
|
+
<a
|
|
1003
|
+
class="pf-c-menu__item"
|
|
1004
|
+
href="#"
|
|
1005
|
+
role="menuitem"
|
|
1006
|
+
target="_blank"
|
|
1007
|
+
>
|
|
1008
|
+
<span class="pf-c-menu__item-main">
|
|
1009
|
+
<span
|
|
1010
|
+
class="pf-c-menu__item-text"
|
|
1011
|
+
>Link 2</span>
|
|
1012
|
+
<span
|
|
1013
|
+
class="pf-c-menu__item-external-icon"
|
|
1014
|
+
>
|
|
1015
|
+
<i
|
|
1016
|
+
class="fas fa-external-link-alt"
|
|
1017
|
+
aria-hidden="true"
|
|
1018
|
+
></i>
|
|
1019
|
+
</span>
|
|
1020
|
+
<span
|
|
1021
|
+
class="pf-screen-reader"
|
|
1022
|
+
>(opens new window)</span>
|
|
1023
|
+
</span>
|
|
1024
|
+
</a>
|
|
1025
|
+
<button
|
|
1026
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1027
|
+
type="button"
|
|
1028
|
+
aria-label="Starred"
|
|
1029
|
+
>
|
|
1030
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1031
|
+
<i
|
|
1032
|
+
class="fas fa-star"
|
|
1033
|
+
aria-hidden="true"
|
|
1034
|
+
></i>
|
|
1035
|
+
</span>
|
|
1036
|
+
</button>
|
|
1037
|
+
</li>
|
|
1038
|
+
</ul>
|
|
1039
|
+
</section>
|
|
1040
|
+
</div>
|
|
1041
|
+
</li>
|
|
1042
|
+
</ul>
|
|
1043
|
+
</section>
|
|
1044
|
+
</div>
|
|
1045
|
+
</div>
|
|
1099
1046
|
</div>
|
|
1100
1047
|
</div>
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1048
|
+
</div>
|
|
1049
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1050
|
+
<div
|
|
1051
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1052
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1053
|
+
>
|
|
1054
|
+
<button
|
|
1055
|
+
class="pf-c-dropdown__toggle"
|
|
1056
|
+
id="context-selector-in-sidebar-example-masthead-profile-button"
|
|
1057
|
+
aria-expanded="false"
|
|
1058
|
+
type="button"
|
|
1105
1059
|
>
|
|
1106
|
-
<
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
<
|
|
1121
|
-
<
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
|
|
1126
|
-
<div
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
1130
|
-
|
|
1131
|
-
|
|
1132
|
-
|
|
1133
|
-
|
|
1134
|
-
|
|
1135
|
-
|
|
1136
|
-
|
|
1137
|
-
|
|
1138
|
-
|
|
1139
|
-
|
|
1140
|
-
|
|
1141
|
-
|
|
1142
|
-
|
|
1143
|
-
|
|
1144
|
-
|
|
1145
|
-
|
|
1146
|
-
class="pf-c-dropdown__menu-item"
|
|
1147
|
-
href="#"
|
|
1148
|
-
>User management</a>
|
|
1149
|
-
</li>
|
|
1150
|
-
<li>
|
|
1151
|
-
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1152
|
-
</li>
|
|
1153
|
-
</ul>
|
|
1154
|
-
</section>
|
|
1155
|
-
</div>
|
|
1060
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
1061
|
+
<img
|
|
1062
|
+
class="pf-c-avatar"
|
|
1063
|
+
src="/assets/images/img_avatar.svg"
|
|
1064
|
+
alt="Avatar image"
|
|
1065
|
+
/>
|
|
1066
|
+
</span>
|
|
1067
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
1068
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1069
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1070
|
+
</span>
|
|
1071
|
+
</button>
|
|
1072
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1073
|
+
<section class="pf-c-dropdown__group">
|
|
1074
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1075
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1076
|
+
<div>123456789</div>
|
|
1077
|
+
</div>
|
|
1078
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1079
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1080
|
+
<div>mshaksho@redhat.com</div>
|
|
1081
|
+
</div>
|
|
1082
|
+
</section>
|
|
1083
|
+
<hr class="pf-c-divider" />
|
|
1084
|
+
<section class="pf-c-dropdown__group">
|
|
1085
|
+
<ul>
|
|
1086
|
+
<li>
|
|
1087
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
1088
|
+
</li>
|
|
1089
|
+
<li>
|
|
1090
|
+
<a
|
|
1091
|
+
class="pf-c-dropdown__menu-item"
|
|
1092
|
+
href="#"
|
|
1093
|
+
>User management</a>
|
|
1094
|
+
</li>
|
|
1095
|
+
<li>
|
|
1096
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1097
|
+
</li>
|
|
1098
|
+
</ul>
|
|
1099
|
+
</section>
|
|
1156
1100
|
</div>
|
|
1157
1101
|
</div>
|
|
1158
1102
|
</div>
|
|
1159
1103
|
</div>
|
|
1160
1104
|
</div>
|
|
1161
1105
|
</div>
|
|
1162
|
-
</
|
|
1106
|
+
</div>
|
|
1163
1107
|
</header>
|
|
1164
1108
|
<div class="pf-c-page__sidebar">
|
|
1165
1109
|
<div class="pf-c-page__sidebar-body pf-m-menu">
|
|
@@ -1289,7 +1233,7 @@ section: components
|
|
|
1289
1233
|
<div class="pf-c-page__sidebar-body">
|
|
1290
1234
|
<nav
|
|
1291
1235
|
class="pf-c-nav"
|
|
1292
|
-
id="context-selector-in-sidebar-primary-nav"
|
|
1236
|
+
id="context-selector-in-sidebar-example-primary-nav"
|
|
1293
1237
|
aria-label="Global"
|
|
1294
1238
|
>
|
|
1295
1239
|
<ul class="pf-c-nav__list">
|
|
@@ -1319,11 +1263,45 @@ section: components
|
|
|
1319
1263
|
<main
|
|
1320
1264
|
class="pf-c-page__main"
|
|
1321
1265
|
tabindex="-1"
|
|
1322
|
-
id="main-content-context-selector-in-sidebar"
|
|
1266
|
+
id="main-content-context-selector-in-sidebar-example"
|
|
1323
1267
|
>
|
|
1324
|
-
<section
|
|
1325
|
-
class="pf-c-page__main-
|
|
1326
|
-
|
|
1268
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1269
|
+
<div class="pf-c-page__main-body">
|
|
1270
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1271
|
+
<ol class="pf-c-breadcrumb__list">
|
|
1272
|
+
<li class="pf-c-breadcrumb__item">
|
|
1273
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1274
|
+
</li>
|
|
1275
|
+
<li class="pf-c-breadcrumb__item">
|
|
1276
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1277
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1278
|
+
</span>
|
|
1279
|
+
|
|
1280
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1281
|
+
</li>
|
|
1282
|
+
<li class="pf-c-breadcrumb__item">
|
|
1283
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1284
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1285
|
+
</span>
|
|
1286
|
+
|
|
1287
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1288
|
+
</li>
|
|
1289
|
+
<li class="pf-c-breadcrumb__item">
|
|
1290
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1291
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1292
|
+
</span>
|
|
1293
|
+
|
|
1294
|
+
<a
|
|
1295
|
+
href="#"
|
|
1296
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
1297
|
+
aria-current="page"
|
|
1298
|
+
>Section landing</a>
|
|
1299
|
+
</li>
|
|
1300
|
+
</ol>
|
|
1301
|
+
</nav>
|
|
1302
|
+
</div>
|
|
1303
|
+
</section>
|
|
1304
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1327
1305
|
<div class="pf-c-page__main-body">
|
|
1328
1306
|
<div class="pf-c-content">
|
|
1329
1307
|
<h1>Main title</h1>
|
|
@@ -1331,9 +1309,7 @@ section: components
|
|
|
1331
1309
|
</div>
|
|
1332
1310
|
</div>
|
|
1333
1311
|
</section>
|
|
1334
|
-
<section
|
|
1335
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
|
|
1336
|
-
>
|
|
1312
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
1337
1313
|
<div class="pf-c-page__main-body">
|
|
1338
1314
|
<div class="pf-l-gallery pf-m-gutter">
|
|
1339
1315
|
<div class="pf-c-card">
|
|
@@ -1369,13 +1345,6 @@ section: components
|
|
|
1369
1345
|
</div>
|
|
1370
1346
|
</div>
|
|
1371
1347
|
</section>
|
|
1372
|
-
<section
|
|
1373
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
|
|
1374
|
-
>
|
|
1375
|
-
<div class="pf-c-page__main-body">
|
|
1376
|
-
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
1377
|
-
</div>
|
|
1378
|
-
</section>
|
|
1379
1348
|
</main>
|
|
1380
1349
|
</div>
|
|
1381
1350
|
|
|
@@ -1384,861 +1353,806 @@ section: components
|
|
|
1384
1353
|
### Context selector in sidebar expanded
|
|
1385
1354
|
|
|
1386
1355
|
```html isFullscreen
|
|
1387
|
-
<div class="pf-c-page" id="context-selector-in-sidebar-expanded">
|
|
1388
|
-
<
|
|
1389
|
-
|
|
1390
|
-
|
|
1391
|
-
|
|
1392
|
-
|
|
1393
|
-
|
|
1394
|
-
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1356
|
+
<div class="pf-c-page" id="context-selector-in-sidebar-expanded-example">
|
|
1357
|
+
<a
|
|
1358
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
1359
|
+
href="#main-content-context-selector-in-sidebar-expanded-example"
|
|
1360
|
+
>Skip to content</a>
|
|
1361
|
+
<header
|
|
1362
|
+
class="pf-c-masthead"
|
|
1363
|
+
id="context-selector-in-sidebar-expanded-example-masthead"
|
|
1364
|
+
>
|
|
1365
|
+
<span class="pf-c-masthead__toggle">
|
|
1366
|
+
<button
|
|
1367
|
+
class="pf-c-button pf-m-plain"
|
|
1368
|
+
type="button"
|
|
1369
|
+
aria-label="Global navigation"
|
|
1370
|
+
>
|
|
1371
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1372
|
+
</button>
|
|
1373
|
+
</span>
|
|
1374
|
+
<div class="pf-c-masthead__main">
|
|
1375
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
1376
|
+
<picture
|
|
1377
|
+
class="pf-c-brand pf-m-picture"
|
|
1378
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
1400
1379
|
>
|
|
1401
|
-
<
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
|
-
|
|
1405
|
-
|
|
1406
|
-
<
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1411
|
-
|
|
1412
|
-
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
|
|
1419
|
-
|
|
1420
|
-
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
|
|
1380
|
+
<source
|
|
1381
|
+
media="(min-width: 768px)"
|
|
1382
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
1383
|
+
/>
|
|
1384
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
1385
|
+
<img
|
|
1386
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
1387
|
+
alt="Fallback patternFly default logo"
|
|
1388
|
+
/>
|
|
1389
|
+
</picture>
|
|
1390
|
+
</a>
|
|
1391
|
+
</div>
|
|
1392
|
+
<div class="pf-c-masthead__content">
|
|
1393
|
+
<div
|
|
1394
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
1395
|
+
id="context-selector-in-sidebar-expanded-example-masthead-toolbar"
|
|
1396
|
+
>
|
|
1397
|
+
<div class="pf-c-toolbar__content">
|
|
1398
|
+
<div class="pf-c-toolbar__content-section">
|
|
1399
|
+
<div
|
|
1400
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
1401
|
+
>
|
|
1402
|
+
<div class="pf-c-toolbar__item">
|
|
1403
|
+
<button
|
|
1404
|
+
class="pf-c-button pf-m-plain"
|
|
1405
|
+
type="button"
|
|
1406
|
+
aria-label="Notifications"
|
|
1407
|
+
>
|
|
1408
|
+
<span class="pf-c-notification-badge">
|
|
1409
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
1410
|
+
</span>
|
|
1411
|
+
</button>
|
|
1412
|
+
</div>
|
|
1426
1413
|
<div
|
|
1427
|
-
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-
|
|
1414
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1428
1415
|
>
|
|
1429
1416
|
<div class="pf-c-toolbar__item">
|
|
1430
|
-
<
|
|
1431
|
-
class="pf-c-
|
|
1432
|
-
|
|
1433
|
-
|
|
1417
|
+
<nav
|
|
1418
|
+
class="pf-c-app-launcher"
|
|
1419
|
+
aria-label="Application launcher"
|
|
1420
|
+
id="context-selector-in-sidebar-expanded-example-masthead-icon-group--app-launcher"
|
|
1434
1421
|
>
|
|
1435
|
-
<
|
|
1436
|
-
|
|
1437
|
-
|
|
1438
|
-
|
|
1439
|
-
|
|
1440
|
-
<div
|
|
1441
|
-
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
1442
|
-
>
|
|
1443
|
-
<div class="pf-c-toolbar__item">
|
|
1444
|
-
<nav
|
|
1445
|
-
class="pf-c-app-launcher"
|
|
1422
|
+
<button
|
|
1423
|
+
class="pf-c-app-launcher__toggle"
|
|
1424
|
+
type="button"
|
|
1425
|
+
id="context-selector-in-sidebar-expanded-example-masthead-icon-group--app-launcher-button"
|
|
1426
|
+
aria-expanded="false"
|
|
1446
1427
|
aria-label="Application launcher"
|
|
1447
|
-
id="-icon-group--app-launcher"
|
|
1448
1428
|
>
|
|
1449
|
-
<
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
|
|
1454
|
-
|
|
1455
|
-
>
|
|
1456
|
-
<
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
<div class="pf-c-search-input__bar">
|
|
1465
|
-
<span class="pf-c-search-input__text">
|
|
1466
|
-
<span class="pf-c-search-input__icon">
|
|
1467
|
-
<i
|
|
1468
|
-
class="fas fa-search fa-fw"
|
|
1469
|
-
aria-hidden="true"
|
|
1470
|
-
></i>
|
|
1471
|
-
</span>
|
|
1472
|
-
<input
|
|
1473
|
-
class="pf-c-search-input__text-input"
|
|
1474
|
-
type="text"
|
|
1475
|
-
placeholder="Filter by name"
|
|
1476
|
-
aria-label="Filter by name"
|
|
1477
|
-
/>
|
|
1429
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1430
|
+
</button>
|
|
1431
|
+
<div
|
|
1432
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1433
|
+
hidden
|
|
1434
|
+
>
|
|
1435
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1436
|
+
<div class="pf-c-search-input">
|
|
1437
|
+
<div class="pf-c-search-input__bar">
|
|
1438
|
+
<span class="pf-c-search-input__text">
|
|
1439
|
+
<span class="pf-c-search-input__icon">
|
|
1440
|
+
<i
|
|
1441
|
+
class="fas fa-search fa-fw"
|
|
1442
|
+
aria-hidden="true"
|
|
1443
|
+
></i>
|
|
1478
1444
|
</span>
|
|
1479
|
-
|
|
1445
|
+
<input
|
|
1446
|
+
class="pf-c-search-input__text-input"
|
|
1447
|
+
type="text"
|
|
1448
|
+
placeholder="Filter by name"
|
|
1449
|
+
aria-label="Filter by name"
|
|
1450
|
+
/>
|
|
1451
|
+
</span>
|
|
1480
1452
|
</div>
|
|
1481
1453
|
</div>
|
|
1482
|
-
|
|
1483
|
-
|
|
1484
|
-
|
|
1485
|
-
|
|
1486
|
-
|
|
1454
|
+
</div>
|
|
1455
|
+
<section class="pf-c-app-launcher__group">
|
|
1456
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1457
|
+
<ul>
|
|
1458
|
+
<li
|
|
1459
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1460
|
+
>
|
|
1461
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1462
|
+
Link 1
|
|
1463
|
+
<span
|
|
1464
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1465
|
+
>
|
|
1466
|
+
<i
|
|
1467
|
+
class="fas fa-external-link-alt"
|
|
1468
|
+
aria-hidden="true"
|
|
1469
|
+
></i>
|
|
1470
|
+
</span>
|
|
1471
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1472
|
+
</a>
|
|
1473
|
+
<button
|
|
1474
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1475
|
+
type="button"
|
|
1476
|
+
aria-label="Favorite"
|
|
1487
1477
|
>
|
|
1488
|
-
<
|
|
1489
|
-
|
|
1490
|
-
|
|
1491
|
-
|
|
1492
|
-
|
|
1493
|
-
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
|
|
1497
|
-
|
|
1498
|
-
<span
|
|
1499
|
-
class="pf-screen-reader"
|
|
1500
|
-
>(opens new window)</span>
|
|
1501
|
-
</a>
|
|
1502
|
-
<button
|
|
1503
|
-
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1504
|
-
type="button"
|
|
1505
|
-
aria-label="Favorite"
|
|
1478
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1479
|
+
</button>
|
|
1480
|
+
</li>
|
|
1481
|
+
<li
|
|
1482
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1483
|
+
>
|
|
1484
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1485
|
+
Link 2
|
|
1486
|
+
<span
|
|
1487
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1506
1488
|
>
|
|
1507
|
-
<i
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1489
|
+
<i
|
|
1490
|
+
class="fas fa-external-link-alt"
|
|
1491
|
+
aria-hidden="true"
|
|
1492
|
+
></i>
|
|
1493
|
+
</span>
|
|
1494
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1495
|
+
</a>
|
|
1496
|
+
<button
|
|
1497
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1498
|
+
type="button"
|
|
1499
|
+
aria-label="Favorite"
|
|
1512
1500
|
>
|
|
1513
|
-
<
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
1519
|
-
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
|
|
1527
|
-
<
|
|
1528
|
-
class="pf-c-app-launcher__menu-item
|
|
1529
|
-
type="button"
|
|
1530
|
-
aria-label="Favorite"
|
|
1501
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1502
|
+
</button>
|
|
1503
|
+
</li>
|
|
1504
|
+
</ul>
|
|
1505
|
+
</section>
|
|
1506
|
+
<hr class="pf-c-divider" />
|
|
1507
|
+
<section class="pf-c-app-launcher__group">
|
|
1508
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1509
|
+
<ul>
|
|
1510
|
+
<li
|
|
1511
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1512
|
+
>
|
|
1513
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1514
|
+
Link 1
|
|
1515
|
+
<span
|
|
1516
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1531
1517
|
>
|
|
1532
|
-
<i
|
|
1533
|
-
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
|
|
1537
|
-
|
|
1538
|
-
|
|
1539
|
-
|
|
1540
|
-
|
|
1541
|
-
|
|
1542
|
-
|
|
1518
|
+
<i
|
|
1519
|
+
class="fas fa-external-link-alt"
|
|
1520
|
+
aria-hidden="true"
|
|
1521
|
+
></i>
|
|
1522
|
+
</span>
|
|
1523
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1524
|
+
</a>
|
|
1525
|
+
<button
|
|
1526
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1527
|
+
type="button"
|
|
1528
|
+
aria-label="Favorite"
|
|
1543
1529
|
>
|
|
1544
|
-
<
|
|
1545
|
-
|
|
1546
|
-
|
|
1547
|
-
|
|
1548
|
-
|
|
1549
|
-
|
|
1550
|
-
|
|
1551
|
-
|
|
1552
|
-
|
|
1553
|
-
|
|
1554
|
-
<span
|
|
1555
|
-
class="pf-screen-reader"
|
|
1556
|
-
>(opens new window)</span>
|
|
1557
|
-
</a>
|
|
1558
|
-
<button
|
|
1559
|
-
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1560
|
-
type="button"
|
|
1561
|
-
aria-label="Favorite"
|
|
1530
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1531
|
+
</button>
|
|
1532
|
+
</li>
|
|
1533
|
+
<li
|
|
1534
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1535
|
+
>
|
|
1536
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1537
|
+
Link 2
|
|
1538
|
+
<span
|
|
1539
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1562
1540
|
>
|
|
1563
|
-
<i
|
|
1564
|
-
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1541
|
+
<i
|
|
1542
|
+
class="fas fa-external-link-alt"
|
|
1543
|
+
aria-hidden="true"
|
|
1544
|
+
></i>
|
|
1545
|
+
</span>
|
|
1546
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1547
|
+
</a>
|
|
1548
|
+
<button
|
|
1549
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1550
|
+
type="button"
|
|
1551
|
+
aria-label="Favorite"
|
|
1568
1552
|
>
|
|
1569
|
-
<
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
<i
|
|
1575
|
-
class="fas fa-external-link-alt"
|
|
1576
|
-
aria-hidden="true"
|
|
1577
|
-
></i>
|
|
1578
|
-
</span>
|
|
1579
|
-
<span
|
|
1580
|
-
class="pf-screen-reader"
|
|
1581
|
-
>(opens new window)</span>
|
|
1582
|
-
</a>
|
|
1583
|
-
<button
|
|
1584
|
-
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1585
|
-
type="button"
|
|
1586
|
-
aria-label="Favorite"
|
|
1587
|
-
>
|
|
1588
|
-
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1589
|
-
</button>
|
|
1590
|
-
</li>
|
|
1591
|
-
</ul>
|
|
1592
|
-
</section>
|
|
1593
|
-
</div>
|
|
1594
|
-
</nav>
|
|
1595
|
-
</div>
|
|
1596
|
-
<div class="pf-c-toolbar__item">
|
|
1597
|
-
<div class="pf-c-dropdown">
|
|
1598
|
-
<button
|
|
1599
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1600
|
-
id="-settings-button"
|
|
1601
|
-
aria-expanded="false"
|
|
1602
|
-
type="button"
|
|
1603
|
-
aria-label="Settings"
|
|
1604
|
-
>
|
|
1605
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1606
|
-
</button>
|
|
1607
|
-
<ul
|
|
1608
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1609
|
-
aria-labelledby="-settings-button"
|
|
1610
|
-
hidden
|
|
1611
|
-
>
|
|
1612
|
-
<li>
|
|
1613
|
-
<button
|
|
1614
|
-
class="pf-c-dropdown__menu-item"
|
|
1615
|
-
type="button"
|
|
1616
|
-
>Settings</button>
|
|
1617
|
-
</li>
|
|
1618
|
-
<li>
|
|
1619
|
-
<button
|
|
1620
|
-
class="pf-c-dropdown__menu-item"
|
|
1621
|
-
type="button"
|
|
1622
|
-
>Use the beta release</button>
|
|
1623
|
-
</li>
|
|
1624
|
-
</ul>
|
|
1625
|
-
</div>
|
|
1626
|
-
</div>
|
|
1627
|
-
<div class="pf-c-toolbar__item">
|
|
1628
|
-
<div class="pf-c-dropdown">
|
|
1629
|
-
<button
|
|
1630
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1631
|
-
id="-help-button"
|
|
1632
|
-
aria-expanded="false"
|
|
1633
|
-
type="button"
|
|
1634
|
-
aria-label="Help"
|
|
1635
|
-
>
|
|
1636
|
-
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1637
|
-
</button>
|
|
1638
|
-
<ul
|
|
1639
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1640
|
-
aria-labelledby="-help-button"
|
|
1641
|
-
hidden
|
|
1642
|
-
>
|
|
1643
|
-
<li>
|
|
1644
|
-
<button
|
|
1645
|
-
class="pf-c-dropdown__menu-item"
|
|
1646
|
-
type="button"
|
|
1647
|
-
>Support options</button>
|
|
1648
|
-
</li>
|
|
1649
|
-
<li>
|
|
1650
|
-
<button
|
|
1651
|
-
class="pf-c-dropdown__menu-item"
|
|
1652
|
-
type="button"
|
|
1653
|
-
>Open support case</button>
|
|
1654
|
-
</li>
|
|
1655
|
-
<li>
|
|
1656
|
-
<button
|
|
1657
|
-
class="pf-c-dropdown__menu-item"
|
|
1658
|
-
type="button"
|
|
1659
|
-
>API documentation</button>
|
|
1660
|
-
</li>
|
|
1661
|
-
</ul>
|
|
1553
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1554
|
+
</button>
|
|
1555
|
+
</li>
|
|
1556
|
+
</ul>
|
|
1557
|
+
</section>
|
|
1662
1558
|
</div>
|
|
1663
|
-
</
|
|
1559
|
+
</nav>
|
|
1664
1560
|
</div>
|
|
1665
|
-
<div class="pf-c-toolbar__item
|
|
1561
|
+
<div class="pf-c-toolbar__item">
|
|
1666
1562
|
<div class="pf-c-dropdown">
|
|
1667
1563
|
<button
|
|
1668
|
-
class="pf-c-
|
|
1564
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1565
|
+
id="context-selector-in-sidebar-expanded-example-masthead-settings-button"
|
|
1566
|
+
aria-expanded="false"
|
|
1669
1567
|
type="button"
|
|
1568
|
+
aria-label="Settings"
|
|
1569
|
+
>
|
|
1570
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1571
|
+
</button>
|
|
1572
|
+
<ul
|
|
1573
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1574
|
+
aria-labelledby="context-selector-in-sidebar-expanded-example-masthead-settings-button"
|
|
1575
|
+
hidden
|
|
1576
|
+
>
|
|
1577
|
+
<li>
|
|
1578
|
+
<button
|
|
1579
|
+
class="pf-c-dropdown__menu-item"
|
|
1580
|
+
type="button"
|
|
1581
|
+
>Settings</button>
|
|
1582
|
+
</li>
|
|
1583
|
+
<li>
|
|
1584
|
+
<button
|
|
1585
|
+
class="pf-c-dropdown__menu-item"
|
|
1586
|
+
type="button"
|
|
1587
|
+
>Use the beta release</button>
|
|
1588
|
+
</li>
|
|
1589
|
+
</ul>
|
|
1590
|
+
</div>
|
|
1591
|
+
</div>
|
|
1592
|
+
<div class="pf-c-toolbar__item">
|
|
1593
|
+
<div class="pf-c-dropdown">
|
|
1594
|
+
<button
|
|
1595
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1596
|
+
id="context-selector-in-sidebar-expanded-example-masthead-help-button"
|
|
1670
1597
|
aria-expanded="false"
|
|
1671
|
-
|
|
1598
|
+
type="button"
|
|
1599
|
+
aria-label="Help"
|
|
1672
1600
|
>
|
|
1673
|
-
<i class="fas fa-
|
|
1601
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1674
1602
|
</button>
|
|
1675
|
-
<
|
|
1676
|
-
class="pf-c-
|
|
1603
|
+
<ul
|
|
1604
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1605
|
+
aria-labelledby="context-selector-in-sidebar-expanded-example-masthead-help-button"
|
|
1677
1606
|
hidden
|
|
1678
1607
|
>
|
|
1679
|
-
<
|
|
1680
|
-
<
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1608
|
+
<li>
|
|
1609
|
+
<button
|
|
1610
|
+
class="pf-c-dropdown__menu-item"
|
|
1611
|
+
type="button"
|
|
1612
|
+
>Support options</button>
|
|
1613
|
+
</li>
|
|
1614
|
+
<li>
|
|
1615
|
+
<button
|
|
1616
|
+
class="pf-c-dropdown__menu-item"
|
|
1617
|
+
type="button"
|
|
1618
|
+
>Open support case</button>
|
|
1619
|
+
</li>
|
|
1620
|
+
<li>
|
|
1621
|
+
<button
|
|
1622
|
+
class="pf-c-dropdown__menu-item"
|
|
1623
|
+
type="button"
|
|
1624
|
+
>API documentation</button>
|
|
1625
|
+
</li>
|
|
1626
|
+
</ul>
|
|
1627
|
+
</div>
|
|
1628
|
+
</div>
|
|
1629
|
+
</div>
|
|
1630
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1631
|
+
<div class="pf-c-dropdown">
|
|
1632
|
+
<button
|
|
1633
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1634
|
+
type="button"
|
|
1635
|
+
aria-expanded="false"
|
|
1636
|
+
aria-label="Actions"
|
|
1637
|
+
>
|
|
1638
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1639
|
+
</button>
|
|
1640
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
1641
|
+
<div class="pf-c-menu__content">
|
|
1642
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1643
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1644
|
+
<li
|
|
1645
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1646
|
+
role="none"
|
|
1647
|
+
>
|
|
1648
|
+
<button
|
|
1649
|
+
class="pf-c-menu__item"
|
|
1650
|
+
type="button"
|
|
1651
|
+
disabled
|
|
1652
|
+
role="menuitem"
|
|
1685
1653
|
>
|
|
1686
|
-
<
|
|
1687
|
-
class="pf-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
|
|
1695
|
-
|
|
1696
|
-
|
|
1697
|
-
|
|
1698
|
-
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
1702
|
-
|
|
1654
|
+
<span class="pf-c-menu__item-description">
|
|
1655
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1656
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
1657
|
+
</span>
|
|
1658
|
+
</button>
|
|
1659
|
+
</li>
|
|
1660
|
+
<li
|
|
1661
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1662
|
+
role="none"
|
|
1663
|
+
>
|
|
1664
|
+
<button
|
|
1665
|
+
class="pf-c-menu__item"
|
|
1666
|
+
type="button"
|
|
1667
|
+
disabled
|
|
1668
|
+
role="menuitem"
|
|
1669
|
+
>
|
|
1670
|
+
<span class="pf-c-menu__item-description">
|
|
1671
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1672
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
1673
|
+
</span>
|
|
1674
|
+
</button>
|
|
1675
|
+
</li>
|
|
1676
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1677
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1678
|
+
<button
|
|
1679
|
+
class="pf-c-menu__item"
|
|
1680
|
+
type="button"
|
|
1681
|
+
role="menuitem"
|
|
1682
|
+
>
|
|
1683
|
+
<span class="pf-c-menu__item-main">
|
|
1684
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
1685
|
+
</span>
|
|
1686
|
+
</button>
|
|
1687
|
+
</li>
|
|
1688
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1689
|
+
<button
|
|
1690
|
+
class="pf-c-menu__item"
|
|
1691
|
+
type="button"
|
|
1692
|
+
role="menuitem"
|
|
1693
|
+
>
|
|
1694
|
+
<span class="pf-c-menu__item-main">
|
|
1695
|
+
<span
|
|
1696
|
+
class="pf-c-menu__item-text"
|
|
1697
|
+
>User management</span>
|
|
1698
|
+
</span>
|
|
1699
|
+
</button>
|
|
1700
|
+
</li>
|
|
1701
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1702
|
+
<button
|
|
1703
|
+
class="pf-c-menu__item"
|
|
1704
|
+
type="button"
|
|
1705
|
+
role="menuitem"
|
|
1706
|
+
>
|
|
1707
|
+
<span class="pf-c-menu__item-main">
|
|
1708
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
1709
|
+
</span>
|
|
1710
|
+
</button>
|
|
1711
|
+
</li>
|
|
1712
|
+
</ul>
|
|
1713
|
+
</section>
|
|
1714
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1715
|
+
<section class="pf-c-menu__group">
|
|
1716
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1717
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1718
|
+
<button
|
|
1719
|
+
class="pf-c-menu__item"
|
|
1720
|
+
type="button"
|
|
1721
|
+
role="menuitem"
|
|
1722
|
+
aria-expanded="false"
|
|
1703
1723
|
>
|
|
1704
|
-
<
|
|
1705
|
-
class="pf-c-menu__item"
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
|
|
1709
|
-
|
|
1710
|
-
<span class="pf-c-menu__item-description">
|
|
1711
|
-
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1712
|
-
<div class="pf-u-font-size-md">123456789</div>
|
|
1713
|
-
</span>
|
|
1714
|
-
</button>
|
|
1715
|
-
</li>
|
|
1716
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
1717
|
-
<li class="pf-c-menu__list-item" role="none">
|
|
1718
|
-
<button
|
|
1719
|
-
class="pf-c-menu__item"
|
|
1720
|
-
type="button"
|
|
1721
|
-
role="menuitem"
|
|
1722
|
-
>
|
|
1723
|
-
<span class="pf-c-menu__item-main">
|
|
1724
|
-
<span class="pf-c-menu__item-text">My profile</span>
|
|
1725
|
-
</span>
|
|
1726
|
-
</button>
|
|
1727
|
-
</li>
|
|
1728
|
-
<li class="pf-c-menu__list-item" role="none">
|
|
1729
|
-
<button
|
|
1730
|
-
class="pf-c-menu__item"
|
|
1731
|
-
type="button"
|
|
1732
|
-
role="menuitem"
|
|
1733
|
-
>
|
|
1734
|
-
<span class="pf-c-menu__item-main">
|
|
1735
|
-
<span
|
|
1736
|
-
class="pf-c-menu__item-text"
|
|
1737
|
-
>User management</span>
|
|
1738
|
-
</span>
|
|
1739
|
-
</button>
|
|
1740
|
-
</li>
|
|
1741
|
-
<li class="pf-c-menu__list-item" role="none">
|
|
1742
|
-
<button
|
|
1743
|
-
class="pf-c-menu__item"
|
|
1744
|
-
type="button"
|
|
1745
|
-
role="menuitem"
|
|
1746
|
-
>
|
|
1747
|
-
<span class="pf-c-menu__item-main">
|
|
1748
|
-
<span class="pf-c-menu__item-text">Logout</span>
|
|
1724
|
+
<span class="pf-c-menu__item-main">
|
|
1725
|
+
<span class="pf-c-menu__item-icon">
|
|
1726
|
+
<i
|
|
1727
|
+
class="fas fa-fw fa-cog"
|
|
1728
|
+
aria-hidden="true"
|
|
1729
|
+
></i>
|
|
1749
1730
|
</span>
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
</section>
|
|
1754
|
-
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1755
|
-
<section class="pf-c-menu__group">
|
|
1756
|
-
<ul class="pf-c-menu__list" role="menu">
|
|
1757
|
-
<li class="pf-c-menu__list-item" role="none">
|
|
1758
|
-
<button
|
|
1759
|
-
class="pf-c-menu__item"
|
|
1760
|
-
type="button"
|
|
1761
|
-
role="menuitem"
|
|
1762
|
-
aria-expanded="false"
|
|
1763
|
-
>
|
|
1764
|
-
<span class="pf-c-menu__item-main">
|
|
1765
|
-
<span class="pf-c-menu__item-icon">
|
|
1766
|
-
<i
|
|
1767
|
-
class="fas fa-fw fa-cog"
|
|
1768
|
-
aria-hidden="true"
|
|
1769
|
-
></i>
|
|
1770
|
-
</span>
|
|
1771
|
-
<span class="pf-c-menu__item-text">Settings</span>
|
|
1772
|
-
<span class="pf-c-menu__item-toggle-icon">
|
|
1773
|
-
<i class="fas fa-angle-right"></i>
|
|
1774
|
-
</span>
|
|
1731
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
1732
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1733
|
+
<i class="fas fa-angle-right"></i>
|
|
1775
1734
|
</span>
|
|
1776
|
-
</
|
|
1777
|
-
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
|
|
1735
|
+
</span>
|
|
1736
|
+
</button>
|
|
1737
|
+
<div class="pf-c-menu" hidden>
|
|
1738
|
+
<div class="pf-c-menu__content">
|
|
1739
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1740
|
+
<li
|
|
1741
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1742
|
+
role="none"
|
|
1743
|
+
>
|
|
1744
|
+
<button
|
|
1745
|
+
class="pf-c-menu__item"
|
|
1746
|
+
type="button"
|
|
1747
|
+
role="menuitem"
|
|
1783
1748
|
>
|
|
1784
|
-
<
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
1789
|
-
<span class="pf-c-menu__item-main">
|
|
1790
|
-
<span
|
|
1791
|
-
class="pf-c-menu__item-toggle-icon"
|
|
1792
|
-
>
|
|
1793
|
-
<i class="fas fa-angle-left"></i>
|
|
1794
|
-
</span>
|
|
1795
|
-
<span class="pf-c-menu__item-icon">
|
|
1796
|
-
<i
|
|
1797
|
-
class="fas fa-fw fa-cog"
|
|
1798
|
-
aria-hidden="true"
|
|
1799
|
-
></i>
|
|
1800
|
-
</span>
|
|
1801
|
-
<span
|
|
1802
|
-
class="pf-c-menu__item-text"
|
|
1803
|
-
>Settings</span>
|
|
1749
|
+
<span class="pf-c-menu__item-main">
|
|
1750
|
+
<span
|
|
1751
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1752
|
+
>
|
|
1753
|
+
<i class="fas fa-angle-left"></i>
|
|
1804
1754
|
</span>
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
|
|
1810
|
-
role="none"
|
|
1811
|
-
>
|
|
1812
|
-
<a
|
|
1813
|
-
class="pf-c-menu__item"
|
|
1814
|
-
href="#"
|
|
1815
|
-
role="menuitem"
|
|
1816
|
-
>
|
|
1817
|
-
<span class="pf-c-menu__item-main">
|
|
1818
|
-
<span
|
|
1819
|
-
class="pf-c-menu__item-text"
|
|
1820
|
-
>Customer support</span>
|
|
1755
|
+
<span class="pf-c-menu__item-icon">
|
|
1756
|
+
<i
|
|
1757
|
+
class="fas fa-fw fa-cog"
|
|
1758
|
+
aria-hidden="true"
|
|
1759
|
+
></i>
|
|
1821
1760
|
</span>
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1826
|
-
|
|
1761
|
+
<span
|
|
1762
|
+
class="pf-c-menu__item-text"
|
|
1763
|
+
>Settings</span>
|
|
1764
|
+
</span>
|
|
1765
|
+
</button>
|
|
1766
|
+
</li>
|
|
1767
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1768
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1769
|
+
<a
|
|
1770
|
+
class="pf-c-menu__item"
|
|
1771
|
+
href="#"
|
|
1772
|
+
role="menuitem"
|
|
1827
1773
|
>
|
|
1828
|
-
<
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
|
|
1832
|
-
>
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
|
|
1774
|
+
<span class="pf-c-menu__item-main">
|
|
1775
|
+
<span
|
|
1776
|
+
class="pf-c-menu__item-text"
|
|
1777
|
+
>Customer support</span>
|
|
1778
|
+
</span>
|
|
1779
|
+
</a>
|
|
1780
|
+
</li>
|
|
1781
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1782
|
+
<a
|
|
1783
|
+
class="pf-c-menu__item"
|
|
1784
|
+
href="#"
|
|
1785
|
+
role="menuitem"
|
|
1786
|
+
>
|
|
1787
|
+
<span class="pf-c-menu__item-main">
|
|
1788
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
1789
|
+
</span>
|
|
1790
|
+
</a>
|
|
1791
|
+
</li>
|
|
1792
|
+
</ul>
|
|
1842
1793
|
</div>
|
|
1843
|
-
</
|
|
1794
|
+
</div>
|
|
1795
|
+
</li>
|
|
1844
1796
|
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
|
|
1857
|
-
|
|
1858
|
-
|
|
1859
|
-
|
|
1860
|
-
|
|
1861
|
-
|
|
1862
|
-
</span>
|
|
1797
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1798
|
+
<button
|
|
1799
|
+
class="pf-c-menu__item"
|
|
1800
|
+
type="button"
|
|
1801
|
+
role="menuitem"
|
|
1802
|
+
aria-expanded="false"
|
|
1803
|
+
>
|
|
1804
|
+
<span class="pf-c-menu__item-main">
|
|
1805
|
+
<span class="pf-c-menu__item-icon">
|
|
1806
|
+
<i
|
|
1807
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1808
|
+
aria-hidden="true"
|
|
1809
|
+
></i>
|
|
1810
|
+
</span>
|
|
1811
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1812
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1813
|
+
<i class="fas fa-angle-right"></i>
|
|
1863
1814
|
</span>
|
|
1864
|
-
</
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
|
|
1869
|
-
|
|
1870
|
-
|
|
1815
|
+
</span>
|
|
1816
|
+
</button>
|
|
1817
|
+
<div class="pf-c-menu" hidden>
|
|
1818
|
+
<div class="pf-c-menu__content">
|
|
1819
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1820
|
+
<li
|
|
1821
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1822
|
+
role="none"
|
|
1823
|
+
>
|
|
1824
|
+
<button
|
|
1825
|
+
class="pf-c-menu__item"
|
|
1826
|
+
type="button"
|
|
1827
|
+
role="menuitem"
|
|
1871
1828
|
>
|
|
1872
|
-
<
|
|
1873
|
-
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
|
|
1877
|
-
<span class="pf-c-menu__item-main">
|
|
1878
|
-
<span
|
|
1879
|
-
class="pf-c-menu__item-toggle-icon"
|
|
1880
|
-
>
|
|
1881
|
-
<i class="fas fa-angle-left"></i>
|
|
1882
|
-
</span>
|
|
1883
|
-
<span class="pf-c-menu__item-icon">
|
|
1884
|
-
<i
|
|
1885
|
-
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1886
|
-
aria-hidden="true"
|
|
1887
|
-
></i>
|
|
1888
|
-
</span>
|
|
1889
|
-
<span
|
|
1890
|
-
class="pf-c-menu__item-text"
|
|
1891
|
-
>Help</span>
|
|
1829
|
+
<span class="pf-c-menu__item-main">
|
|
1830
|
+
<span
|
|
1831
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1832
|
+
>
|
|
1833
|
+
<i class="fas fa-angle-left"></i>
|
|
1892
1834
|
</span>
|
|
1893
|
-
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
role="none"
|
|
1899
|
-
>
|
|
1900
|
-
<a
|
|
1901
|
-
class="pf-c-menu__item"
|
|
1902
|
-
href="#"
|
|
1903
|
-
role="menuitem"
|
|
1904
|
-
>
|
|
1905
|
-
<span class="pf-c-menu__item-main">
|
|
1906
|
-
<span
|
|
1907
|
-
class="pf-c-menu__item-text"
|
|
1908
|
-
>Support options</span>
|
|
1835
|
+
<span class="pf-c-menu__item-icon">
|
|
1836
|
+
<i
|
|
1837
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1838
|
+
aria-hidden="true"
|
|
1839
|
+
></i>
|
|
1909
1840
|
</span>
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1841
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1842
|
+
</span>
|
|
1843
|
+
</button>
|
|
1844
|
+
</li>
|
|
1845
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1846
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1847
|
+
<a
|
|
1848
|
+
class="pf-c-menu__item"
|
|
1849
|
+
href="#"
|
|
1850
|
+
role="menuitem"
|
|
1851
|
+
>
|
|
1852
|
+
<span class="pf-c-menu__item-main">
|
|
1853
|
+
<span
|
|
1854
|
+
class="pf-c-menu__item-text"
|
|
1855
|
+
>Support options</span>
|
|
1856
|
+
</span>
|
|
1857
|
+
</a>
|
|
1858
|
+
</li>
|
|
1859
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1860
|
+
<a
|
|
1861
|
+
class="pf-c-menu__item"
|
|
1862
|
+
href="#"
|
|
1863
|
+
role="menuitem"
|
|
1864
|
+
>
|
|
1865
|
+
<span class="pf-c-menu__item-main">
|
|
1866
|
+
<span
|
|
1867
|
+
class="pf-c-menu__item-text"
|
|
1868
|
+
>Open support case</span>
|
|
1869
|
+
</span>
|
|
1870
|
+
</a>
|
|
1871
|
+
</li>
|
|
1872
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1873
|
+
<a
|
|
1874
|
+
class="pf-c-menu__item"
|
|
1875
|
+
href="#"
|
|
1876
|
+
role="menuitem"
|
|
1915
1877
|
>
|
|
1916
|
-
<
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
>
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
|
|
1878
|
+
<span class="pf-c-menu__item-main">
|
|
1879
|
+
<span
|
|
1880
|
+
class="pf-c-menu__item-text"
|
|
1881
|
+
>API documentation</span>
|
|
1882
|
+
</span>
|
|
1883
|
+
</a>
|
|
1884
|
+
</li>
|
|
1885
|
+
</ul>
|
|
1886
|
+
</div>
|
|
1887
|
+
</div>
|
|
1888
|
+
</li>
|
|
1889
|
+
|
|
1890
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1891
|
+
<button
|
|
1892
|
+
class="pf-c-menu__item"
|
|
1893
|
+
type="button"
|
|
1894
|
+
role="menuitem"
|
|
1895
|
+
>
|
|
1896
|
+
<span class="pf-c-menu__item-main">
|
|
1897
|
+
<span class="pf-c-menu__item-icon">
|
|
1898
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
1899
|
+
</span>
|
|
1900
|
+
<span
|
|
1901
|
+
class="pf-c-menu__item-text"
|
|
1902
|
+
>Application launcher</span>
|
|
1903
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1904
|
+
<i class="fas fa-angle-right"></i>
|
|
1905
|
+
</span>
|
|
1906
|
+
</span>
|
|
1907
|
+
</button>
|
|
1908
|
+
<div class="pf-c-menu" hidden>
|
|
1909
|
+
<div class="pf-c-menu__header">
|
|
1910
|
+
<button
|
|
1911
|
+
class="pf-c-menu__item"
|
|
1912
|
+
type="button"
|
|
1913
|
+
role="menuitem"
|
|
1914
|
+
>
|
|
1915
|
+
<span class="pf-c-menu__item-main">
|
|
1916
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1917
|
+
<i class="fas fa-angle-left"></i>
|
|
1918
|
+
</span>
|
|
1919
|
+
<span class="pf-c-menu__item-icon">
|
|
1920
|
+
<i
|
|
1921
|
+
class="fas fa-fw fa-th"
|
|
1922
|
+
aria-hidden="true"
|
|
1923
|
+
></i>
|
|
1924
|
+
</span>
|
|
1925
|
+
<span
|
|
1926
|
+
class="pf-c-menu__item-text"
|
|
1927
|
+
>Application launcher</span>
|
|
1928
|
+
</span>
|
|
1929
|
+
</button>
|
|
1930
|
+
</div>
|
|
1931
|
+
<div class="pf-c-menu__search">
|
|
1932
|
+
<div class="pf-c-menu__search-input">
|
|
1933
|
+
<div class="pf-c-search-input">
|
|
1934
|
+
<div class="pf-c-search-input__bar">
|
|
1935
|
+
<span class="pf-c-search-input__text">
|
|
1936
|
+
<span class="pf-c-search-input__icon">
|
|
1937
|
+
<i
|
|
1938
|
+
class="fas fa-search fa-fw"
|
|
1939
|
+
aria-hidden="true"
|
|
1940
|
+
></i>
|
|
1925
1941
|
</span>
|
|
1926
|
-
|
|
1927
|
-
|
|
1928
|
-
|
|
1929
|
-
|
|
1930
|
-
|
|
1942
|
+
<input
|
|
1943
|
+
class="pf-c-search-input__text-input"
|
|
1944
|
+
type="text"
|
|
1945
|
+
placeholder="Search"
|
|
1946
|
+
aria-label="Search"
|
|
1947
|
+
/>
|
|
1948
|
+
</span>
|
|
1949
|
+
</div>
|
|
1950
|
+
</div>
|
|
1951
|
+
</div>
|
|
1952
|
+
</div>
|
|
1953
|
+
<hr class="pf-c-divider" />
|
|
1954
|
+
<section class="pf-c-menu__group">
|
|
1955
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
1956
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1957
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1958
|
+
<a
|
|
1959
|
+
class="pf-c-menu__item"
|
|
1960
|
+
href="#"
|
|
1961
|
+
role="menuitem"
|
|
1931
1962
|
>
|
|
1932
|
-
<
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
>
|
|
1937
|
-
<span class="pf-c-menu__item-main">
|
|
1938
|
-
<span
|
|
1939
|
-
class="pf-c-menu__item-text"
|
|
1940
|
-
>API documentation</span>
|
|
1941
|
-
</span>
|
|
1942
|
-
</a>
|
|
1943
|
-
</li>
|
|
1944
|
-
</ul>
|
|
1945
|
-
</div>
|
|
1946
|
-
</div>
|
|
1947
|
-
</li>
|
|
1948
|
-
|
|
1949
|
-
<li class="pf-c-menu__list-item" role="none">
|
|
1950
|
-
<button
|
|
1951
|
-
class="pf-c-menu__item"
|
|
1952
|
-
type="button"
|
|
1953
|
-
role="menuitem"
|
|
1954
|
-
>
|
|
1955
|
-
<span class="pf-c-menu__item-main">
|
|
1956
|
-
<span class="pf-c-menu__item-icon">
|
|
1957
|
-
<i
|
|
1958
|
-
class="fas fa-fw fa-th"
|
|
1959
|
-
aria-hidden="true"
|
|
1960
|
-
></i>
|
|
1961
|
-
</span>
|
|
1962
|
-
<span
|
|
1963
|
-
class="pf-c-menu__item-text"
|
|
1964
|
-
>Application launcher</span>
|
|
1965
|
-
<span class="pf-c-menu__item-toggle-icon">
|
|
1966
|
-
<i class="fas fa-angle-right"></i>
|
|
1967
|
-
</span>
|
|
1968
|
-
</span>
|
|
1969
|
-
</button>
|
|
1970
|
-
<div class="pf-c-menu" hidden>
|
|
1971
|
-
<div class="pf-c-menu__header">
|
|
1972
|
-
<button
|
|
1973
|
-
class="pf-c-menu__item"
|
|
1974
|
-
type="button"
|
|
1975
|
-
role="menuitem"
|
|
1976
|
-
>
|
|
1977
|
-
<span class="pf-c-menu__item-main">
|
|
1978
|
-
<span class="pf-c-menu__item-toggle-icon">
|
|
1979
|
-
<i class="fas fa-angle-left"></i>
|
|
1963
|
+
<span class="pf-c-menu__item-main">
|
|
1964
|
+
<span
|
|
1965
|
+
class="pf-c-menu__item-text"
|
|
1966
|
+
>Link 1</span>
|
|
1980
1967
|
</span>
|
|
1981
|
-
|
|
1968
|
+
</a>
|
|
1969
|
+
<button
|
|
1970
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1971
|
+
type="button"
|
|
1972
|
+
aria-label="Starred"
|
|
1973
|
+
>
|
|
1974
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1982
1975
|
<i
|
|
1983
|
-
class="fas fa-
|
|
1976
|
+
class="fas fa-star"
|
|
1984
1977
|
aria-hidden="true"
|
|
1985
1978
|
></i>
|
|
1986
1979
|
</span>
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
|
|
1991
|
-
|
|
1992
|
-
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
<div class="pf-c-search-input">
|
|
1996
|
-
<div class="pf-c-search-input__bar">
|
|
1997
|
-
<span class="pf-c-search-input__text">
|
|
1998
|
-
<span class="pf-c-search-input__icon">
|
|
1999
|
-
<i
|
|
2000
|
-
class="fas fa-search fa-fw"
|
|
2001
|
-
aria-hidden="true"
|
|
2002
|
-
></i>
|
|
2003
|
-
</span>
|
|
2004
|
-
<input
|
|
2005
|
-
class="pf-c-search-input__text-input"
|
|
2006
|
-
type="text"
|
|
2007
|
-
placeholder="Search"
|
|
2008
|
-
aria-label="Search"
|
|
2009
|
-
/>
|
|
2010
|
-
</span>
|
|
2011
|
-
</div>
|
|
2012
|
-
</div>
|
|
2013
|
-
</div>
|
|
2014
|
-
</div>
|
|
2015
|
-
<hr class="pf-c-divider" />
|
|
2016
|
-
<section class="pf-c-menu__group">
|
|
2017
|
-
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
2018
|
-
<ul class="pf-c-menu__list" role="menu">
|
|
2019
|
-
<li
|
|
2020
|
-
class="pf-c-menu__list-item"
|
|
2021
|
-
role="none"
|
|
1980
|
+
</button>
|
|
1981
|
+
</li>
|
|
1982
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1983
|
+
<a
|
|
1984
|
+
class="pf-c-menu__item"
|
|
1985
|
+
href="#"
|
|
1986
|
+
role="menuitem"
|
|
1987
|
+
target="_blank"
|
|
2022
1988
|
>
|
|
2023
|
-
<
|
|
2024
|
-
class="pf-c-menu__item"
|
|
2025
|
-
href="#"
|
|
2026
|
-
role="menuitem"
|
|
2027
|
-
>
|
|
2028
|
-
<span class="pf-c-menu__item-main">
|
|
2029
|
-
<span
|
|
2030
|
-
class="pf-c-menu__item-text"
|
|
2031
|
-
>Link 1</span>
|
|
2032
|
-
</span>
|
|
2033
|
-
</a>
|
|
2034
|
-
<button
|
|
2035
|
-
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2036
|
-
type="button"
|
|
2037
|
-
aria-label="Starred"
|
|
2038
|
-
>
|
|
1989
|
+
<span class="pf-c-menu__item-main">
|
|
2039
1990
|
<span
|
|
2040
|
-
class="pf-c-menu__item-
|
|
2041
|
-
>
|
|
2042
|
-
<i
|
|
2043
|
-
class="fas fa-star"
|
|
2044
|
-
aria-hidden="true"
|
|
2045
|
-
></i>
|
|
2046
|
-
</span>
|
|
2047
|
-
</button>
|
|
2048
|
-
</li>
|
|
2049
|
-
<li
|
|
2050
|
-
class="pf-c-menu__list-item"
|
|
2051
|
-
role="none"
|
|
2052
|
-
>
|
|
2053
|
-
<a
|
|
2054
|
-
class="pf-c-menu__item"
|
|
2055
|
-
href="#"
|
|
2056
|
-
role="menuitem"
|
|
2057
|
-
target="_blank"
|
|
2058
|
-
>
|
|
2059
|
-
<span class="pf-c-menu__item-main">
|
|
2060
|
-
<span
|
|
2061
|
-
class="pf-c-menu__item-text"
|
|
2062
|
-
>Link 2</span>
|
|
2063
|
-
<span
|
|
2064
|
-
class="pf-c-menu__item-external-icon"
|
|
2065
|
-
>
|
|
2066
|
-
<i
|
|
2067
|
-
class="fas fa-external-link-alt"
|
|
2068
|
-
aria-hidden="true"
|
|
2069
|
-
></i>
|
|
2070
|
-
</span>
|
|
2071
|
-
<span
|
|
2072
|
-
class="pf-screen-reader"
|
|
2073
|
-
>(opens new window)</span>
|
|
2074
|
-
</span>
|
|
2075
|
-
</a>
|
|
2076
|
-
<button
|
|
2077
|
-
class="pf-c-menu__item-action pf-m-favorite"
|
|
2078
|
-
type="button"
|
|
2079
|
-
aria-label="Not starred"
|
|
2080
|
-
>
|
|
1991
|
+
class="pf-c-menu__item-text"
|
|
1992
|
+
>Link 2</span>
|
|
2081
1993
|
<span
|
|
2082
|
-
class="pf-c-menu__item-
|
|
1994
|
+
class="pf-c-menu__item-external-icon"
|
|
2083
1995
|
>
|
|
2084
1996
|
<i
|
|
2085
|
-
class="fas fa-
|
|
1997
|
+
class="fas fa-external-link-alt"
|
|
2086
1998
|
aria-hidden="true"
|
|
2087
1999
|
></i>
|
|
2088
2000
|
</span>
|
|
2089
|
-
|
|
2090
|
-
|
|
2091
|
-
|
|
2092
|
-
|
|
2093
|
-
|
|
2094
|
-
|
|
2095
|
-
|
|
2096
|
-
|
|
2097
|
-
|
|
2098
|
-
class="pf-c-menu__list-item"
|
|
2099
|
-
role="none"
|
|
2001
|
+
<span
|
|
2002
|
+
class="pf-screen-reader"
|
|
2003
|
+
>(opens new window)</span>
|
|
2004
|
+
</span>
|
|
2005
|
+
</a>
|
|
2006
|
+
<button
|
|
2007
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2008
|
+
type="button"
|
|
2009
|
+
aria-label="Not starred"
|
|
2100
2010
|
>
|
|
2101
|
-
<
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
|
|
2116
|
-
|
|
2011
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2012
|
+
<i
|
|
2013
|
+
class="fas fa-star"
|
|
2014
|
+
aria-hidden="true"
|
|
2015
|
+
></i>
|
|
2016
|
+
</span>
|
|
2017
|
+
</button>
|
|
2018
|
+
</li>
|
|
2019
|
+
</ul>
|
|
2020
|
+
</section>
|
|
2021
|
+
<hr class="pf-c-divider" />
|
|
2022
|
+
<section class="pf-c-menu__group">
|
|
2023
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
2024
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
2025
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2026
|
+
<a
|
|
2027
|
+
class="pf-c-menu__item"
|
|
2028
|
+
href="#"
|
|
2029
|
+
role="menuitem"
|
|
2030
|
+
>
|
|
2031
|
+
<span class="pf-c-menu__item-main">
|
|
2117
2032
|
<span
|
|
2118
|
-
class="pf-c-menu__item-
|
|
2119
|
-
>
|
|
2120
|
-
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
|
|
2126
|
-
</li>
|
|
2127
|
-
<li
|
|
2128
|
-
class="pf-c-menu__list-item"
|
|
2129
|
-
role="none"
|
|
2033
|
+
class="pf-c-menu__item-text"
|
|
2034
|
+
>Link 1</span>
|
|
2035
|
+
</span>
|
|
2036
|
+
</a>
|
|
2037
|
+
<button
|
|
2038
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
2039
|
+
type="button"
|
|
2040
|
+
aria-label="Not starred"
|
|
2130
2041
|
>
|
|
2131
|
-
<
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
>
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
|
|
2144
|
-
|
|
2145
|
-
|
|
2146
|
-
|
|
2147
|
-
|
|
2148
|
-
|
|
2149
|
-
|
|
2150
|
-
class="pf-screen-reader"
|
|
2151
|
-
>(opens new window)</span>
|
|
2152
|
-
</span>
|
|
2153
|
-
</a>
|
|
2154
|
-
<button
|
|
2155
|
-
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2156
|
-
type="button"
|
|
2157
|
-
aria-label="Starred"
|
|
2158
|
-
>
|
|
2042
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2043
|
+
<i
|
|
2044
|
+
class="fas fa-star"
|
|
2045
|
+
aria-hidden="true"
|
|
2046
|
+
></i>
|
|
2047
|
+
</span>
|
|
2048
|
+
</button>
|
|
2049
|
+
</li>
|
|
2050
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
2051
|
+
<a
|
|
2052
|
+
class="pf-c-menu__item"
|
|
2053
|
+
href="#"
|
|
2054
|
+
role="menuitem"
|
|
2055
|
+
target="_blank"
|
|
2056
|
+
>
|
|
2057
|
+
<span class="pf-c-menu__item-main">
|
|
2058
|
+
<span
|
|
2059
|
+
class="pf-c-menu__item-text"
|
|
2060
|
+
>Link 2</span>
|
|
2159
2061
|
<span
|
|
2160
|
-
class="pf-c-menu__item-
|
|
2062
|
+
class="pf-c-menu__item-external-icon"
|
|
2161
2063
|
>
|
|
2162
2064
|
<i
|
|
2163
|
-
class="fas fa-
|
|
2065
|
+
class="fas fa-external-link-alt"
|
|
2164
2066
|
aria-hidden="true"
|
|
2165
2067
|
></i>
|
|
2166
2068
|
</span>
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2069
|
+
<span
|
|
2070
|
+
class="pf-screen-reader"
|
|
2071
|
+
>(opens new window)</span>
|
|
2072
|
+
</span>
|
|
2073
|
+
</a>
|
|
2074
|
+
<button
|
|
2075
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
2076
|
+
type="button"
|
|
2077
|
+
aria-label="Starred"
|
|
2078
|
+
>
|
|
2079
|
+
<span class="pf-c-menu__item-action-icon">
|
|
2080
|
+
<i
|
|
2081
|
+
class="fas fa-star"
|
|
2082
|
+
aria-hidden="true"
|
|
2083
|
+
></i>
|
|
2084
|
+
</span>
|
|
2085
|
+
</button>
|
|
2086
|
+
</li>
|
|
2087
|
+
</ul>
|
|
2088
|
+
</section>
|
|
2089
|
+
</div>
|
|
2090
|
+
</li>
|
|
2091
|
+
</ul>
|
|
2092
|
+
</section>
|
|
2176
2093
|
</div>
|
|
2177
2094
|
</div>
|
|
2178
2095
|
</div>
|
|
2179
2096
|
</div>
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2097
|
+
</div>
|
|
2098
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
2099
|
+
<div
|
|
2100
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
2101
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
2102
|
+
>
|
|
2103
|
+
<button
|
|
2104
|
+
class="pf-c-dropdown__toggle"
|
|
2105
|
+
id="context-selector-in-sidebar-expanded-example-masthead-profile-button"
|
|
2106
|
+
aria-expanded="false"
|
|
2107
|
+
type="button"
|
|
2184
2108
|
>
|
|
2185
|
-
<
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
2192
|
-
|
|
2193
|
-
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
<
|
|
2200
|
-
<
|
|
2201
|
-
|
|
2202
|
-
|
|
2203
|
-
|
|
2204
|
-
|
|
2205
|
-
<div
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
class="pf-c-dropdown__menu-item"
|
|
2226
|
-
href="#"
|
|
2227
|
-
>User management</a>
|
|
2228
|
-
</li>
|
|
2229
|
-
<li>
|
|
2230
|
-
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
2231
|
-
</li>
|
|
2232
|
-
</ul>
|
|
2233
|
-
</section>
|
|
2234
|
-
</div>
|
|
2109
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
2110
|
+
<img
|
|
2111
|
+
class="pf-c-avatar"
|
|
2112
|
+
src="/assets/images/img_avatar.svg"
|
|
2113
|
+
alt="Avatar image"
|
|
2114
|
+
/>
|
|
2115
|
+
</span>
|
|
2116
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
2117
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
2118
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2119
|
+
</span>
|
|
2120
|
+
</button>
|
|
2121
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
2122
|
+
<section class="pf-c-dropdown__group">
|
|
2123
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2124
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
2125
|
+
<div>123456789</div>
|
|
2126
|
+
</div>
|
|
2127
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
2128
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
2129
|
+
<div>mshaksho@redhat.com</div>
|
|
2130
|
+
</div>
|
|
2131
|
+
</section>
|
|
2132
|
+
<hr class="pf-c-divider" />
|
|
2133
|
+
<section class="pf-c-dropdown__group">
|
|
2134
|
+
<ul>
|
|
2135
|
+
<li>
|
|
2136
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
2137
|
+
</li>
|
|
2138
|
+
<li>
|
|
2139
|
+
<a
|
|
2140
|
+
class="pf-c-dropdown__menu-item"
|
|
2141
|
+
href="#"
|
|
2142
|
+
>User management</a>
|
|
2143
|
+
</li>
|
|
2144
|
+
<li>
|
|
2145
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
2146
|
+
</li>
|
|
2147
|
+
</ul>
|
|
2148
|
+
</section>
|
|
2235
2149
|
</div>
|
|
2236
2150
|
</div>
|
|
2237
2151
|
</div>
|
|
2238
2152
|
</div>
|
|
2239
2153
|
</div>
|
|
2240
2154
|
</div>
|
|
2241
|
-
</
|
|
2155
|
+
</div>
|
|
2242
2156
|
</header>
|
|
2243
2157
|
<div class="pf-c-page__sidebar">
|
|
2244
2158
|
<div class="pf-c-page__sidebar-body pf-m-menu">
|
|
@@ -2370,7 +2284,7 @@ section: components
|
|
|
2370
2284
|
<div class="pf-c-page__sidebar-body">
|
|
2371
2285
|
<nav
|
|
2372
2286
|
class="pf-c-nav"
|
|
2373
|
-
id="context-selector-in-sidebar-expanded-primary-nav"
|
|
2287
|
+
id="context-selector-in-sidebar-expanded-example-primary-nav"
|
|
2374
2288
|
aria-label="Global"
|
|
2375
2289
|
>
|
|
2376
2290
|
<ul class="pf-c-nav__list">
|
|
@@ -2400,11 +2314,45 @@ section: components
|
|
|
2400
2314
|
<main
|
|
2401
2315
|
class="pf-c-page__main"
|
|
2402
2316
|
tabindex="-1"
|
|
2403
|
-
id="main-content-context-selector-in-sidebar-expanded"
|
|
2317
|
+
id="main-content-context-selector-in-sidebar-expanded-example"
|
|
2404
2318
|
>
|
|
2405
|
-
<section
|
|
2406
|
-
class="pf-c-page__main-
|
|
2407
|
-
|
|
2319
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
2320
|
+
<div class="pf-c-page__main-body">
|
|
2321
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
2322
|
+
<ol class="pf-c-breadcrumb__list">
|
|
2323
|
+
<li class="pf-c-breadcrumb__item">
|
|
2324
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
2325
|
+
</li>
|
|
2326
|
+
<li class="pf-c-breadcrumb__item">
|
|
2327
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2328
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2329
|
+
</span>
|
|
2330
|
+
|
|
2331
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2332
|
+
</li>
|
|
2333
|
+
<li class="pf-c-breadcrumb__item">
|
|
2334
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2335
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2336
|
+
</span>
|
|
2337
|
+
|
|
2338
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2339
|
+
</li>
|
|
2340
|
+
<li class="pf-c-breadcrumb__item">
|
|
2341
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
2342
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2343
|
+
</span>
|
|
2344
|
+
|
|
2345
|
+
<a
|
|
2346
|
+
href="#"
|
|
2347
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
2348
|
+
aria-current="page"
|
|
2349
|
+
>Section landing</a>
|
|
2350
|
+
</li>
|
|
2351
|
+
</ol>
|
|
2352
|
+
</nav>
|
|
2353
|
+
</div>
|
|
2354
|
+
</section>
|
|
2355
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2408
2356
|
<div class="pf-c-page__main-body">
|
|
2409
2357
|
<div class="pf-c-content">
|
|
2410
2358
|
<h1>Main title</h1>
|
|
@@ -2412,9 +2360,7 @@ section: components
|
|
|
2412
2360
|
</div>
|
|
2413
2361
|
</div>
|
|
2414
2362
|
</section>
|
|
2415
|
-
<section
|
|
2416
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
|
|
2417
|
-
>
|
|
2363
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
2418
2364
|
<div class="pf-c-page__main-body">
|
|
2419
2365
|
<div class="pf-l-gallery pf-m-gutter">
|
|
2420
2366
|
<div class="pf-c-card">
|
|
@@ -2450,13 +2396,6 @@ section: components
|
|
|
2450
2396
|
</div>
|
|
2451
2397
|
</div>
|
|
2452
2398
|
</section>
|
|
2453
|
-
<section
|
|
2454
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
|
|
2455
|
-
>
|
|
2456
|
-
<div class="pf-c-page__main-body">
|
|
2457
|
-
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
2458
|
-
</div>
|
|
2459
|
-
</section>
|
|
2460
2399
|
</main>
|
|
2461
2400
|
</div>
|
|
2462
2401
|
|
|
@@ -2465,15 +2404,14 @@ section: components
|
|
|
2465
2404
|
### Context selector in page content
|
|
2466
2405
|
|
|
2467
2406
|
```html isFullscreen
|
|
2468
|
-
<div class="pf-c-page" id="context-selector-in-page-content-
|
|
2407
|
+
<div class="pf-c-page" id="context-selector-in-page-content-example">
|
|
2469
2408
|
<a
|
|
2470
2409
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
2471
|
-
href="#main-content-context-selector-in-page-content-
|
|
2410
|
+
href="#main-content-context-selector-in-page-content-example"
|
|
2472
2411
|
>Skip to content</a>
|
|
2473
|
-
|
|
2474
2412
|
<header
|
|
2475
2413
|
class="pf-c-masthead"
|
|
2476
|
-
id="context-selector-in-page-content-
|
|
2414
|
+
id="context-selector-in-page-content-example-masthead"
|
|
2477
2415
|
>
|
|
2478
2416
|
<span class="pf-c-masthead__toggle">
|
|
2479
2417
|
<button
|
|
@@ -2505,7 +2443,7 @@ section: components
|
|
|
2505
2443
|
<div class="pf-c-masthead__content">
|
|
2506
2444
|
<div
|
|
2507
2445
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2508
|
-
id="context-selector-in-page-content-
|
|
2446
|
+
id="context-selector-in-page-content-example-masthead-toolbar"
|
|
2509
2447
|
>
|
|
2510
2448
|
<div class="pf-c-toolbar__content">
|
|
2511
2449
|
<div class="pf-c-toolbar__content-section">
|
|
@@ -2519,7 +2457,7 @@ section: components
|
|
|
2519
2457
|
aria-label="Notifications"
|
|
2520
2458
|
>
|
|
2521
2459
|
<span class="pf-c-notification-badge">
|
|
2522
|
-
<i class="pf-icon-
|
|
2460
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
2523
2461
|
</span>
|
|
2524
2462
|
</button>
|
|
2525
2463
|
</div>
|
|
@@ -2530,12 +2468,12 @@ section: components
|
|
|
2530
2468
|
<nav
|
|
2531
2469
|
class="pf-c-app-launcher"
|
|
2532
2470
|
aria-label="Application launcher"
|
|
2533
|
-
id="context-selector-in-page-content-
|
|
2471
|
+
id="context-selector-in-page-content-example-masthead-icon-group--app-launcher"
|
|
2534
2472
|
>
|
|
2535
2473
|
<button
|
|
2536
2474
|
class="pf-c-app-launcher__toggle"
|
|
2537
2475
|
type="button"
|
|
2538
|
-
id="context-selector-in-page-content-
|
|
2476
|
+
id="context-selector-in-page-content-example-masthead-icon-group--app-launcher-button"
|
|
2539
2477
|
aria-expanded="false"
|
|
2540
2478
|
aria-label="Application launcher"
|
|
2541
2479
|
>
|
|
@@ -2675,7 +2613,7 @@ section: components
|
|
|
2675
2613
|
<div class="pf-c-dropdown">
|
|
2676
2614
|
<button
|
|
2677
2615
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2678
|
-
id="context-selector-in-page-content-
|
|
2616
|
+
id="context-selector-in-page-content-example-masthead-settings-button"
|
|
2679
2617
|
aria-expanded="false"
|
|
2680
2618
|
type="button"
|
|
2681
2619
|
aria-label="Settings"
|
|
@@ -2684,7 +2622,7 @@ section: components
|
|
|
2684
2622
|
</button>
|
|
2685
2623
|
<ul
|
|
2686
2624
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2687
|
-
aria-labelledby="context-selector-in-page-content-
|
|
2625
|
+
aria-labelledby="context-selector-in-page-content-example-masthead-settings-button"
|
|
2688
2626
|
hidden
|
|
2689
2627
|
>
|
|
2690
2628
|
<li>
|
|
@@ -2706,7 +2644,7 @@ section: components
|
|
|
2706
2644
|
<div class="pf-c-dropdown">
|
|
2707
2645
|
<button
|
|
2708
2646
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2709
|
-
id="context-selector-in-page-content-
|
|
2647
|
+
id="context-selector-in-page-content-example-masthead-help-button"
|
|
2710
2648
|
aria-expanded="false"
|
|
2711
2649
|
type="button"
|
|
2712
2650
|
aria-label="Help"
|
|
@@ -2715,7 +2653,7 @@ section: components
|
|
|
2715
2653
|
</button>
|
|
2716
2654
|
<ul
|
|
2717
2655
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2718
|
-
aria-labelledby="context-selector-in-page-content-
|
|
2656
|
+
aria-labelledby="context-selector-in-page-content-example-masthead-help-button"
|
|
2719
2657
|
hidden
|
|
2720
2658
|
>
|
|
2721
2659
|
<li>
|
|
@@ -2766,9 +2704,7 @@ section: components
|
|
|
2766
2704
|
>
|
|
2767
2705
|
<span class="pf-c-menu__item-description">
|
|
2768
2706
|
<div class="pf-u-font-size-sm">Username:</div>
|
|
2769
|
-
<div
|
|
2770
|
-
class="pf-u-font-size-md"
|
|
2771
|
-
>mshaksho@redhat.com</div>
|
|
2707
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
2772
2708
|
</span>
|
|
2773
2709
|
</button>
|
|
2774
2710
|
</li>
|
|
@@ -3217,7 +3153,7 @@ section: components
|
|
|
3217
3153
|
>
|
|
3218
3154
|
<button
|
|
3219
3155
|
class="pf-c-dropdown__toggle"
|
|
3220
|
-
id="context-selector-in-page-content-
|
|
3156
|
+
id="context-selector-in-page-content-example-masthead-profile-button"
|
|
3221
3157
|
aria-expanded="false"
|
|
3222
3158
|
type="button"
|
|
3223
3159
|
>
|
|
@@ -3273,7 +3209,7 @@ section: components
|
|
|
3273
3209
|
<div class="pf-c-page__sidebar-body">
|
|
3274
3210
|
<nav
|
|
3275
3211
|
class="pf-c-nav"
|
|
3276
|
-
id="context-selector-in-page-content-
|
|
3212
|
+
id="context-selector-in-page-content-example-primary-nav"
|
|
3277
3213
|
aria-label="Global"
|
|
3278
3214
|
>
|
|
3279
3215
|
<ul class="pf-c-nav__list">
|
|
@@ -3303,7 +3239,7 @@ section: components
|
|
|
3303
3239
|
<main
|
|
3304
3240
|
class="pf-c-page__main"
|
|
3305
3241
|
tabindex="-1"
|
|
3306
|
-
id="main-content-context-selector-in-page-content-
|
|
3242
|
+
id="main-content-context-selector-in-page-content-example"
|
|
3307
3243
|
>
|
|
3308
3244
|
<section
|
|
3309
3245
|
class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
|
|
@@ -3317,12 +3253,15 @@ section: components
|
|
|
3317
3253
|
class="pf-c-context-selector pf-m-page-insets pf-m-width-auto"
|
|
3318
3254
|
style="--pf-c-context-selector--Width: 270px;"
|
|
3319
3255
|
>
|
|
3320
|
-
<span
|
|
3256
|
+
<span
|
|
3257
|
+
id="context-selector-in-page-content-example-context-selector-label"
|
|
3258
|
+
hidden
|
|
3259
|
+
>Selected project:</span>
|
|
3321
3260
|
<button
|
|
3322
3261
|
class="pf-c-context-selector__toggle pf-m-text pf-m-plain"
|
|
3323
3262
|
aria-expanded="false"
|
|
3324
|
-
id="-context-selector-toggle"
|
|
3325
|
-
aria-labelledby="-context-selector-label -context-selector-toggle"
|
|
3263
|
+
id="context-selector-in-page-content-example-context-selector-toggle"
|
|
3264
|
+
aria-labelledby="context-selector-in-page-content-example-context-selector-label context-selector-in-page-content-example-context-selector-toggle"
|
|
3326
3265
|
>
|
|
3327
3266
|
<span
|
|
3328
3267
|
class="pf-c-context-selector__toggle-text"
|
|
@@ -3443,15 +3382,18 @@ section: components
|
|
|
3443
3382
|
</div>
|
|
3444
3383
|
<div class="pf-c-toolbar__item">
|
|
3445
3384
|
<div class="pf-c-select">
|
|
3446
|
-
<span
|
|
3385
|
+
<span
|
|
3386
|
+
id="context-selector-in-page-content-example-select-label"
|
|
3387
|
+
hidden
|
|
3388
|
+
>Choose one</span>
|
|
3447
3389
|
|
|
3448
3390
|
<button
|
|
3449
3391
|
class="pf-c-select__toggle pf-m-plain"
|
|
3450
3392
|
type="button"
|
|
3451
|
-
id="-select-toggle"
|
|
3393
|
+
id="context-selector-in-page-content-example-select-toggle"
|
|
3452
3394
|
aria-haspopup="true"
|
|
3453
3395
|
aria-expanded="false"
|
|
3454
|
-
aria-labelledby="-select-label -select-toggle"
|
|
3396
|
+
aria-labelledby="context-selector-in-page-content-example-select-label context-selector-in-page-content-example-select-toggle"
|
|
3455
3397
|
>
|
|
3456
3398
|
<div class="pf-c-select__toggle-wrapper">
|
|
3457
3399
|
<span class="pf-c-select__toggle-text">All applications</span>
|
|
@@ -3464,7 +3406,7 @@ section: components
|
|
|
3464
3406
|
<ul
|
|
3465
3407
|
class="pf-c-select__menu"
|
|
3466
3408
|
role="listbox"
|
|
3467
|
-
aria-labelledby="-select-label"
|
|
3409
|
+
aria-labelledby="context-selector-in-page-content-example-select-label"
|
|
3468
3410
|
hidden
|
|
3469
3411
|
>
|
|
3470
3412
|
<li role="presentation">
|