@patternfly/patternfly 6.0.0-alpha.38 → 6.0.0-alpha.39

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 (36) hide show
  1. package/components/Divider/divider.css +97 -177
  2. package/components/Divider/divider.scss +60 -79
  3. package/components/Masthead/masthead.css +267 -435
  4. package/components/Masthead/masthead.scss +118 -233
  5. package/docs/components/Divider/examples/Divider.css +3 -1
  6. package/docs/components/Divider/examples/Divider.md +4 -5
  7. package/docs/components/Masthead/examples/masthead.md +441 -16
  8. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  9. package/docs/demos/Alert/examples/Alert.md +120 -126
  10. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  11. package/docs/demos/Banner/examples/Banner.md +79 -80
  12. package/docs/demos/CardView/examples/CardView.md +40 -42
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  14. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  15. package/docs/demos/DataList/examples/DataList.md +160 -279
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  17. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  19. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  20. package/docs/demos/Modal/examples/Modal.md +240 -252
  21. package/docs/demos/Nav/examples/Nav.md +320 -336
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  23. package/docs/demos/Page/examples/Page.md +360 -378
  24. package/docs/demos/Page/examples/Penta.md +8 -15
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  26. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  27. package/docs/demos/Table/examples/Table.md +617 -647
  28. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  29. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  30. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +363 -611
  33. package/patternfly-theme-dark-unversioned.css +363 -611
  34. package/patternfly.css +363 -611
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
package/docs/demos/Page/examples/Page.md CHANGED
@@ -25,20 +25,16 @@ wrapperTag: div
25
25
  </button>
26
26
  </span>
27
27
  <div class="pf-v5-c-masthead__main">
28
- <a
29
- class="pf-v5-c-masthead__brand"
30
- href="#"
31
- style="--pf-v5-c-brand--Height: 36px;"
32
- >
33
- <svg height="36px" viewBox="0 0 679 158" role="img">
34
- <title>Patternfly logo</title>
28
+ <a class="pf-v5-c-masthead__brand" href="#">
29
+ <svg height="40px" viewBox="0 0 679 158">
30
+ <title>PF-HorizontalLogo-Color</title>
35
31
  <defs>
36
32
  <linearGradient
37
33
  x1="68%"
38
34
  y1="2.25860997e-13%"
39
35
  x2="32%"
40
36
  y2="100%"
41
- id="linearGradient-1"
37
+ id="linearGradient-page-demo-basic-masthead"
42
38
  >
43
39
  <stop stop-color="#2B9AF3" offset="0%" />
44
40
  <stop
@@ -48,13 +44,7 @@ wrapperTag: div
48
44
  />
49
45
  </linearGradient>
50
46
  </defs>
51
- <g
52
- id="PF-HorizontalLogo-Color"
53
- stroke="none"
54
- stroke-width="1"
55
- fill="none"
56
- fill-rule="evenodd"
57
- >
47
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
58
48
  <g
59
49
  transform="translate(206.000000, 45.750000)"
60
50
  fill="var(--pf-t--global--text--color--regular)"
@@ -89,19 +79,18 @@ wrapperTag: div
89
79
  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"
90
80
  />
91
81
  </g>
92
- <g id="Logo" transform="translate(0.000000, 0.000000)">
82
+ <g transform="translate(0.000000, 0.000000)">
93
83
  <path
94
84
  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"
95
- id="Rectangle-Copy-17"
96
- fill="var(--pf-t--global--color--brand--200)"
85
+ fill="#0066CC"
97
86
  />
98
87
  <path
99
88
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
100
- fill="url(#linearGradient-1)"
89
+ fill="url(#linearGradient-page-demo-basic-masthead)"
101
90
  />
102
91
  <path
103
92
  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"
104
- fill="url(#linearGradient-1)"
93
+ fill="url(#linearGradient-page-demo-basic-masthead)"
105
94
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
106
95
  />
107
96
  </g>
@@ -116,8 +105,38 @@ wrapperTag: div
116
105
  >
117
106
  <div class="pf-v5-c-toolbar__content">
118
107
  <div class="pf-v5-c-toolbar__content-section">
108
+ <div class="pf-v5-c-toolbar__item">
109
+ <button
110
+ class="pf-v5-c-menu-toggle"
111
+ type="button"
112
+ aria-expanded="false"
113
+ >
114
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
115
+ <span class="pf-v5-c-menu-toggle__controls">
116
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
117
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
118
+ </span>
119
+ </span>
120
+ </button>
121
+ </div>
122
+
123
+ <div class="pf-v5-c-toolbar__item">
124
+ <button
125
+ class="pf-v5-c-menu-toggle"
126
+ type="button"
127
+ aria-expanded="false"
128
+ >
129
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
130
+ <span class="pf-v5-c-menu-toggle__controls">
131
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
132
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
133
+ </span>
134
+ </span>
135
+ </button>
136
+ </div>
137
+
119
138
  <div
120
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
139
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
121
140
  >
122
141
  <div
123
142
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -164,27 +183,6 @@ wrapperTag: div
164
183
  </button>
165
184
  </div>
166
185
  </div>
167
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
168
- <button
169
- class="pf-v5-c-menu-toggle pf-m-full-height"
170
- type="button"
171
- aria-expanded="false"
172
- >
173
- <span class="pf-v5-c-menu-toggle__icon">
174
- <img
175
- class="pf-v5-c-avatar"
176
- alt="Avatar image"
177
- src="/assets/images/img_avatar-light.svg"
178
- />
179
- </span>
180
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
181
- <span class="pf-v5-c-menu-toggle__controls">
182
- <span class="pf-v5-c-menu-toggle__toggle-icon">
183
- <i class="fas fa-angle-down" aria-hidden="true"></i>
184
- </span>
185
- </span>
186
- </button>
187
- </div>
188
186
  </div>
189
187
  </div>
190
188
  </div>
@@ -335,20 +333,16 @@ wrapperTag: div
335
333
  </button>
336
334
  </span>
337
335
  <div class="pf-v5-c-masthead__main">
338
- <a
339
- class="pf-v5-c-masthead__brand"
340
- href="#"
341
- style="--pf-v5-c-brand--Height: 36px;"
342
- >
343
- <svg height="36px" viewBox="0 0 679 158" role="img">
344
- <title>Patternfly logo</title>
336
+ <a class="pf-v5-c-masthead__brand" href="#">
337
+ <svg height="40px" viewBox="0 0 679 158">
338
+ <title>PF-HorizontalLogo-Color</title>
345
339
  <defs>
346
340
  <linearGradient
347
341
  x1="68%"
348
342
  y1="2.25860997e-13%"
349
343
  x2="32%"
350
344
  y2="100%"
351
- id="linearGradient-1"
345
+ id="linearGradient-multiple-sidebar-body-elements-demo-masthead"
352
346
  >
353
347
  <stop stop-color="#2B9AF3" offset="0%" />
354
348
  <stop
@@ -358,13 +352,7 @@ wrapperTag: div
358
352
  />
359
353
  </linearGradient>
360
354
  </defs>
361
- <g
362
- id="PF-HorizontalLogo-Color"
363
- stroke="none"
364
- stroke-width="1"
365
- fill="none"
366
- fill-rule="evenodd"
367
- >
355
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
368
356
  <g
369
357
  transform="translate(206.000000, 45.750000)"
370
358
  fill="var(--pf-t--global--text--color--regular)"
@@ -399,19 +387,18 @@ wrapperTag: div
399
387
  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"
400
388
  />
401
389
  </g>
402
- <g id="Logo" transform="translate(0.000000, 0.000000)">
390
+ <g transform="translate(0.000000, 0.000000)">
403
391
  <path
404
392
  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"
405
- id="Rectangle-Copy-17"
406
- fill="var(--pf-t--global--color--brand--200)"
393
+ fill="#0066CC"
407
394
  />
408
395
  <path
409
396
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
410
- fill="url(#linearGradient-1)"
397
+ fill="url(#linearGradient-multiple-sidebar-body-elements-demo-masthead)"
411
398
  />
412
399
  <path
413
400
  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"
414
- fill="url(#linearGradient-1)"
401
+ fill="url(#linearGradient-multiple-sidebar-body-elements-demo-masthead)"
415
402
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
416
403
  />
417
404
  </g>
@@ -426,8 +413,38 @@ wrapperTag: div
426
413
  >
427
414
  <div class="pf-v5-c-toolbar__content">
428
415
  <div class="pf-v5-c-toolbar__content-section">
416
+ <div class="pf-v5-c-toolbar__item">
417
+ <button
418
+ class="pf-v5-c-menu-toggle"
419
+ type="button"
420
+ aria-expanded="false"
421
+ >
422
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
423
+ <span class="pf-v5-c-menu-toggle__controls">
424
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
425
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
426
+ </span>
427
+ </span>
428
+ </button>
429
+ </div>
430
+
431
+ <div class="pf-v5-c-toolbar__item">
432
+ <button
433
+ class="pf-v5-c-menu-toggle"
434
+ type="button"
435
+ aria-expanded="false"
436
+ >
437
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
438
+ <span class="pf-v5-c-menu-toggle__controls">
439
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
440
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
441
+ </span>
442
+ </span>
443
+ </button>
444
+ </div>
445
+
429
446
  <div
430
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
447
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
431
448
  >
432
449
  <div
433
450
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -474,27 +491,6 @@ wrapperTag: div
474
491
  </button>
475
492
  </div>
476
493
  </div>
477
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
478
- <button
479
- class="pf-v5-c-menu-toggle pf-m-full-height"
480
- type="button"
481
- aria-expanded="false"
482
- >
483
- <span class="pf-v5-c-menu-toggle__icon">
484
- <img
485
- class="pf-v5-c-avatar"
486
- alt="Avatar image"
487
- src="/assets/images/img_avatar-light.svg"
488
- />
489
- </span>
490
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
491
- <span class="pf-v5-c-menu-toggle__controls">
492
- <span class="pf-v5-c-menu-toggle__toggle-icon">
493
- <i class="fas fa-angle-down" aria-hidden="true"></i>
494
- </span>
495
- </span>
496
- </button>
497
- </div>
498
494
  </div>
499
495
  </div>
500
496
  </div>
@@ -660,20 +656,16 @@ wrapperTag: div
660
656
  </button>
661
657
  </span>
662
658
  <div class="pf-v5-c-masthead__main">
663
- <a
664
- class="pf-v5-c-masthead__brand"
665
- href="#"
666
- style="--pf-v5-c-brand--Height: 36px;"
667
- >
668
- <svg height="36px" viewBox="0 0 679 158" role="img">
669
- <title>Patternfly logo</title>
659
+ <a class="pf-v5-c-masthead__brand" href="#">
660
+ <svg height="40px" viewBox="0 0 679 158">
661
+ <title>PF-HorizontalLogo-Color</title>
670
662
  <defs>
671
663
  <linearGradient
672
664
  x1="68%"
673
665
  y1="2.25860997e-13%"
674
666
  x2="32%"
675
667
  y2="100%"
676
- id="linearGradient-1"
668
+ id="linearGradient-page-demo-sticky-top-horizontal-subnav-masthead"
677
669
  >
678
670
  <stop stop-color="#2B9AF3" offset="0%" />
679
671
  <stop
@@ -683,13 +675,7 @@ wrapperTag: div
683
675
  />
684
676
  </linearGradient>
685
677
  </defs>
686
- <g
687
- id="PF-HorizontalLogo-Color"
688
- stroke="none"
689
- stroke-width="1"
690
- fill="none"
691
- fill-rule="evenodd"
692
- >
678
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
693
679
  <g
694
680
  transform="translate(206.000000, 45.750000)"
695
681
  fill="var(--pf-t--global--text--color--regular)"
@@ -724,19 +710,18 @@ wrapperTag: div
724
710
  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"
725
711
  />
726
712
  </g>
727
- <g id="Logo" transform="translate(0.000000, 0.000000)">
713
+ <g transform="translate(0.000000, 0.000000)">
728
714
  <path
729
715
  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"
730
- id="Rectangle-Copy-17"
731
- fill="var(--pf-t--global--color--brand--200)"
716
+ fill="#0066CC"
732
717
  />
733
718
  <path
734
719
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
735
- fill="url(#linearGradient-1)"
720
+ fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-masthead)"
736
721
  />
737
722
  <path
738
723
  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"
739
- fill="url(#linearGradient-1)"
724
+ fill="url(#linearGradient-page-demo-sticky-top-horizontal-subnav-masthead)"
740
725
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
741
726
  />
742
727
  </g>
@@ -751,8 +736,38 @@ wrapperTag: div
751
736
  >
752
737
  <div class="pf-v5-c-toolbar__content">
753
738
  <div class="pf-v5-c-toolbar__content-section">
739
+ <div class="pf-v5-c-toolbar__item">
740
+ <button
741
+ class="pf-v5-c-menu-toggle"
742
+ type="button"
743
+ aria-expanded="false"
744
+ >
745
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
746
+ <span class="pf-v5-c-menu-toggle__controls">
747
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
748
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
749
+ </span>
750
+ </span>
751
+ </button>
752
+ </div>
753
+
754
+ <div class="pf-v5-c-toolbar__item">
755
+ <button
756
+ class="pf-v5-c-menu-toggle"
757
+ type="button"
758
+ aria-expanded="false"
759
+ >
760
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
761
+ <span class="pf-v5-c-menu-toggle__controls">
762
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
763
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
764
+ </span>
765
+ </span>
766
+ </button>
767
+ </div>
768
+
754
769
  <div
755
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
770
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
756
771
  >
757
772
  <div
758
773
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -799,27 +814,6 @@ wrapperTag: div
799
814
  </button>
800
815
  </div>
801
816
  </div>
802
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
803
- <button
804
- class="pf-v5-c-menu-toggle pf-m-full-height"
805
- type="button"
806
- aria-expanded="false"
807
- >
808
- <span class="pf-v5-c-menu-toggle__icon">
809
- <img
810
- class="pf-v5-c-avatar"
811
- alt="Avatar image"
812
- src="/assets/images/img_avatar-light.svg"
813
- />
814
- </span>
815
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
816
- <span class="pf-v5-c-menu-toggle__controls">
817
- <span class="pf-v5-c-menu-toggle__toggle-icon">
818
- <i class="fas fa-angle-down" aria-hidden="true"></i>
819
- </span>
820
- </span>
821
- </button>
822
- </div>
823
817
  </div>
824
818
  </div>
825
819
  </div>
@@ -1130,20 +1124,16 @@ wrapperTag: div
1130
1124
  </button>
1131
1125
  </span>
1132
1126
  <div class="pf-v5-c-masthead__main">
1133
- <a
1134
- class="pf-v5-c-masthead__brand"
1135
- href="#"
1136
- style="--pf-v5-c-brand--Height: 36px;"
1137
- >
1138
- <svg height="36px" viewBox="0 0 679 158" role="img">
1139
- <title>Patternfly logo</title>
1127
+ <a class="pf-v5-c-masthead__brand" href="#">
1128
+ <svg height="40px" viewBox="0 0 679 158">
1129
+ <title>PF-HorizontalLogo-Color</title>
1140
1130
  <defs>
1141
1131
  <linearGradient
1142
1132
  x1="68%"
1143
1133
  y1="2.25860997e-13%"
1144
1134
  x2="32%"
1145
1135
  y2="100%"
1146
- id="linearGradient-1"
1136
+ id="linearGradient-page-demo-sticky-top-breadcrumb-masthead"
1147
1137
  >
1148
1138
  <stop stop-color="#2B9AF3" offset="0%" />
1149
1139
  <stop
@@ -1153,13 +1143,7 @@ wrapperTag: div
1153
1143
  />
1154
1144
  </linearGradient>
1155
1145
  </defs>
1156
- <g
1157
- id="PF-HorizontalLogo-Color"
1158
- stroke="none"
1159
- stroke-width="1"
1160
- fill="none"
1161
- fill-rule="evenodd"
1162
- >
1146
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1163
1147
  <g
1164
1148
  transform="translate(206.000000, 45.750000)"
1165
1149
  fill="var(--pf-t--global--text--color--regular)"
@@ -1194,19 +1178,18 @@ wrapperTag: div
1194
1178
  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"
1195
1179
  />
1196
1180
  </g>
1197
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1181
+ <g transform="translate(0.000000, 0.000000)">
1198
1182
  <path
1199
1183
  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"
1200
- id="Rectangle-Copy-17"
1201
- fill="var(--pf-t--global--color--brand--200)"
1184
+ fill="#0066CC"
1202
1185
  />
1203
1186
  <path
1204
1187
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1205
- fill="url(#linearGradient-1)"
1188
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1206
1189
  />
1207
1190
  <path
1208
1191
  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"
1209
- fill="url(#linearGradient-1)"
1192
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1210
1193
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1211
1194
  />
1212
1195
  </g>
@@ -1221,8 +1204,38 @@ wrapperTag: div
1221
1204
  >
1222
1205
  <div class="pf-v5-c-toolbar__content">
1223
1206
  <div class="pf-v5-c-toolbar__content-section">
1207
+ <div class="pf-v5-c-toolbar__item">
1208
+ <button
1209
+ class="pf-v5-c-menu-toggle"
1210
+ type="button"
1211
+ aria-expanded="false"
1212
+ >
1213
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1214
+ <span class="pf-v5-c-menu-toggle__controls">
1215
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1216
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1217
+ </span>
1218
+ </span>
1219
+ </button>
1220
+ </div>
1221
+
1222
+ <div class="pf-v5-c-toolbar__item">
1223
+ <button
1224
+ class="pf-v5-c-menu-toggle"
1225
+ type="button"
1226
+ aria-expanded="false"
1227
+ >
1228
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1229
+ <span class="pf-v5-c-menu-toggle__controls">
1230
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1231
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1232
+ </span>
1233
+ </span>
1234
+ </button>
1235
+ </div>
1236
+
1224
1237
  <div
1225
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1238
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1226
1239
  >
1227
1240
  <div
1228
1241
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1269,27 +1282,6 @@ wrapperTag: div
1269
1282
  </button>
1270
1283
  </div>
1271
1284
  </div>
1272
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1273
- <button
1274
- class="pf-v5-c-menu-toggle pf-m-full-height"
1275
- type="button"
1276
- aria-expanded="false"
1277
- >
1278
- <span class="pf-v5-c-menu-toggle__icon">
1279
- <img
1280
- class="pf-v5-c-avatar"
1281
- alt="Avatar image"
1282
- src="/assets/images/img_avatar-light.svg"
1283
- />
1284
- </span>
1285
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1286
- <span class="pf-v5-c-menu-toggle__controls">
1287
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1288
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1289
- </span>
1290
- </span>
1291
- </button>
1292
- </div>
1293
1285
  </div>
1294
1286
  </div>
1295
1287
  </div>
@@ -1562,20 +1554,16 @@ wrapperTag: div
1562
1554
  </button>
1563
1555
  </span>
1564
1556
  <div class="pf-v5-c-masthead__main">
1565
- <a
1566
- class="pf-v5-c-masthead__brand"
1567
- href="#"
1568
- style="--pf-v5-c-brand--Height: 36px;"
1569
- >
1570
- <svg height="36px" viewBox="0 0 679 158" role="img">
1571
- <title>Patternfly logo</title>
1557
+ <a class="pf-v5-c-masthead__brand" href="#">
1558
+ <svg height="40px" viewBox="0 0 679 158">
1559
+ <title>PF-HorizontalLogo-Color</title>
1572
1560
  <defs>
1573
1561
  <linearGradient
1574
1562
  x1="68%"
1575
1563
  y1="2.25860997e-13%"
1576
1564
  x2="32%"
1577
1565
  y2="100%"
1578
- id="linearGradient-1"
1566
+ id="linearGradient-page-demo-sticky-top-breadcrumb-masthead"
1579
1567
  >
1580
1568
  <stop stop-color="#2B9AF3" offset="0%" />
1581
1569
  <stop
@@ -1585,13 +1573,7 @@ wrapperTag: div
1585
1573
  />
1586
1574
  </linearGradient>
1587
1575
  </defs>
1588
- <g
1589
- id="PF-HorizontalLogo-Color"
1590
- stroke="none"
1591
- stroke-width="1"
1592
- fill="none"
1593
- fill-rule="evenodd"
1594
- >
1576
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1595
1577
  <g
1596
1578
  transform="translate(206.000000, 45.750000)"
1597
1579
  fill="var(--pf-t--global--text--color--regular)"
@@ -1626,19 +1608,18 @@ wrapperTag: div
1626
1608
  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"
1627
1609
  />
1628
1610
  </g>
1629
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1611
+ <g transform="translate(0.000000, 0.000000)">
1630
1612
  <path
1631
1613
  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"
1632
- id="Rectangle-Copy-17"
1633
- fill="var(--pf-t--global--color--brand--200)"
1614
+ fill="#0066CC"
1634
1615
  />
1635
1616
  <path
1636
1617
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1637
- fill="url(#linearGradient-1)"
1618
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1638
1619
  />
1639
1620
  <path
1640
1621
  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"
1641
- fill="url(#linearGradient-1)"
1622
+ fill="url(#linearGradient-page-demo-sticky-top-breadcrumb-masthead)"
1642
1623
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1643
1624
  />
1644
1625
  </g>
@@ -1653,8 +1634,38 @@ wrapperTag: div
1653
1634
  >
1654
1635
  <div class="pf-v5-c-toolbar__content">
1655
1636
  <div class="pf-v5-c-toolbar__content-section">
1637
+ <div class="pf-v5-c-toolbar__item">
1638
+ <button
1639
+ class="pf-v5-c-menu-toggle"
1640
+ type="button"
1641
+ aria-expanded="false"
1642
+ >
1643
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1644
+ <span class="pf-v5-c-menu-toggle__controls">
1645
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1646
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1647
+ </span>
1648
+ </span>
1649
+ </button>
1650
+ </div>
1651
+
1652
+ <div class="pf-v5-c-toolbar__item">
1653
+ <button
1654
+ class="pf-v5-c-menu-toggle"
1655
+ type="button"
1656
+ aria-expanded="false"
1657
+ >
1658
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1659
+ <span class="pf-v5-c-menu-toggle__controls">
1660
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1661
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1662
+ </span>
1663
+ </span>
1664
+ </button>
1665
+ </div>
1666
+
1656
1667
  <div
1657
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1668
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
1658
1669
  >
1659
1670
  <div
1660
1671
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1701,27 +1712,6 @@ wrapperTag: div
1701
1712
  </button>
1702
1713
  </div>
1703
1714
  </div>
1704
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1705
- <button
1706
- class="pf-v5-c-menu-toggle pf-m-full-height"
1707
- type="button"
1708
- aria-expanded="false"
1709
- >
1710
- <span class="pf-v5-c-menu-toggle__icon">
1711
- <img
1712
- class="pf-v5-c-avatar"
1713
- alt="Avatar image"
1714
- src="/assets/images/img_avatar-light.svg"
1715
- />
1716
- </span>
1717
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1718
- <span class="pf-v5-c-menu-toggle__controls">
1719
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1720
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1721
- </span>
1722
- </span>
1723
- </button>
1724
- </div>
1725
1715
  </div>
1726
1716
  </div>
1727
1717
  </div>
@@ -1994,20 +1984,16 @@ wrapperTag: div
1994
1984
  </button>
1995
1985
  </span>
1996
1986
  <div class="pf-v5-c-masthead__main">
1997
- <a
1998
- class="pf-v5-c-masthead__brand"
1999
- href="#"
2000
- style="--pf-v5-c-brand--Height: 36px;"
2001
- >
2002
- <svg height="36px" viewBox="0 0 679 158" role="img">
2003
- <title>Patternfly logo</title>
1987
+ <a class="pf-v5-c-masthead__brand" href="#">
1988
+ <svg height="40px" viewBox="0 0 679 158">
1989
+ <title>PF-HorizontalLogo-Color</title>
2004
1990
  <defs>
2005
1991
  <linearGradient
2006
1992
  x1="68%"
2007
1993
  y1="2.25860997e-13%"
2008
1994
  x2="32%"
2009
1995
  y2="100%"
2010
- id="linearGradient-1"
1996
+ id="linearGradient-page-demo-sticky-top-section-group-masthead"
2011
1997
  >
2012
1998
  <stop stop-color="#2B9AF3" offset="0%" />
2013
1999
  <stop
@@ -2017,13 +2003,7 @@ wrapperTag: div
2017
2003
  />
2018
2004
  </linearGradient>
2019
2005
  </defs>
2020
- <g
2021
- id="PF-HorizontalLogo-Color"
2022
- stroke="none"
2023
- stroke-width="1"
2024
- fill="none"
2025
- fill-rule="evenodd"
2026
- >
2006
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2027
2007
  <g
2028
2008
  transform="translate(206.000000, 45.750000)"
2029
2009
  fill="var(--pf-t--global--text--color--regular)"
@@ -2058,19 +2038,18 @@ wrapperTag: div
2058
2038
  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"
2059
2039
  />
2060
2040
  </g>
2061
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2041
+ <g transform="translate(0.000000, 0.000000)">
2062
2042
  <path
2063
2043
  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"
2064
- id="Rectangle-Copy-17"
2065
- fill="var(--pf-t--global--color--brand--200)"
2044
+ fill="#0066CC"
2066
2045
  />
2067
2046
  <path
2068
2047
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2069
- fill="url(#linearGradient-1)"
2048
+ fill="url(#linearGradient-page-demo-sticky-top-section-group-masthead)"
2070
2049
  />
2071
2050
  <path
2072
2051
  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"
2073
- fill="url(#linearGradient-1)"
2052
+ fill="url(#linearGradient-page-demo-sticky-top-section-group-masthead)"
2074
2053
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2075
2054
  />
2076
2055
  </g>
@@ -2085,8 +2064,38 @@ wrapperTag: div
2085
2064
  >
2086
2065
  <div class="pf-v5-c-toolbar__content">
2087
2066
  <div class="pf-v5-c-toolbar__content-section">
2067
+ <div class="pf-v5-c-toolbar__item">
2068
+ <button
2069
+ class="pf-v5-c-menu-toggle"
2070
+ type="button"
2071
+ aria-expanded="false"
2072
+ >
2073
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2074
+ <span class="pf-v5-c-menu-toggle__controls">
2075
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2076
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2077
+ </span>
2078
+ </span>
2079
+ </button>
2080
+ </div>
2081
+
2082
+ <div class="pf-v5-c-toolbar__item">
2083
+ <button
2084
+ class="pf-v5-c-menu-toggle"
2085
+ type="button"
2086
+ aria-expanded="false"
2087
+ >
2088
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2089
+ <span class="pf-v5-c-menu-toggle__controls">
2090
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2091
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2092
+ </span>
2093
+ </span>
2094
+ </button>
2095
+ </div>
2096
+
2088
2097
  <div
2089
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2098
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2090
2099
  >
2091
2100
  <div
2092
2101
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2133,27 +2142,6 @@ wrapperTag: div
2133
2142
  </button>
2134
2143
  </div>
2135
2144
  </div>
2136
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2137
- <button
2138
- class="pf-v5-c-menu-toggle pf-m-full-height"
2139
- type="button"
2140
- aria-expanded="false"
2141
- >
2142
- <span class="pf-v5-c-menu-toggle__icon">
2143
- <img
2144
- class="pf-v5-c-avatar"
2145
- alt="Avatar image"
2146
- src="/assets/images/img_avatar-light.svg"
2147
- />
2148
- </span>
2149
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2150
- <span class="pf-v5-c-menu-toggle__controls">
2151
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2152
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2153
- </span>
2154
- </span>
2155
- </button>
2156
- </div>
2157
2145
  </div>
2158
2146
  </div>
2159
2147
  </div>
@@ -2426,20 +2414,16 @@ wrapperTag: div
2426
2414
  </button>
2427
2415
  </span>
2428
2416
  <div class="pf-v5-c-masthead__main">
2429
- <a
2430
- class="pf-v5-c-masthead__brand"
2431
- href="#"
2432
- style="--pf-v5-c-brand--Height: 36px;"
2433
- >
2434
- <svg height="36px" viewBox="0 0 679 158" role="img">
2435
- <title>Patternfly logo</title>
2417
+ <a class="pf-v5-c-masthead__brand" href="#">
2418
+ <svg height="40px" viewBox="0 0 679 158">
2419
+ <title>PF-HorizontalLogo-Color</title>
2436
2420
  <defs>
2437
2421
  <linearGradient
2438
2422
  x1="68%"
2439
2423
  y1="2.25860997e-13%"
2440
2424
  x2="32%"
2441
2425
  y2="100%"
2442
- id="linearGradient-1"
2426
+ id="linearGradient-page-demo-sticky-section-bottom-masthead"
2443
2427
  >
2444
2428
  <stop stop-color="#2B9AF3" offset="0%" />
2445
2429
  <stop
@@ -2449,13 +2433,7 @@ wrapperTag: div
2449
2433
  />
2450
2434
  </linearGradient>
2451
2435
  </defs>
2452
- <g
2453
- id="PF-HorizontalLogo-Color"
2454
- stroke="none"
2455
- stroke-width="1"
2456
- fill="none"
2457
- fill-rule="evenodd"
2458
- >
2436
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2459
2437
  <g
2460
2438
  transform="translate(206.000000, 45.750000)"
2461
2439
  fill="var(--pf-t--global--text--color--regular)"
@@ -2490,19 +2468,18 @@ wrapperTag: div
2490
2468
  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"
2491
2469
  />
2492
2470
  </g>
2493
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2471
+ <g transform="translate(0.000000, 0.000000)">
2494
2472
  <path
2495
2473
  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"
2496
- id="Rectangle-Copy-17"
2497
- fill="var(--pf-t--global--color--brand--200)"
2474
+ fill="#0066CC"
2498
2475
  />
2499
2476
  <path
2500
2477
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2501
- fill="url(#linearGradient-1)"
2478
+ fill="url(#linearGradient-page-demo-sticky-section-bottom-masthead)"
2502
2479
  />
2503
2480
  <path
2504
2481
  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"
2505
- fill="url(#linearGradient-1)"
2482
+ fill="url(#linearGradient-page-demo-sticky-section-bottom-masthead)"
2506
2483
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2507
2484
  />
2508
2485
  </g>
@@ -2517,8 +2494,38 @@ wrapperTag: div
2517
2494
  >
2518
2495
  <div class="pf-v5-c-toolbar__content">
2519
2496
  <div class="pf-v5-c-toolbar__content-section">
2497
+ <div class="pf-v5-c-toolbar__item">
2498
+ <button
2499
+ class="pf-v5-c-menu-toggle"
2500
+ type="button"
2501
+ aria-expanded="false"
2502
+ >
2503
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2504
+ <span class="pf-v5-c-menu-toggle__controls">
2505
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2506
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2507
+ </span>
2508
+ </span>
2509
+ </button>
2510
+ </div>
2511
+
2512
+ <div class="pf-v5-c-toolbar__item">
2513
+ <button
2514
+ class="pf-v5-c-menu-toggle"
2515
+ type="button"
2516
+ aria-expanded="false"
2517
+ >
2518
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2519
+ <span class="pf-v5-c-menu-toggle__controls">
2520
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2521
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2522
+ </span>
2523
+ </span>
2524
+ </button>
2525
+ </div>
2526
+
2520
2527
  <div
2521
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2528
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2522
2529
  >
2523
2530
  <div
2524
2531
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2565,27 +2572,6 @@ wrapperTag: div
2565
2572
  </button>
2566
2573
  </div>
2567
2574
  </div>
2568
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2569
- <button
2570
- class="pf-v5-c-menu-toggle pf-m-full-height"
2571
- type="button"
2572
- aria-expanded="false"
2573
- >
2574
- <span class="pf-v5-c-menu-toggle__icon">
2575
- <img
2576
- class="pf-v5-c-avatar"
2577
- alt="Avatar image"
2578
- src="/assets/images/img_avatar-light.svg"
2579
- />
2580
- </span>
2581
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2582
- <span class="pf-v5-c-menu-toggle__controls">
2583
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2584
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2585
- </span>
2586
- </span>
2587
- </button>
2588
- </div>
2589
2575
  </div>
2590
2576
  </div>
2591
2577
  </div>
@@ -2860,20 +2846,16 @@ wrapperTag: div
2860
2846
  </button>
2861
2847
  </span>
2862
2848
  <div class="pf-v5-c-masthead__main">
2863
- <a
2864
- class="pf-v5-c-masthead__brand"
2865
- href="#"
2866
- style="--pf-v5-c-brand--Height: 36px;"
2867
- >
2868
- <svg height="36px" viewBox="0 0 679 158" role="img">
2869
- <title>Patternfly logo</title>
2849
+ <a class="pf-v5-c-masthead__brand" href="#">
2850
+ <svg height="40px" viewBox="0 0 679 158">
2851
+ <title>PF-HorizontalLogo-Color</title>
2870
2852
  <defs>
2871
2853
  <linearGradient
2872
2854
  x1="68%"
2873
2855
  y1="2.25860997e-13%"
2874
2856
  x2="32%"
2875
2857
  y2="100%"
2876
- id="linearGradient-1"
2858
+ id="linearGradient-page-demo-overflow-scroll-masthead"
2877
2859
  >
2878
2860
  <stop stop-color="#2B9AF3" offset="0%" />
2879
2861
  <stop
@@ -2883,13 +2865,7 @@ wrapperTag: div
2883
2865
  />
2884
2866
  </linearGradient>
2885
2867
  </defs>
2886
- <g
2887
- id="PF-HorizontalLogo-Color"
2888
- stroke="none"
2889
- stroke-width="1"
2890
- fill="none"
2891
- fill-rule="evenodd"
2892
- >
2868
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2893
2869
  <g
2894
2870
  transform="translate(206.000000, 45.750000)"
2895
2871
  fill="var(--pf-t--global--text--color--regular)"
@@ -2924,19 +2900,18 @@ wrapperTag: div
2924
2900
  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"
2925
2901
  />
2926
2902
  </g>
2927
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2903
+ <g transform="translate(0.000000, 0.000000)">
2928
2904
  <path
2929
2905
  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"
2930
- id="Rectangle-Copy-17"
2931
- fill="var(--pf-t--global--color--brand--200)"
2906
+ fill="#0066CC"
2932
2907
  />
2933
2908
  <path
2934
2909
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2935
- fill="url(#linearGradient-1)"
2910
+ fill="url(#linearGradient-page-demo-overflow-scroll-masthead)"
2936
2911
  />
2937
2912
  <path
2938
2913
  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"
2939
- fill="url(#linearGradient-1)"
2914
+ fill="url(#linearGradient-page-demo-overflow-scroll-masthead)"
2940
2915
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2941
2916
  />
2942
2917
  </g>
@@ -2951,8 +2926,38 @@ wrapperTag: div
2951
2926
  >
2952
2927
  <div class="pf-v5-c-toolbar__content">
2953
2928
  <div class="pf-v5-c-toolbar__content-section">
2929
+ <div class="pf-v5-c-toolbar__item">
2930
+ <button
2931
+ class="pf-v5-c-menu-toggle"
2932
+ type="button"
2933
+ aria-expanded="false"
2934
+ >
2935
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2936
+ <span class="pf-v5-c-menu-toggle__controls">
2937
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2938
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2939
+ </span>
2940
+ </span>
2941
+ </button>
2942
+ </div>
2943
+
2944
+ <div class="pf-v5-c-toolbar__item">
2945
+ <button
2946
+ class="pf-v5-c-menu-toggle"
2947
+ type="button"
2948
+ aria-expanded="false"
2949
+ >
2950
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2951
+ <span class="pf-v5-c-menu-toggle__controls">
2952
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2953
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2954
+ </span>
2955
+ </span>
2956
+ </button>
2957
+ </div>
2958
+
2954
2959
  <div
2955
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2960
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
2956
2961
  >
2957
2962
  <div
2958
2963
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2999,27 +3004,6 @@ wrapperTag: div
2999
3004
  </button>
3000
3005
  </div>
3001
3006
  </div>
3002
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3003
- <button
3004
- class="pf-v5-c-menu-toggle pf-m-full-height"
3005
- type="button"
3006
- aria-expanded="false"
3007
- >
3008
- <span class="pf-v5-c-menu-toggle__icon">
3009
- <img
3010
- class="pf-v5-c-avatar"
3011
- alt="Avatar image"
3012
- src="/assets/images/img_avatar-light.svg"
3013
- />
3014
- </span>
3015
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3016
- <span class="pf-v5-c-menu-toggle__controls">
3017
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3018
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3019
- </span>
3020
- </span>
3021
- </button>
3022
- </div>
3023
3007
  </div>
3024
3008
  </div>
3025
3009
  </div>
@@ -3299,20 +3283,16 @@ wrapperTag: div
3299
3283
  </button>
3300
3284
  </span>
3301
3285
  <div class="pf-v5-c-masthead__main">
3302
- <a
3303
- class="pf-v5-c-masthead__brand"
3304
- href="#"
3305
- style="--pf-v5-c-brand--Height: 36px;"
3306
- >
3307
- <svg height="36px" viewBox="0 0 679 158" role="img">
3308
- <title>Patternfly logo</title>
3286
+ <a class="pf-v5-c-masthead__brand" href="#">
3287
+ <svg height="40px" viewBox="0 0 679 158">
3288
+ <title>PF-HorizontalLogo-Color</title>
3309
3289
  <defs>
3310
3290
  <linearGradient
3311
3291
  x1="68%"
3312
3292
  y1="2.25860997e-13%"
3313
3293
  x2="32%"
3314
3294
  y2="100%"
3315
- id="linearGradient-1"
3295
+ id="linearGradient-page-demo-centered-section-masthead"
3316
3296
  >
3317
3297
  <stop stop-color="#2B9AF3" offset="0%" />
3318
3298
  <stop
@@ -3322,13 +3302,7 @@ wrapperTag: div
3322
3302
  />
3323
3303
  </linearGradient>
3324
3304
  </defs>
3325
- <g
3326
- id="PF-HorizontalLogo-Color"
3327
- stroke="none"
3328
- stroke-width="1"
3329
- fill="none"
3330
- fill-rule="evenodd"
3331
- >
3305
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
3332
3306
  <g
3333
3307
  transform="translate(206.000000, 45.750000)"
3334
3308
  fill="var(--pf-t--global--text--color--regular)"
@@ -3363,19 +3337,18 @@ wrapperTag: div
3363
3337
  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"
3364
3338
  />
3365
3339
  </g>
3366
- <g id="Logo" transform="translate(0.000000, 0.000000)">
3340
+ <g transform="translate(0.000000, 0.000000)">
3367
3341
  <path
3368
3342
  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"
3369
- id="Rectangle-Copy-17"
3370
- fill="var(--pf-t--global--color--brand--200)"
3343
+ fill="#0066CC"
3371
3344
  />
3372
3345
  <path
3373
3346
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
3374
- fill="url(#linearGradient-1)"
3347
+ fill="url(#linearGradient-page-demo-centered-section-masthead)"
3375
3348
  />
3376
3349
  <path
3377
3350
  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"
3378
- fill="url(#linearGradient-1)"
3351
+ fill="url(#linearGradient-page-demo-centered-section-masthead)"
3379
3352
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
3380
3353
  />
3381
3354
  </g>
@@ -3390,8 +3363,38 @@ wrapperTag: div
3390
3363
  >
3391
3364
  <div class="pf-v5-c-toolbar__content">
3392
3365
  <div class="pf-v5-c-toolbar__content-section">
3366
+ <div class="pf-v5-c-toolbar__item">
3367
+ <button
3368
+ class="pf-v5-c-menu-toggle"
3369
+ type="button"
3370
+ aria-expanded="false"
3371
+ >
3372
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
3373
+ <span class="pf-v5-c-menu-toggle__controls">
3374
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3375
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3376
+ </span>
3377
+ </span>
3378
+ </button>
3379
+ </div>
3380
+
3381
+ <div class="pf-v5-c-toolbar__item">
3382
+ <button
3383
+ class="pf-v5-c-menu-toggle"
3384
+ type="button"
3385
+ aria-expanded="false"
3386
+ >
3387
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
3388
+ <span class="pf-v5-c-menu-toggle__controls">
3389
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
3390
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
3391
+ </span>
3392
+ </span>
3393
+ </button>
3394
+ </div>
3395
+
3393
3396
  <div
3394
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3397
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
3395
3398
  >
3396
3399
  <div
3397
3400
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -3438,27 +3441,6 @@ wrapperTag: div
3438
3441
  </button>
3439
3442
  </div>
3440
3443
  </div>
3441
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
3442
- <button
3443
- class="pf-v5-c-menu-toggle pf-m-full-height"
3444
- type="button"
3445
- aria-expanded="false"
3446
- >
3447
- <span class="pf-v5-c-menu-toggle__icon">
3448
- <img
3449
- class="pf-v5-c-avatar"
3450
- alt="Avatar image"
3451
- src="/assets/images/img_avatar-light.svg"
3452
- />
3453
- </span>
3454
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
3455
- <span class="pf-v5-c-menu-toggle__controls">
3456
- <span class="pf-v5-c-menu-toggle__toggle-icon">
3457
- <i class="fas fa-angle-down" aria-hidden="true"></i>
3458
- </span>
3459
- </span>
3460
- </button>
3461
- </div>
3462
3444
  </div>
3463
3445
  </div>
3464
3446
  </div>