@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92

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 (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +5 -5
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -8,25 +8,25 @@ wrapperTag: div
8
8
  ### Basic
9
9
 
10
10
  ```html isFullscreen
11
- <div class="pf-v5-c-page" id="banner-basic-example">
12
- <div class="pf-v5-c-skip-to-content">
11
+ <div class="pf-v6-c-page" id="banner-basic-example">
12
+ <div class="pf-v6-c-skip-to-content">
13
13
  <a
14
- class="pf-v5-c-button pf-m-primary"
14
+ class="pf-v6-c-button pf-m-primary"
15
15
  href="#main-content-banner-basic-example"
16
16
  >Skip to content</a>
17
17
  </div>
18
- <header class="pf-v5-c-masthead" id="banner-basic-example-masthead">
19
- <span class="pf-v5-c-masthead__toggle">
18
+ <header class="pf-v6-c-masthead" id="banner-basic-example-masthead">
19
+ <span class="pf-v6-c-masthead__toggle">
20
20
  <button
21
- class="pf-v5-c-button pf-m-plain"
21
+ class="pf-v6-c-button pf-m-plain"
22
22
  type="button"
23
23
  aria-label="Global navigation"
24
24
  >
25
25
  <i class="fas fa-bars" aria-hidden="true"></i>
26
26
  </button>
27
27
  </span>
28
- <div class="pf-v5-c-masthead__main">
29
- <a class="pf-v5-c-masthead__brand" href="#">
28
+ <div class="pf-v6-c-masthead__main">
29
+ <a class="pf-v6-c-masthead__brand" href="#">
30
30
  <svg height="40px" viewBox="0 0 679 158">
31
31
  <title>PF-HorizontalLogo-Color</title>
32
32
  <defs>
@@ -99,37 +99,37 @@ wrapperTag: div
99
99
  </svg>
100
100
  </a>
101
101
  </div>
102
- <div class="pf-v5-c-masthead__content">
102
+ <div class="pf-v6-c-masthead__content">
103
103
  <div
104
- class="pf-v5-c-toolbar pf-m-static"
104
+ class="pf-v6-c-toolbar pf-m-static"
105
105
  id="banner-basic-example-masthead-toolbar"
106
106
  >
107
- <div class="pf-v5-c-toolbar__content">
108
- <div class="pf-v5-c-toolbar__content-section">
109
- <div class="pf-v5-c-toolbar__item">
107
+ <div class="pf-v6-c-toolbar__content">
108
+ <div class="pf-v6-c-toolbar__content-section">
109
+ <div class="pf-v6-c-toolbar__item">
110
110
  <button
111
- class="pf-v5-c-menu-toggle"
111
+ class="pf-v6-c-menu-toggle"
112
112
  type="button"
113
113
  aria-expanded="false"
114
114
  >
115
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
116
- <span class="pf-v5-c-menu-toggle__controls">
117
- <span class="pf-v5-c-menu-toggle__toggle-icon">
115
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
116
+ <span class="pf-v6-c-menu-toggle__controls">
117
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
118
118
  <i class="fas fa-caret-down" aria-hidden="true"></i>
119
119
  </span>
120
120
  </span>
121
121
  </button>
122
122
  </div>
123
123
 
124
- <div class="pf-v5-c-toolbar__item">
124
+ <div class="pf-v6-c-toolbar__item">
125
125
  <button
126
- class="pf-v5-c-menu-toggle"
126
+ class="pf-v6-c-menu-toggle"
127
127
  type="button"
128
128
  aria-expanded="false"
129
129
  >
130
- <span class="pf-v5-c-menu-toggle__text">Services</span>
131
- <span class="pf-v5-c-menu-toggle__controls">
132
- <span class="pf-v5-c-menu-toggle__toggle-icon">
130
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
131
+ <span class="pf-v6-c-menu-toggle__controls">
132
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
133
133
  <i class="fas fa-caret-down" aria-hidden="true"></i>
134
134
  </span>
135
135
  </span>
@@ -137,56 +137,56 @@ wrapperTag: div
137
137
  </div>
138
138
 
139
139
  <div
140
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
140
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
141
141
  >
142
142
  <div
143
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
143
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
144
144
  >
145
- <div class="pf-v5-c-toolbar__item">
145
+ <div class="pf-v6-c-toolbar__item">
146
146
  <button
147
- class="pf-v5-c-menu-toggle pf-m-plain"
147
+ class="pf-v6-c-menu-toggle pf-m-plain"
148
148
  type="button"
149
149
  aria-expanded="false"
150
150
  aria-label="Application launcher"
151
151
  >
152
- <span class="pf-v5-c-menu-toggle__icon">
152
+ <span class="pf-v6-c-menu-toggle__icon">
153
153
  <i class="fas fa-th" aria-hidden="true"></i>
154
154
  </span>
155
155
  </button>
156
156
  </div>
157
- <div class="pf-v5-c-toolbar__item">
157
+ <div class="pf-v6-c-toolbar__item">
158
158
  <button
159
- class="pf-v5-c-menu-toggle pf-m-plain"
159
+ class="pf-v6-c-menu-toggle pf-m-plain"
160
160
  type="button"
161
161
  aria-expanded="false"
162
162
  aria-label="Settings"
163
163
  >
164
- <span class="pf-v5-c-menu-toggle__icon">
164
+ <span class="pf-v6-c-menu-toggle__icon">
165
165
  <i class="fas fa-cog" aria-hidden="true"></i>
166
166
  </span>
167
167
  </button>
168
168
  </div>
169
- <div class="pf-v5-c-toolbar__item">
169
+ <div class="pf-v6-c-toolbar__item">
170
170
  <button
171
- class="pf-v5-c-menu-toggle pf-m-plain"
171
+ class="pf-v6-c-menu-toggle pf-m-plain"
172
172
  type="button"
173
173
  aria-expanded="false"
174
174
  aria-label="Help"
175
175
  >
176
- <span class="pf-v5-c-menu-toggle__icon">
176
+ <span class="pf-v6-c-menu-toggle__icon">
177
177
  <i class="fas fa-question-circle" aria-hidden="true"></i>
178
178
  </span>
179
179
  </button>
180
180
  </div>
181
181
  </div>
182
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
182
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
183
183
  <button
184
- class="pf-v5-c-menu-toggle pf-m-plain"
184
+ class="pf-v6-c-menu-toggle pf-m-plain"
185
185
  type="button"
186
186
  aria-expanded="false"
187
187
  aria-label="Actions"
188
188
  >
189
- <span class="pf-v5-c-menu-toggle__icon">
189
+ <span class="pf-v6-c-menu-toggle__icon">
190
190
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
191
191
  </span>
192
192
  </button>
@@ -197,87 +197,87 @@ wrapperTag: div
197
197
  </div>
198
198
  </div>
199
199
  </header>
200
- <div class="pf-v5-c-page__sidebar">
201
- <div class="pf-v5-c-page__sidebar-body">
200
+ <div class="pf-v6-c-page__sidebar">
201
+ <div class="pf-v6-c-page__sidebar-body">
202
202
  <nav
203
- class="pf-v5-c-nav"
203
+ class="pf-v6-c-nav"
204
204
  id="banner-basic-example-primary-nav"
205
205
  aria-label="Global"
206
206
  >
207
- <ul class="pf-v5-c-nav__list" role="list">
208
- <li class="pf-v5-c-nav__item">
209
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
207
+ <ul class="pf-v6-c-nav__list" role="list">
208
+ <li class="pf-v6-c-nav__item">
209
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
210
210
  </li>
211
- <li class="pf-v5-c-nav__item">
211
+ <li class="pf-v6-c-nav__item">
212
212
  <a
213
213
  href="#"
214
- class="pf-v5-c-nav__link pf-m-current"
214
+ class="pf-v6-c-nav__link pf-m-current"
215
215
  aria-current="page"
216
216
  >Policy</a>
217
217
  </li>
218
- <li class="pf-v5-c-nav__item">
219
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
218
+ <li class="pf-v6-c-nav__item">
219
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
220
220
  </li>
221
- <li class="pf-v5-c-nav__item">
222
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
221
+ <li class="pf-v6-c-nav__item">
222
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
223
223
  </li>
224
- <li class="pf-v5-c-nav__item">
225
- <a href="#" class="pf-v5-c-nav__link">Server</a>
224
+ <li class="pf-v6-c-nav__item">
225
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
226
226
  </li>
227
227
  </ul>
228
228
  </nav>
229
229
  </div>
230
230
  </div>
231
231
  <main
232
- class="pf-v5-c-page__main"
232
+ class="pf-v6-c-page__main"
233
233
  tabindex="-1"
234
234
  id="main-content-banner-basic-example"
235
235
  >
236
- <div class="pf-v5-c-banner pf-m-sticky">
236
+ <div class="pf-v6-c-banner pf-m-sticky">
237
237
  <div
238
- class="pf-v5-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
238
+ class="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
239
239
  >
240
- <div class="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
240
+ <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
241
241
  <div
242
- class="pf-v5-u-display-none pf-v5-u-display-block-on-lg"
242
+ class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
243
243
  >This message is sticky to the top or bottom of the page.</div>
244
244
  <div
245
- class="pf-v5-u-display-none-on-lg"
245
+ class="pf-v6-u-display-none-on-lg"
246
246
  >Drop some text on mobile, truncate if needed.</div>
247
247
  <div
248
- class="pf-v5-u-display-none pf-v5-u-display-block-on-lg"
248
+ class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
249
249
  >Ned Username</div>
250
250
  </div>
251
251
  </div>
252
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
253
- <div class="pf-v5-c-page__main-body">
254
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
255
- <ol class="pf-v5-c-breadcrumb__list" role="list">
256
- <li class="pf-v5-c-breadcrumb__item">
257
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
252
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
253
+ <div class="pf-v6-c-page__main-body">
254
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
255
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
256
+ <li class="pf-v6-c-breadcrumb__item">
257
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
258
258
  </li>
259
- <li class="pf-v5-c-breadcrumb__item">
260
- <span class="pf-v5-c-breadcrumb__item-divider">
259
+ <li class="pf-v6-c-breadcrumb__item">
260
+ <span class="pf-v6-c-breadcrumb__item-divider">
261
261
  <i class="fas fa-angle-right" aria-hidden="true"></i>
262
262
  </span>
263
263
 
264
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
264
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
265
265
  </li>
266
- <li class="pf-v5-c-breadcrumb__item">
267
- <span class="pf-v5-c-breadcrumb__item-divider">
266
+ <li class="pf-v6-c-breadcrumb__item">
267
+ <span class="pf-v6-c-breadcrumb__item-divider">
268
268
  <i class="fas fa-angle-right" aria-hidden="true"></i>
269
269
  </span>
270
270
 
271
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
271
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
272
272
  </li>
273
- <li class="pf-v5-c-breadcrumb__item">
274
- <span class="pf-v5-c-breadcrumb__item-divider">
273
+ <li class="pf-v6-c-breadcrumb__item">
274
+ <span class="pf-v6-c-breadcrumb__item-divider">
275
275
  <i class="fas fa-angle-right" aria-hidden="true"></i>
276
276
  </span>
277
277
 
278
278
  <a
279
279
  href="#"
280
- class="pf-v5-c-breadcrumb__link pf-m-current"
280
+ class="pf-v6-c-breadcrumb__link pf-m-current"
281
281
  aria-current="page"
282
282
  >Section landing</a>
283
283
  </li>
@@ -285,166 +285,166 @@ wrapperTag: div
285
285
  </nav>
286
286
  </div>
287
287
  </section>
288
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
289
- <div class="pf-v5-c-page__main-body">
290
- <div class="pf-v5-c-content">
288
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
289
+ <div class="pf-v6-c-page__main-body">
290
+ <div class="pf-v6-c-content">
291
291
  <h1>Main title</h1>
292
292
  <p>This is a full page demo.</p>
293
293
  </div>
294
294
  </div>
295
295
  </section>
296
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
297
- <div class="pf-v5-c-page__main-body">
298
- <div class="pf-v5-l-gallery pf-m-gutter">
299
- <div class="pf-v5-c-card">
300
- <div class="pf-v5-c-card__body">This is a card</div>
296
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
297
+ <div class="pf-v6-c-page__main-body">
298
+ <div class="pf-v6-l-gallery pf-m-gutter">
299
+ <div class="pf-v6-c-card">
300
+ <div class="pf-v6-c-card__body">This is a card</div>
301
301
  </div>
302
- <div class="pf-v5-c-card">
303
- <div class="pf-v5-c-card__body">This is a card</div>
302
+ <div class="pf-v6-c-card">
303
+ <div class="pf-v6-c-card__body">This is a card</div>
304
304
  </div>
305
- <div class="pf-v5-c-card">
306
- <div class="pf-v5-c-card__body">This is a card</div>
305
+ <div class="pf-v6-c-card">
306
+ <div class="pf-v6-c-card__body">This is a card</div>
307
307
  </div>
308
- <div class="pf-v5-c-card">
309
- <div class="pf-v5-c-card__body">This is a card</div>
308
+ <div class="pf-v6-c-card">
309
+ <div class="pf-v6-c-card__body">This is a card</div>
310
310
  </div>
311
- <div class="pf-v5-c-card">
312
- <div class="pf-v5-c-card__body">This is a card</div>
311
+ <div class="pf-v6-c-card">
312
+ <div class="pf-v6-c-card__body">This is a card</div>
313
313
  </div>
314
- <div class="pf-v5-c-card">
315
- <div class="pf-v5-c-card__body">This is a card</div>
314
+ <div class="pf-v6-c-card">
315
+ <div class="pf-v6-c-card__body">This is a card</div>
316
316
  </div>
317
- <div class="pf-v5-c-card">
318
- <div class="pf-v5-c-card__body">This is a card</div>
317
+ <div class="pf-v6-c-card">
318
+ <div class="pf-v6-c-card__body">This is a card</div>
319
319
  </div>
320
- <div class="pf-v5-c-card">
321
- <div class="pf-v5-c-card__body">This is a card</div>
320
+ <div class="pf-v6-c-card">
321
+ <div class="pf-v6-c-card__body">This is a card</div>
322
322
  </div>
323
- <div class="pf-v5-c-card">
324
- <div class="pf-v5-c-card__body">This is a card</div>
323
+ <div class="pf-v6-c-card">
324
+ <div class="pf-v6-c-card__body">This is a card</div>
325
325
  </div>
326
- <div class="pf-v5-c-card">
327
- <div class="pf-v5-c-card__body">This is a card</div>
326
+ <div class="pf-v6-c-card">
327
+ <div class="pf-v6-c-card__body">This is a card</div>
328
328
  </div>
329
- <div class="pf-v5-c-card">
330
- <div class="pf-v5-c-card__body">This is a card</div>
329
+ <div class="pf-v6-c-card">
330
+ <div class="pf-v6-c-card__body">This is a card</div>
331
331
  </div>
332
- <div class="pf-v5-c-card">
333
- <div class="pf-v5-c-card__body">This is a card</div>
332
+ <div class="pf-v6-c-card">
333
+ <div class="pf-v6-c-card__body">This is a card</div>
334
334
  </div>
335
- <div class="pf-v5-c-card">
336
- <div class="pf-v5-c-card__body">This is a card</div>
335
+ <div class="pf-v6-c-card">
336
+ <div class="pf-v6-c-card__body">This is a card</div>
337
337
  </div>
338
- <div class="pf-v5-c-card">
339
- <div class="pf-v5-c-card__body">This is a card</div>
338
+ <div class="pf-v6-c-card">
339
+ <div class="pf-v6-c-card__body">This is a card</div>
340
340
  </div>
341
- <div class="pf-v5-c-card">
342
- <div class="pf-v5-c-card__body">This is a card</div>
341
+ <div class="pf-v6-c-card">
342
+ <div class="pf-v6-c-card__body">This is a card</div>
343
343
  </div>
344
- <div class="pf-v5-c-card">
345
- <div class="pf-v5-c-card__body">This is a card</div>
344
+ <div class="pf-v6-c-card">
345
+ <div class="pf-v6-c-card__body">This is a card</div>
346
346
  </div>
347
- <div class="pf-v5-c-card">
348
- <div class="pf-v5-c-card__body">This is a card</div>
347
+ <div class="pf-v6-c-card">
348
+ <div class="pf-v6-c-card__body">This is a card</div>
349
349
  </div>
350
- <div class="pf-v5-c-card">
351
- <div class="pf-v5-c-card__body">This is a card</div>
350
+ <div class="pf-v6-c-card">
351
+ <div class="pf-v6-c-card__body">This is a card</div>
352
352
  </div>
353
- <div class="pf-v5-c-card">
354
- <div class="pf-v5-c-card__body">This is a card</div>
353
+ <div class="pf-v6-c-card">
354
+ <div class="pf-v6-c-card__body">This is a card</div>
355
355
  </div>
356
- <div class="pf-v5-c-card">
357
- <div class="pf-v5-c-card__body">This is a card</div>
356
+ <div class="pf-v6-c-card">
357
+ <div class="pf-v6-c-card__body">This is a card</div>
358
358
  </div>
359
- <div class="pf-v5-c-card">
360
- <div class="pf-v5-c-card__body">This is a card</div>
359
+ <div class="pf-v6-c-card">
360
+ <div class="pf-v6-c-card__body">This is a card</div>
361
361
  </div>
362
- <div class="pf-v5-c-card">
363
- <div class="pf-v5-c-card__body">This is a card</div>
362
+ <div class="pf-v6-c-card">
363
+ <div class="pf-v6-c-card__body">This is a card</div>
364
364
  </div>
365
- <div class="pf-v5-c-card">
366
- <div class="pf-v5-c-card__body">This is a card</div>
365
+ <div class="pf-v6-c-card">
366
+ <div class="pf-v6-c-card__body">This is a card</div>
367
367
  </div>
368
- <div class="pf-v5-c-card">
369
- <div class="pf-v5-c-card__body">This is a card</div>
368
+ <div class="pf-v6-c-card">
369
+ <div class="pf-v6-c-card__body">This is a card</div>
370
370
  </div>
371
- <div class="pf-v5-c-card">
372
- <div class="pf-v5-c-card__body">This is a card</div>
371
+ <div class="pf-v6-c-card">
372
+ <div class="pf-v6-c-card__body">This is a card</div>
373
373
  </div>
374
- <div class="pf-v5-c-card">
375
- <div class="pf-v5-c-card__body">This is a card</div>
374
+ <div class="pf-v6-c-card">
375
+ <div class="pf-v6-c-card__body">This is a card</div>
376
376
  </div>
377
- <div class="pf-v5-c-card">
378
- <div class="pf-v5-c-card__body">This is a card</div>
377
+ <div class="pf-v6-c-card">
378
+ <div class="pf-v6-c-card__body">This is a card</div>
379
379
  </div>
380
- <div class="pf-v5-c-card">
381
- <div class="pf-v5-c-card__body">This is a card</div>
380
+ <div class="pf-v6-c-card">
381
+ <div class="pf-v6-c-card__body">This is a card</div>
382
382
  </div>
383
- <div class="pf-v5-c-card">
384
- <div class="pf-v5-c-card__body">This is a card</div>
383
+ <div class="pf-v6-c-card">
384
+ <div class="pf-v6-c-card__body">This is a card</div>
385
385
  </div>
386
- <div class="pf-v5-c-card">
387
- <div class="pf-v5-c-card__body">This is a card</div>
386
+ <div class="pf-v6-c-card">
387
+ <div class="pf-v6-c-card__body">This is a card</div>
388
388
  </div>
389
- <div class="pf-v5-c-card">
390
- <div class="pf-v5-c-card__body">This is a card</div>
389
+ <div class="pf-v6-c-card">
390
+ <div class="pf-v6-c-card__body">This is a card</div>
391
391
  </div>
392
- <div class="pf-v5-c-card">
393
- <div class="pf-v5-c-card__body">This is a card</div>
392
+ <div class="pf-v6-c-card">
393
+ <div class="pf-v6-c-card__body">This is a card</div>
394
394
  </div>
395
- <div class="pf-v5-c-card">
396
- <div class="pf-v5-c-card__body">This is a card</div>
395
+ <div class="pf-v6-c-card">
396
+ <div class="pf-v6-c-card__body">This is a card</div>
397
397
  </div>
398
- <div class="pf-v5-c-card">
399
- <div class="pf-v5-c-card__body">This is a card</div>
398
+ <div class="pf-v6-c-card">
399
+ <div class="pf-v6-c-card__body">This is a card</div>
400
400
  </div>
401
- <div class="pf-v5-c-card">
402
- <div class="pf-v5-c-card__body">This is a card</div>
401
+ <div class="pf-v6-c-card">
402
+ <div class="pf-v6-c-card__body">This is a card</div>
403
403
  </div>
404
- <div class="pf-v5-c-card">
405
- <div class="pf-v5-c-card__body">This is a card</div>
404
+ <div class="pf-v6-c-card">
405
+ <div class="pf-v6-c-card__body">This is a card</div>
406
406
  </div>
407
- <div class="pf-v5-c-card">
408
- <div class="pf-v5-c-card__body">This is a card</div>
407
+ <div class="pf-v6-c-card">
408
+ <div class="pf-v6-c-card__body">This is a card</div>
409
409
  </div>
410
- <div class="pf-v5-c-card">
411
- <div class="pf-v5-c-card__body">This is a card</div>
410
+ <div class="pf-v6-c-card">
411
+ <div class="pf-v6-c-card__body">This is a card</div>
412
412
  </div>
413
- <div class="pf-v5-c-card">
414
- <div class="pf-v5-c-card__body">This is a card</div>
413
+ <div class="pf-v6-c-card">
414
+ <div class="pf-v6-c-card__body">This is a card</div>
415
415
  </div>
416
- <div class="pf-v5-c-card">
417
- <div class="pf-v5-c-card__body">This is a card</div>
416
+ <div class="pf-v6-c-card">
417
+ <div class="pf-v6-c-card__body">This is a card</div>
418
418
  </div>
419
- <div class="pf-v5-c-card">
420
- <div class="pf-v5-c-card__body">This is a card</div>
419
+ <div class="pf-v6-c-card">
420
+ <div class="pf-v6-c-card__body">This is a card</div>
421
421
  </div>
422
- <div class="pf-v5-c-card">
423
- <div class="pf-v5-c-card__body">This is a card</div>
422
+ <div class="pf-v6-c-card">
423
+ <div class="pf-v6-c-card__body">This is a card</div>
424
424
  </div>
425
- <div class="pf-v5-c-card">
426
- <div class="pf-v5-c-card__body">This is a card</div>
425
+ <div class="pf-v6-c-card">
426
+ <div class="pf-v6-c-card__body">This is a card</div>
427
427
  </div>
428
- <div class="pf-v5-c-card">
429
- <div class="pf-v5-c-card__body">This is a card</div>
428
+ <div class="pf-v6-c-card">
429
+ <div class="pf-v6-c-card__body">This is a card</div>
430
430
  </div>
431
- <div class="pf-v5-c-card">
432
- <div class="pf-v5-c-card__body">This is a card</div>
431
+ <div class="pf-v6-c-card">
432
+ <div class="pf-v6-c-card__body">This is a card</div>
433
433
  </div>
434
- <div class="pf-v5-c-card">
435
- <div class="pf-v5-c-card__body">This is a card</div>
434
+ <div class="pf-v6-c-card">
435
+ <div class="pf-v6-c-card__body">This is a card</div>
436
436
  </div>
437
- <div class="pf-v5-c-card">
438
- <div class="pf-v5-c-card__body">This is a card</div>
437
+ <div class="pf-v6-c-card">
438
+ <div class="pf-v6-c-card__body">This is a card</div>
439
439
  </div>
440
- <div class="pf-v5-c-card">
441
- <div class="pf-v5-c-card__body">This is a card</div>
440
+ <div class="pf-v6-c-card">
441
+ <div class="pf-v6-c-card__body">This is a card</div>
442
442
  </div>
443
- <div class="pf-v5-c-card">
444
- <div class="pf-v5-c-card__body">This is a card</div>
443
+ <div class="pf-v6-c-card">
444
+ <div class="pf-v6-c-card__body">This is a card</div>
445
445
  </div>
446
- <div class="pf-v5-c-card">
447
- <div class="pf-v5-c-card__body">This is a card</div>
446
+ <div class="pf-v6-c-card">
447
+ <div class="pf-v6-c-card__body">This is a card</div>
448
448
  </div>
449
449
  </div>
450
450
  </div>
@@ -458,44 +458,44 @@ wrapperTag: div
458
458
 
459
459
  ```html isFullscreen
460
460
  <div
461
- class="pf-v5-l-flex pf-m-column pf-m-nowrap pf-m-space-items-none"
461
+ class="pf-v6-l-flex pf-m-column pf-m-nowrap pf-m-space-items-none"
462
462
  style="height: 100%;"
463
463
  >
464
- <div class="pf-v5-c-banner pf-m-sticky">
464
+ <div class="pf-v6-c-banner pf-m-sticky">
465
465
  <div
466
- class="pf-v5-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
466
+ class="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
467
467
  style="height: 100%;"
468
468
  >
469
- <div class="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
469
+ <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
470
470
  <div
471
- class="pf-v5-u-display-none pf-v5-u-display-block-on-lg"
471
+ class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
472
472
  >This message is sticky to the top or bottom of the page.</div>
473
473
  <div
474
- class="pf-v5-u-display-none-on-lg"
474
+ class="pf-v6-u-display-none-on-lg"
475
475
  >Drop some text on mobile, truncate if needed.</div>
476
- <div class="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
476
+ <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
477
477
  </div>
478
478
  </div>
479
- <div class="pf-v5-l-flex__item pf-m-grow" style="min-height: 0;">
480
- <div class="pf-v5-c-page" id="banner-top-bottom-example">
481
- <div class="pf-v5-c-skip-to-content">
479
+ <div class="pf-v6-l-flex__item pf-m-grow" style="min-height: 0;">
480
+ <div class="pf-v6-c-page" id="banner-top-bottom-example">
481
+ <div class="pf-v6-c-skip-to-content">
482
482
  <a
483
- class="pf-v5-c-button pf-m-primary"
483
+ class="pf-v6-c-button pf-m-primary"
484
484
  href="#main-content-banner-top-bottom-example"
485
485
  >Skip to content</a>
486
486
  </div>
487
- <header class="pf-v5-c-masthead" id="banner-top-bottom-example-masthead">
488
- <span class="pf-v5-c-masthead__toggle">
487
+ <header class="pf-v6-c-masthead" id="banner-top-bottom-example-masthead">
488
+ <span class="pf-v6-c-masthead__toggle">
489
489
  <button
490
- class="pf-v5-c-button pf-m-plain"
490
+ class="pf-v6-c-button pf-m-plain"
491
491
  type="button"
492
492
  aria-label="Global navigation"
493
493
  >
494
494
  <i class="fas fa-bars" aria-hidden="true"></i>
495
495
  </button>
496
496
  </span>
497
- <div class="pf-v5-c-masthead__main">
498
- <a class="pf-v5-c-masthead__brand" href="#">
497
+ <div class="pf-v6-c-masthead__main">
498
+ <a class="pf-v6-c-masthead__brand" href="#">
499
499
  <svg height="40px" viewBox="0 0 679 158">
500
500
  <title>PF-HorizontalLogo-Color</title>
501
501
  <defs>
@@ -575,37 +575,37 @@ wrapperTag: div
575
575
  </svg>
576
576
  </a>
577
577
  </div>
578
- <div class="pf-v5-c-masthead__content">
578
+ <div class="pf-v6-c-masthead__content">
579
579
  <div
580
- class="pf-v5-c-toolbar pf-m-static"
580
+ class="pf-v6-c-toolbar pf-m-static"
581
581
  id="banner-top-bottom-example-masthead-toolbar"
582
582
  >
583
- <div class="pf-v5-c-toolbar__content">
584
- <div class="pf-v5-c-toolbar__content-section">
585
- <div class="pf-v5-c-toolbar__item">
583
+ <div class="pf-v6-c-toolbar__content">
584
+ <div class="pf-v6-c-toolbar__content-section">
585
+ <div class="pf-v6-c-toolbar__item">
586
586
  <button
587
- class="pf-v5-c-menu-toggle"
587
+ class="pf-v6-c-menu-toggle"
588
588
  type="button"
589
589
  aria-expanded="false"
590
590
  >
591
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
592
- <span class="pf-v5-c-menu-toggle__controls">
593
- <span class="pf-v5-c-menu-toggle__toggle-icon">
591
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
592
+ <span class="pf-v6-c-menu-toggle__controls">
593
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
594
594
  <i class="fas fa-caret-down" aria-hidden="true"></i>
595
595
  </span>
596
596
  </span>
597
597
  </button>
598
598
  </div>
599
599
 
600
- <div class="pf-v5-c-toolbar__item">
600
+ <div class="pf-v6-c-toolbar__item">
601
601
  <button
602
- class="pf-v5-c-menu-toggle"
602
+ class="pf-v6-c-menu-toggle"
603
603
  type="button"
604
604
  aria-expanded="false"
605
605
  >
606
- <span class="pf-v5-c-menu-toggle__text">Services</span>
607
- <span class="pf-v5-c-menu-toggle__controls">
608
- <span class="pf-v5-c-menu-toggle__toggle-icon">
606
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
607
+ <span class="pf-v6-c-menu-toggle__controls">
608
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
609
609
  <i class="fas fa-caret-down" aria-hidden="true"></i>
610
610
  </span>
611
611
  </span>
@@ -613,56 +613,56 @@ wrapperTag: div
613
613
  </div>
614
614
 
615
615
  <div
616
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
616
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
617
617
  >
618
618
  <div
619
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
619
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
620
620
  >
621
- <div class="pf-v5-c-toolbar__item">
621
+ <div class="pf-v6-c-toolbar__item">
622
622
  <button
623
- class="pf-v5-c-menu-toggle pf-m-plain"
623
+ class="pf-v6-c-menu-toggle pf-m-plain"
624
624
  type="button"
625
625
  aria-expanded="false"
626
626
  aria-label="Application launcher"
627
627
  >
628
- <span class="pf-v5-c-menu-toggle__icon">
628
+ <span class="pf-v6-c-menu-toggle__icon">
629
629
  <i class="fas fa-th" aria-hidden="true"></i>
630
630
  </span>
631
631
  </button>
632
632
  </div>
633
- <div class="pf-v5-c-toolbar__item">
633
+ <div class="pf-v6-c-toolbar__item">
634
634
  <button
635
- class="pf-v5-c-menu-toggle pf-m-plain"
635
+ class="pf-v6-c-menu-toggle pf-m-plain"
636
636
  type="button"
637
637
  aria-expanded="false"
638
638
  aria-label="Settings"
639
639
  >
640
- <span class="pf-v5-c-menu-toggle__icon">
640
+ <span class="pf-v6-c-menu-toggle__icon">
641
641
  <i class="fas fa-cog" aria-hidden="true"></i>
642
642
  </span>
643
643
  </button>
644
644
  </div>
645
- <div class="pf-v5-c-toolbar__item">
645
+ <div class="pf-v6-c-toolbar__item">
646
646
  <button
647
- class="pf-v5-c-menu-toggle pf-m-plain"
647
+ class="pf-v6-c-menu-toggle pf-m-plain"
648
648
  type="button"
649
649
  aria-expanded="false"
650
650
  aria-label="Help"
651
651
  >
652
- <span class="pf-v5-c-menu-toggle__icon">
652
+ <span class="pf-v6-c-menu-toggle__icon">
653
653
  <i class="fas fa-question-circle" aria-hidden="true"></i>
654
654
  </span>
655
655
  </button>
656
656
  </div>
657
657
  </div>
658
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
658
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
659
659
  <button
660
- class="pf-v5-c-menu-toggle pf-m-plain"
660
+ class="pf-v6-c-menu-toggle pf-m-plain"
661
661
  type="button"
662
662
  aria-expanded="false"
663
663
  aria-label="Actions"
664
664
  >
665
- <span class="pf-v5-c-menu-toggle__icon">
665
+ <span class="pf-v6-c-menu-toggle__icon">
666
666
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
667
667
  </span>
668
668
  </button>
@@ -673,71 +673,71 @@ wrapperTag: div
673
673
  </div>
674
674
  </div>
675
675
  </header>
676
- <div class="pf-v5-c-page__sidebar">
677
- <div class="pf-v5-c-page__sidebar-body">
676
+ <div class="pf-v6-c-page__sidebar">
677
+ <div class="pf-v6-c-page__sidebar-body">
678
678
  <nav
679
- class="pf-v5-c-nav"
679
+ class="pf-v6-c-nav"
680
680
  id="banner-top-bottom-example-primary-nav"
681
681
  aria-label="Global"
682
682
  >
683
- <ul class="pf-v5-c-nav__list" role="list">
684
- <li class="pf-v5-c-nav__item">
685
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
683
+ <ul class="pf-v6-c-nav__list" role="list">
684
+ <li class="pf-v6-c-nav__item">
685
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
686
686
  </li>
687
- <li class="pf-v5-c-nav__item">
687
+ <li class="pf-v6-c-nav__item">
688
688
  <a
689
689
  href="#"
690
- class="pf-v5-c-nav__link pf-m-current"
690
+ class="pf-v6-c-nav__link pf-m-current"
691
691
  aria-current="page"
692
692
  >Policy</a>
693
693
  </li>
694
- <li class="pf-v5-c-nav__item">
695
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
694
+ <li class="pf-v6-c-nav__item">
695
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
696
696
  </li>
697
- <li class="pf-v5-c-nav__item">
698
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
697
+ <li class="pf-v6-c-nav__item">
698
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
699
699
  </li>
700
- <li class="pf-v5-c-nav__item">
701
- <a href="#" class="pf-v5-c-nav__link">Server</a>
700
+ <li class="pf-v6-c-nav__item">
701
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
702
702
  </li>
703
703
  </ul>
704
704
  </nav>
705
705
  </div>
706
706
  </div>
707
707
  <main
708
- class="pf-v5-c-page__main"
708
+ class="pf-v6-c-page__main"
709
709
  tabindex="-1"
710
710
  id="main-content-banner-top-bottom-example"
711
711
  >
712
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
713
- <div class="pf-v5-c-page__main-body">
714
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
715
- <ol class="pf-v5-c-breadcrumb__list" role="list">
716
- <li class="pf-v5-c-breadcrumb__item">
717
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
712
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
713
+ <div class="pf-v6-c-page__main-body">
714
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
715
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
716
+ <li class="pf-v6-c-breadcrumb__item">
717
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
718
718
  </li>
719
- <li class="pf-v5-c-breadcrumb__item">
720
- <span class="pf-v5-c-breadcrumb__item-divider">
719
+ <li class="pf-v6-c-breadcrumb__item">
720
+ <span class="pf-v6-c-breadcrumb__item-divider">
721
721
  <i class="fas fa-angle-right" aria-hidden="true"></i>
722
722
  </span>
723
723
 
724
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
724
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
725
725
  </li>
726
- <li class="pf-v5-c-breadcrumb__item">
727
- <span class="pf-v5-c-breadcrumb__item-divider">
726
+ <li class="pf-v6-c-breadcrumb__item">
727
+ <span class="pf-v6-c-breadcrumb__item-divider">
728
728
  <i class="fas fa-angle-right" aria-hidden="true"></i>
729
729
  </span>
730
730
 
731
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
731
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
732
732
  </li>
733
- <li class="pf-v5-c-breadcrumb__item">
734
- <span class="pf-v5-c-breadcrumb__item-divider">
733
+ <li class="pf-v6-c-breadcrumb__item">
734
+ <span class="pf-v6-c-breadcrumb__item-divider">
735
735
  <i class="fas fa-angle-right" aria-hidden="true"></i>
736
736
  </span>
737
737
 
738
738
  <a
739
739
  href="#"
740
- class="pf-v5-c-breadcrumb__link pf-m-current"
740
+ class="pf-v6-c-breadcrumb__link pf-m-current"
741
741
  aria-current="page"
742
742
  >Section landing</a>
743
743
  </li>
@@ -745,166 +745,166 @@ wrapperTag: div
745
745
  </nav>
746
746
  </div>
747
747
  </section>
748
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
749
- <div class="pf-v5-c-page__main-body">
750
- <div class="pf-v5-c-content">
748
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
749
+ <div class="pf-v6-c-page__main-body">
750
+ <div class="pf-v6-c-content">
751
751
  <h1>Main title</h1>
752
752
  <p>This is a full page demo.</p>
753
753
  </div>
754
754
  </div>
755
755
  </section>
756
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
757
- <div class="pf-v5-c-page__main-body">
758
- <div class="pf-v5-l-gallery pf-m-gutter">
759
- <div class="pf-v5-c-card">
760
- <div class="pf-v5-c-card__body">This is a card</div>
756
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
757
+ <div class="pf-v6-c-page__main-body">
758
+ <div class="pf-v6-l-gallery pf-m-gutter">
759
+ <div class="pf-v6-c-card">
760
+ <div class="pf-v6-c-card__body">This is a card</div>
761
761
  </div>
762
- <div class="pf-v5-c-card">
763
- <div class="pf-v5-c-card__body">This is a card</div>
762
+ <div class="pf-v6-c-card">
763
+ <div class="pf-v6-c-card__body">This is a card</div>
764
764
  </div>
765
- <div class="pf-v5-c-card">
766
- <div class="pf-v5-c-card__body">This is a card</div>
765
+ <div class="pf-v6-c-card">
766
+ <div class="pf-v6-c-card__body">This is a card</div>
767
767
  </div>
768
- <div class="pf-v5-c-card">
769
- <div class="pf-v5-c-card__body">This is a card</div>
768
+ <div class="pf-v6-c-card">
769
+ <div class="pf-v6-c-card__body">This is a card</div>
770
770
  </div>
771
- <div class="pf-v5-c-card">
772
- <div class="pf-v5-c-card__body">This is a card</div>
771
+ <div class="pf-v6-c-card">
772
+ <div class="pf-v6-c-card__body">This is a card</div>
773
773
  </div>
774
- <div class="pf-v5-c-card">
775
- <div class="pf-v5-c-card__body">This is a card</div>
774
+ <div class="pf-v6-c-card">
775
+ <div class="pf-v6-c-card__body">This is a card</div>
776
776
  </div>
777
- <div class="pf-v5-c-card">
778
- <div class="pf-v5-c-card__body">This is a card</div>
777
+ <div class="pf-v6-c-card">
778
+ <div class="pf-v6-c-card__body">This is a card</div>
779
779
  </div>
780
- <div class="pf-v5-c-card">
781
- <div class="pf-v5-c-card__body">This is a card</div>
780
+ <div class="pf-v6-c-card">
781
+ <div class="pf-v6-c-card__body">This is a card</div>
782
782
  </div>
783
- <div class="pf-v5-c-card">
784
- <div class="pf-v5-c-card__body">This is a card</div>
783
+ <div class="pf-v6-c-card">
784
+ <div class="pf-v6-c-card__body">This is a card</div>
785
785
  </div>
786
- <div class="pf-v5-c-card">
787
- <div class="pf-v5-c-card__body">This is a card</div>
786
+ <div class="pf-v6-c-card">
787
+ <div class="pf-v6-c-card__body">This is a card</div>
788
788
  </div>
789
- <div class="pf-v5-c-card">
790
- <div class="pf-v5-c-card__body">This is a card</div>
789
+ <div class="pf-v6-c-card">
790
+ <div class="pf-v6-c-card__body">This is a card</div>
791
791
  </div>
792
- <div class="pf-v5-c-card">
793
- <div class="pf-v5-c-card__body">This is a card</div>
792
+ <div class="pf-v6-c-card">
793
+ <div class="pf-v6-c-card__body">This is a card</div>
794
794
  </div>
795
- <div class="pf-v5-c-card">
796
- <div class="pf-v5-c-card__body">This is a card</div>
795
+ <div class="pf-v6-c-card">
796
+ <div class="pf-v6-c-card__body">This is a card</div>
797
797
  </div>
798
- <div class="pf-v5-c-card">
799
- <div class="pf-v5-c-card__body">This is a card</div>
798
+ <div class="pf-v6-c-card">
799
+ <div class="pf-v6-c-card__body">This is a card</div>
800
800
  </div>
801
- <div class="pf-v5-c-card">
802
- <div class="pf-v5-c-card__body">This is a card</div>
801
+ <div class="pf-v6-c-card">
802
+ <div class="pf-v6-c-card__body">This is a card</div>
803
803
  </div>
804
- <div class="pf-v5-c-card">
805
- <div class="pf-v5-c-card__body">This is a card</div>
804
+ <div class="pf-v6-c-card">
805
+ <div class="pf-v6-c-card__body">This is a card</div>
806
806
  </div>
807
- <div class="pf-v5-c-card">
808
- <div class="pf-v5-c-card__body">This is a card</div>
807
+ <div class="pf-v6-c-card">
808
+ <div class="pf-v6-c-card__body">This is a card</div>
809
809
  </div>
810
- <div class="pf-v5-c-card">
811
- <div class="pf-v5-c-card__body">This is a card</div>
810
+ <div class="pf-v6-c-card">
811
+ <div class="pf-v6-c-card__body">This is a card</div>
812
812
  </div>
813
- <div class="pf-v5-c-card">
814
- <div class="pf-v5-c-card__body">This is a card</div>
813
+ <div class="pf-v6-c-card">
814
+ <div class="pf-v6-c-card__body">This is a card</div>
815
815
  </div>
816
- <div class="pf-v5-c-card">
817
- <div class="pf-v5-c-card__body">This is a card</div>
816
+ <div class="pf-v6-c-card">
817
+ <div class="pf-v6-c-card__body">This is a card</div>
818
818
  </div>
819
- <div class="pf-v5-c-card">
820
- <div class="pf-v5-c-card__body">This is a card</div>
819
+ <div class="pf-v6-c-card">
820
+ <div class="pf-v6-c-card__body">This is a card</div>
821
821
  </div>
822
- <div class="pf-v5-c-card">
823
- <div class="pf-v5-c-card__body">This is a card</div>
822
+ <div class="pf-v6-c-card">
823
+ <div class="pf-v6-c-card__body">This is a card</div>
824
824
  </div>
825
- <div class="pf-v5-c-card">
826
- <div class="pf-v5-c-card__body">This is a card</div>
825
+ <div class="pf-v6-c-card">
826
+ <div class="pf-v6-c-card__body">This is a card</div>
827
827
  </div>
828
- <div class="pf-v5-c-card">
829
- <div class="pf-v5-c-card__body">This is a card</div>
828
+ <div class="pf-v6-c-card">
829
+ <div class="pf-v6-c-card__body">This is a card</div>
830
830
  </div>
831
- <div class="pf-v5-c-card">
832
- <div class="pf-v5-c-card__body">This is a card</div>
831
+ <div class="pf-v6-c-card">
832
+ <div class="pf-v6-c-card__body">This is a card</div>
833
833
  </div>
834
- <div class="pf-v5-c-card">
835
- <div class="pf-v5-c-card__body">This is a card</div>
834
+ <div class="pf-v6-c-card">
835
+ <div class="pf-v6-c-card__body">This is a card</div>
836
836
  </div>
837
- <div class="pf-v5-c-card">
838
- <div class="pf-v5-c-card__body">This is a card</div>
837
+ <div class="pf-v6-c-card">
838
+ <div class="pf-v6-c-card__body">This is a card</div>
839
839
  </div>
840
- <div class="pf-v5-c-card">
841
- <div class="pf-v5-c-card__body">This is a card</div>
840
+ <div class="pf-v6-c-card">
841
+ <div class="pf-v6-c-card__body">This is a card</div>
842
842
  </div>
843
- <div class="pf-v5-c-card">
844
- <div class="pf-v5-c-card__body">This is a card</div>
843
+ <div class="pf-v6-c-card">
844
+ <div class="pf-v6-c-card__body">This is a card</div>
845
845
  </div>
846
- <div class="pf-v5-c-card">
847
- <div class="pf-v5-c-card__body">This is a card</div>
846
+ <div class="pf-v6-c-card">
847
+ <div class="pf-v6-c-card__body">This is a card</div>
848
848
  </div>
849
- <div class="pf-v5-c-card">
850
- <div class="pf-v5-c-card__body">This is a card</div>
849
+ <div class="pf-v6-c-card">
850
+ <div class="pf-v6-c-card__body">This is a card</div>
851
851
  </div>
852
- <div class="pf-v5-c-card">
853
- <div class="pf-v5-c-card__body">This is a card</div>
852
+ <div class="pf-v6-c-card">
853
+ <div class="pf-v6-c-card__body">This is a card</div>
854
854
  </div>
855
- <div class="pf-v5-c-card">
856
- <div class="pf-v5-c-card__body">This is a card</div>
855
+ <div class="pf-v6-c-card">
856
+ <div class="pf-v6-c-card__body">This is a card</div>
857
857
  </div>
858
- <div class="pf-v5-c-card">
859
- <div class="pf-v5-c-card__body">This is a card</div>
858
+ <div class="pf-v6-c-card">
859
+ <div class="pf-v6-c-card__body">This is a card</div>
860
860
  </div>
861
- <div class="pf-v5-c-card">
862
- <div class="pf-v5-c-card__body">This is a card</div>
861
+ <div class="pf-v6-c-card">
862
+ <div class="pf-v6-c-card__body">This is a card</div>
863
863
  </div>
864
- <div class="pf-v5-c-card">
865
- <div class="pf-v5-c-card__body">This is a card</div>
864
+ <div class="pf-v6-c-card">
865
+ <div class="pf-v6-c-card__body">This is a card</div>
866
866
  </div>
867
- <div class="pf-v5-c-card">
868
- <div class="pf-v5-c-card__body">This is a card</div>
867
+ <div class="pf-v6-c-card">
868
+ <div class="pf-v6-c-card__body">This is a card</div>
869
869
  </div>
870
- <div class="pf-v5-c-card">
871
- <div class="pf-v5-c-card__body">This is a card</div>
870
+ <div class="pf-v6-c-card">
871
+ <div class="pf-v6-c-card__body">This is a card</div>
872
872
  </div>
873
- <div class="pf-v5-c-card">
874
- <div class="pf-v5-c-card__body">This is a card</div>
873
+ <div class="pf-v6-c-card">
874
+ <div class="pf-v6-c-card__body">This is a card</div>
875
875
  </div>
876
- <div class="pf-v5-c-card">
877
- <div class="pf-v5-c-card__body">This is a card</div>
876
+ <div class="pf-v6-c-card">
877
+ <div class="pf-v6-c-card__body">This is a card</div>
878
878
  </div>
879
- <div class="pf-v5-c-card">
880
- <div class="pf-v5-c-card__body">This is a card</div>
879
+ <div class="pf-v6-c-card">
880
+ <div class="pf-v6-c-card__body">This is a card</div>
881
881
  </div>
882
- <div class="pf-v5-c-card">
883
- <div class="pf-v5-c-card__body">This is a card</div>
882
+ <div class="pf-v6-c-card">
883
+ <div class="pf-v6-c-card__body">This is a card</div>
884
884
  </div>
885
- <div class="pf-v5-c-card">
886
- <div class="pf-v5-c-card__body">This is a card</div>
885
+ <div class="pf-v6-c-card">
886
+ <div class="pf-v6-c-card__body">This is a card</div>
887
887
  </div>
888
- <div class="pf-v5-c-card">
889
- <div class="pf-v5-c-card__body">This is a card</div>
888
+ <div class="pf-v6-c-card">
889
+ <div class="pf-v6-c-card__body">This is a card</div>
890
890
  </div>
891
- <div class="pf-v5-c-card">
892
- <div class="pf-v5-c-card__body">This is a card</div>
891
+ <div class="pf-v6-c-card">
892
+ <div class="pf-v6-c-card__body">This is a card</div>
893
893
  </div>
894
- <div class="pf-v5-c-card">
895
- <div class="pf-v5-c-card__body">This is a card</div>
894
+ <div class="pf-v6-c-card">
895
+ <div class="pf-v6-c-card__body">This is a card</div>
896
896
  </div>
897
- <div class="pf-v5-c-card">
898
- <div class="pf-v5-c-card__body">This is a card</div>
897
+ <div class="pf-v6-c-card">
898
+ <div class="pf-v6-c-card__body">This is a card</div>
899
899
  </div>
900
- <div class="pf-v5-c-card">
901
- <div class="pf-v5-c-card__body">This is a card</div>
900
+ <div class="pf-v6-c-card">
901
+ <div class="pf-v6-c-card__body">This is a card</div>
902
902
  </div>
903
- <div class="pf-v5-c-card">
904
- <div class="pf-v5-c-card__body">This is a card</div>
903
+ <div class="pf-v6-c-card">
904
+ <div class="pf-v6-c-card__body">This is a card</div>
905
905
  </div>
906
- <div class="pf-v5-c-card">
907
- <div class="pf-v5-c-card__body">This is a card</div>
906
+ <div class="pf-v6-c-card">
907
+ <div class="pf-v6-c-card__body">This is a card</div>
908
908
  </div>
909
909
  </div>
910
910
  </div>
@@ -912,19 +912,19 @@ wrapperTag: div
912
912
  </main>
913
913
  </div>
914
914
  </div>
915
- <div class="pf-v5-c-banner pf-m-sticky">
915
+ <div class="pf-v6-c-banner pf-m-sticky">
916
916
  <div
917
- class="pf-v5-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
917
+ class="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
918
918
  style="height: 100%;"
919
919
  >
920
- <div class="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
920
+ <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
921
921
  <div
922
- class="pf-v5-u-display-none pf-v5-u-display-block-on-lg"
922
+ class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
923
923
  >This message is sticky to the top or bottom of the page.</div>
924
924
  <div
925
- class="pf-v5-u-display-none-on-lg"
925
+ class="pf-v6-u-display-none-on-lg"
926
926
  >Drop some text on mobile, truncate if needed.</div>
927
- <div class="pf-v5-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
927
+ <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
928
928
  </div>
929
929
  </div>
930
930
  </div>