@patternfly/patternfly 6.0.0-alpha.176 → 6.0.0-alpha.177

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/assets/icons/iconUnicodes.json +6 -0
  2. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  3. package/assets/pficon/pficon.scss +36 -0
  4. package/base/patternfly-pf-icons.css +25 -1
  5. package/components/Page/page.css +6 -0
  6. package/components/Page/page.scss +7 -0
  7. package/components/_index.css +6 -0
  8. package/docs/components/Page/examples/Page.md +1 -0
  9. package/docs/demos/AboutModal/examples/AboutModal.md +0 -30
  10. package/docs/demos/Alert/examples/Alert.md +0 -90
  11. package/docs/demos/BackToTop/examples/BackToTop.md +0 -30
  12. package/docs/demos/Banner/examples/Banner.md +0 -60
  13. package/docs/demos/CardView/examples/CardView.md +0 -30
  14. package/docs/demos/Dashboard/examples/Dashboard.md +0 -30
  15. package/docs/demos/DataList/examples/DataList.md +0 -120
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +0 -90
  17. package/docs/demos/Drawer/examples/Drawer.md +0 -150
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +0 -180
  19. package/docs/demos/Masthead/examples/Masthead.md +0 -60
  20. package/docs/demos/Modal/examples/Modal.md +0 -180
  21. package/docs/demos/Nav/examples/Nav.md +0 -180
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +0 -150
  23. package/docs/demos/Page/examples/Page.css +11 -0
  24. package/docs/demos/Page/examples/Page.md +671 -271
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +0 -210
  26. package/docs/demos/Skeleton/examples/Skeleton.md +0 -30
  27. package/docs/demos/Table/examples/Table.md +0 -450
  28. package/docs/demos/Tabs/examples/Tabs.md +0 -180
  29. package/docs/demos/Toolbar/examples/Toolbar.md +0 -60
  30. package/docs/demos/Wizard/examples/Wizard.md +0 -270
  31. package/icons/pficons.mjs +6 -0
  32. package/package.json +3 -2
  33. package/patternfly-base-no-globals.css +25 -1
  34. package/patternfly-base.css +25 -1
  35. package/patternfly-no-globals.css +31 -1
  36. package/patternfly.css +31 -1
  37. package/patternfly.min.css +1 -1
  38. package/patternfly.min.css.map +1 -1
package/docs/demos/Page/examples/Page.md CHANGED
@@ -2,7 +2,9 @@
2
2
  id: Page
3
3
  section: components
4
4
  wrapperTag: div
5
- ---## Demos
5
+ ---import './Page.css'
6
+
7
+ ## Demos
6
8
 
7
9
  ### Basic
8
10
 
@@ -106,36 +108,6 @@ wrapperTag: div
106
108
  >
107
109
  <div class="pf-v6-c-toolbar__content">
108
110
  <div class="pf-v6-c-toolbar__content-section">
109
- <div class="pf-v6-c-toolbar__item">
110
- <button
111
- class="pf-v6-c-menu-toggle"
112
- type="button"
113
- aria-expanded="false"
114
- >
115
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
116
- <span class="pf-v6-c-menu-toggle__controls">
117
- <span class="pf-v6-c-menu-toggle__toggle-icon">
118
- <i class="fas fa-caret-down" aria-hidden="true"></i>
119
- </span>
120
- </span>
121
- </button>
122
- </div>
123
-
124
- <div class="pf-v6-c-toolbar__item">
125
- <button
126
- class="pf-v6-c-menu-toggle"
127
- type="button"
128
- aria-expanded="false"
129
- >
130
- <span class="pf-v6-c-menu-toggle__text">Services</span>
131
- <span class="pf-v6-c-menu-toggle__controls">
132
- <span class="pf-v6-c-menu-toggle__toggle-icon">
133
- <i class="fas fa-caret-down" aria-hidden="true"></i>
134
- </span>
135
- </span>
136
- </button>
137
- </div>
138
-
139
111
  <div
140
112
  class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
141
113
  >
@@ -438,36 +410,6 @@ wrapperTag: div
438
410
  >
439
411
  <div class="pf-v6-c-toolbar__content">
440
412
  <div class="pf-v6-c-toolbar__content-section">
441
- <div class="pf-v6-c-toolbar__item">
442
- <button
443
- class="pf-v6-c-menu-toggle"
444
- type="button"
445
- aria-expanded="false"
446
- >
447
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
448
- <span class="pf-v6-c-menu-toggle__controls">
449
- <span class="pf-v6-c-menu-toggle__toggle-icon">
450
- <i class="fas fa-caret-down" aria-hidden="true"></i>
451
- </span>
452
- </span>
453
- </button>
454
- </div>
455
-
456
- <div class="pf-v6-c-toolbar__item">
457
- <button
458
- class="pf-v6-c-menu-toggle"
459
- type="button"
460
- aria-expanded="false"
461
- >
462
- <span class="pf-v6-c-menu-toggle__text">Services</span>
463
- <span class="pf-v6-c-menu-toggle__controls">
464
- <span class="pf-v6-c-menu-toggle__toggle-icon">
465
- <i class="fas fa-caret-down" aria-hidden="true"></i>
466
- </span>
467
- </span>
468
- </button>
469
- </div>
470
-
471
413
  <div
472
414
  class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
473
415
  >
@@ -785,36 +727,6 @@ wrapperTag: div
785
727
  >
786
728
  <div class="pf-v6-c-toolbar__content">
787
729
  <div class="pf-v6-c-toolbar__content-section">
788
- <div class="pf-v6-c-toolbar__item">
789
- <button
790
- class="pf-v6-c-menu-toggle"
791
- type="button"
792
- aria-expanded="false"
793
- >
794
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
795
- <span class="pf-v6-c-menu-toggle__controls">
796
- <span class="pf-v6-c-menu-toggle__toggle-icon">
797
- <i class="fas fa-caret-down" aria-hidden="true"></i>
798
- </span>
799
- </span>
800
- </button>
801
- </div>
802
-
803
- <div class="pf-v6-c-toolbar__item">
804
- <button
805
- class="pf-v6-c-menu-toggle"
806
- type="button"
807
- aria-expanded="false"
808
- >
809
- <span class="pf-v6-c-menu-toggle__text">Services</span>
810
- <span class="pf-v6-c-menu-toggle__controls">
811
- <span class="pf-v6-c-menu-toggle__toggle-icon">
812
- <i class="fas fa-caret-down" aria-hidden="true"></i>
813
- </span>
814
- </span>
815
- </button>
816
- </div>
817
-
818
730
  <div
819
731
  class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
820
732
  >
@@ -1264,36 +1176,6 @@ wrapperTag: div
1264
1176
  >
1265
1177
  <div class="pf-v6-c-toolbar__content">
1266
1178
  <div class="pf-v6-c-toolbar__content-section">
1267
- <div class="pf-v6-c-toolbar__item">
1268
- <button
1269
- class="pf-v6-c-menu-toggle"
1270
- type="button"
1271
- aria-expanded="false"
1272
- >
1273
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1274
- <span class="pf-v6-c-menu-toggle__controls">
1275
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1276
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1277
- </span>
1278
- </span>
1279
- </button>
1280
- </div>
1281
-
1282
- <div class="pf-v6-c-toolbar__item">
1283
- <button
1284
- class="pf-v6-c-menu-toggle"
1285
- type="button"
1286
- aria-expanded="false"
1287
- >
1288
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1289
- <span class="pf-v6-c-menu-toggle__controls">
1290
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1291
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1292
- </span>
1293
- </span>
1294
- </button>
1295
- </div>
1296
-
1297
1179
  <div
1298
1180
  class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1299
1181
  >
@@ -1718,36 +1600,6 @@ wrapperTag: div
1718
1600
  >
1719
1601
  <div class="pf-v6-c-toolbar__content">
1720
1602
  <div class="pf-v6-c-toolbar__content-section">
1721
- <div class="pf-v6-c-toolbar__item">
1722
- <button
1723
- class="pf-v6-c-menu-toggle"
1724
- type="button"
1725
- aria-expanded="false"
1726
- >
1727
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1728
- <span class="pf-v6-c-menu-toggle__controls">
1729
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1730
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1731
- </span>
1732
- </span>
1733
- </button>
1734
- </div>
1735
-
1736
- <div class="pf-v6-c-toolbar__item">
1737
- <button
1738
- class="pf-v6-c-menu-toggle"
1739
- type="button"
1740
- aria-expanded="false"
1741
- >
1742
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1743
- <span class="pf-v6-c-menu-toggle__controls">
1744
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1745
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1746
- </span>
1747
- </span>
1748
- </button>
1749
- </div>
1750
-
1751
1603
  <div
1752
1604
  class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
1753
1605
  >
@@ -2172,36 +2024,6 @@ wrapperTag: div
2172
2024
  >
2173
2025
  <div class="pf-v6-c-toolbar__content">
2174
2026
  <div class="pf-v6-c-toolbar__content-section">
2175
- <div class="pf-v6-c-toolbar__item">
2176
- <button
2177
- class="pf-v6-c-menu-toggle"
2178
- type="button"
2179
- aria-expanded="false"
2180
- >
2181
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
2182
- <span class="pf-v6-c-menu-toggle__controls">
2183
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2184
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2185
- </span>
2186
- </span>
2187
- </button>
2188
- </div>
2189
-
2190
- <div class="pf-v6-c-toolbar__item">
2191
- <button
2192
- class="pf-v6-c-menu-toggle"
2193
- type="button"
2194
- aria-expanded="false"
2195
- >
2196
- <span class="pf-v6-c-menu-toggle__text">Services</span>
2197
- <span class="pf-v6-c-menu-toggle__controls">
2198
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2199
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2200
- </span>
2201
- </span>
2202
- </button>
2203
- </div>
2204
-
2205
2027
  <div
2206
2028
  class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
2207
2029
  >
@@ -2626,36 +2448,6 @@ wrapperTag: div
2626
2448
  >
2627
2449
  <div class="pf-v6-c-toolbar__content">
2628
2450
  <div class="pf-v6-c-toolbar__content-section">
2629
- <div class="pf-v6-c-toolbar__item">
2630
- <button
2631
- class="pf-v6-c-menu-toggle"
2632
- type="button"
2633
- aria-expanded="false"
2634
- >
2635
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
2636
- <span class="pf-v6-c-menu-toggle__controls">
2637
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2638
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2639
- </span>
2640
- </span>
2641
- </button>
2642
- </div>
2643
-
2644
- <div class="pf-v6-c-toolbar__item">
2645
- <button
2646
- class="pf-v6-c-menu-toggle"
2647
- type="button"
2648
- aria-expanded="false"
2649
- >
2650
- <span class="pf-v6-c-menu-toggle__text">Services</span>
2651
- <span class="pf-v6-c-menu-toggle__controls">
2652
- <span class="pf-v6-c-menu-toggle__toggle-icon">
2653
- <i class="fas fa-caret-down" aria-hidden="true"></i>
2654
- </span>
2655
- </span>
2656
- </button>
2657
- </div>
2658
-
2659
2451
  <div
2660
2452
  class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
2661
2453
  >
@@ -3082,36 +2874,6 @@ wrapperTag: div
3082
2874
  >
3083
2875
  <div class="pf-v6-c-toolbar__content">
3084
2876
  <div class="pf-v6-c-toolbar__content-section">
3085
- <div class="pf-v6-c-toolbar__item">
3086
- <button
3087
- class="pf-v6-c-menu-toggle"
3088
- type="button"
3089
- aria-expanded="false"
3090
- >
3091
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
3092
- <span class="pf-v6-c-menu-toggle__controls">
3093
- <span class="pf-v6-c-menu-toggle__toggle-icon">
3094
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3095
- </span>
3096
- </span>
3097
- </button>
3098
- </div>
3099
-
3100
- <div class="pf-v6-c-toolbar__item">
3101
- <button
3102
- class="pf-v6-c-menu-toggle"
3103
- type="button"
3104
- aria-expanded="false"
3105
- >
3106
- <span class="pf-v6-c-menu-toggle__text">Services</span>
3107
- <span class="pf-v6-c-menu-toggle__controls">
3108
- <span class="pf-v6-c-menu-toggle__toggle-icon">
3109
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3110
- </span>
3111
- </span>
3112
- </button>
3113
- </div>
3114
-
3115
2877
  <div
3116
2878
  class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3117
2879
  >
@@ -3543,36 +3305,6 @@ wrapperTag: div
3543
3305
  >
3544
3306
  <div class="pf-v6-c-toolbar__content">
3545
3307
  <div class="pf-v6-c-toolbar__content-section">
3546
- <div class="pf-v6-c-toolbar__item">
3547
- <button
3548
- class="pf-v6-c-menu-toggle"
3549
- type="button"
3550
- aria-expanded="false"
3551
- >
3552
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
3553
- <span class="pf-v6-c-menu-toggle__controls">
3554
- <span class="pf-v6-c-menu-toggle__toggle-icon">
3555
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3556
- </span>
3557
- </span>
3558
- </button>
3559
- </div>
3560
-
3561
- <div class="pf-v6-c-toolbar__item">
3562
- <button
3563
- class="pf-v6-c-menu-toggle"
3564
- type="button"
3565
- aria-expanded="false"
3566
- >
3567
- <span class="pf-v6-c-menu-toggle__text">Services</span>
3568
- <span class="pf-v6-c-menu-toggle__controls">
3569
- <span class="pf-v6-c-menu-toggle__toggle-icon">
3570
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3571
- </span>
3572
- </span>
3573
- </button>
3574
- </div>
3575
-
3576
3308
  <div
3577
3309
  class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3578
3310
  >
@@ -3754,3 +3486,671 @@ wrapperTag: div
3754
3486
  </div>
3755
3487
 
3756
3488
  ```
3489
+
3490
+ ### Context selector in sidebar
3491
+
3492
+ ```html isFullscreen
3493
+ <div class="pf-v6-c-page" id="page-context-selector">
3494
+ <div class="pf-v6-c-skip-to-content">
3495
+ <a
3496
+ class="pf-v6-c-button pf-m-primary"
3497
+ href="#main-content-page-context-selector"
3498
+ >
3499
+ <span class="pf-v6-c-button__text">Skip to content</span>
3500
+ </a>
3501
+ </div>
3502
+ <header class="pf-v6-c-masthead" id="page-context-selector-masthead">
3503
+ <span class="pf-v6-c-masthead__toggle">
3504
+ <button
3505
+ class="pf-v6-c-button pf-m-plain"
3506
+ type="button"
3507
+ aria-label="Global navigation"
3508
+ >
3509
+ <span class="pf-v6-c-button__icon">
3510
+ <i class="fas fa-bars" aria-hidden="true"></i>
3511
+ </span>
3512
+ </button>
3513
+ </span>
3514
+ <div class="pf-v6-c-masthead__main">
3515
+ <a class="pf-v6-c-masthead__brand" href="#">
3516
+ <svg height="37px" viewBox="0 0 679 158">
3517
+ <title>PF-HorizontalLogo-Color</title>
3518
+ <defs>
3519
+ <linearGradient
3520
+ x1="68%"
3521
+ y1="2.25860997e-13%"
3522
+ x2="32%"
3523
+ y2="100%"
3524
+ id="linearGradient-page-context-selector-masthead"
3525
+ >
3526
+ <stop stop-color="#2B9AF3" offset="0%" />
3527
+ <stop
3528
+ stop-color="#73BCF7"
3529
+ stop-opacity="0.502212631"
3530
+ offset="100%"
3531
+ />
3532
+ </linearGradient>
3533
+ </defs>
3534
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3535
+ <g
3536
+ transform="translate(206.000000, 45.750000)"
3537
+ fill="var(--pf-t--global--text--color--regular)"
3538
+ fill-rule="nonzero"
3539
+ >
3540
+ <path
3541
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
3542
+ />
3543
+ <path
3544
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
3545
+ />
3546
+ <path
3547
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
3548
+ />
3549
+ <path
3550
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
3551
+ />
3552
+ <path
3553
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
3554
+ />
3555
+ <path
3556
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
3557
+ />
3558
+ <path
3559
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
3560
+ />
3561
+ <polygon
3562
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
3563
+ />
3564
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3565
+ <path
3566
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3567
+ />
3568
+ </g>
3569
+ <g transform="translate(0.000000, 0.000000)">
3570
+ <path
3571
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3572
+ fill="#0066CC"
3573
+ />
3574
+ <path
3575
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3576
+ fill="url(#linearGradient-page-context-selector-masthead)"
3577
+ />
3578
+ <path
3579
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3580
+ fill="url(#linearGradient-page-context-selector-masthead)"
3581
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3582
+ />
3583
+ </g>
3584
+ </g>
3585
+ </svg>
3586
+ </a>
3587
+ </div>
3588
+ <div class="pf-v6-c-masthead__content">
3589
+ <div
3590
+ class="pf-v6-c-toolbar pf-m-static"
3591
+ id="page-context-selector-masthead-toolbar"
3592
+ >
3593
+ <div class="pf-v6-c-toolbar__content">
3594
+ <div class="pf-v6-c-toolbar__content-section">
3595
+ <div
3596
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3597
+ >
3598
+ <div
3599
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
3600
+ >
3601
+ <div class="pf-v6-c-toolbar__item">
3602
+ <button
3603
+ class="pf-v6-c-menu-toggle pf-m-plain"
3604
+ type="button"
3605
+ aria-expanded="false"
3606
+ aria-label="Application launcher"
3607
+ >
3608
+ <span class="pf-v6-c-menu-toggle__icon">
3609
+ <i class="fas fa-th" aria-hidden="true"></i>
3610
+ </span>
3611
+ </button>
3612
+ </div>
3613
+ <div class="pf-v6-c-toolbar__item">
3614
+ <button
3615
+ class="pf-v6-c-menu-toggle pf-m-plain"
3616
+ type="button"
3617
+ aria-expanded="false"
3618
+ aria-label="Settings"
3619
+ >
3620
+ <span class="pf-v6-c-menu-toggle__icon">
3621
+ <i class="fas fa-cog" aria-hidden="true"></i>
3622
+ </span>
3623
+ </button>
3624
+ </div>
3625
+ <div class="pf-v6-c-toolbar__item">
3626
+ <button
3627
+ class="pf-v6-c-menu-toggle pf-m-plain"
3628
+ type="button"
3629
+ aria-expanded="false"
3630
+ aria-label="Help"
3631
+ >
3632
+ <span class="pf-v6-c-menu-toggle__icon">
3633
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3634
+ </span>
3635
+ </button>
3636
+ </div>
3637
+ </div>
3638
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
3639
+ <button
3640
+ class="pf-v6-c-menu-toggle pf-m-plain"
3641
+ type="button"
3642
+ aria-expanded="false"
3643
+ aria-label="Actions"
3644
+ >
3645
+ <span class="pf-v6-c-menu-toggle__icon">
3646
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3647
+ </span>
3648
+ </button>
3649
+ </div>
3650
+ </div>
3651
+ </div>
3652
+ </div>
3653
+ </div>
3654
+ </div>
3655
+ </header>
3656
+ <div class="pf-v6-c-page__sidebar">
3657
+ <div class="pf-v6-c-page__sidebar-body pf-m-context-selector">
3658
+ <button
3659
+ class="pf-v6-c-menu-toggle pf-m-full-width"
3660
+ type="button"
3661
+ aria-expanded="false"
3662
+ >
3663
+ <span class="pf-v6-c-menu-toggle__icon">
3664
+ <i class="fas fa-cogs fa-fw" aria-hidden="true"></i>
3665
+ </span>
3666
+ <span class="pf-v6-c-menu-toggle__text">Administrator</span>
3667
+ <span class="pf-v6-c-menu-toggle__controls">
3668
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3669
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3670
+ </span>
3671
+ </span>
3672
+ </button>
3673
+ </div>
3674
+ <div class="pf-v6-c-page__sidebar-body">
3675
+ <nav
3676
+ class="pf-v6-c-nav"
3677
+ id="page-context-selector-primary-nav"
3678
+ aria-label="Global"
3679
+ >
3680
+ <ul class="pf-v6-c-nav__list" role="list">
3681
+ <li class="pf-v6-c-nav__item">
3682
+ <a href="#" class="pf-v6-c-nav__link">
3683
+ <span class="pf-v6-c-nav__link-text">System panel</span>
3684
+ </a>
3685
+ </li>
3686
+ <li class="pf-v6-c-nav__item">
3687
+ <a
3688
+ href="#"
3689
+ class="pf-v6-c-nav__link pf-m-current"
3690
+ aria-current="page"
3691
+ >
3692
+ <span class="pf-v6-c-nav__link-text">Policy</span>
3693
+ </a>
3694
+ </li>
3695
+ <li class="pf-v6-c-nav__item">
3696
+ <a href="#" class="pf-v6-c-nav__link">
3697
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
3698
+ </a>
3699
+ </li>
3700
+ <li class="pf-v6-c-nav__item">
3701
+ <a href="#" class="pf-v6-c-nav__link">
3702
+ <span class="pf-v6-c-nav__link-text">Network services</span>
3703
+ </a>
3704
+ </li>
3705
+ <li class="pf-v6-c-nav__item">
3706
+ <a href="#" class="pf-v6-c-nav__link">
3707
+ <span class="pf-v6-c-nav__link-text">Server</span>
3708
+ </a>
3709
+ </li>
3710
+ </ul>
3711
+ </nav>
3712
+ </div>
3713
+ </div>
3714
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3715
+ <main
3716
+ class="pf-v6-c-page__main"
3717
+ tabindex="-1"
3718
+ id="main-content-page-context-selector"
3719
+ >
3720
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3721
+ <div class="pf-v6-c-page__main-body">
3722
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3723
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3724
+ <li class="pf-v6-c-breadcrumb__item">
3725
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3726
+ </li>
3727
+ <li class="pf-v6-c-breadcrumb__item">
3728
+ <span class="pf-v6-c-breadcrumb__item-divider">
3729
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3730
+ </span>
3731
+
3732
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3733
+ </li>
3734
+ <li class="pf-v6-c-breadcrumb__item">
3735
+ <span class="pf-v6-c-breadcrumb__item-divider">
3736
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3737
+ </span>
3738
+
3739
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3740
+ </li>
3741
+ <li class="pf-v6-c-breadcrumb__item">
3742
+ <span class="pf-v6-c-breadcrumb__item-divider">
3743
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3744
+ </span>
3745
+
3746
+ <a
3747
+ href="#"
3748
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3749
+ aria-current="page"
3750
+ >Section landing</a>
3751
+ </li>
3752
+ </ol>
3753
+ </nav>
3754
+ </div>
3755
+ </section>
3756
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3757
+ <div class="pf-v6-c-page__main-body">
3758
+ <div class="pf-v6-c-content">
3759
+ <h1>Main title</h1>
3760
+ <p>This is a full page demo.</p>
3761
+ </div>
3762
+ </div>
3763
+ </section>
3764
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3765
+ <div class="pf-v6-c-page__main-body">
3766
+ <div class="pf-v6-l-gallery pf-m-gutter">
3767
+ <div class="pf-v6-c-card">
3768
+ <div class="pf-v6-c-card__body">This is a card</div>
3769
+ </div>
3770
+ <div class="pf-v6-c-card">
3771
+ <div class="pf-v6-c-card__body">This is a card</div>
3772
+ </div>
3773
+ <div class="pf-v6-c-card">
3774
+ <div class="pf-v6-c-card__body">This is a card</div>
3775
+ </div>
3776
+ <div class="pf-v6-c-card">
3777
+ <div class="pf-v6-c-card__body">This is a card</div>
3778
+ </div>
3779
+ <div class="pf-v6-c-card">
3780
+ <div class="pf-v6-c-card__body">This is a card</div>
3781
+ </div>
3782
+ <div class="pf-v6-c-card">
3783
+ <div class="pf-v6-c-card__body">This is a card</div>
3784
+ </div>
3785
+ <div class="pf-v6-c-card">
3786
+ <div class="pf-v6-c-card__body">This is a card</div>
3787
+ </div>
3788
+ <div class="pf-v6-c-card">
3789
+ <div class="pf-v6-c-card__body">This is a card</div>
3790
+ </div>
3791
+ <div class="pf-v6-c-card">
3792
+ <div class="pf-v6-c-card__body">This is a card</div>
3793
+ </div>
3794
+ <div class="pf-v6-c-card">
3795
+ <div class="pf-v6-c-card__body">This is a card</div>
3796
+ </div>
3797
+ </div>
3798
+ </div>
3799
+ </section>
3800
+ </main>
3801
+ </div>
3802
+ </div>
3803
+
3804
+ ```
3805
+
3806
+ ### Context selector expanded in sidebar
3807
+
3808
+ ```html isFullscreen
3809
+ <div class="pf-v6-c-page" id="page-context-selector-expanded">
3810
+ <div class="pf-v6-c-skip-to-content">
3811
+ <a
3812
+ class="pf-v6-c-button pf-m-primary"
3813
+ href="#main-content-page-context-selector-expanded"
3814
+ >
3815
+ <span class="pf-v6-c-button__text">Skip to content</span>
3816
+ </a>
3817
+ </div>
3818
+ <header class="pf-v6-c-masthead" id="page-context-selector-expanded-masthead">
3819
+ <span class="pf-v6-c-masthead__toggle">
3820
+ <button
3821
+ class="pf-v6-c-button pf-m-plain"
3822
+ type="button"
3823
+ aria-label="Global navigation"
3824
+ >
3825
+ <span class="pf-v6-c-button__icon">
3826
+ <i class="fas fa-bars" aria-hidden="true"></i>
3827
+ </span>
3828
+ </button>
3829
+ </span>
3830
+ <div class="pf-v6-c-masthead__main">
3831
+ <a class="pf-v6-c-masthead__brand" href="#">
3832
+ <svg height="37px" viewBox="0 0 679 158">
3833
+ <title>PF-HorizontalLogo-Color</title>
3834
+ <defs>
3835
+ <linearGradient
3836
+ x1="68%"
3837
+ y1="2.25860997e-13%"
3838
+ x2="32%"
3839
+ y2="100%"
3840
+ id="linearGradient-page-context-selector-expanded-masthead"
3841
+ >
3842
+ <stop stop-color="#2B9AF3" offset="0%" />
3843
+ <stop
3844
+ stop-color="#73BCF7"
3845
+ stop-opacity="0.502212631"
3846
+ offset="100%"
3847
+ />
3848
+ </linearGradient>
3849
+ </defs>
3850
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3851
+ <g
3852
+ transform="translate(206.000000, 45.750000)"
3853
+ fill="var(--pf-t--global--text--color--regular)"
3854
+ fill-rule="nonzero"
3855
+ >
3856
+ <path
3857
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
3858
+ />
3859
+ <path
3860
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
3861
+ />
3862
+ <path
3863
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
3864
+ />
3865
+ <path
3866
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
3867
+ />
3868
+ <path
3869
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
3870
+ />
3871
+ <path
3872
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
3873
+ />
3874
+ <path
3875
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
3876
+ />
3877
+ <polygon
3878
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
3879
+ />
3880
+ <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
3881
+ <path
3882
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
3883
+ />
3884
+ </g>
3885
+ <g transform="translate(0.000000, 0.000000)">
3886
+ <path
3887
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
3888
+ fill="#0066CC"
3889
+ />
3890
+ <path
3891
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3892
+ fill="url(#linearGradient-page-context-selector-expanded-masthead)"
3893
+ />
3894
+ <path
3895
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
3896
+ fill="url(#linearGradient-page-context-selector-expanded-masthead)"
3897
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3898
+ />
3899
+ </g>
3900
+ </g>
3901
+ </svg>
3902
+ </a>
3903
+ </div>
3904
+ <div class="pf-v6-c-masthead__content">
3905
+ <div
3906
+ class="pf-v6-c-toolbar pf-m-static"
3907
+ id="page-context-selector-expanded-masthead-toolbar"
3908
+ >
3909
+ <div class="pf-v6-c-toolbar__content">
3910
+ <div class="pf-v6-c-toolbar__content-section">
3911
+ <div
3912
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3913
+ >
3914
+ <div
3915
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
3916
+ >
3917
+ <div class="pf-v6-c-toolbar__item">
3918
+ <button
3919
+ class="pf-v6-c-menu-toggle pf-m-plain"
3920
+ type="button"
3921
+ aria-expanded="false"
3922
+ aria-label="Application launcher"
3923
+ >
3924
+ <span class="pf-v6-c-menu-toggle__icon">
3925
+ <i class="fas fa-th" aria-hidden="true"></i>
3926
+ </span>
3927
+ </button>
3928
+ </div>
3929
+ <div class="pf-v6-c-toolbar__item">
3930
+ <button
3931
+ class="pf-v6-c-menu-toggle pf-m-plain"
3932
+ type="button"
3933
+ aria-expanded="false"
3934
+ aria-label="Settings"
3935
+ >
3936
+ <span class="pf-v6-c-menu-toggle__icon">
3937
+ <i class="fas fa-cog" aria-hidden="true"></i>
3938
+ </span>
3939
+ </button>
3940
+ </div>
3941
+ <div class="pf-v6-c-toolbar__item">
3942
+ <button
3943
+ class="pf-v6-c-menu-toggle pf-m-plain"
3944
+ type="button"
3945
+ aria-expanded="false"
3946
+ aria-label="Help"
3947
+ >
3948
+ <span class="pf-v6-c-menu-toggle__icon">
3949
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3950
+ </span>
3951
+ </button>
3952
+ </div>
3953
+ </div>
3954
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
3955
+ <button
3956
+ class="pf-v6-c-menu-toggle pf-m-plain"
3957
+ type="button"
3958
+ aria-expanded="false"
3959
+ aria-label="Actions"
3960
+ >
3961
+ <span class="pf-v6-c-menu-toggle__icon">
3962
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3963
+ </span>
3964
+ </button>
3965
+ </div>
3966
+ </div>
3967
+ </div>
3968
+ </div>
3969
+ </div>
3970
+ </div>
3971
+ </header>
3972
+ <div class="pf-v6-c-page__sidebar">
3973
+ <div class="pf-v6-c-page__sidebar-body pf-m-context-selector">
3974
+ <button
3975
+ class="pf-v6-c-menu-toggle pf-m-expanded pf-m-full-width"
3976
+ type="button"
3977
+ aria-expanded="true"
3978
+ >
3979
+ <span class="pf-v6-c-menu-toggle__icon">
3980
+ <i class="fas fa-cogs fa-fw" aria-hidden="true"></i>
3981
+ </span>
3982
+ <span class="pf-v6-c-menu-toggle__text">Administrator</span>
3983
+ <span class="pf-v6-c-menu-toggle__controls">
3984
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3985
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3986
+ </span>
3987
+ </span>
3988
+ </button>
3989
+ <div class="pf-v6-c-menu">
3990
+ <div class="pf-v6-c-menu__content">
3991
+ <ul class="pf-v6-c-menu__list" role="menu">
3992
+ <li class="pf-v6-c-menu__list-item" role="none">
3993
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
3994
+ <span class="pf-v6-c-menu__item-main">
3995
+ <span class="pf-v6-c-menu__item-icon">
3996
+ <i class="fas fa-fw fa-cogs" aria-hidden="true"></i>
3997
+ </span>
3998
+ <span class="pf-v6-c-menu__item-text">Administrator</span>
3999
+ </span>
4000
+ </button>
4001
+ </li>
4002
+ <li class="pf-v6-c-menu__list-item" role="none">
4003
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
4004
+ <span class="pf-v6-c-menu__item-main">
4005
+ <span class="pf-v6-c-menu__item-icon">
4006
+ <i class="fas fa-fw fa-code" aria-hidden="true"></i>
4007
+ </span>
4008
+ <span class="pf-v6-c-menu__item-text">Developer</span>
4009
+ </span>
4010
+ </button>
4011
+ </li>
4012
+ <li class="pf-v6-c-menu__list-item" role="none">
4013
+ <button class="pf-v6-c-menu__item" type="button" role="menuitem">
4014
+ <span class="pf-v6-c-menu__item-main">
4015
+ <span class="pf-v6-c-menu__item-icon">
4016
+ <i class="fas fa-fw fa-cube" aria-hidden="true"></i>
4017
+ </span>
4018
+ <span class="pf-v6-c-menu__item-text">User</span>
4019
+ </span>
4020
+ </button>
4021
+ </li>
4022
+ </ul>
4023
+ </div>
4024
+ </div>
4025
+ </div>
4026
+ <div class="pf-v6-c-page__sidebar-body">
4027
+ <nav
4028
+ class="pf-v6-c-nav"
4029
+ id="page-context-selector-expanded-primary-nav"
4030
+ aria-label="Global"
4031
+ >
4032
+ <ul class="pf-v6-c-nav__list" role="list">
4033
+ <li class="pf-v6-c-nav__item">
4034
+ <a href="#" class="pf-v6-c-nav__link">
4035
+ <span class="pf-v6-c-nav__link-text">System panel</span>
4036
+ </a>
4037
+ </li>
4038
+ <li class="pf-v6-c-nav__item">
4039
+ <a
4040
+ href="#"
4041
+ class="pf-v6-c-nav__link pf-m-current"
4042
+ aria-current="page"
4043
+ >
4044
+ <span class="pf-v6-c-nav__link-text">Policy</span>
4045
+ </a>
4046
+ </li>
4047
+ <li class="pf-v6-c-nav__item">
4048
+ <a href="#" class="pf-v6-c-nav__link">
4049
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
4050
+ </a>
4051
+ </li>
4052
+ <li class="pf-v6-c-nav__item">
4053
+ <a href="#" class="pf-v6-c-nav__link">
4054
+ <span class="pf-v6-c-nav__link-text">Network services</span>
4055
+ </a>
4056
+ </li>
4057
+ <li class="pf-v6-c-nav__item">
4058
+ <a href="#" class="pf-v6-c-nav__link">
4059
+ <span class="pf-v6-c-nav__link-text">Server</span>
4060
+ </a>
4061
+ </li>
4062
+ </ul>
4063
+ </nav>
4064
+ </div>
4065
+ </div>
4066
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4067
+ <main
4068
+ class="pf-v6-c-page__main"
4069
+ tabindex="-1"
4070
+ id="main-content-page-context-selector-expanded"
4071
+ >
4072
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4073
+ <div class="pf-v6-c-page__main-body">
4074
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4075
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4076
+ <li class="pf-v6-c-breadcrumb__item">
4077
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4078
+ </li>
4079
+ <li class="pf-v6-c-breadcrumb__item">
4080
+ <span class="pf-v6-c-breadcrumb__item-divider">
4081
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4082
+ </span>
4083
+
4084
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4085
+ </li>
4086
+ <li class="pf-v6-c-breadcrumb__item">
4087
+ <span class="pf-v6-c-breadcrumb__item-divider">
4088
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4089
+ </span>
4090
+
4091
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4092
+ </li>
4093
+ <li class="pf-v6-c-breadcrumb__item">
4094
+ <span class="pf-v6-c-breadcrumb__item-divider">
4095
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4096
+ </span>
4097
+
4098
+ <a
4099
+ href="#"
4100
+ class="pf-v6-c-breadcrumb__link pf-m-current"
4101
+ aria-current="page"
4102
+ >Section landing</a>
4103
+ </li>
4104
+ </ol>
4105
+ </nav>
4106
+ </div>
4107
+ </section>
4108
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
4109
+ <div class="pf-v6-c-page__main-body">
4110
+ <div class="pf-v6-c-content">
4111
+ <h1>Main title</h1>
4112
+ <p>This is a full page demo.</p>
4113
+ </div>
4114
+ </div>
4115
+ </section>
4116
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
4117
+ <div class="pf-v6-c-page__main-body">
4118
+ <div class="pf-v6-l-gallery pf-m-gutter">
4119
+ <div class="pf-v6-c-card">
4120
+ <div class="pf-v6-c-card__body">This is a card</div>
4121
+ </div>
4122
+ <div class="pf-v6-c-card">
4123
+ <div class="pf-v6-c-card__body">This is a card</div>
4124
+ </div>
4125
+ <div class="pf-v6-c-card">
4126
+ <div class="pf-v6-c-card__body">This is a card</div>
4127
+ </div>
4128
+ <div class="pf-v6-c-card">
4129
+ <div class="pf-v6-c-card__body">This is a card</div>
4130
+ </div>
4131
+ <div class="pf-v6-c-card">
4132
+ <div class="pf-v6-c-card__body">This is a card</div>
4133
+ </div>
4134
+ <div class="pf-v6-c-card">
4135
+ <div class="pf-v6-c-card__body">This is a card</div>
4136
+ </div>
4137
+ <div class="pf-v6-c-card">
4138
+ <div class="pf-v6-c-card__body">This is a card</div>
4139
+ </div>
4140
+ <div class="pf-v6-c-card">
4141
+ <div class="pf-v6-c-card__body">This is a card</div>
4142
+ </div>
4143
+ <div class="pf-v6-c-card">
4144
+ <div class="pf-v6-c-card__body">This is a card</div>
4145
+ </div>
4146
+ <div class="pf-v6-c-card">
4147
+ <div class="pf-v6-c-card__body">This is a card</div>
4148
+ </div>
4149
+ </div>
4150
+ </div>
4151
+ </section>
4152
+ </main>
4153
+ </div>
4154
+ </div>
4155
+
4156
+ ```