@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
@@ -27,20 +27,16 @@ wrapperTag: div
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-basic-demo-masthead"
44
40
  >
45
41
  <stop stop-color="#2B9AF3" offset="0%" />
46
42
  <stop
@@ -50,13 +46,7 @@ wrapperTag: div
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 @@ wrapperTag: div
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-basic-demo-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-basic-demo-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 @@ wrapperTag: div
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 @@ wrapperTag: div
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>
@@ -1231,20 +1229,16 @@ wrapperTag: div
1231
1229
  </button>
1232
1230
  </span>
1233
1231
  <div class="pf-v5-c-masthead__main">
1234
- <a
1235
- class="pf-v5-c-masthead__brand"
1236
- href="#"
1237
- style="--pf-v5-c-brand--Height: 36px;"
1238
- >
1239
- <svg height="36px" viewBox="0 0 679 158" role="img">
1240
- <title>Patternfly logo</title>
1232
+ <a class="pf-v5-c-masthead__brand" href="#">
1233
+ <svg height="40px" viewBox="0 0 679 158">
1234
+ <title>PF-HorizontalLogo-Color</title>
1241
1235
  <defs>
1242
1236
  <linearGradient
1243
1237
  x1="68%"
1244
1238
  y1="2.25860997e-13%"
1245
1239
  x2="32%"
1246
1240
  y2="100%"
1247
- id="linearGradient-1"
1241
+ id="linearGradient-sortable-demo-masthead"
1248
1242
  >
1249
1243
  <stop stop-color="#2B9AF3" offset="0%" />
1250
1244
  <stop
@@ -1254,13 +1248,7 @@ wrapperTag: div
1254
1248
  />
1255
1249
  </linearGradient>
1256
1250
  </defs>
1257
- <g
1258
- id="PF-HorizontalLogo-Color"
1259
- stroke="none"
1260
- stroke-width="1"
1261
- fill="none"
1262
- fill-rule="evenodd"
1263
- >
1251
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1264
1252
  <g
1265
1253
  transform="translate(206.000000, 45.750000)"
1266
1254
  fill="var(--pf-t--global--text--color--regular)"
@@ -1295,19 +1283,18 @@ wrapperTag: div
1295
1283
  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"
1296
1284
  />
1297
1285
  </g>
1298
- <g id="Logo" transform="translate(0.000000, 0.000000)">
1286
+ <g transform="translate(0.000000, 0.000000)">
1299
1287
  <path
1300
1288
  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"
1301
- id="Rectangle-Copy-17"
1302
- fill="var(--pf-t--global--color--brand--200)"
1289
+ fill="#0066CC"
1303
1290
  />
1304
1291
  <path
1305
1292
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1306
- fill="url(#linearGradient-1)"
1293
+ fill="url(#linearGradient-sortable-demo-masthead)"
1307
1294
  />
1308
1295
  <path
1309
1296
  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"
1310
- fill="url(#linearGradient-1)"
1297
+ fill="url(#linearGradient-sortable-demo-masthead)"
1311
1298
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1312
1299
  />
1313
1300
  </g>
@@ -1322,8 +1309,38 @@ wrapperTag: div
1322
1309
  >
1323
1310
  <div class="pf-v5-c-toolbar__content">
1324
1311
  <div class="pf-v5-c-toolbar__content-section">
1312
+ <div class="pf-v5-c-toolbar__item">
1313
+ <button
1314
+ class="pf-v5-c-menu-toggle"
1315
+ type="button"
1316
+ aria-expanded="false"
1317
+ >
1318
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
1319
+ <span class="pf-v5-c-menu-toggle__controls">
1320
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1321
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1322
+ </span>
1323
+ </span>
1324
+ </button>
1325
+ </div>
1326
+
1327
+ <div class="pf-v5-c-toolbar__item">
1328
+ <button
1329
+ class="pf-v5-c-menu-toggle"
1330
+ type="button"
1331
+ aria-expanded="false"
1332
+ >
1333
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
1334
+ <span class="pf-v5-c-menu-toggle__controls">
1335
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
1336
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
1337
+ </span>
1338
+ </span>
1339
+ </button>
1340
+ </div>
1341
+
1325
1342
  <div
1326
- 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"
1343
+ 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"
1327
1344
  >
1328
1345
  <div
1329
1346
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -1370,27 +1387,6 @@ wrapperTag: div
1370
1387
  </button>
1371
1388
  </div>
1372
1389
  </div>
1373
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
1374
- <button
1375
- class="pf-v5-c-menu-toggle pf-m-full-height"
1376
- type="button"
1377
- aria-expanded="false"
1378
- >
1379
- <span class="pf-v5-c-menu-toggle__icon">
1380
- <img
1381
- class="pf-v5-c-avatar"
1382
- alt="Avatar image"
1383
- src="/assets/images/img_avatar-light.svg"
1384
- />
1385
- </span>
1386
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
1387
- <span class="pf-v5-c-menu-toggle__controls">
1388
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1389
- <i class="fas fa-angle-down" aria-hidden="true"></i>
1390
- </span>
1391
- </span>
1392
- </button>
1393
- </div>
1394
1390
  </div>
1395
1391
  </div>
1396
1392
  </div>
@@ -2608,20 +2604,16 @@ wrapperTag: div
2608
2604
  </button>
2609
2605
  </span>
2610
2606
  <div class="pf-v5-c-masthead__main">
2611
- <a
2612
- class="pf-v5-c-masthead__brand"
2613
- href="#"
2614
- style="--pf-v5-c-brand--Height: 36px;"
2615
- >
2616
- <svg height="36px" viewBox="0 0 679 158" role="img">
2617
- <title>Patternfly logo</title>
2607
+ <a class="pf-v5-c-masthead__brand" href="#">
2608
+ <svg height="40px" viewBox="0 0 679 158">
2609
+ <title>PF-HorizontalLogo-Color</title>
2618
2610
  <defs>
2619
2611
  <linearGradient
2620
2612
  x1="68%"
2621
2613
  y1="2.25860997e-13%"
2622
2614
  x2="32%"
2623
2615
  y2="100%"
2624
- id="linearGradient-1"
2616
+ id="linearGradient-expandable-demo-masthead"
2625
2617
  >
2626
2618
  <stop stop-color="#2B9AF3" offset="0%" />
2627
2619
  <stop
@@ -2631,13 +2623,7 @@ wrapperTag: div
2631
2623
  />
2632
2624
  </linearGradient>
2633
2625
  </defs>
2634
- <g
2635
- id="PF-HorizontalLogo-Color"
2636
- stroke="none"
2637
- stroke-width="1"
2638
- fill="none"
2639
- fill-rule="evenodd"
2640
- >
2626
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
2641
2627
  <g
2642
2628
  transform="translate(206.000000, 45.750000)"
2643
2629
  fill="var(--pf-t--global--text--color--regular)"
@@ -2672,19 +2658,18 @@ wrapperTag: div
2672
2658
  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"
2673
2659
  />
2674
2660
  </g>
2675
- <g id="Logo" transform="translate(0.000000, 0.000000)">
2661
+ <g transform="translate(0.000000, 0.000000)">
2676
2662
  <path
2677
2663
  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"
2678
- id="Rectangle-Copy-17"
2679
- fill="var(--pf-t--global--color--brand--200)"
2664
+ fill="#0066CC"
2680
2665
  />
2681
2666
  <path
2682
2667
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
2683
- fill="url(#linearGradient-1)"
2668
+ fill="url(#linearGradient-expandable-demo-masthead)"
2684
2669
  />
2685
2670
  <path
2686
2671
  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"
2687
- fill="url(#linearGradient-1)"
2672
+ fill="url(#linearGradient-expandable-demo-masthead)"
2688
2673
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
2689
2674
  />
2690
2675
  </g>
@@ -2699,8 +2684,38 @@ wrapperTag: div
2699
2684
  >
2700
2685
  <div class="pf-v5-c-toolbar__content">
2701
2686
  <div class="pf-v5-c-toolbar__content-section">
2687
+ <div class="pf-v5-c-toolbar__item">
2688
+ <button
2689
+ class="pf-v5-c-menu-toggle"
2690
+ type="button"
2691
+ aria-expanded="false"
2692
+ >
2693
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
2694
+ <span class="pf-v5-c-menu-toggle__controls">
2695
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2696
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2697
+ </span>
2698
+ </span>
2699
+ </button>
2700
+ </div>
2701
+
2702
+ <div class="pf-v5-c-toolbar__item">
2703
+ <button
2704
+ class="pf-v5-c-menu-toggle"
2705
+ type="button"
2706
+ aria-expanded="false"
2707
+ >
2708
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
2709
+ <span class="pf-v5-c-menu-toggle__controls">
2710
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
2711
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
2712
+ </span>
2713
+ </span>
2714
+ </button>
2715
+ </div>
2716
+
2702
2717
  <div
2703
- 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"
2718
+ 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"
2704
2719
  >
2705
2720
  <div
2706
2721
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -2747,27 +2762,6 @@ wrapperTag: div
2747
2762
  </button>
2748
2763
  </div>
2749
2764
  </div>
2750
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
2751
- <button
2752
- class="pf-v5-c-menu-toggle pf-m-full-height"
2753
- type="button"
2754
- aria-expanded="false"
2755
- >
2756
- <span class="pf-v5-c-menu-toggle__icon">
2757
- <img
2758
- class="pf-v5-c-avatar"
2759
- alt="Avatar image"
2760
- src="/assets/images/img_avatar-light.svg"
2761
- />
2762
- </span>
2763
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
2764
- <span class="pf-v5-c-menu-toggle__controls">
2765
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2766
- <i class="fas fa-angle-down" aria-hidden="true"></i>
2767
- </span>
2768
- </span>
2769
- </button>
2770
- </div>
2771
2765
  </div>
2772
2766
  </div>
2773
2767
  </div>
@@ -4232,20 +4226,16 @@ wrapperTag: div
4232
4226
  </button>
4233
4227
  </span>
4234
4228
  <div class="pf-v5-c-masthead__main">
4235
- <a
4236
- class="pf-v5-c-masthead__brand"
4237
- href="#"
4238
- style="--pf-v5-c-brand--Height: 36px;"
4239
- >
4240
- <svg height="36px" viewBox="0 0 679 158" role="img">
4241
- <title>Patternfly logo</title>
4229
+ <a class="pf-v5-c-masthead__brand" href="#">
4230
+ <svg height="40px" viewBox="0 0 679 158">
4231
+ <title>PF-HorizontalLogo-Color</title>
4242
4232
  <defs>
4243
4233
  <linearGradient
4244
4234
  x1="68%"
4245
4235
  y1="2.25860997e-13%"
4246
4236
  x2="32%"
4247
4237
  y2="100%"
4248
- id="linearGradient-1"
4238
+ id="linearGradient-compact-demo-masthead"
4249
4239
  >
4250
4240
  <stop stop-color="#2B9AF3" offset="0%" />
4251
4241
  <stop
@@ -4255,13 +4245,7 @@ wrapperTag: div
4255
4245
  />
4256
4246
  </linearGradient>
4257
4247
  </defs>
4258
- <g
4259
- id="PF-HorizontalLogo-Color"
4260
- stroke="none"
4261
- stroke-width="1"
4262
- fill="none"
4263
- fill-rule="evenodd"
4264
- >
4248
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
4265
4249
  <g
4266
4250
  transform="translate(206.000000, 45.750000)"
4267
4251
  fill="var(--pf-t--global--text--color--regular)"
@@ -4296,19 +4280,18 @@ wrapperTag: div
4296
4280
  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"
4297
4281
  />
4298
4282
  </g>
4299
- <g id="Logo" transform="translate(0.000000, 0.000000)">
4283
+ <g transform="translate(0.000000, 0.000000)">
4300
4284
  <path
4301
4285
  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"
4302
- id="Rectangle-Copy-17"
4303
- fill="var(--pf-t--global--color--brand--200)"
4286
+ fill="#0066CC"
4304
4287
  />
4305
4288
  <path
4306
4289
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
4307
- fill="url(#linearGradient-1)"
4290
+ fill="url(#linearGradient-compact-demo-masthead)"
4308
4291
  />
4309
4292
  <path
4310
4293
  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"
4311
- fill="url(#linearGradient-1)"
4294
+ fill="url(#linearGradient-compact-demo-masthead)"
4312
4295
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
4313
4296
  />
4314
4297
  </g>
@@ -4323,8 +4306,38 @@ wrapperTag: div
4323
4306
  >
4324
4307
  <div class="pf-v5-c-toolbar__content">
4325
4308
  <div class="pf-v5-c-toolbar__content-section">
4309
+ <div class="pf-v5-c-toolbar__item">
4310
+ <button
4311
+ class="pf-v5-c-menu-toggle"
4312
+ type="button"
4313
+ aria-expanded="false"
4314
+ >
4315
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
4316
+ <span class="pf-v5-c-menu-toggle__controls">
4317
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4318
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4319
+ </span>
4320
+ </span>
4321
+ </button>
4322
+ </div>
4323
+
4324
+ <div class="pf-v5-c-toolbar__item">
4325
+ <button
4326
+ class="pf-v5-c-menu-toggle"
4327
+ type="button"
4328
+ aria-expanded="false"
4329
+ >
4330
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
4331
+ <span class="pf-v5-c-menu-toggle__controls">
4332
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
4333
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4334
+ </span>
4335
+ </span>
4336
+ </button>
4337
+ </div>
4338
+
4326
4339
  <div
4327
- 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"
4340
+ 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"
4328
4341
  >
4329
4342
  <div
4330
4343
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -4371,27 +4384,6 @@ wrapperTag: div
4371
4384
  </button>
4372
4385
  </div>
4373
4386
  </div>
4374
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
4375
- <button
4376
- class="pf-v5-c-menu-toggle pf-m-full-height"
4377
- type="button"
4378
- aria-expanded="false"
4379
- >
4380
- <span class="pf-v5-c-menu-toggle__icon">
4381
- <img
4382
- class="pf-v5-c-avatar"
4383
- alt="Avatar image"
4384
- src="/assets/images/img_avatar-light.svg"
4385
- />
4386
- </span>
4387
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
4388
- <span class="pf-v5-c-menu-toggle__controls">
4389
- <span class="pf-v5-c-menu-toggle__toggle-icon">
4390
- <i class="fas fa-angle-down" aria-hidden="true"></i>
4391
- </span>
4392
- </span>
4393
- </button>
4394
- </div>
4395
4387
  </div>
4396
4388
  </div>
4397
4389
  </div>
@@ -5509,20 +5501,16 @@ wrapperTag: div
5509
5501
  </button>
5510
5502
  </span>
5511
5503
  <div class="pf-v5-c-masthead__main">
5512
- <a
5513
- class="pf-v5-c-masthead__brand"
5514
- href="#"
5515
- style="--pf-v5-c-brand--Height: 36px;"
5516
- >
5517
- <svg height="36px" viewBox="0 0 679 158" role="img">
5518
- <title>Patternfly logo</title>
5504
+ <a class="pf-v5-c-masthead__brand" href="#">
5505
+ <svg height="40px" viewBox="0 0 679 158">
5506
+ <title>PF-HorizontalLogo-Color</title>
5519
5507
  <defs>
5520
5508
  <linearGradient
5521
5509
  x1="68%"
5522
5510
  y1="2.25860997e-13%"
5523
5511
  x2="32%"
5524
5512
  y2="100%"
5525
- id="linearGradient-1"
5513
+ id="linearGradient-compound-expansion-demo-masthead"
5526
5514
  >
5527
5515
  <stop stop-color="#2B9AF3" offset="0%" />
5528
5516
  <stop
@@ -5532,13 +5520,7 @@ wrapperTag: div
5532
5520
  />
5533
5521
  </linearGradient>
5534
5522
  </defs>
5535
- <g
5536
- id="PF-HorizontalLogo-Color"
5537
- stroke="none"
5538
- stroke-width="1"
5539
- fill="none"
5540
- fill-rule="evenodd"
5541
- >
5523
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
5542
5524
  <g
5543
5525
  transform="translate(206.000000, 45.750000)"
5544
5526
  fill="var(--pf-t--global--text--color--regular)"
@@ -5573,19 +5555,18 @@ wrapperTag: div
5573
5555
  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"
5574
5556
  />
5575
5557
  </g>
5576
- <g id="Logo" transform="translate(0.000000, 0.000000)">
5558
+ <g transform="translate(0.000000, 0.000000)">
5577
5559
  <path
5578
5560
  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"
5579
- id="Rectangle-Copy-17"
5580
- fill="var(--pf-t--global--color--brand--200)"
5561
+ fill="#0066CC"
5581
5562
  />
5582
5563
  <path
5583
5564
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
5584
- fill="url(#linearGradient-1)"
5565
+ fill="url(#linearGradient-compound-expansion-demo-masthead)"
5585
5566
  />
5586
5567
  <path
5587
5568
  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"
5588
- fill="url(#linearGradient-1)"
5569
+ fill="url(#linearGradient-compound-expansion-demo-masthead)"
5589
5570
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
5590
5571
  />
5591
5572
  </g>
@@ -5600,8 +5581,38 @@ wrapperTag: div
5600
5581
  >
5601
5582
  <div class="pf-v5-c-toolbar__content">
5602
5583
  <div class="pf-v5-c-toolbar__content-section">
5584
+ <div class="pf-v5-c-toolbar__item">
5585
+ <button
5586
+ class="pf-v5-c-menu-toggle"
5587
+ type="button"
5588
+ aria-expanded="false"
5589
+ >
5590
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
5591
+ <span class="pf-v5-c-menu-toggle__controls">
5592
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5593
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5594
+ </span>
5595
+ </span>
5596
+ </button>
5597
+ </div>
5598
+
5599
+ <div class="pf-v5-c-toolbar__item">
5600
+ <button
5601
+ class="pf-v5-c-menu-toggle"
5602
+ type="button"
5603
+ aria-expanded="false"
5604
+ >
5605
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
5606
+ <span class="pf-v5-c-menu-toggle__controls">
5607
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
5608
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
5609
+ </span>
5610
+ </span>
5611
+ </button>
5612
+ </div>
5613
+
5603
5614
  <div
5604
- 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"
5615
+ 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"
5605
5616
  >
5606
5617
  <div
5607
5618
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -5648,27 +5659,6 @@ wrapperTag: div
5648
5659
  </button>
5649
5660
  </div>
5650
5661
  </div>
5651
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
5652
- <button
5653
- class="pf-v5-c-menu-toggle pf-m-full-height"
5654
- type="button"
5655
- aria-expanded="false"
5656
- >
5657
- <span class="pf-v5-c-menu-toggle__icon">
5658
- <img
5659
- class="pf-v5-c-avatar"
5660
- alt="Avatar image"
5661
- src="/assets/images/img_avatar-light.svg"
5662
- />
5663
- </span>
5664
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
5665
- <span class="pf-v5-c-menu-toggle__controls">
5666
- <span class="pf-v5-c-menu-toggle__toggle-icon">
5667
- <i class="fas fa-angle-down" aria-hidden="true"></i>
5668
- </span>
5669
- </span>
5670
- </button>
5671
- </div>
5672
5662
  </div>
5673
5663
  </div>
5674
5664
  </div>
@@ -10922,20 +10912,16 @@ wrapperTag: div
10922
10912
  </button>
10923
10913
  </span>
10924
10914
  <div class="pf-v5-c-masthead__main">
10925
- <a
10926
- class="pf-v5-c-masthead__brand"
10927
- href="#"
10928
- style="--pf-v5-c-brand--Height: 36px;"
10929
- >
10930
- <svg height="36px" viewBox="0 0 679 158" role="img">
10931
- <title>Patternfly logo</title>
10915
+ <a class="pf-v5-c-masthead__brand" href="#">
10916
+ <svg height="40px" viewBox="0 0 679 158">
10917
+ <title>PF-HorizontalLogo-Color</title>
10932
10918
  <defs>
10933
10919
  <linearGradient
10934
10920
  x1="68%"
10935
10921
  y1="2.25860997e-13%"
10936
10922
  x2="32%"
10937
10923
  y2="100%"
10938
- id="linearGradient-1"
10924
+ id="linearGradient-loading-state-demo-masthead"
10939
10925
  >
10940
10926
  <stop stop-color="#2B9AF3" offset="0%" />
10941
10927
  <stop
@@ -10945,13 +10931,7 @@ wrapperTag: div
10945
10931
  />
10946
10932
  </linearGradient>
10947
10933
  </defs>
10948
- <g
10949
- id="PF-HorizontalLogo-Color"
10950
- stroke="none"
10951
- stroke-width="1"
10952
- fill="none"
10953
- fill-rule="evenodd"
10954
- >
10934
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
10955
10935
  <g
10956
10936
  transform="translate(206.000000, 45.750000)"
10957
10937
  fill="var(--pf-t--global--text--color--regular)"
@@ -10986,19 +10966,18 @@ wrapperTag: div
10986
10966
  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"
10987
10967
  />
10988
10968
  </g>
10989
- <g id="Logo" transform="translate(0.000000, 0.000000)">
10969
+ <g transform="translate(0.000000, 0.000000)">
10990
10970
  <path
10991
10971
  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"
10992
- id="Rectangle-Copy-17"
10993
- fill="var(--pf-t--global--color--brand--200)"
10972
+ fill="#0066CC"
10994
10973
  />
10995
10974
  <path
10996
10975
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
10997
- fill="url(#linearGradient-1)"
10976
+ fill="url(#linearGradient-loading-state-demo-masthead)"
10998
10977
  />
10999
10978
  <path
11000
10979
  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"
11001
- fill="url(#linearGradient-1)"
10980
+ fill="url(#linearGradient-loading-state-demo-masthead)"
11002
10981
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
11003
10982
  />
11004
10983
  </g>
@@ -11013,8 +10992,38 @@ wrapperTag: div
11013
10992
  >
11014
10993
  <div class="pf-v5-c-toolbar__content">
11015
10994
  <div class="pf-v5-c-toolbar__content-section">
10995
+ <div class="pf-v5-c-toolbar__item">
10996
+ <button
10997
+ class="pf-v5-c-menu-toggle"
10998
+ type="button"
10999
+ aria-expanded="false"
11000
+ >
11001
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
11002
+ <span class="pf-v5-c-menu-toggle__controls">
11003
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11004
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
11005
+ </span>
11006
+ </span>
11007
+ </button>
11008
+ </div>
11009
+
11010
+ <div class="pf-v5-c-toolbar__item">
11011
+ <button
11012
+ class="pf-v5-c-menu-toggle"
11013
+ type="button"
11014
+ aria-expanded="false"
11015
+ >
11016
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
11017
+ <span class="pf-v5-c-menu-toggle__controls">
11018
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11019
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
11020
+ </span>
11021
+ </span>
11022
+ </button>
11023
+ </div>
11024
+
11016
11025
  <div
11017
- 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"
11026
+ 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"
11018
11027
  >
11019
11028
  <div
11020
11029
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -11061,27 +11070,6 @@ wrapperTag: div
11061
11070
  </button>
11062
11071
  </div>
11063
11072
  </div>
11064
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
11065
- <button
11066
- class="pf-v5-c-menu-toggle pf-m-full-height"
11067
- type="button"
11068
- aria-expanded="false"
11069
- >
11070
- <span class="pf-v5-c-menu-toggle__icon">
11071
- <img
11072
- class="pf-v5-c-avatar"
11073
- alt="Avatar image"
11074
- src="/assets/images/img_avatar-light.svg"
11075
- />
11076
- </span>
11077
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
11078
- <span class="pf-v5-c-menu-toggle__controls">
11079
- <span class="pf-v5-c-menu-toggle__toggle-icon">
11080
- <i class="fas fa-angle-down" aria-hidden="true"></i>
11081
- </span>
11082
- </span>
11083
- </button>
11084
- </div>
11085
11073
  </div>
11086
11074
  </div>
11087
11075
  </div>
@@ -11276,20 +11264,16 @@ wrapperTag: div
11276
11264
  </button>
11277
11265
  </span>
11278
11266
  <div class="pf-v5-c-masthead__main">
11279
- <a
11280
- class="pf-v5-c-masthead__brand"
11281
- href="#"
11282
- style="--pf-v5-c-brand--Height: 36px;"
11283
- >
11284
- <svg height="36px" viewBox="0 0 679 158" role="img">
11285
- <title>Patternfly logo</title>
11267
+ <a class="pf-v5-c-masthead__brand" href="#">
11268
+ <svg height="40px" viewBox="0 0 679 158">
11269
+ <title>PF-HorizontalLogo-Color</title>
11286
11270
  <defs>
11287
11271
  <linearGradient
11288
11272
  x1="68%"
11289
11273
  y1="2.25860997e-13%"
11290
11274
  x2="32%"
11291
11275
  y2="100%"
11292
- id="linearGradient-1"
11276
+ id="linearGradient-empty-state-demo-masthead"
11293
11277
  >
11294
11278
  <stop stop-color="#2B9AF3" offset="0%" />
11295
11279
  <stop
@@ -11299,13 +11283,7 @@ wrapperTag: div
11299
11283
  />
11300
11284
  </linearGradient>
11301
11285
  </defs>
11302
- <g
11303
- id="PF-HorizontalLogo-Color"
11304
- stroke="none"
11305
- stroke-width="1"
11306
- fill="none"
11307
- fill-rule="evenodd"
11308
- >
11286
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
11309
11287
  <g
11310
11288
  transform="translate(206.000000, 45.750000)"
11311
11289
  fill="var(--pf-t--global--text--color--regular)"
@@ -11340,19 +11318,18 @@ wrapperTag: div
11340
11318
  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"
11341
11319
  />
11342
11320
  </g>
11343
- <g id="Logo" transform="translate(0.000000, 0.000000)">
11321
+ <g transform="translate(0.000000, 0.000000)">
11344
11322
  <path
11345
11323
  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"
11346
- id="Rectangle-Copy-17"
11347
- fill="var(--pf-t--global--color--brand--200)"
11324
+ fill="#0066CC"
11348
11325
  />
11349
11326
  <path
11350
11327
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
11351
- fill="url(#linearGradient-1)"
11328
+ fill="url(#linearGradient-empty-state-demo-masthead)"
11352
11329
  />
11353
11330
  <path
11354
11331
  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"
11355
- fill="url(#linearGradient-1)"
11332
+ fill="url(#linearGradient-empty-state-demo-masthead)"
11356
11333
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
11357
11334
  />
11358
11335
  </g>
@@ -11367,25 +11344,55 @@ wrapperTag: div
11367
11344
  >
11368
11345
  <div class="pf-v5-c-toolbar__content">
11369
11346
  <div class="pf-v5-c-toolbar__content-section">
11370
- <div
11371
- 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"
11372
- >
11373
- <div
11374
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
11347
+ <div class="pf-v5-c-toolbar__item">
11348
+ <button
11349
+ class="pf-v5-c-menu-toggle"
11350
+ type="button"
11351
+ aria-expanded="false"
11375
11352
  >
11376
- <div class="pf-v5-c-toolbar__item">
11377
- <button
11378
- class="pf-v5-c-menu-toggle pf-m-plain"
11379
- type="button"
11380
- aria-expanded="false"
11381
- aria-label="Application launcher"
11382
- >
11383
- <i class="fas fa-th" aria-hidden="true"></i>
11384
- </button>
11385
- </div>
11386
- <div class="pf-v5-c-toolbar__item">
11387
- <button
11388
- class="pf-v5-c-menu-toggle pf-m-plain"
11353
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
11354
+ <span class="pf-v5-c-menu-toggle__controls">
11355
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11356
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
11357
+ </span>
11358
+ </span>
11359
+ </button>
11360
+ </div>
11361
+
11362
+ <div class="pf-v5-c-toolbar__item">
11363
+ <button
11364
+ class="pf-v5-c-menu-toggle"
11365
+ type="button"
11366
+ aria-expanded="false"
11367
+ >
11368
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
11369
+ <span class="pf-v5-c-menu-toggle__controls">
11370
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11371
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
11372
+ </span>
11373
+ </span>
11374
+ </button>
11375
+ </div>
11376
+
11377
+ <div
11378
+ 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"
11379
+ >
11380
+ <div
11381
+ class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
11382
+ >
11383
+ <div class="pf-v5-c-toolbar__item">
11384
+ <button
11385
+ class="pf-v5-c-menu-toggle pf-m-plain"
11386
+ type="button"
11387
+ aria-expanded="false"
11388
+ aria-label="Application launcher"
11389
+ >
11390
+ <i class="fas fa-th" aria-hidden="true"></i>
11391
+ </button>
11392
+ </div>
11393
+ <div class="pf-v5-c-toolbar__item">
11394
+ <button
11395
+ class="pf-v5-c-menu-toggle pf-m-plain"
11389
11396
  type="button"
11390
11397
  aria-expanded="false"
11391
11398
  aria-label="Settings"
@@ -11415,27 +11422,6 @@ wrapperTag: div
11415
11422
  </button>
11416
11423
  </div>
11417
11424
  </div>
11418
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
11419
- <button
11420
- class="pf-v5-c-menu-toggle pf-m-full-height"
11421
- type="button"
11422
- aria-expanded="false"
11423
- >
11424
- <span class="pf-v5-c-menu-toggle__icon">
11425
- <img
11426
- class="pf-v5-c-avatar"
11427
- alt="Avatar image"
11428
- src="/assets/images/img_avatar-light.svg"
11429
- />
11430
- </span>
11431
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
11432
- <span class="pf-v5-c-menu-toggle__controls">
11433
- <span class="pf-v5-c-menu-toggle__toggle-icon">
11434
- <i class="fas fa-angle-down" aria-hidden="true"></i>
11435
- </span>
11436
- </span>
11437
- </button>
11438
- </div>
11439
11425
  </div>
11440
11426
  </div>
11441
11427
  </div>
@@ -11625,20 +11611,16 @@ wrapperTag: div
11625
11611
  </button>
11626
11612
  </span>
11627
11613
  <div class="pf-v5-c-masthead__main">
11628
- <a
11629
- class="pf-v5-c-masthead__brand"
11630
- href="#"
11631
- style="--pf-v5-c-brand--Height: 36px;"
11632
- >
11633
- <svg height="36px" viewBox="0 0 679 158" role="img">
11634
- <title>Patternfly logo</title>
11614
+ <a class="pf-v5-c-masthead__brand" href="#">
11615
+ <svg height="40px" viewBox="0 0 679 158">
11616
+ <title>PF-HorizontalLogo-Color</title>
11635
11617
  <defs>
11636
11618
  <linearGradient
11637
11619
  x1="68%"
11638
11620
  y1="2.25860997e-13%"
11639
11621
  x2="32%"
11640
11622
  y2="100%"
11641
- id="linearGradient-1"
11623
+ id="linearGradient-static-bottom-pagination-demo-masthead"
11642
11624
  >
11643
11625
  <stop stop-color="#2B9AF3" offset="0%" />
11644
11626
  <stop
@@ -11648,13 +11630,7 @@ wrapperTag: div
11648
11630
  />
11649
11631
  </linearGradient>
11650
11632
  </defs>
11651
- <g
11652
- id="PF-HorizontalLogo-Color"
11653
- stroke="none"
11654
- stroke-width="1"
11655
- fill="none"
11656
- fill-rule="evenodd"
11657
- >
11633
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
11658
11634
  <g
11659
11635
  transform="translate(206.000000, 45.750000)"
11660
11636
  fill="var(--pf-t--global--text--color--regular)"
@@ -11689,19 +11665,18 @@ wrapperTag: div
11689
11665
  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"
11690
11666
  />
11691
11667
  </g>
11692
- <g id="Logo" transform="translate(0.000000, 0.000000)">
11668
+ <g transform="translate(0.000000, 0.000000)">
11693
11669
  <path
11694
11670
  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"
11695
- id="Rectangle-Copy-17"
11696
- fill="var(--pf-t--global--color--brand--200)"
11671
+ fill="#0066CC"
11697
11672
  />
11698
11673
  <path
11699
11674
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
11700
- fill="url(#linearGradient-1)"
11675
+ fill="url(#linearGradient-static-bottom-pagination-demo-masthead)"
11701
11676
  />
11702
11677
  <path
11703
11678
  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"
11704
- fill="url(#linearGradient-1)"
11679
+ fill="url(#linearGradient-static-bottom-pagination-demo-masthead)"
11705
11680
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
11706
11681
  />
11707
11682
  </g>
@@ -11716,8 +11691,38 @@ wrapperTag: div
11716
11691
  >
11717
11692
  <div class="pf-v5-c-toolbar__content">
11718
11693
  <div class="pf-v5-c-toolbar__content-section">
11694
+ <div class="pf-v5-c-toolbar__item">
11695
+ <button
11696
+ class="pf-v5-c-menu-toggle"
11697
+ type="button"
11698
+ aria-expanded="false"
11699
+ >
11700
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
11701
+ <span class="pf-v5-c-menu-toggle__controls">
11702
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11703
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
11704
+ </span>
11705
+ </span>
11706
+ </button>
11707
+ </div>
11708
+
11709
+ <div class="pf-v5-c-toolbar__item">
11710
+ <button
11711
+ class="pf-v5-c-menu-toggle"
11712
+ type="button"
11713
+ aria-expanded="false"
11714
+ >
11715
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
11716
+ <span class="pf-v5-c-menu-toggle__controls">
11717
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
11718
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
11719
+ </span>
11720
+ </span>
11721
+ </button>
11722
+ </div>
11723
+
11719
11724
  <div
11720
- 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"
11725
+ 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"
11721
11726
  >
11722
11727
  <div
11723
11728
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -11764,27 +11769,6 @@ wrapperTag: div
11764
11769
  </button>
11765
11770
  </div>
11766
11771
  </div>
11767
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
11768
- <button
11769
- class="pf-v5-c-menu-toggle pf-m-full-height"
11770
- type="button"
11771
- aria-expanded="false"
11772
- >
11773
- <span class="pf-v5-c-menu-toggle__icon">
11774
- <img
11775
- class="pf-v5-c-avatar"
11776
- alt="Avatar image"
11777
- src="/assets/images/img_avatar-light.svg"
11778
- />
11779
- </span>
11780
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
11781
- <span class="pf-v5-c-menu-toggle__controls">
11782
- <span class="pf-v5-c-menu-toggle__toggle-icon">
11783
- <i class="fas fa-angle-down" aria-hidden="true"></i>
11784
- </span>
11785
- </span>
11786
- </button>
11787
- </div>
11788
11772
  </div>
11789
11773
  </div>
11790
11774
  </div>
@@ -13010,20 +12994,16 @@ wrapperTag: div
13010
12994
  </button>
13011
12995
  </span>
13012
12996
  <div class="pf-v5-c-masthead__main">
13013
- <a
13014
- class="pf-v5-c-masthead__brand"
13015
- href="#"
13016
- style="--pf-v5-c-brand--Height: 36px;"
13017
- >
13018
- <svg height="36px" viewBox="0 0 679 158" role="img">
13019
- <title>Patternfly logo</title>
12997
+ <a class="pf-v5-c-masthead__brand" href="#">
12998
+ <svg height="40px" viewBox="0 0 679 158">
12999
+ <title>PF-HorizontalLogo-Color</title>
13020
13000
  <defs>
13021
13001
  <linearGradient
13022
13002
  x1="68%"
13023
13003
  y1="2.25860997e-13%"
13024
13004
  x2="32%"
13025
13005
  y2="100%"
13026
- id="linearGradient-1"
13006
+ id="linearGradient-column-management-demo-masthead"
13027
13007
  >
13028
13008
  <stop stop-color="#2B9AF3" offset="0%" />
13029
13009
  <stop
@@ -13033,13 +13013,7 @@ wrapperTag: div
13033
13013
  />
13034
13014
  </linearGradient>
13035
13015
  </defs>
13036
- <g
13037
- id="PF-HorizontalLogo-Color"
13038
- stroke="none"
13039
- stroke-width="1"
13040
- fill="none"
13041
- fill-rule="evenodd"
13042
- >
13016
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
13043
13017
  <g
13044
13018
  transform="translate(206.000000, 45.750000)"
13045
13019
  fill="var(--pf-t--global--text--color--regular)"
@@ -13074,19 +13048,18 @@ wrapperTag: div
13074
13048
  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"
13075
13049
  />
13076
13050
  </g>
13077
- <g id="Logo" transform="translate(0.000000, 0.000000)">
13051
+ <g transform="translate(0.000000, 0.000000)">
13078
13052
  <path
13079
13053
  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"
13080
- id="Rectangle-Copy-17"
13081
- fill="var(--pf-t--global--color--brand--200)"
13054
+ fill="#0066CC"
13082
13055
  />
13083
13056
  <path
13084
13057
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
13085
- fill="url(#linearGradient-1)"
13058
+ fill="url(#linearGradient-column-management-demo-masthead)"
13086
13059
  />
13087
13060
  <path
13088
13061
  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"
13089
- fill="url(#linearGradient-1)"
13062
+ fill="url(#linearGradient-column-management-demo-masthead)"
13090
13063
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
13091
13064
  />
13092
13065
  </g>
@@ -13101,8 +13074,38 @@ wrapperTag: div
13101
13074
  >
13102
13075
  <div class="pf-v5-c-toolbar__content">
13103
13076
  <div class="pf-v5-c-toolbar__content-section">
13077
+ <div class="pf-v5-c-toolbar__item">
13078
+ <button
13079
+ class="pf-v5-c-menu-toggle"
13080
+ type="button"
13081
+ aria-expanded="false"
13082
+ >
13083
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
13084
+ <span class="pf-v5-c-menu-toggle__controls">
13085
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
13086
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
13087
+ </span>
13088
+ </span>
13089
+ </button>
13090
+ </div>
13091
+
13092
+ <div class="pf-v5-c-toolbar__item">
13093
+ <button
13094
+ class="pf-v5-c-menu-toggle"
13095
+ type="button"
13096
+ aria-expanded="false"
13097
+ >
13098
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
13099
+ <span class="pf-v5-c-menu-toggle__controls">
13100
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
13101
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
13102
+ </span>
13103
+ </span>
13104
+ </button>
13105
+ </div>
13106
+
13104
13107
  <div
13105
- 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"
13108
+ 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"
13106
13109
  >
13107
13110
  <div
13108
13111
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -13149,27 +13152,6 @@ wrapperTag: div
13149
13152
  </button>
13150
13153
  </div>
13151
13154
  </div>
13152
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
13153
- <button
13154
- class="pf-v5-c-menu-toggle pf-m-full-height"
13155
- type="button"
13156
- aria-expanded="false"
13157
- >
13158
- <span class="pf-v5-c-menu-toggle__icon">
13159
- <img
13160
- class="pf-v5-c-avatar"
13161
- alt="Avatar image"
13162
- src="/assets/images/img_avatar-light.svg"
13163
- />
13164
- </span>
13165
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
13166
- <span class="pf-v5-c-menu-toggle__controls">
13167
- <span class="pf-v5-c-menu-toggle__toggle-icon">
13168
- <i class="fas fa-angle-down" aria-hidden="true"></i>
13169
- </span>
13170
- </span>
13171
- </button>
13172
- </div>
13173
13155
  </div>
13174
13156
  </div>
13175
13157
  </div>
@@ -14489,20 +14471,16 @@ wrapperTag: div
14489
14471
  </button>
14490
14472
  </span>
14491
14473
  <div class="pf-v5-c-masthead__main">
14492
- <a
14493
- class="pf-v5-c-masthead__brand"
14494
- href="#"
14495
- style="--pf-v5-c-brand--Height: 36px;"
14496
- >
14497
- <svg height="36px" viewBox="0 0 679 158" role="img">
14498
- <title>Patternfly logo</title>
14474
+ <a class="pf-v5-c-masthead__brand" href="#">
14475
+ <svg height="40px" viewBox="0 0 679 158">
14476
+ <title>PF-HorizontalLogo-Color</title>
14499
14477
  <defs>
14500
14478
  <linearGradient
14501
14479
  x1="68%"
14502
14480
  y1="2.25860997e-13%"
14503
14481
  x2="32%"
14504
14482
  y2="100%"
14505
- id="linearGradient-1"
14483
+ id="linearGradient-sticky-header-demo-masthead"
14506
14484
  >
14507
14485
  <stop stop-color="#2B9AF3" offset="0%" />
14508
14486
  <stop
@@ -14512,13 +14490,7 @@ wrapperTag: div
14512
14490
  />
14513
14491
  </linearGradient>
14514
14492
  </defs>
14515
- <g
14516
- id="PF-HorizontalLogo-Color"
14517
- stroke="none"
14518
- stroke-width="1"
14519
- fill="none"
14520
- fill-rule="evenodd"
14521
- >
14493
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
14522
14494
  <g
14523
14495
  transform="translate(206.000000, 45.750000)"
14524
14496
  fill="var(--pf-t--global--text--color--regular)"
@@ -14553,19 +14525,18 @@ wrapperTag: div
14553
14525
  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"
14554
14526
  />
14555
14527
  </g>
14556
- <g id="Logo" transform="translate(0.000000, 0.000000)">
14528
+ <g transform="translate(0.000000, 0.000000)">
14557
14529
  <path
14558
14530
  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"
14559
- id="Rectangle-Copy-17"
14560
- fill="var(--pf-t--global--color--brand--200)"
14531
+ fill="#0066CC"
14561
14532
  />
14562
14533
  <path
14563
14534
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
14564
- fill="url(#linearGradient-1)"
14535
+ fill="url(#linearGradient-sticky-header-demo-masthead)"
14565
14536
  />
14566
14537
  <path
14567
14538
  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"
14568
- fill="url(#linearGradient-1)"
14539
+ fill="url(#linearGradient-sticky-header-demo-masthead)"
14569
14540
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
14570
14541
  />
14571
14542
  </g>
@@ -14580,8 +14551,38 @@ wrapperTag: div
14580
14551
  >
14581
14552
  <div class="pf-v5-c-toolbar__content">
14582
14553
  <div class="pf-v5-c-toolbar__content-section">
14554
+ <div class="pf-v5-c-toolbar__item">
14555
+ <button
14556
+ class="pf-v5-c-menu-toggle"
14557
+ type="button"
14558
+ aria-expanded="false"
14559
+ >
14560
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
14561
+ <span class="pf-v5-c-menu-toggle__controls">
14562
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
14563
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
14564
+ </span>
14565
+ </span>
14566
+ </button>
14567
+ </div>
14568
+
14569
+ <div class="pf-v5-c-toolbar__item">
14570
+ <button
14571
+ class="pf-v5-c-menu-toggle"
14572
+ type="button"
14573
+ aria-expanded="false"
14574
+ >
14575
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
14576
+ <span class="pf-v5-c-menu-toggle__controls">
14577
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
14578
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
14579
+ </span>
14580
+ </span>
14581
+ </button>
14582
+ </div>
14583
+
14583
14584
  <div
14584
- 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"
14585
+ 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"
14585
14586
  >
14586
14587
  <div
14587
14588
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -14628,27 +14629,6 @@ wrapperTag: div
14628
14629
  </button>
14629
14630
  </div>
14630
14631
  </div>
14631
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
14632
- <button
14633
- class="pf-v5-c-menu-toggle pf-m-full-height"
14634
- type="button"
14635
- aria-expanded="false"
14636
- >
14637
- <span class="pf-v5-c-menu-toggle__icon">
14638
- <img
14639
- class="pf-v5-c-avatar"
14640
- alt="Avatar image"
14641
- src="/assets/images/img_avatar-light.svg"
14642
- />
14643
- </span>
14644
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
14645
- <span class="pf-v5-c-menu-toggle__controls">
14646
- <span class="pf-v5-c-menu-toggle__toggle-icon">
14647
- <i class="fas fa-angle-down" aria-hidden="true"></i>
14648
- </span>
14649
- </span>
14650
- </button>
14651
- </div>
14652
14632
  </div>
14653
14633
  </div>
14654
14634
  </div>
@@ -15874,20 +15854,16 @@ wrapperTag: div
15874
15854
  </button>
15875
15855
  </span>
15876
15856
  <div class="pf-v5-c-masthead__main">
15877
- <a
15878
- class="pf-v5-c-masthead__brand"
15879
- href="#"
15880
- style="--pf-v5-c-brand--Height: 36px;"
15881
- >
15882
- <svg height="36px" viewBox="0 0 679 158" role="img">
15883
- <title>Patternfly logo</title>
15857
+ <a class="pf-v5-c-masthead__brand" href="#">
15858
+ <svg height="40px" viewBox="0 0 679 158">
15859
+ <title>PF-HorizontalLogo-Color</title>
15884
15860
  <defs>
15885
15861
  <linearGradient
15886
15862
  x1="68%"
15887
15863
  y1="2.25860997e-13%"
15888
15864
  x2="32%"
15889
15865
  y2="100%"
15890
- id="linearGradient-1"
15866
+ id="linearGradient-sticky-first-column-demo-masthead"
15891
15867
  >
15892
15868
  <stop stop-color="#2B9AF3" offset="0%" />
15893
15869
  <stop
@@ -15897,13 +15873,7 @@ wrapperTag: div
15897
15873
  />
15898
15874
  </linearGradient>
15899
15875
  </defs>
15900
- <g
15901
- id="PF-HorizontalLogo-Color"
15902
- stroke="none"
15903
- stroke-width="1"
15904
- fill="none"
15905
- fill-rule="evenodd"
15906
- >
15876
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
15907
15877
  <g
15908
15878
  transform="translate(206.000000, 45.750000)"
15909
15879
  fill="var(--pf-t--global--text--color--regular)"
@@ -15938,19 +15908,18 @@ wrapperTag: div
15938
15908
  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"
15939
15909
  />
15940
15910
  </g>
15941
- <g id="Logo" transform="translate(0.000000, 0.000000)">
15911
+ <g transform="translate(0.000000, 0.000000)">
15942
15912
  <path
15943
15913
  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"
15944
- id="Rectangle-Copy-17"
15945
- fill="var(--pf-t--global--color--brand--200)"
15914
+ fill="#0066CC"
15946
15915
  />
15947
15916
  <path
15948
15917
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
15949
- fill="url(#linearGradient-1)"
15918
+ fill="url(#linearGradient-sticky-first-column-demo-masthead)"
15950
15919
  />
15951
15920
  <path
15952
15921
  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"
15953
- fill="url(#linearGradient-1)"
15922
+ fill="url(#linearGradient-sticky-first-column-demo-masthead)"
15954
15923
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
15955
15924
  />
15956
15925
  </g>
@@ -15965,8 +15934,38 @@ wrapperTag: div
15965
15934
  >
15966
15935
  <div class="pf-v5-c-toolbar__content">
15967
15936
  <div class="pf-v5-c-toolbar__content-section">
15937
+ <div class="pf-v5-c-toolbar__item">
15938
+ <button
15939
+ class="pf-v5-c-menu-toggle"
15940
+ type="button"
15941
+ aria-expanded="false"
15942
+ >
15943
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
15944
+ <span class="pf-v5-c-menu-toggle__controls">
15945
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
15946
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
15947
+ </span>
15948
+ </span>
15949
+ </button>
15950
+ </div>
15951
+
15952
+ <div class="pf-v5-c-toolbar__item">
15953
+ <button
15954
+ class="pf-v5-c-menu-toggle"
15955
+ type="button"
15956
+ aria-expanded="false"
15957
+ >
15958
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
15959
+ <span class="pf-v5-c-menu-toggle__controls">
15960
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
15961
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
15962
+ </span>
15963
+ </span>
15964
+ </button>
15965
+ </div>
15966
+
15968
15967
  <div
15969
- 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"
15968
+ 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"
15970
15969
  >
15971
15970
  <div
15972
15971
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -16013,27 +16012,6 @@ wrapperTag: div
16013
16012
  </button>
16014
16013
  </div>
16015
16014
  </div>
16016
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
16017
- <button
16018
- class="pf-v5-c-menu-toggle pf-m-full-height"
16019
- type="button"
16020
- aria-expanded="false"
16021
- >
16022
- <span class="pf-v5-c-menu-toggle__icon">
16023
- <img
16024
- class="pf-v5-c-avatar"
16025
- alt="Avatar image"
16026
- src="/assets/images/img_avatar-light.svg"
16027
- />
16028
- </span>
16029
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
16030
- <span class="pf-v5-c-menu-toggle__controls">
16031
- <span class="pf-v5-c-menu-toggle__toggle-icon">
16032
- <i class="fas fa-angle-down" aria-hidden="true"></i>
16033
- </span>
16034
- </span>
16035
- </button>
16036
- </div>
16037
16015
  </div>
16038
16016
  </div>
16039
16017
  </div>
@@ -17044,20 +17022,16 @@ wrapperTag: div
17044
17022
  </button>
17045
17023
  </span>
17046
17024
  <div class="pf-v5-c-masthead__main">
17047
- <a
17048
- class="pf-v5-c-masthead__brand"
17049
- href="#"
17050
- style="--pf-v5-c-brand--Height: 36px;"
17051
- >
17052
- <svg height="36px" viewBox="0 0 679 158" role="img">
17053
- <title>Patternfly logo</title>
17025
+ <a class="pf-v5-c-masthead__brand" href="#">
17026
+ <svg height="40px" viewBox="0 0 679 158">
17027
+ <title>PF-HorizontalLogo-Color</title>
17054
17028
  <defs>
17055
17029
  <linearGradient
17056
17030
  x1="68%"
17057
17031
  y1="2.25860997e-13%"
17058
17032
  x2="32%"
17059
17033
  y2="100%"
17060
- id="linearGradient-1"
17034
+ id="linearGradient-sticky-multiple-columns-demo-masthead"
17061
17035
  >
17062
17036
  <stop stop-color="#2B9AF3" offset="0%" />
17063
17037
  <stop
@@ -17067,13 +17041,7 @@ wrapperTag: div
17067
17041
  />
17068
17042
  </linearGradient>
17069
17043
  </defs>
17070
- <g
17071
- id="PF-HorizontalLogo-Color"
17072
- stroke="none"
17073
- stroke-width="1"
17074
- fill="none"
17075
- fill-rule="evenodd"
17076
- >
17044
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
17077
17045
  <g
17078
17046
  transform="translate(206.000000, 45.750000)"
17079
17047
  fill="var(--pf-t--global--text--color--regular)"
@@ -17108,19 +17076,18 @@ wrapperTag: div
17108
17076
  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"
17109
17077
  />
17110
17078
  </g>
17111
- <g id="Logo" transform="translate(0.000000, 0.000000)">
17079
+ <g transform="translate(0.000000, 0.000000)">
17112
17080
  <path
17113
17081
  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"
17114
- id="Rectangle-Copy-17"
17115
- fill="var(--pf-t--global--color--brand--200)"
17082
+ fill="#0066CC"
17116
17083
  />
17117
17084
  <path
17118
17085
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
17119
- fill="url(#linearGradient-1)"
17086
+ fill="url(#linearGradient-sticky-multiple-columns-demo-masthead)"
17120
17087
  />
17121
17088
  <path
17122
17089
  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"
17123
- fill="url(#linearGradient-1)"
17090
+ fill="url(#linearGradient-sticky-multiple-columns-demo-masthead)"
17124
17091
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
17125
17092
  />
17126
17093
  </g>
@@ -17135,8 +17102,38 @@ wrapperTag: div
17135
17102
  >
17136
17103
  <div class="pf-v5-c-toolbar__content">
17137
17104
  <div class="pf-v5-c-toolbar__content-section">
17105
+ <div class="pf-v5-c-toolbar__item">
17106
+ <button
17107
+ class="pf-v5-c-menu-toggle"
17108
+ type="button"
17109
+ aria-expanded="false"
17110
+ >
17111
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
17112
+ <span class="pf-v5-c-menu-toggle__controls">
17113
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
17114
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
17115
+ </span>
17116
+ </span>
17117
+ </button>
17118
+ </div>
17119
+
17120
+ <div class="pf-v5-c-toolbar__item">
17121
+ <button
17122
+ class="pf-v5-c-menu-toggle"
17123
+ type="button"
17124
+ aria-expanded="false"
17125
+ >
17126
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
17127
+ <span class="pf-v5-c-menu-toggle__controls">
17128
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
17129
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
17130
+ </span>
17131
+ </span>
17132
+ </button>
17133
+ </div>
17134
+
17138
17135
  <div
17139
- 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"
17136
+ 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"
17140
17137
  >
17141
17138
  <div
17142
17139
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -17183,27 +17180,6 @@ wrapperTag: div
17183
17180
  </button>
17184
17181
  </div>
17185
17182
  </div>
17186
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
17187
- <button
17188
- class="pf-v5-c-menu-toggle pf-m-full-height"
17189
- type="button"
17190
- aria-expanded="false"
17191
- >
17192
- <span class="pf-v5-c-menu-toggle__icon">
17193
- <img
17194
- class="pf-v5-c-avatar"
17195
- alt="Avatar image"
17196
- src="/assets/images/img_avatar-light.svg"
17197
- />
17198
- </span>
17199
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
17200
- <span class="pf-v5-c-menu-toggle__controls">
17201
- <span class="pf-v5-c-menu-toggle__toggle-icon">
17202
- <i class="fas fa-angle-down" aria-hidden="true"></i>
17203
- </span>
17204
- </span>
17205
- </button>
17206
- </div>
17207
17183
  </div>
17208
17184
  </div>
17209
17185
  </div>
@@ -18239,20 +18215,16 @@ wrapperTag: div
18239
18215
  </button>
18240
18216
  </span>
18241
18217
  <div class="pf-v5-c-masthead__main">
18242
- <a
18243
- class="pf-v5-c-masthead__brand"
18244
- href="#"
18245
- style="--pf-v5-c-brand--Height: 36px;"
18246
- >
18247
- <svg height="36px" viewBox="0 0 679 158" role="img">
18248
- <title>Patternfly logo</title>
18218
+ <a class="pf-v5-c-masthead__brand" href="#">
18219
+ <svg height="40px" viewBox="0 0 679 158">
18220
+ <title>PF-HorizontalLogo-Color</title>
18249
18221
  <defs>
18250
18222
  <linearGradient
18251
18223
  x1="68%"
18252
18224
  y1="2.25860997e-13%"
18253
18225
  x2="32%"
18254
18226
  y2="100%"
18255
- id="linearGradient-1"
18227
+ id="linearGradient-sticky-header-and-multiple columns-demo-masthead"
18256
18228
  >
18257
18229
  <stop stop-color="#2B9AF3" offset="0%" />
18258
18230
  <stop
@@ -18262,13 +18234,7 @@ wrapperTag: div
18262
18234
  />
18263
18235
  </linearGradient>
18264
18236
  </defs>
18265
- <g
18266
- id="PF-HorizontalLogo-Color"
18267
- stroke="none"
18268
- stroke-width="1"
18269
- fill="none"
18270
- fill-rule="evenodd"
18271
- >
18237
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
18272
18238
  <g
18273
18239
  transform="translate(206.000000, 45.750000)"
18274
18240
  fill="var(--pf-t--global--text--color--regular)"
@@ -18303,19 +18269,18 @@ wrapperTag: div
18303
18269
  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"
18304
18270
  />
18305
18271
  </g>
18306
- <g id="Logo" transform="translate(0.000000, 0.000000)">
18272
+ <g transform="translate(0.000000, 0.000000)">
18307
18273
  <path
18308
18274
  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"
18309
- id="Rectangle-Copy-17"
18310
- fill="var(--pf-t--global--color--brand--200)"
18275
+ fill="#0066CC"
18311
18276
  />
18312
18277
  <path
18313
18278
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
18314
- fill="url(#linearGradient-1)"
18279
+ fill="url(#linearGradient-sticky-header-and-multiple columns-demo-masthead)"
18315
18280
  />
18316
18281
  <path
18317
18282
  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"
18318
- fill="url(#linearGradient-1)"
18283
+ fill="url(#linearGradient-sticky-header-and-multiple columns-demo-masthead)"
18319
18284
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
18320
18285
  />
18321
18286
  </g>
@@ -18330,8 +18295,38 @@ wrapperTag: div
18330
18295
  >
18331
18296
  <div class="pf-v5-c-toolbar__content">
18332
18297
  <div class="pf-v5-c-toolbar__content-section">
18298
+ <div class="pf-v5-c-toolbar__item">
18299
+ <button
18300
+ class="pf-v5-c-menu-toggle"
18301
+ type="button"
18302
+ aria-expanded="false"
18303
+ >
18304
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
18305
+ <span class="pf-v5-c-menu-toggle__controls">
18306
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
18307
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
18308
+ </span>
18309
+ </span>
18310
+ </button>
18311
+ </div>
18312
+
18313
+ <div class="pf-v5-c-toolbar__item">
18314
+ <button
18315
+ class="pf-v5-c-menu-toggle"
18316
+ type="button"
18317
+ aria-expanded="false"
18318
+ >
18319
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
18320
+ <span class="pf-v5-c-menu-toggle__controls">
18321
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
18322
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
18323
+ </span>
18324
+ </span>
18325
+ </button>
18326
+ </div>
18327
+
18333
18328
  <div
18334
- 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"
18329
+ 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"
18335
18330
  >
18336
18331
  <div
18337
18332
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -18378,27 +18373,6 @@ wrapperTag: div
18378
18373
  </button>
18379
18374
  </div>
18380
18375
  </div>
18381
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
18382
- <button
18383
- class="pf-v5-c-menu-toggle pf-m-full-height"
18384
- type="button"
18385
- aria-expanded="false"
18386
- >
18387
- <span class="pf-v5-c-menu-toggle__icon">
18388
- <img
18389
- class="pf-v5-c-avatar"
18390
- alt="Avatar image"
18391
- src="/assets/images/img_avatar-light.svg"
18392
- />
18393
- </span>
18394
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
18395
- <span class="pf-v5-c-menu-toggle__controls">
18396
- <span class="pf-v5-c-menu-toggle__toggle-icon">
18397
- <i class="fas fa-angle-down" aria-hidden="true"></i>
18398
- </span>
18399
- </span>
18400
- </button>
18401
- </div>
18402
18376
  </div>
18403
18377
  </div>
18404
18378
  </div>
@@ -19432,20 +19406,16 @@ wrapperTag: div
19432
19406
  </button>
19433
19407
  </span>
19434
19408
  <div class="pf-v5-c-masthead__main">
19435
- <a
19436
- class="pf-v5-c-masthead__brand"
19437
- href="#"
19438
- style="--pf-v5-c-brand--Height: 36px;"
19439
- >
19440
- <svg height="36px" viewBox="0 0 679 158" role="img">
19441
- <title>Patternfly logo</title>
19409
+ <a class="pf-v5-c-masthead__brand" href="#">
19410
+ <svg height="40px" viewBox="0 0 679 158">
19411
+ <title>PF-HorizontalLogo-Color</title>
19442
19412
  <defs>
19443
19413
  <linearGradient
19444
19414
  x1="68%"
19445
19415
  y1="2.25860997e-13%"
19446
19416
  x2="32%"
19447
19417
  y2="100%"
19448
- id="linearGradient-1"
19418
+ id="linearGradient-sticky-header-and-multiple columns-demo-masthead"
19449
19419
  >
19450
19420
  <stop stop-color="#2B9AF3" offset="0%" />
19451
19421
  <stop
@@ -19455,13 +19425,7 @@ wrapperTag: div
19455
19425
  />
19456
19426
  </linearGradient>
19457
19427
  </defs>
19458
- <g
19459
- id="PF-HorizontalLogo-Color"
19460
- stroke="none"
19461
- stroke-width="1"
19462
- fill="none"
19463
- fill-rule="evenodd"
19464
- >
19428
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
19465
19429
  <g
19466
19430
  transform="translate(206.000000, 45.750000)"
19467
19431
  fill="var(--pf-t--global--text--color--regular)"
@@ -19496,19 +19460,18 @@ wrapperTag: div
19496
19460
  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"
19497
19461
  />
19498
19462
  </g>
19499
- <g id="Logo" transform="translate(0.000000, 0.000000)">
19463
+ <g transform="translate(0.000000, 0.000000)">
19500
19464
  <path
19501
19465
  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"
19502
- id="Rectangle-Copy-17"
19503
- fill="var(--pf-t--global--color--brand--200)"
19466
+ fill="#0066CC"
19504
19467
  />
19505
19468
  <path
19506
19469
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
19507
- fill="url(#linearGradient-1)"
19470
+ fill="url(#linearGradient-sticky-header-and-multiple columns-demo-masthead)"
19508
19471
  />
19509
19472
  <path
19510
19473
  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"
19511
- fill="url(#linearGradient-1)"
19474
+ fill="url(#linearGradient-sticky-header-and-multiple columns-demo-masthead)"
19512
19475
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
19513
19476
  />
19514
19477
  </g>
@@ -19523,8 +19486,38 @@ wrapperTag: div
19523
19486
  >
19524
19487
  <div class="pf-v5-c-toolbar__content">
19525
19488
  <div class="pf-v5-c-toolbar__content-section">
19489
+ <div class="pf-v5-c-toolbar__item">
19490
+ <button
19491
+ class="pf-v5-c-menu-toggle"
19492
+ type="button"
19493
+ aria-expanded="false"
19494
+ >
19495
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
19496
+ <span class="pf-v5-c-menu-toggle__controls">
19497
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
19498
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
19499
+ </span>
19500
+ </span>
19501
+ </button>
19502
+ </div>
19503
+
19504
+ <div class="pf-v5-c-toolbar__item">
19505
+ <button
19506
+ class="pf-v5-c-menu-toggle"
19507
+ type="button"
19508
+ aria-expanded="false"
19509
+ >
19510
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
19511
+ <span class="pf-v5-c-menu-toggle__controls">
19512
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
19513
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
19514
+ </span>
19515
+ </span>
19516
+ </button>
19517
+ </div>
19518
+
19526
19519
  <div
19527
- 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"
19520
+ 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"
19528
19521
  >
19529
19522
  <div
19530
19523
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -19571,27 +19564,6 @@ wrapperTag: div
19571
19564
  </button>
19572
19565
  </div>
19573
19566
  </div>
19574
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
19575
- <button
19576
- class="pf-v5-c-menu-toggle pf-m-full-height"
19577
- type="button"
19578
- aria-expanded="false"
19579
- >
19580
- <span class="pf-v5-c-menu-toggle__icon">
19581
- <img
19582
- class="pf-v5-c-avatar"
19583
- alt="Avatar image"
19584
- src="/assets/images/img_avatar-light.svg"
19585
- />
19586
- </span>
19587
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
19588
- <span class="pf-v5-c-menu-toggle__controls">
19589
- <span class="pf-v5-c-menu-toggle__toggle-icon">
19590
- <i class="fas fa-angle-down" aria-hidden="true"></i>
19591
- </span>
19592
- </span>
19593
- </button>
19594
- </div>
19595
19567
  </div>
19596
19568
  </div>
19597
19569
  </div>
@@ -20605,20 +20577,16 @@ By default, table cell alignment is set to baseline. This retains vertical align
20605
20577
  </button>
20606
20578
  </span>
20607
20579
  <div class="pf-v5-c-masthead__main">
20608
- <a
20609
- class="pf-v5-c-masthead__brand"
20610
- href="#"
20611
- style="--pf-v5-c-brand--Height: 36px;"
20612
- >
20613
- <svg height="36px" viewBox="0 0 679 158" role="img">
20614
- <title>Patternfly logo</title>
20580
+ <a class="pf-v5-c-masthead__brand" href="#">
20581
+ <svg height="40px" viewBox="0 0 679 158">
20582
+ <title>PF-HorizontalLogo-Color</title>
20615
20583
  <defs>
20616
20584
  <linearGradient
20617
20585
  x1="68%"
20618
20586
  y1="2.25860997e-13%"
20619
20587
  x2="32%"
20620
20588
  y2="100%"
20621
- id="linearGradient-1"
20589
+ id="linearGradient-image-alignment-demo-masthead"
20622
20590
  >
20623
20591
  <stop stop-color="#2B9AF3" offset="0%" />
20624
20592
  <stop
@@ -20628,13 +20596,7 @@ By default, table cell alignment is set to baseline. This retains vertical align
20628
20596
  />
20629
20597
  </linearGradient>
20630
20598
  </defs>
20631
- <g
20632
- id="PF-HorizontalLogo-Color"
20633
- stroke="none"
20634
- stroke-width="1"
20635
- fill="none"
20636
- fill-rule="evenodd"
20637
- >
20599
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
20638
20600
  <g
20639
20601
  transform="translate(206.000000, 45.750000)"
20640
20602
  fill="var(--pf-t--global--text--color--regular)"
@@ -20669,19 +20631,18 @@ By default, table cell alignment is set to baseline. This retains vertical align
20669
20631
  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"
20670
20632
  />
20671
20633
  </g>
20672
- <g id="Logo" transform="translate(0.000000, 0.000000)">
20634
+ <g transform="translate(0.000000, 0.000000)">
20673
20635
  <path
20674
20636
  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"
20675
- id="Rectangle-Copy-17"
20676
- fill="var(--pf-t--global--color--brand--200)"
20637
+ fill="#0066CC"
20677
20638
  />
20678
20639
  <path
20679
20640
  d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
20680
- fill="url(#linearGradient-1)"
20641
+ fill="url(#linearGradient-image-alignment-demo-masthead)"
20681
20642
  />
20682
20643
  <path
20683
20644
  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"
20684
- fill="url(#linearGradient-1)"
20645
+ fill="url(#linearGradient-image-alignment-demo-masthead)"
20685
20646
  transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
20686
20647
  />
20687
20648
  </g>
@@ -20696,8 +20657,38 @@ By default, table cell alignment is set to baseline. This retains vertical align
20696
20657
  >
20697
20658
  <div class="pf-v5-c-toolbar__content">
20698
20659
  <div class="pf-v5-c-toolbar__content-section">
20660
+ <div class="pf-v5-c-toolbar__item">
20661
+ <button
20662
+ class="pf-v5-c-menu-toggle"
20663
+ type="button"
20664
+ aria-expanded="false"
20665
+ >
20666
+ <span class="pf-v5-c-menu-toggle__text">Overview</span>
20667
+ <span class="pf-v5-c-menu-toggle__controls">
20668
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
20669
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
20670
+ </span>
20671
+ </span>
20672
+ </button>
20673
+ </div>
20674
+
20675
+ <div class="pf-v5-c-toolbar__item">
20676
+ <button
20677
+ class="pf-v5-c-menu-toggle"
20678
+ type="button"
20679
+ aria-expanded="false"
20680
+ >
20681
+ <span class="pf-v5-c-menu-toggle__text">Services</span>
20682
+ <span class="pf-v5-c-menu-toggle__controls">
20683
+ <span class="pf-v5-c-menu-toggle__toggle-icon">
20684
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
20685
+ </span>
20686
+ </span>
20687
+ </button>
20688
+ </div>
20689
+
20699
20690
  <div
20700
- 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"
20691
+ 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"
20701
20692
  >
20702
20693
  <div
20703
20694
  class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
@@ -20744,27 +20735,6 @@ By default, table cell alignment is set to baseline. This retains vertical align
20744
20735
  </button>
20745
20736
  </div>
20746
20737
  </div>
20747
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
20748
- <button
20749
- class="pf-v5-c-menu-toggle pf-m-full-height"
20750
- type="button"
20751
- aria-expanded="false"
20752
- >
20753
- <span class="pf-v5-c-menu-toggle__icon">
20754
- <img
20755
- class="pf-v5-c-avatar"
20756
- alt="Avatar image"
20757
- src="/assets/images/img_avatar-light.svg"
20758
- />
20759
- </span>
20760
- <span class="pf-v5-c-menu-toggle__text">Ned Username</span>
20761
- <span class="pf-v5-c-menu-toggle__controls">
20762
- <span class="pf-v5-c-menu-toggle__toggle-icon">
20763
- <i class="fas fa-angle-down" aria-hidden="true"></i>
20764
- </span>
20765
- </span>
20766
- </button>
20767
- </div>
20768
20738
  </div>
20769
20739
  </div>
20770
20740
  </div>