@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/JumpLinks/examples/JumpLinks.md CHANGED
@@ -27,20 +27,16 @@ section: components
27
27
  </button>
28
28
  </span>
29
29
  <div class="pf-v5-c-masthead__main">
30
- <a
31
- class="pf-v5-c-masthead__brand"
32
- href="#"
33
- style="--pf-v5-c-brand--Height: 36px;"
34
- >
35
- <svg height="36px" viewBox="0 0 679 158" role="img">
36
- <title>Patternfly logo</title>
30
+ <a class="pf-v5-c-masthead__brand" href="#">
31
+ <svg height="40px" viewBox="0 0 679 158">
32
+ <title>PF-HorizontalLogo-Color</title>
37
33
  <defs>
38
34
  <linearGradient
39
35
  x1="68%"
40
36
  y1="2.25860997e-13%"
41
37
  x2="32%"
42
38
  y2="100%"
43
- id="linearGradient-1"
39
+ id="linearGradient-jump-links-collapsed-mobile-example-masthead"
44
40
  >
45
41
  <stop stop-color="#2B9AF3" offset="0%" />
46
42
  <stop
@@ -50,13 +46,7 @@ section: components
50
46
  />
51
47
  </linearGradient>
52
48
  </defs>
53
- <g
54
- id="PF-HorizontalLogo-Color"
55
- stroke="none"
56
- stroke-width="1"
57
- fill="none"
58
- fill-rule="evenodd"
59
- >
49
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
60
50
  <g
61
51
  transform="translate(206.000000, 45.750000)"
62
52
  fill="var(--pf-t--global--text--color--regular)"
@@ -91,19 +81,18 @@ section: components
91
81
  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"
92
82
  />
93
83
  </g>
94
- <g id="Logo" transform="translate(0.000000, 0.000000)">
84
+ <g transform="translate(0.000000, 0.000000)">
95
85
  <path
96
86
  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"
97
- id="Rectangle-Copy-17"
98
- fill="var(--pf-t--global--color--brand--200)"
87
+ fill="#0066CC"
99
88
  />
100
89
  <path
101
90
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
102
- fill="url(#linearGradient-1)"
91
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
103
92
  />
104
93
  <path
105
94
  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"
106
- fill="url(#linearGradient-1)"
95
+ fill="url(#linearGradient-jump-links-collapsed-mobile-example-masthead)"
107
96
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
108
97
  />
109
98
  </g>
@@ -118,8 +107,38 @@ section: components
118
107
  >
119
108
  <div class="pf-v5-c-toolbar__content">
120
109
  <div class="pf-v5-c-toolbar__content-section">
110
+ <div class="pf-v5-c-toolbar__item">
111
+ <button
112
+ class="pf-v5-c-menu-toggle"
113
+ type="button"
114
+ aria-expanded="false"
115
+ >
116
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
117
+ <span class="pf-v5-c-menu-toggle__controls">
118
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
119
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
120
+ </span>
121
+ </span>
122
+ </button>
123
+ </div>
124
+
125
+ <div class="pf-v5-c-toolbar__item">
126
+ <button
127
+ class="pf-v5-c-menu-toggle"
128
+ type="button"
129
+ aria-expanded="false"
130
+ >
131
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
132
+ <span class="pf-v5-c-menu-toggle__controls">
133
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
134
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
135
+ </span>
136
+ </span>
137
+ </button>
138
+ </div>
139
+
121
140
  <div
122
- 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"
141
+ 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"
123
142
  >
124
143
  <div
125
144
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -166,27 +185,6 @@ section: components
166
185
  </button>
167
186
  </div>
168
187
  </div>
169
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
170
- <button
171
- class="pf-v5-c-menu-toggle pf-m-full-height"
172
- type="button"
173
- aria-expanded="false"
174
- >
175
- <span class="pf-v5-c-menu-toggle__icon">
176
- <img
177
- class="pf-v5-c-avatar"
178
- alt="Avatar image"
179
- src="/assets/images/img_avatar-light.svg"
180
- />
181
- </span>
182
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
183
- <span class="pf-v5-c-menu-toggle__controls">
184
- <span class="pf-v5-c-menu-toggle__toggle-icon">
185
- <i class="fas fa-angle-down" aria-hidden="true"></i>
186
- </span>
187
- </span>
188
- </button>
189
- </div>
190
188
  </div>
191
189
  </div>
192
190
  </div>
@@ -409,20 +407,16 @@ section: components
409
407
  </button>
410
408
  </span>
411
409
  <div class="pf-v5-c-masthead__main">
412
- <a
413
- class="pf-v5-c-masthead__brand"
414
- href="#"
415
- style="--pf-v5-c-brand--Height: 36px;"
416
- >
417
- <svg height="36px" viewBox="0 0 679 158" role="img">
418
- <title>Patternfly logo</title>
410
+ <a class="pf-v5-c-masthead__brand" href="#">
411
+ <svg height="40px" viewBox="0 0 679 158">
412
+ <title>PF-HorizontalLogo-Color</title>
419
413
  <defs>
420
414
  <linearGradient
421
415
  x1="68%"
422
416
  y1="2.25860997e-13%"
423
417
  x2="32%"
424
418
  y2="100%"
425
- id="linearGradient-1"
419
+ id="linearGradient-jump-links-vertical-expanded-mobile-example-masthead"
426
420
  >
427
421
  <stop stop-color="#2B9AF3" offset="0%" />
428
422
  <stop
@@ -432,13 +426,7 @@ section: components
432
426
  />
433
427
  </linearGradient>
434
428
  </defs>
435
- <g
436
- id="PF-HorizontalLogo-Color"
437
- stroke="none"
438
- stroke-width="1"
439
- fill="none"
440
- fill-rule="evenodd"
441
- >
429
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
442
430
  <g
443
431
  transform="translate(206.000000, 45.750000)"
444
432
  fill="var(--pf-t--global--text--color--regular)"
@@ -473,19 +461,18 @@ section: components
473
461
  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"
474
462
  />
475
463
  </g>
476
- <g id="Logo" transform="translate(0.000000, 0.000000)">
464
+ <g transform="translate(0.000000, 0.000000)">
477
465
  <path
478
466
  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"
479
- id="Rectangle-Copy-17"
480
- fill="var(--pf-t--global--color--brand--200)"
467
+ fill="#0066CC"
481
468
  />
482
469
  <path
483
470
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
484
- fill="url(#linearGradient-1)"
471
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
485
472
  />
486
473
  <path
487
474
  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"
488
- fill="url(#linearGradient-1)"
475
+ fill="url(#linearGradient-jump-links-vertical-expanded-mobile-example-masthead)"
489
476
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
490
477
  />
491
478
  </g>
@@ -500,8 +487,38 @@ section: components
500
487
  >
501
488
  <div class="pf-v5-c-toolbar__content">
502
489
  <div class="pf-v5-c-toolbar__content-section">
490
+ <div class="pf-v5-c-toolbar__item">
491
+ <button
492
+ class="pf-v5-c-menu-toggle"
493
+ type="button"
494
+ aria-expanded="false"
495
+ >
496
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
497
+ <span class="pf-v5-c-menu-toggle__controls">
498
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
499
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
500
+ </span>
501
+ </span>
502
+ </button>
503
+ </div>
504
+
505
+ <div class="pf-v5-c-toolbar__item">
506
+ <button
507
+ class="pf-v5-c-menu-toggle"
508
+ type="button"
509
+ aria-expanded="false"
510
+ >
511
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
512
+ <span class="pf-v5-c-menu-toggle__controls">
513
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
514
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
515
+ </span>
516
+ </span>
517
+ </button>
518
+ </div>
519
+
503
520
  <div
504
- 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"
521
+ 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"
505
522
  >
506
523
  <div
507
524
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -548,27 +565,6 @@ section: components
548
565
  </button>
549
566
  </div>
550
567
  </div>
551
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
552
- <button
553
- class="pf-v5-c-menu-toggle pf-m-full-height"
554
- type="button"
555
- aria-expanded="false"
556
- >
557
- <span class="pf-v5-c-menu-toggle__icon">
558
- <img
559
- class="pf-v5-c-avatar"
560
- alt="Avatar image"
561
- src="/assets/images/img_avatar-light.svg"
562
- />
563
- </span>
564
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
565
- <span class="pf-v5-c-menu-toggle__controls">
566
- <span class="pf-v5-c-menu-toggle__toggle-icon">
567
- <i class="fas fa-angle-down" aria-hidden="true"></i>
568
- </span>
569
- </span>
570
- </button>
571
- </div>
572
568
  </div>
573
569
  </div>
574
570
  </div>
@@ -791,20 +787,16 @@ section: components
791
787
  </button>
792
788
  </span>
793
789
  <div class="pf-v5-c-masthead__main">
794
- <a
795
- class="pf-v5-c-masthead__brand"
796
- href="#"
797
- style="--pf-v5-c-brand--Height: 36px;"
798
- >
799
- <svg height="36px" viewBox="0 0 679 158" role="img">
800
- <title>Patternfly logo</title>
790
+ <a class="pf-v5-c-masthead__brand" href="#">
791
+ <svg height="40px" viewBox="0 0 679 158">
792
+ <title>PF-HorizontalLogo-Color</title>
801
793
  <defs>
802
794
  <linearGradient
803
795
  x1="68%"
804
796
  y1="2.25860997e-13%"
805
797
  x2="32%"
806
798
  y2="100%"
807
- id="linearGradient-1"
799
+ id="linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead"
808
800
  >
809
801
  <stop stop-color="#2B9AF3" offset="0%" />
810
802
  <stop
@@ -814,13 +806,7 @@ section: components
814
806
  />
815
807
  </linearGradient>
816
808
  </defs>
817
- <g
818
- id="PF-HorizontalLogo-Color"
819
- stroke="none"
820
- stroke-width="1"
821
- fill="none"
822
- fill-rule="evenodd"
823
- >
809
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
824
810
  <g
825
811
  transform="translate(206.000000, 45.750000)"
826
812
  fill="var(--pf-t--global--text--color--regular)"
@@ -855,19 +841,18 @@ section: components
855
841
  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"
856
842
  />
857
843
  </g>
858
- <g id="Logo" transform="translate(0.000000, 0.000000)">
844
+ <g transform="translate(0.000000, 0.000000)">
859
845
  <path
860
846
  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"
861
- id="Rectangle-Copy-17"
862
- fill="var(--pf-t--global--color--brand--200)"
847
+ fill="#0066CC"
863
848
  />
864
849
  <path
865
850
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
866
- fill="url(#linearGradient-1)"
851
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
867
852
  />
868
853
  <path
869
854
  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"
870
- fill="url(#linearGradient-1)"
855
+ fill="url(#linearGradient-jump-links-vertical-toggle-text-mobile-example-masthead)"
871
856
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
872
857
  />
873
858
  </g>
@@ -882,8 +867,38 @@ section: components
882
867
  >
883
868
  <div class="pf-v5-c-toolbar__content">
884
869
  <div class="pf-v5-c-toolbar__content-section">
870
+ <div class="pf-v5-c-toolbar__item">
871
+ <button
872
+ class="pf-v5-c-menu-toggle"
873
+ type="button"
874
+ aria-expanded="false"
875
+ >
876
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
877
+ <span class="pf-v5-c-menu-toggle__controls">
878
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
879
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
880
+ </span>
881
+ </span>
882
+ </button>
883
+ </div>
884
+
885
+ <div class="pf-v5-c-toolbar__item">
886
+ <button
887
+ class="pf-v5-c-menu-toggle"
888
+ type="button"
889
+ aria-expanded="false"
890
+ >
891
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
892
+ <span class="pf-v5-c-menu-toggle__controls">
893
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
894
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
895
+ </span>
896
+ </span>
897
+ </button>
898
+ </div>
899
+
885
900
  <div
886
- 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"
901
+ 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"
887
902
  >
888
903
  <div
889
904
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -930,27 +945,6 @@ section: components
930
945
  </button>
931
946
  </div>
932
947
  </div>
933
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
934
- <button
935
- class="pf-v5-c-menu-toggle pf-m-full-height"
936
- type="button"
937
- aria-expanded="false"
938
- >
939
- <span class="pf-v5-c-menu-toggle__icon">
940
- <img
941
- class="pf-v5-c-avatar"
942
- alt="Avatar image"
943
- src="/assets/images/img_avatar-light.svg"
944
- />
945
- </span>
946
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
947
- <span class="pf-v5-c-menu-toggle__controls">
948
- <span class="pf-v5-c-menu-toggle__toggle-icon">
949
- <i class="fas fa-angle-down" aria-hidden="true"></i>
950
- </span>
951
- </span>
952
- </button>
953
- </div>
954
948
  </div>
955
949
  </div>
956
950
  </div>
@@ -1170,20 +1164,16 @@ section: components
1170
1164
  </button>
1171
1165
  </span>
1172
1166
  <div class="pf-v5-c-masthead__main">
1173
- <a
1174
- class="pf-v5-c-masthead__brand"
1175
- href="#"
1176
- style="--pf-v5-c-brand--Height: 36px;"
1177
- >
1178
- <svg height="36px" viewBox="0 0 679 158" role="img">
1179
- <title>Patternfly logo</title>
1167
+ <a class="pf-v5-c-masthead__brand" href="#">
1168
+ <svg height="40px" viewBox="0 0 679 158">
1169
+ <title>PF-HorizontalLogo-Color</title>
1180
1170
  <defs>
1181
1171
  <linearGradient
1182
1172
  x1="68%"
1183
1173
  y1="2.25860997e-13%"
1184
1174
  x2="32%"
1185
1175
  y2="100%"
1186
- id="linearGradient-1"
1176
+ id="linearGradient-jump-links-horizontal-example-masthead"
1187
1177
  >
1188
1178
  <stop stop-color="#2B9AF3" offset="0%" />
1189
1179
  <stop
@@ -1193,13 +1183,7 @@ section: components
1193
1183
  />
1194
1184
  </linearGradient>
1195
1185
  </defs>
1196
- <g
1197
- id="PF-HorizontalLogo-Color"
1198
- stroke="none"
1199
- stroke-width="1"
1200
- fill="none"
1201
- fill-rule="evenodd"
1202
- >
1186
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1203
1187
  <g
1204
1188
  transform="translate(206.000000, 45.750000)"
1205
1189
  fill="var(--pf-t--global--text--color--regular)"
@@ -1234,19 +1218,18 @@ section: components
1234
1218
  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"
1235
1219
  />
1236
1220
  </g>
1237
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1221
+ <g transform="translate(0.000000, 0.000000)">
1238
1222
  <path
1239
1223
  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"
1240
- id="Rectangle-Copy-17"
1241
- fill="var(--pf-t--global--color--brand--200)"
1224
+ fill="#0066CC"
1242
1225
  />
1243
1226
  <path
1244
1227
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1245
- fill="url(#linearGradient-1)"
1228
+ fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1246
1229
  />
1247
1230
  <path
1248
1231
  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"
1249
- fill="url(#linearGradient-1)"
1232
+ fill="url(#linearGradient-jump-links-horizontal-example-masthead)"
1250
1233
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1251
1234
  />
1252
1235
  </g>
@@ -1261,8 +1244,38 @@ section: components
1261
1244
  >
1262
1245
  <div class="pf-v5-c-toolbar__content">
1263
1246
  <div class="pf-v5-c-toolbar__content-section">
1247
+ <div class="pf-v5-c-toolbar__item">
1248
+ <button
1249
+ class="pf-v5-c-menu-toggle"
1250
+ type="button"
1251
+ aria-expanded="false"
1252
+ >
1253
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1254
+ <span class="pf-v5-c-menu-toggle__controls">
1255
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1256
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1257
+ </span>
1258
+ </span>
1259
+ </button>
1260
+ </div>
1261
+
1262
+ <div class="pf-v5-c-toolbar__item">
1263
+ <button
1264
+ class="pf-v5-c-menu-toggle"
1265
+ type="button"
1266
+ aria-expanded="false"
1267
+ >
1268
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1269
+ <span class="pf-v5-c-menu-toggle__controls">
1270
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1271
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1272
+ </span>
1273
+ </span>
1274
+ </button>
1275
+ </div>
1276
+
1264
1277
  <div
1265
- 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"
1278
+ 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"
1266
1279
  >
1267
1280
  <div
1268
1281
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1309,27 +1322,6 @@ section: components
1309
1322
  </button>
1310
1323
  </div>
1311
1324
  </div>
1312
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1313
- <button
1314
- class="pf-v5-c-menu-toggle pf-m-full-height"
1315
- type="button"
1316
- aria-expanded="false"
1317
- >
1318
- <span class="pf-v5-c-menu-toggle__icon">
1319
- <img
1320
- class="pf-v5-c-avatar"
1321
- alt="Avatar image"
1322
- src="/assets/images/img_avatar-light.svg"
1323
- />
1324
- </span>
1325
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1326
- <span class="pf-v5-c-menu-toggle__controls">
1327
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1328
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1329
- </span>
1330
- </span>
1331
- </button>
1332
- </div>
1333
1325
  </div>
1334
1326
  </div>
1335
1327
  </div>
@@ -1499,20 +1491,16 @@ section: components
1499
1491
  </button>
1500
1492
  </span>
1501
1493
  <div class="pf-v5-c-masthead__main">
1502
- <a
1503
- class="pf-v5-c-masthead__brand"
1504
- href="#"
1505
- style="--pf-v5-c-brand--Height: 36px;"
1506
- >
1507
- <svg height="36px" viewBox="0 0 679 158" role="img">
1508
- <title>Patternfly logo</title>
1494
+ <a class="pf-v5-c-masthead__brand" href="#">
1495
+ <svg height="40px" viewBox="0 0 679 158">
1496
+ <title>PF-HorizontalLogo-Color</title>
1509
1497
  <defs>
1510
1498
  <linearGradient
1511
1499
  x1="68%"
1512
1500
  y1="2.25860997e-13%"
1513
1501
  x2="32%"
1514
1502
  y2="100%"
1515
- id="linearGradient-1"
1503
+ id="linearGradient-jump-links-drawer-masthead"
1516
1504
  >
1517
1505
  <stop stop-color="#2B9AF3" offset="0%" />
1518
1506
  <stop
@@ -1522,13 +1510,7 @@ section: components
1522
1510
  />
1523
1511
  </linearGradient>
1524
1512
  </defs>
1525
- <g
1526
- id="PF-HorizontalLogo-Color"
1527
- stroke="none"
1528
- stroke-width="1"
1529
- fill="none"
1530
- fill-rule="evenodd"
1531
- >
1513
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1532
1514
  <g
1533
1515
  transform="translate(206.000000, 45.750000)"
1534
1516
  fill="var(--pf-t--global--text--color--regular)"
@@ -1563,19 +1545,18 @@ section: components
1563
1545
  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"
1564
1546
  />
1565
1547
  </g>
1566
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1548
+ <g transform="translate(0.000000, 0.000000)">
1567
1549
  <path
1568
1550
  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"
1569
- id="Rectangle-Copy-17"
1570
- fill="var(--pf-t--global--color--brand--200)"
1551
+ fill="#0066CC"
1571
1552
  />
1572
1553
  <path
1573
1554
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1574
- fill="url(#linearGradient-1)"
1555
+ fill="url(#linearGradient-jump-links-drawer-masthead)"
1575
1556
  />
1576
1557
  <path
1577
1558
  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"
1578
- fill="url(#linearGradient-1)"
1559
+ fill="url(#linearGradient-jump-links-drawer-masthead)"
1579
1560
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1580
1561
  />
1581
1562
  </g>
@@ -1590,8 +1571,38 @@ section: components
1590
1571
  >
1591
1572
  <div class="pf-v5-c-toolbar__content">
1592
1573
  <div class="pf-v5-c-toolbar__content-section">
1574
+ <div class="pf-v5-c-toolbar__item">
1575
+ <button
1576
+ class="pf-v5-c-menu-toggle"
1577
+ type="button"
1578
+ aria-expanded="false"
1579
+ >
1580
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1581
+ <span class="pf-v5-c-menu-toggle__controls">
1582
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1583
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1584
+ </span>
1585
+ </span>
1586
+ </button>
1587
+ </div>
1588
+
1589
+ <div class="pf-v5-c-toolbar__item">
1590
+ <button
1591
+ class="pf-v5-c-menu-toggle"
1592
+ type="button"
1593
+ aria-expanded="false"
1594
+ >
1595
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1596
+ <span class="pf-v5-c-menu-toggle__controls">
1597
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1598
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1599
+ </span>
1600
+ </span>
1601
+ </button>
1602
+ </div>
1603
+
1593
1604
  <div
1594
- 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"
1605
+ 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"
1595
1606
  >
1596
1607
  <div
1597
1608
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1638,27 +1649,6 @@ section: components
1638
1649
  </button>
1639
1650
  </div>
1640
1651
  </div>
1641
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1642
- <button
1643
- class="pf-v5-c-menu-toggle pf-m-full-height"
1644
- type="button"
1645
- aria-expanded="false"
1646
- >
1647
- <span class="pf-v5-c-menu-toggle__icon">
1648
- <img
1649
- class="pf-v5-c-avatar"
1650
- alt="Avatar image"
1651
- src="/assets/images/img_avatar-light.svg"
1652
- />
1653
- </span>
1654
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1655
- <span class="pf-v5-c-menu-toggle__controls">
1656
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1657
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1658
- </span>
1659
- </span>
1660
- </button>
1661
- </div>
1662
1652
  </div>
1663
1653
  </div>
1664
1654
  </div>
@@ -1848,20 +1838,16 @@ section: components
1848
1838
  </button>
1849
1839
  </span>
1850
1840
  <div class="pf-v5-c-masthead__main">
1851
- <a
1852
- class="pf-v5-c-masthead__brand"
1853
- href="#"
1854
- style="--pf-v5-c-brand--Height: 36px;"
1855
- >
1856
- <svg height="36px" viewBox="0 0 679 158" role="img">
1857
- <title>Patternfly logo</title>
1841
+ <a class="pf-v5-c-masthead__brand" href="#">
1842
+ <svg height="40px" viewBox="0 0 679 158">
1843
+ <title>PF-HorizontalLogo-Color</title>
1858
1844
  <defs>
1859
1845
  <linearGradient
1860
1846
  x1="68%"
1861
1847
  y1="2.25860997e-13%"
1862
1848
  x2="32%"
1863
1849
  y2="100%"
1864
- id="linearGradient-1"
1850
+ id="linearGradient-jump-links-drawer-expanded-masthead"
1865
1851
  >
1866
1852
  <stop stop-color="#2B9AF3" offset="0%" />
1867
1853
  <stop
@@ -1871,13 +1857,7 @@ section: components
1871
1857
  />
1872
1858
  </linearGradient>
1873
1859
  </defs>
1874
- <g
1875
- id="PF-HorizontalLogo-Color"
1876
- stroke="none"
1877
- stroke-width="1"
1878
- fill="none"
1879
- fill-rule="evenodd"
1880
- >
1860
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1881
1861
  <g
1882
1862
  transform="translate(206.000000, 45.750000)"
1883
1863
  fill="var(--pf-t--global--text--color--regular)"
@@ -1912,19 +1892,18 @@ section: components
1912
1892
  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"
1913
1893
  />
1914
1894
  </g>
1915
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1895
+ <g transform="translate(0.000000, 0.000000)">
1916
1896
  <path
1917
1897
  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"
1918
- id="Rectangle-Copy-17"
1919
- fill="var(--pf-t--global--color--brand--200)"
1898
+ fill="#0066CC"
1920
1899
  />
1921
1900
  <path
1922
1901
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1923
- fill="url(#linearGradient-1)"
1902
+ fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
1924
1903
  />
1925
1904
  <path
1926
1905
  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"
1927
- fill="url(#linearGradient-1)"
1906
+ fill="url(#linearGradient-jump-links-drawer-expanded-masthead)"
1928
1907
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1929
1908
  />
1930
1909
  </g>
@@ -1939,8 +1918,38 @@ section: components
1939
1918
  >
1940
1919
  <div class="pf-v5-c-toolbar__content">
1941
1920
  <div class="pf-v5-c-toolbar__content-section">
1921
+ <div class="pf-v5-c-toolbar__item">
1922
+ <button
1923
+ class="pf-v5-c-menu-toggle"
1924
+ type="button"
1925
+ aria-expanded="false"
1926
+ >
1927
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1928
+ <span class="pf-v5-c-menu-toggle__controls">
1929
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1930
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1931
+ </span>
1932
+ </span>
1933
+ </button>
1934
+ </div>
1935
+
1936
+ <div class="pf-v5-c-toolbar__item">
1937
+ <button
1938
+ class="pf-v5-c-menu-toggle"
1939
+ type="button"
1940
+ aria-expanded="false"
1941
+ >
1942
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1943
+ <span class="pf-v5-c-menu-toggle__controls">
1944
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1945
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1946
+ </span>
1947
+ </span>
1948
+ </button>
1949
+ </div>
1950
+
1942
1951
  <div
1943
- 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"
1952
+ 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"
1944
1953
  >
1945
1954
  <div
1946
1955
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1987,27 +1996,6 @@ section: components
1987
1996
  </button>
1988
1997
  </div>
1989
1998
  </div>
1990
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1991
- <button
1992
- class="pf-v5-c-menu-toggle pf-m-full-height"
1993
- type="button"
1994
- aria-expanded="false"
1995
- >
1996
- <span class="pf-v5-c-menu-toggle__icon">
1997
- <img
1998
- class="pf-v5-c-avatar"
1999
- alt="Avatar image"
2000
- src="/assets/images/img_avatar-light.svg"
2001
- />
2002
- </span>
2003
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2004
- <span class="pf-v5-c-menu-toggle__controls">
2005
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2006
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2007
- </span>
2008
- </span>
2009
- </button>
2010
- </div>
2011
1999
  </div>
2012
2000
  </div>
2013
2001
  </div>