@patternfly/patternfly 6.0.0-alpha.34 → 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 (76) hide show
  1. package/CODE_OF_CONDUCT.md +1 -2
  2. package/assets/images/PF-HorizontalLogo-Color.svg +29 -0
  3. package/assets/images/PF-HorizontalLogo-Reverse.svg +28 -0
  4. package/assets/images/PF-IconLogo-color.svg +17 -0
  5. package/components/Backdrop/backdrop.css +6 -2
  6. package/components/Backdrop/backdrop.scss +5 -2
  7. package/components/Banner/banner.css +4 -0
  8. package/components/Banner/banner.scss +5 -0
  9. package/components/Card/card.css +3 -0
  10. package/components/Card/card.scss +8 -0
  11. package/components/Divider/divider.css +97 -177
  12. package/components/Divider/divider.scss +60 -79
  13. package/components/Form/form.css +6 -0
  14. package/components/Form/form.scss +4 -1
  15. package/components/Masthead/masthead.css +267 -435
  16. package/components/Masthead/masthead.scss +118 -233
  17. package/components/MenuToggle/menu-toggle.css +1 -0
  18. package/components/MenuToggle/menu-toggle.scss +2 -0
  19. package/components/Popover/popover.css +0 -2
  20. package/components/Popover/popover.scss +2 -2
  21. package/components/SimpleList/simple-list.css +35 -52
  22. package/components/SimpleList/simple-list.scss +41 -51
  23. package/components/Table/table.scss +1 -0
  24. package/components/Tooltip/tooltip.css +0 -2
  25. package/components/Tooltip/tooltip.scss +3 -3
  26. package/components/Truncate/truncate.css +4 -0
  27. package/components/Truncate/truncate.scss +3 -0
  28. package/docs/components/Accordion/examples/Accordion.md +6 -6
  29. package/docs/components/Alert/examples/Alert.md +2 -2
  30. package/docs/components/Brand/examples/Brand.md +9 -33
  31. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  32. package/docs/components/Card/examples/Card.md +18 -20
  33. package/docs/components/Check/examples/Check.md +1 -0
  34. package/docs/components/Content/examples/Content.md +5 -5
  35. package/docs/components/Divider/examples/Divider.css +3 -1
  36. package/docs/components/Divider/examples/Divider.md +4 -5
  37. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -1
  38. package/docs/components/Label/examples/Label.md +11 -11
  39. package/docs/components/Masthead/examples/masthead.md +441 -16
  40. package/docs/components/Nav/examples/Navigation.css +18 -2
  41. package/docs/components/Nav/examples/Navigation.md +1 -1
  42. package/docs/components/Radio/examples/Radio.md +1 -1
  43. package/docs/components/SimpleList/examples/SimpleList.md +3 -3
  44. package/docs/components/Table/examples/Table.md +8 -8
  45. package/docs/components/Truncate/examples/Truncate.css +2 -2
  46. package/docs/demos/AboutModal/examples/AboutModal.md +40 -42
  47. package/docs/demos/Alert/examples/Alert.md +120 -126
  48. package/docs/demos/BackToTop/examples/BackToTop.md +40 -42
  49. package/docs/demos/Banner/examples/Banner.md +79 -80
  50. package/docs/demos/CardView/examples/CardView.md +40 -42
  51. package/docs/demos/ContextSelector/examples/ContextSelector.md +129 -146
  52. package/docs/demos/Dashboard/examples/Dashboard.md +40 -42
  53. package/docs/demos/DataList/examples/DataList.md +160 -279
  54. package/docs/demos/DescriptionList/examples/DescriptionList.md +120 -126
  55. package/docs/demos/Drawer/examples/Drawer.md +200 -210
  56. package/docs/demos/JumpLinks/examples/JumpLinks.md +240 -252
  57. package/docs/demos/Masthead/examples/Masthead.md +143 -224
  58. package/docs/demos/Modal/examples/Modal.md +240 -252
  59. package/docs/demos/Nav/examples/Nav.md +320 -336
  60. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +200 -210
  61. package/docs/demos/Page/examples/Page.md +360 -378
  62. package/docs/demos/Page/examples/Penta.md +8 -15
  63. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +280 -294
  64. package/docs/demos/Skeleton/examples/Skeleton.md +40 -42
  65. package/docs/demos/Table/examples/Table.md +617 -647
  66. package/docs/demos/Tabs/examples/Tabs.md +240 -252
  67. package/docs/demos/Toolbar/examples/Toolbar.md +80 -84
  68. package/docs/demos/Wizard/examples/Wizard.md +360 -378
  69. package/docs/layouts/Flex/examples/Flex.md +11 -11
  70. package/package.json +32 -32
  71. package/patternfly-no-globals.css +422 -673
  72. package/patternfly-theme-dark-unversioned.css +422 -673
  73. package/patternfly.css +422 -673
  74. package/patternfly.min.css +1 -1
  75. package/patternfly.min.css.map +1 -1
  76. package/components/SimpleList/themes/dark/simple-list.scss +0 -14
@@ -24,20 +24,16 @@ section: components
24
24
  </button>
25
25
  </span>
26
26
  <div class="pf-v5-c-masthead__main">
27
- <a
28
- class="pf-v5-c-masthead__brand"
29
- href="#"
30
- style="--pf-v5-c-brand--Height: 36px;"
31
- >
32
- <svg height="36px" viewBox="0 0 679 158" role="img">
33
- <title>Patternfly logo</title>
27
+ <a class="pf-v5-c-masthead__brand" href="#">
28
+ <svg height="40px" viewBox="0 0 679 158">
29
+ <title>PF-HorizontalLogo-Color</title>
34
30
  <defs>
35
31
  <linearGradient
36
32
  x1="68%"
37
33
  y1="2.25860997e-13%"
38
34
  x2="32%"
39
35
  y2="100%"
40
- id="linearGradient-1"
36
+ id="linearGradient-nav-basic-example-masthead"
41
37
  >
42
38
  <stop stop-color="#2B9AF3" offset="0%" />
43
39
  <stop
@@ -47,13 +43,7 @@ section: components
47
43
  />
48
44
  </linearGradient>
49
45
  </defs>
50
- <g
51
- id="PF-HorizontalLogo-Color"
52
- stroke="none"
53
- stroke-width="1"
54
- fill="none"
55
- fill-rule="evenodd"
56
- >
46
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
57
47
  <g
58
48
  transform="translate(206.000000, 45.750000)"
59
49
  fill="var(--pf-t--global--text--color--regular)"
@@ -88,19 +78,18 @@ section: components
88
78
  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"
89
79
  />
90
80
  </g>
91
- <g id="Logo" transform="translate(0.000000, 0.000000)">
81
+ <g transform="translate(0.000000, 0.000000)">
92
82
  <path
93
83
  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"
94
- id="Rectangle-Copy-17"
95
- fill="var(--pf-t--global--color--brand--200)"
84
+ fill="#0066CC"
96
85
  />
97
86
  <path
98
87
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
99
- fill="url(#linearGradient-1)"
88
+ fill="url(#linearGradient-nav-basic-example-masthead)"
100
89
  />
101
90
  <path
102
91
  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"
103
- fill="url(#linearGradient-1)"
92
+ fill="url(#linearGradient-nav-basic-example-masthead)"
104
93
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
105
94
  />
106
95
  </g>
@@ -115,8 +104,38 @@ section: components
115
104
  >
116
105
  <div class="pf-v5-c-toolbar__content">
117
106
  <div class="pf-v5-c-toolbar__content-section">
107
+ <div class="pf-v5-c-toolbar__item">
108
+ <button
109
+ class="pf-v5-c-menu-toggle"
110
+ type="button"
111
+ aria-expanded="false"
112
+ >
113
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v5-c-menu-toggle__controls">
115
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
116
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
117
+ </span>
118
+ </span>
119
+ </button>
120
+ </div>
121
+
122
+ <div class="pf-v5-c-toolbar__item">
123
+ <button
124
+ class="pf-v5-c-menu-toggle"
125
+ type="button"
126
+ aria-expanded="false"
127
+ >
128
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v5-c-menu-toggle__controls">
130
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
131
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
132
+ </span>
133
+ </span>
134
+ </button>
135
+ </div>
136
+
118
137
  <div
119
- 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"
138
+ 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"
120
139
  >
121
140
  <div
122
141
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -163,27 +182,6 @@ section: components
163
182
  </button>
164
183
  </div>
165
184
  </div>
166
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
167
- <button
168
- class="pf-v5-c-menu-toggle pf-m-full-height"
169
- type="button"
170
- aria-expanded="false"
171
- >
172
- <span class="pf-v5-c-menu-toggle__icon">
173
- <img
174
- class="pf-v5-c-avatar"
175
- alt="Avatar image"
176
- src="/assets/images/img_avatar-light.svg"
177
- />
178
- </span>
179
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
180
- <span class="pf-v5-c-menu-toggle__controls">
181
- <span class="pf-v5-c-menu-toggle__toggle-icon">
182
- <i class="fas fa-angle-down" aria-hidden="true"></i>
183
- </span>
184
- </span>
185
- </button>
186
- </div>
187
185
  </div>
188
186
  </div>
189
187
  </div>
@@ -331,20 +329,16 @@ section: components
331
329
  </button>
332
330
  </span>
333
331
  <div class="pf-v5-c-masthead__main">
334
- <a
335
- class="pf-v5-c-masthead__brand"
336
- href="#"
337
- style="--pf-v5-c-brand--Height: 36px;"
338
- >
339
- <svg height="36px" viewBox="0 0 679 158" role="img">
340
- <title>Patternfly logo</title>
332
+ <a class="pf-v5-c-masthead__brand" href="#">
333
+ <svg height="40px" viewBox="0 0 679 158">
334
+ <title>PF-HorizontalLogo-Color</title>
341
335
  <defs>
342
336
  <linearGradient
343
337
  x1="68%"
344
338
  y1="2.25860997e-13%"
345
339
  x2="32%"
346
340
  y2="100%"
347
- id="linearGradient-1"
341
+ id="linearGradient-nav-grouped-nav-example-masthead"
348
342
  >
349
343
  <stop stop-color="#2B9AF3" offset="0%" />
350
344
  <stop
@@ -354,13 +348,7 @@ section: components
354
348
  />
355
349
  </linearGradient>
356
350
  </defs>
357
- <g
358
- id="PF-HorizontalLogo-Color"
359
- stroke="none"
360
- stroke-width="1"
361
- fill="none"
362
- fill-rule="evenodd"
363
- >
351
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
364
352
  <g
365
353
  transform="translate(206.000000, 45.750000)"
366
354
  fill="var(--pf-t--global--text--color--regular)"
@@ -395,19 +383,18 @@ section: components
395
383
  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"
396
384
  />
397
385
  </g>
398
- <g id="Logo" transform="translate(0.000000, 0.000000)">
386
+ <g transform="translate(0.000000, 0.000000)">
399
387
  <path
400
388
  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"
401
- id="Rectangle-Copy-17"
402
- fill="var(--pf-t--global--color--brand--200)"
389
+ fill="#0066CC"
403
390
  />
404
391
  <path
405
392
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
406
- fill="url(#linearGradient-1)"
393
+ fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
407
394
  />
408
395
  <path
409
396
  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"
410
- fill="url(#linearGradient-1)"
397
+ fill="url(#linearGradient-nav-grouped-nav-example-masthead)"
411
398
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
412
399
  />
413
400
  </g>
@@ -422,8 +409,38 @@ section: components
422
409
  >
423
410
  <div class="pf-v5-c-toolbar__content">
424
411
  <div class="pf-v5-c-toolbar__content-section">
412
+ <div class="pf-v5-c-toolbar__item">
413
+ <button
414
+ class="pf-v5-c-menu-toggle"
415
+ type="button"
416
+ aria-expanded="false"
417
+ >
418
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
419
+ <span class="pf-v5-c-menu-toggle__controls">
420
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
421
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
422
+ </span>
423
+ </span>
424
+ </button>
425
+ </div>
426
+
427
+ <div class="pf-v5-c-toolbar__item">
428
+ <button
429
+ class="pf-v5-c-menu-toggle"
430
+ type="button"
431
+ aria-expanded="false"
432
+ >
433
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
434
+ <span class="pf-v5-c-menu-toggle__controls">
435
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
436
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
437
+ </span>
438
+ </span>
439
+ </button>
440
+ </div>
441
+
425
442
  <div
426
- 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"
443
+ 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"
427
444
  >
428
445
  <div
429
446
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -470,27 +487,6 @@ section: components
470
487
  </button>
471
488
  </div>
472
489
  </div>
473
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
474
- <button
475
- class="pf-v5-c-menu-toggle pf-m-full-height"
476
- type="button"
477
- aria-expanded="false"
478
- >
479
- <span class="pf-v5-c-menu-toggle__icon">
480
- <img
481
- class="pf-v5-c-avatar"
482
- alt="Avatar image"
483
- src="/assets/images/img_avatar-light.svg"
484
- />
485
- </span>
486
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
487
- <span class="pf-v5-c-menu-toggle__controls">
488
- <span class="pf-v5-c-menu-toggle__toggle-icon">
489
- <i class="fas fa-angle-down" aria-hidden="true"></i>
490
- </span>
491
- </span>
492
- </button>
493
- </div>
494
490
  </div>
495
491
  </div>
496
492
  </div>
@@ -661,20 +657,16 @@ section: components
661
657
  </button>
662
658
  </span>
663
659
  <div class="pf-v5-c-masthead__main">
664
- <a
665
- class="pf-v5-c-masthead__brand"
666
- href="#"
667
- style="--pf-v5-c-brand--Height: 36px;"
668
- >
669
- <svg height="36px" viewBox="0 0 679 158" role="img">
670
- <title>Patternfly logo</title>
660
+ <a class="pf-v5-c-masthead__brand" href="#">
661
+ <svg height="40px" viewBox="0 0 679 158">
662
+ <title>PF-HorizontalLogo-Color</title>
671
663
  <defs>
672
664
  <linearGradient
673
665
  x1="68%"
674
666
  y1="2.25860997e-13%"
675
667
  x2="32%"
676
668
  y2="100%"
677
- id="linearGradient-1"
669
+ id="linearGradient-nav-expandable-example-masthead"
678
670
  >
679
671
  <stop stop-color="#2B9AF3" offset="0%" />
680
672
  <stop
@@ -684,13 +676,7 @@ section: components
684
676
  />
685
677
  </linearGradient>
686
678
  </defs>
687
- <g
688
- id="PF-HorizontalLogo-Color"
689
- stroke="none"
690
- stroke-width="1"
691
- fill="none"
692
- fill-rule="evenodd"
693
- >
679
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
694
680
  <g
695
681
  transform="translate(206.000000, 45.750000)"
696
682
  fill="var(--pf-t--global--text--color--regular)"
@@ -725,19 +711,18 @@ section: components
725
711
  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"
726
712
  />
727
713
  </g>
728
- <g id="Logo" transform="translate(0.000000, 0.000000)">
714
+ <g transform="translate(0.000000, 0.000000)">
729
715
  <path
730
716
  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"
731
- id="Rectangle-Copy-17"
732
- fill="var(--pf-t--global--color--brand--200)"
717
+ fill="#0066CC"
733
718
  />
734
719
  <path
735
720
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
736
- fill="url(#linearGradient-1)"
721
+ fill="url(#linearGradient-nav-expandable-example-masthead)"
737
722
  />
738
723
  <path
739
724
  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"
740
- fill="url(#linearGradient-1)"
725
+ fill="url(#linearGradient-nav-expandable-example-masthead)"
741
726
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
742
727
  />
743
728
  </g>
@@ -752,8 +737,38 @@ section: components
752
737
  >
753
738
  <div class="pf-v5-c-toolbar__content">
754
739
  <div class="pf-v5-c-toolbar__content-section">
740
+ <div class="pf-v5-c-toolbar__item">
741
+ <button
742
+ class="pf-v5-c-menu-toggle"
743
+ type="button"
744
+ aria-expanded="false"
745
+ >
746
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
747
+ <span class="pf-v5-c-menu-toggle__controls">
748
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
749
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
750
+ </span>
751
+ </span>
752
+ </button>
753
+ </div>
754
+
755
+ <div class="pf-v5-c-toolbar__item">
756
+ <button
757
+ class="pf-v5-c-menu-toggle"
758
+ type="button"
759
+ aria-expanded="false"
760
+ >
761
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
762
+ <span class="pf-v5-c-menu-toggle__controls">
763
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
764
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
765
+ </span>
766
+ </span>
767
+ </button>
768
+ </div>
769
+
755
770
  <div
756
- 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"
771
+ 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"
757
772
  >
758
773
  <div
759
774
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -800,27 +815,6 @@ section: components
800
815
  </button>
801
816
  </div>
802
817
  </div>
803
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
804
- <button
805
- class="pf-v5-c-menu-toggle pf-m-full-height"
806
- type="button"
807
- aria-expanded="false"
808
- >
809
- <span class="pf-v5-c-menu-toggle__icon">
810
- <img
811
- class="pf-v5-c-avatar"
812
- alt="Avatar image"
813
- src="/assets/images/img_avatar-light.svg"
814
- />
815
- </span>
816
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
817
- <span class="pf-v5-c-menu-toggle__controls">
818
- <span class="pf-v5-c-menu-toggle__toggle-icon">
819
- <i class="fas fa-angle-down" aria-hidden="true"></i>
820
- </span>
821
- </span>
822
- </button>
823
- </div>
824
818
  </div>
825
819
  </div>
826
820
  </div>
@@ -1043,20 +1037,16 @@ section: components
1043
1037
  </div>
1044
1038
  <header class="pf-v5-c-masthead" id="nav-horizontal-example-masthead">
1045
1039
  <div class="pf-v5-c-masthead__main">
1046
- <a
1047
- class="pf-v5-c-masthead__brand"
1048
- href="#"
1049
- style="--pf-v5-c-brand--Height: 36px;"
1050
- >
1051
- <svg height="36px" viewBox="0 0 679 158" role="img">
1052
- <title>Patternfly logo</title>
1040
+ <a class="pf-v5-c-masthead__brand" href="#">
1041
+ <svg height="40px" viewBox="0 0 679 158">
1042
+ <title>PF-HorizontalLogo-Color</title>
1053
1043
  <defs>
1054
1044
  <linearGradient
1055
1045
  x1="68%"
1056
1046
  y1="2.25860997e-13%"
1057
1047
  x2="32%"
1058
1048
  y2="100%"
1059
- id="linearGradient-1"
1049
+ id="linearGradient-nav-horizontal-example-masthead"
1060
1050
  >
1061
1051
  <stop stop-color="#2B9AF3" offset="0%" />
1062
1052
  <stop
@@ -1066,13 +1056,7 @@ section: components
1066
1056
  />
1067
1057
  </linearGradient>
1068
1058
  </defs>
1069
- <g
1070
- id="PF-HorizontalLogo-Color"
1071
- stroke="none"
1072
- stroke-width="1"
1073
- fill="none"
1074
- fill-rule="evenodd"
1075
- >
1059
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1076
1060
  <g
1077
1061
  transform="translate(206.000000, 45.750000)"
1078
1062
  fill="var(--pf-t--global--text--color--regular)"
@@ -1107,19 +1091,18 @@ section: components
1107
1091
  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"
1108
1092
  />
1109
1093
  </g>
1110
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1094
+ <g transform="translate(0.000000, 0.000000)">
1111
1095
  <path
1112
1096
  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"
1113
- id="Rectangle-Copy-17"
1114
- fill="var(--pf-t--global--color--brand--200)"
1097
+ fill="#0066CC"
1115
1098
  />
1116
1099
  <path
1117
1100
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1118
- fill="url(#linearGradient-1)"
1101
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1119
1102
  />
1120
1103
  <path
1121
1104
  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"
1122
- fill="url(#linearGradient-1)"
1105
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1123
1106
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1124
1107
  />
1125
1108
  </g>
@@ -1134,6 +1117,36 @@ section: components
1134
1117
  >
1135
1118
  <div class="pf-v5-c-toolbar__content">
1136
1119
  <div class="pf-v5-c-toolbar__content-section">
1120
+ <div class="pf-v5-c-toolbar__item">
1121
+ <button
1122
+ class="pf-v5-c-menu-toggle"
1123
+ type="button"
1124
+ aria-expanded="false"
1125
+ >
1126
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1127
+ <span class="pf-v5-c-menu-toggle__controls">
1128
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1129
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1130
+ </span>
1131
+ </span>
1132
+ </button>
1133
+ </div>
1134
+
1135
+ <div class="pf-v5-c-toolbar__item">
1136
+ <button
1137
+ class="pf-v5-c-menu-toggle"
1138
+ type="button"
1139
+ aria-expanded="false"
1140
+ >
1141
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1142
+ <span class="pf-v5-c-menu-toggle__controls">
1143
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1144
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1145
+ </span>
1146
+ </span>
1147
+ </button>
1148
+ </div>
1149
+
1137
1150
  <div
1138
1151
  class="pf-v5-c-toolbar__item pf-m-overflow-container"
1139
1152
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
@@ -1180,7 +1193,7 @@ section: components
1180
1193
  </nav>
1181
1194
  </div>
1182
1195
  <div
1183
- 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"
1196
+ 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"
1184
1197
  >
1185
1198
  <div
1186
1199
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1227,27 +1240,6 @@ section: components
1227
1240
  </button>
1228
1241
  </div>
1229
1242
  </div>
1230
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1231
- <button
1232
- class="pf-v5-c-menu-toggle pf-m-full-height"
1233
- type="button"
1234
- aria-expanded="false"
1235
- >
1236
- <span class="pf-v5-c-menu-toggle__icon">
1237
- <img
1238
- class="pf-v5-c-avatar"
1239
- alt="Avatar image"
1240
- src="/assets/images/img_avatar-light.svg"
1241
- />
1242
- </span>
1243
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1244
- <span class="pf-v5-c-menu-toggle__controls">
1245
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1246
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1247
- </span>
1248
- </span>
1249
- </button>
1250
- </div>
1251
1243
  </div>
1252
1244
  </div>
1253
1245
  </div>
@@ -1364,20 +1356,16 @@ section: components
1364
1356
  </button>
1365
1357
  </span>
1366
1358
  <div class="pf-v5-c-masthead__main">
1367
- <a
1368
- class="pf-v5-c-masthead__brand"
1369
- href="#"
1370
- style="--pf-v5-c-brand--Height: 36px;"
1371
- >
1372
- <svg height="36px" viewBox="0 0 679 158" role="img">
1373
- <title>Patternfly logo</title>
1359
+ <a class="pf-v5-c-masthead__brand" href="#">
1360
+ <svg height="40px" viewBox="0 0 679 158">
1361
+ <title>PF-HorizontalLogo-Color</title>
1374
1362
  <defs>
1375
1363
  <linearGradient
1376
1364
  x1="68%"
1377
1365
  y1="2.25860997e-13%"
1378
1366
  x2="32%"
1379
1367
  y2="100%"
1380
- id="linearGradient-1"
1368
+ id="linearGradient-nav-horizontal-subnav-example-masthead"
1381
1369
  >
1382
1370
  <stop stop-color="#2B9AF3" offset="0%" />
1383
1371
  <stop
@@ -1387,13 +1375,7 @@ section: components
1387
1375
  />
1388
1376
  </linearGradient>
1389
1377
  </defs>
1390
- <g
1391
- id="PF-HorizontalLogo-Color"
1392
- stroke="none"
1393
- stroke-width="1"
1394
- fill="none"
1395
- fill-rule="evenodd"
1396
- >
1378
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1397
1379
  <g
1398
1380
  transform="translate(206.000000, 45.750000)"
1399
1381
  fill="var(--pf-t--global--text--color--regular)"
@@ -1428,19 +1410,18 @@ section: components
1428
1410
  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"
1429
1411
  />
1430
1412
  </g>
1431
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1413
+ <g transform="translate(0.000000, 0.000000)">
1432
1414
  <path
1433
1415
  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"
1434
- id="Rectangle-Copy-17"
1435
- fill="var(--pf-t--global--color--brand--200)"
1416
+ fill="#0066CC"
1436
1417
  />
1437
1418
  <path
1438
1419
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1439
- fill="url(#linearGradient-1)"
1420
+ fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1440
1421
  />
1441
1422
  <path
1442
1423
  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"
1443
- fill="url(#linearGradient-1)"
1424
+ fill="url(#linearGradient-nav-horizontal-subnav-example-masthead)"
1444
1425
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1445
1426
  />
1446
1427
  </g>
@@ -1455,8 +1436,38 @@ section: components
1455
1436
  >
1456
1437
  <div class="pf-v5-c-toolbar__content">
1457
1438
  <div class="pf-v5-c-toolbar__content-section">
1439
+ <div class="pf-v5-c-toolbar__item">
1440
+ <button
1441
+ class="pf-v5-c-menu-toggle"
1442
+ type="button"
1443
+ aria-expanded="false"
1444
+ >
1445
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1446
+ <span class="pf-v5-c-menu-toggle__controls">
1447
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1448
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1449
+ </span>
1450
+ </span>
1451
+ </button>
1452
+ </div>
1453
+
1454
+ <div class="pf-v5-c-toolbar__item">
1455
+ <button
1456
+ class="pf-v5-c-menu-toggle"
1457
+ type="button"
1458
+ aria-expanded="false"
1459
+ >
1460
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1461
+ <span class="pf-v5-c-menu-toggle__controls">
1462
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1463
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1464
+ </span>
1465
+ </span>
1466
+ </button>
1467
+ </div>
1468
+
1458
1469
  <div
1459
- 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"
1470
+ 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"
1460
1471
  >
1461
1472
  <div
1462
1473
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1503,27 +1514,6 @@ section: components
1503
1514
  </button>
1504
1515
  </div>
1505
1516
  </div>
1506
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1507
- <button
1508
- class="pf-v5-c-menu-toggle pf-m-full-height"
1509
- type="button"
1510
- aria-expanded="false"
1511
- >
1512
- <span class="pf-v5-c-menu-toggle__icon">
1513
- <img
1514
- class="pf-v5-c-avatar"
1515
- alt="Avatar image"
1516
- src="/assets/images/img_avatar-light.svg"
1517
- />
1518
- </span>
1519
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1520
- <span class="pf-v5-c-menu-toggle__controls">
1521
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1522
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1523
- </span>
1524
- </span>
1525
- </button>
1526
- </div>
1527
1517
  </div>
1528
1518
  </div>
1529
1519
  </div>
@@ -1758,20 +1748,16 @@ section: components
1758
1748
  </button>
1759
1749
  </span>
1760
1750
  <div class="pf-v5-c-masthead__main">
1761
- <a
1762
- class="pf-v5-c-masthead__brand"
1763
- href="#"
1764
- style="--pf-v5-c-brand--Height: 36px;"
1765
- >
1766
- <svg height="36px" viewBox="0 0 679 158" role="img">
1767
- <title>Patternfly logo</title>
1751
+ <a class="pf-v5-c-masthead__brand" href="#">
1752
+ <svg height="40px" viewBox="0 0 679 158">
1753
+ <title>PF-HorizontalLogo-Color</title>
1768
1754
  <defs>
1769
1755
  <linearGradient
1770
1756
  x1="68%"
1771
1757
  y1="2.25860997e-13%"
1772
1758
  x2="32%"
1773
1759
  y2="100%"
1774
- id="linearGradient-1"
1760
+ id="linearGradient-nav-horizontal-example-masthead"
1775
1761
  >
1776
1762
  <stop stop-color="#2B9AF3" offset="0%" />
1777
1763
  <stop
@@ -1781,13 +1767,7 @@ section: components
1781
1767
  />
1782
1768
  </linearGradient>
1783
1769
  </defs>
1784
- <g
1785
- id="PF-HorizontalLogo-Color"
1786
- stroke="none"
1787
- stroke-width="1"
1788
- fill="none"
1789
- fill-rule="evenodd"
1790
- >
1770
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1791
1771
  <g
1792
1772
  transform="translate(206.000000, 45.750000)"
1793
1773
  fill="var(--pf-t--global--text--color--regular)"
@@ -1822,19 +1802,18 @@ section: components
1822
1802
  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"
1823
1803
  />
1824
1804
  </g>
1825
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1805
+ <g transform="translate(0.000000, 0.000000)">
1826
1806
  <path
1827
1807
  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"
1828
- id="Rectangle-Copy-17"
1829
- fill="var(--pf-t--global--color--brand--200)"
1808
+ fill="#0066CC"
1830
1809
  />
1831
1810
  <path
1832
1811
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1833
- fill="url(#linearGradient-1)"
1812
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1834
1813
  />
1835
1814
  <path
1836
1815
  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"
1837
- fill="url(#linearGradient-1)"
1816
+ fill="url(#linearGradient-nav-horizontal-example-masthead)"
1838
1817
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1839
1818
  />
1840
1819
  </g>
@@ -1849,6 +1828,36 @@ section: components
1849
1828
  >
1850
1829
  <div class="pf-v5-c-toolbar__content">
1851
1830
  <div class="pf-v5-c-toolbar__content-section">
1831
+ <div class="pf-v5-c-toolbar__item">
1832
+ <button
1833
+ class="pf-v5-c-menu-toggle"
1834
+ type="button"
1835
+ aria-expanded="false"
1836
+ >
1837
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1838
+ <span class="pf-v5-c-menu-toggle__controls">
1839
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1840
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1841
+ </span>
1842
+ </span>
1843
+ </button>
1844
+ </div>
1845
+
1846
+ <div class="pf-v5-c-toolbar__item">
1847
+ <button
1848
+ class="pf-v5-c-menu-toggle"
1849
+ type="button"
1850
+ aria-expanded="false"
1851
+ >
1852
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1853
+ <span class="pf-v5-c-menu-toggle__controls">
1854
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1855
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1856
+ </span>
1857
+ </span>
1858
+ </button>
1859
+ </div>
1860
+
1852
1861
  <div
1853
1862
  class="pf-v5-c-toolbar__item pf-m-overflow-container"
1854
1863
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
@@ -1895,7 +1904,7 @@ section: components
1895
1904
  </nav>
1896
1905
  </div>
1897
1906
  <div
1898
- 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"
1907
+ 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"
1899
1908
  >
1900
1909
  <div
1901
1910
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1942,27 +1951,6 @@ section: components
1942
1951
  </button>
1943
1952
  </div>
1944
1953
  </div>
1945
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1946
- <button
1947
- class="pf-v5-c-menu-toggle pf-m-full-height"
1948
- type="button"
1949
- aria-expanded="false"
1950
- >
1951
- <span class="pf-v5-c-menu-toggle__icon">
1952
- <img
1953
- class="pf-v5-c-avatar"
1954
- alt="Avatar image"
1955
- src="/assets/images/img_avatar-light.svg"
1956
- />
1957
- </span>
1958
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1959
- <span class="pf-v5-c-menu-toggle__controls">
1960
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1961
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1962
- </span>
1963
- </span>
1964
- </button>
1965
- </div>
1966
1954
  </div>
1967
1955
  </div>
1968
1956
  </div>
@@ -2119,20 +2107,16 @@ section: components
2119
2107
  </button>
2120
2108
  </span>
2121
2109
  <div class="pf-v5-c-masthead__main">
2122
- <a
2123
- class="pf-v5-c-masthead__brand"
2124
- href="#"
2125
- style="--pf-v5-c-brand--Height: 36px;"
2126
- >
2127
- <svg height="36px" viewBox="0 0 679 158" role="img">
2128
- <title>Patternfly logo</title>
2110
+ <a class="pf-v5-c-masthead__brand" href="#">
2111
+ <svg height="40px" viewBox="0 0 679 158">
2112
+ <title>PF-HorizontalLogo-Color</title>
2129
2113
  <defs>
2130
2114
  <linearGradient
2131
2115
  x1="68%"
2132
2116
  y1="2.25860997e-13%"
2133
2117
  x2="32%"
2134
2118
  y2="100%"
2135
- id="linearGradient-1"
2119
+ id="linearGradient-nav-legacy-teriary-example-masthead"
2136
2120
  >
2137
2121
  <stop stop-color="#2B9AF3" offset="0%" />
2138
2122
  <stop
@@ -2142,13 +2126,7 @@ section: components
2142
2126
  />
2143
2127
  </linearGradient>
2144
2128
  </defs>
2145
- <g
2146
- id="PF-HorizontalLogo-Color"
2147
- stroke="none"
2148
- stroke-width="1"
2149
- fill="none"
2150
- fill-rule="evenodd"
2151
- >
2129
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2152
2130
  <g
2153
2131
  transform="translate(206.000000, 45.750000)"
2154
2132
  fill="var(--pf-t--global--text--color--regular)"
@@ -2183,19 +2161,18 @@ section: components
2183
2161
  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"
2184
2162
  />
2185
2163
  </g>
2186
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2164
+ <g transform="translate(0.000000, 0.000000)">
2187
2165
  <path
2188
2166
  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"
2189
- id="Rectangle-Copy-17"
2190
- fill="var(--pf-t--global--color--brand--200)"
2167
+ fill="#0066CC"
2191
2168
  />
2192
2169
  <path
2193
2170
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2194
- fill="url(#linearGradient-1)"
2171
+ fill="url(#linearGradient-nav-legacy-teriary-example-masthead)"
2195
2172
  />
2196
2173
  <path
2197
2174
  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"
2198
- fill="url(#linearGradient-1)"
2175
+ fill="url(#linearGradient-nav-legacy-teriary-example-masthead)"
2199
2176
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2200
2177
  />
2201
2178
  </g>
@@ -2210,8 +2187,38 @@ section: components
2210
2187
  >
2211
2188
  <div class="pf-v5-c-toolbar__content">
2212
2189
  <div class="pf-v5-c-toolbar__content-section">
2190
+ <div class="pf-v5-c-toolbar__item">
2191
+ <button
2192
+ class="pf-v5-c-menu-toggle"
2193
+ type="button"
2194
+ aria-expanded="false"
2195
+ >
2196
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2197
+ <span class="pf-v5-c-menu-toggle__controls">
2198
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2199
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2200
+ </span>
2201
+ </span>
2202
+ </button>
2203
+ </div>
2204
+
2205
+ <div class="pf-v5-c-toolbar__item">
2206
+ <button
2207
+ class="pf-v5-c-menu-toggle"
2208
+ type="button"
2209
+ aria-expanded="false"
2210
+ >
2211
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2212
+ <span class="pf-v5-c-menu-toggle__controls">
2213
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2214
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2215
+ </span>
2216
+ </span>
2217
+ </button>
2218
+ </div>
2219
+
2213
2220
  <div
2214
- 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"
2221
+ 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"
2215
2222
  >
2216
2223
  <div
2217
2224
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2258,27 +2265,6 @@ section: components
2258
2265
  </button>
2259
2266
  </div>
2260
2267
  </div>
2261
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2262
- <button
2263
- class="pf-v5-c-menu-toggle pf-m-full-height"
2264
- type="button"
2265
- aria-expanded="false"
2266
- >
2267
- <span class="pf-v5-c-menu-toggle__icon">
2268
- <img
2269
- class="pf-v5-c-avatar"
2270
- alt="Avatar image"
2271
- src="/assets/images/img_avatar-light.svg"
2272
- />
2273
- </span>
2274
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2275
- <span class="pf-v5-c-menu-toggle__controls">
2276
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2277
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2278
- </span>
2279
- </span>
2280
- </button>
2281
- </div>
2282
2268
  </div>
2283
2269
  </div>
2284
2270
  </div>
@@ -2550,20 +2536,16 @@ section: components
2550
2536
  </button>
2551
2537
  </span>
2552
2538
  <div class="pf-v5-c-masthead__main">
2553
- <a
2554
- class="pf-v5-c-masthead__brand"
2555
- href="#"
2556
- style="--pf-v5-c-brand--Height: 36px;"
2557
- >
2558
- <svg height="36px" viewBox="0 0 679 158" role="img">
2559
- <title>Patternfly logo</title>
2539
+ <a class="pf-v5-c-masthead__brand" href="#">
2540
+ <svg height="40px" viewBox="0 0 679 158">
2541
+ <title>PF-HorizontalLogo-Color</title>
2560
2542
  <defs>
2561
2543
  <linearGradient
2562
2544
  x1="68%"
2563
2545
  y1="2.25860997e-13%"
2564
2546
  x2="32%"
2565
2547
  y2="100%"
2566
- id="linearGradient-1"
2548
+ id="linearGradient-nav-light-theme-example-masthead"
2567
2549
  >
2568
2550
  <stop stop-color="#2B9AF3" offset="0%" />
2569
2551
  <stop
@@ -2573,13 +2555,7 @@ section: components
2573
2555
  />
2574
2556
  </linearGradient>
2575
2557
  </defs>
2576
- <g
2577
- id="PF-HorizontalLogo-Color"
2578
- stroke="none"
2579
- stroke-width="1"
2580
- fill="none"
2581
- fill-rule="evenodd"
2582
- >
2558
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2583
2559
  <g
2584
2560
  transform="translate(206.000000, 45.750000)"
2585
2561
  fill="var(--pf-t--global--text--color--regular)"
@@ -2614,19 +2590,18 @@ section: components
2614
2590
  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"
2615
2591
  />
2616
2592
  </g>
2617
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2593
+ <g transform="translate(0.000000, 0.000000)">
2618
2594
  <path
2619
2595
  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"
2620
- id="Rectangle-Copy-17"
2621
- fill="var(--pf-t--global--color--brand--200)"
2596
+ fill="#0066CC"
2622
2597
  />
2623
2598
  <path
2624
2599
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2625
- fill="url(#linearGradient-1)"
2600
+ fill="url(#linearGradient-nav-light-theme-example-masthead)"
2626
2601
  />
2627
2602
  <path
2628
2603
  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"
2629
- fill="url(#linearGradient-1)"
2604
+ fill="url(#linearGradient-nav-light-theme-example-masthead)"
2630
2605
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2631
2606
  />
2632
2607
  </g>
@@ -2641,8 +2616,38 @@ section: components
2641
2616
  >
2642
2617
  <div class="pf-v5-c-toolbar__content">
2643
2618
  <div class="pf-v5-c-toolbar__content-section">
2619
+ <div class="pf-v5-c-toolbar__item">
2620
+ <button
2621
+ class="pf-v5-c-menu-toggle"
2622
+ type="button"
2623
+ aria-expanded="false"
2624
+ >
2625
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2626
+ <span class="pf-v5-c-menu-toggle__controls">
2627
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2628
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2629
+ </span>
2630
+ </span>
2631
+ </button>
2632
+ </div>
2633
+
2634
+ <div class="pf-v5-c-toolbar__item">
2635
+ <button
2636
+ class="pf-v5-c-menu-toggle"
2637
+ type="button"
2638
+ aria-expanded="false"
2639
+ >
2640
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2641
+ <span class="pf-v5-c-menu-toggle__controls">
2642
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2643
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2644
+ </span>
2645
+ </span>
2646
+ </button>
2647
+ </div>
2648
+
2644
2649
  <div
2645
- 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"
2650
+ 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"
2646
2651
  >
2647
2652
  <div
2648
2653
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2689,27 +2694,6 @@ section: components
2689
2694
  </button>
2690
2695
  </div>
2691
2696
  </div>
2692
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2693
- <button
2694
- class="pf-v5-c-menu-toggle pf-m-full-height"
2695
- type="button"
2696
- aria-expanded="false"
2697
- >
2698
- <span class="pf-v5-c-menu-toggle__icon">
2699
- <img
2700
- class="pf-v5-c-avatar"
2701
- alt="Avatar image"
2702
- src="/assets/images/img_avatar-light.svg"
2703
- />
2704
- </span>
2705
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2706
- <span class="pf-v5-c-menu-toggle__controls">
2707
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2708
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2709
- </span>
2710
- </span>
2711
- </button>
2712
- </div>
2713
2697
  </div>
2714
2698
  </div>
2715
2699
  </div>