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

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 +1 -1
  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/JumpLinks/examples/JumpLinks.md CHANGED
@@ -6,28 +6,28 @@ section: components
6
6
  ### Vertical jump links collapsed on mobile
7
7
 
8
8
  ```html isFullscreen
9
- <div class="pf-v5-c-page" id="jump-links-collapsed-mobile-example">
10
- <div class="pf-v5-c-skip-to-content">
9
+ <div class="pf-v6-c-page" id="jump-links-collapsed-mobile-example">
10
+ <div class="pf-v6-c-skip-to-content">
11
11
  <a
12
- class="pf-v5-c-button pf-m-primary"
12
+ class="pf-v6-c-button pf-m-primary"
13
13
  href="#main-content-jump-links-collapsed-mobile-example"
14
14
  >Skip to content</a>
15
15
  </div>
16
16
  <header
17
- class="pf-v5-c-masthead"
17
+ class="pf-v6-c-masthead"
18
18
  id="jump-links-collapsed-mobile-example-masthead"
19
19
  >
20
- <span class="pf-v5-c-masthead__toggle">
20
+ <span class="pf-v6-c-masthead__toggle">
21
21
  <button
22
- class="pf-v5-c-button pf-m-plain"
22
+ class="pf-v6-c-button pf-m-plain"
23
23
  type="button"
24
24
  aria-label="Global navigation"
25
25
  >
26
26
  <i class="fas fa-bars" aria-hidden="true"></i>
27
27
  </button>
28
28
  </span>
29
- <div class="pf-v5-c-masthead__main">
30
- <a class="pf-v5-c-masthead__brand" href="#">
29
+ <div class="pf-v6-c-masthead__main">
30
+ <a class="pf-v6-c-masthead__brand" href="#">
31
31
  <svg height="40px" viewBox="0 0 679 158">
32
32
  <title>PF-HorizontalLogo-Color</title>
33
33
  <defs>
@@ -100,37 +100,37 @@ section: components
100
100
  </svg>
101
101
  </a>
102
102
  </div>
103
- <div class="pf-v5-c-masthead__content">
103
+ <div class="pf-v6-c-masthead__content">
104
104
  <div
105
- class="pf-v5-c-toolbar pf-m-static"
105
+ class="pf-v6-c-toolbar pf-m-static"
106
106
  id="jump-links-collapsed-mobile-example-masthead-toolbar"
107
107
  >
108
- <div class="pf-v5-c-toolbar__content">
109
- <div class="pf-v5-c-toolbar__content-section">
110
- <div class="pf-v5-c-toolbar__item">
108
+ <div class="pf-v6-c-toolbar__content">
109
+ <div class="pf-v6-c-toolbar__content-section">
110
+ <div class="pf-v6-c-toolbar__item">
111
111
  <button
112
- class="pf-v5-c-menu-toggle"
112
+ class="pf-v6-c-menu-toggle"
113
113
  type="button"
114
114
  aria-expanded="false"
115
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">
116
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
117
+ <span class="pf-v6-c-menu-toggle__controls">
118
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
119
119
  <i class="fas fa-caret-down" aria-hidden="true"></i>
120
120
  </span>
121
121
  </span>
122
122
  </button>
123
123
  </div>
124
124
 
125
- <div class="pf-v5-c-toolbar__item">
125
+ <div class="pf-v6-c-toolbar__item">
126
126
  <button
127
- class="pf-v5-c-menu-toggle"
127
+ class="pf-v6-c-menu-toggle"
128
128
  type="button"
129
129
  aria-expanded="false"
130
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">
131
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
132
+ <span class="pf-v6-c-menu-toggle__controls">
133
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
134
134
  <i class="fas fa-caret-down" aria-hidden="true"></i>
135
135
  </span>
136
136
  </span>
@@ -138,56 +138,56 @@ section: components
138
138
  </div>
139
139
 
140
140
  <div
141
- 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"
141
+ 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"
142
142
  >
143
143
  <div
144
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
144
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
145
145
  >
146
- <div class="pf-v5-c-toolbar__item">
146
+ <div class="pf-v6-c-toolbar__item">
147
147
  <button
148
- class="pf-v5-c-menu-toggle pf-m-plain"
148
+ class="pf-v6-c-menu-toggle pf-m-plain"
149
149
  type="button"
150
150
  aria-expanded="false"
151
151
  aria-label="Application launcher"
152
152
  >
153
- <span class="pf-v5-c-menu-toggle__icon">
153
+ <span class="pf-v6-c-menu-toggle__icon">
154
154
  <i class="fas fa-th" aria-hidden="true"></i>
155
155
  </span>
156
156
  </button>
157
157
  </div>
158
- <div class="pf-v5-c-toolbar__item">
158
+ <div class="pf-v6-c-toolbar__item">
159
159
  <button
160
- class="pf-v5-c-menu-toggle pf-m-plain"
160
+ class="pf-v6-c-menu-toggle pf-m-plain"
161
161
  type="button"
162
162
  aria-expanded="false"
163
163
  aria-label="Settings"
164
164
  >
165
- <span class="pf-v5-c-menu-toggle__icon">
165
+ <span class="pf-v6-c-menu-toggle__icon">
166
166
  <i class="fas fa-cog" aria-hidden="true"></i>
167
167
  </span>
168
168
  </button>
169
169
  </div>
170
- <div class="pf-v5-c-toolbar__item">
170
+ <div class="pf-v6-c-toolbar__item">
171
171
  <button
172
- class="pf-v5-c-menu-toggle pf-m-plain"
172
+ class="pf-v6-c-menu-toggle pf-m-plain"
173
173
  type="button"
174
174
  aria-expanded="false"
175
175
  aria-label="Help"
176
176
  >
177
- <span class="pf-v5-c-menu-toggle__icon">
177
+ <span class="pf-v6-c-menu-toggle__icon">
178
178
  <i class="fas fa-question-circle" aria-hidden="true"></i>
179
179
  </span>
180
180
  </button>
181
181
  </div>
182
182
  </div>
183
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
183
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
184
184
  <button
185
- class="pf-v5-c-menu-toggle pf-m-plain"
185
+ class="pf-v6-c-menu-toggle pf-m-plain"
186
186
  type="button"
187
187
  aria-expanded="false"
188
188
  aria-label="Actions"
189
189
  >
190
- <span class="pf-v5-c-menu-toggle__icon">
190
+ <span class="pf-v6-c-menu-toggle__icon">
191
191
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
192
192
  </span>
193
193
  </button>
@@ -198,71 +198,71 @@ section: components
198
198
  </div>
199
199
  </div>
200
200
  </header>
201
- <div class="pf-v5-c-page__sidebar">
202
- <div class="pf-v5-c-page__sidebar-body">
201
+ <div class="pf-v6-c-page__sidebar">
202
+ <div class="pf-v6-c-page__sidebar-body">
203
203
  <nav
204
- class="pf-v5-c-nav"
204
+ class="pf-v6-c-nav"
205
205
  id="jump-links-collapsed-mobile-example-primary-nav"
206
206
  aria-label="Global"
207
207
  >
208
- <ul class="pf-v5-c-nav__list" role="list">
209
- <li class="pf-v5-c-nav__item">
210
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
208
+ <ul class="pf-v6-c-nav__list" role="list">
209
+ <li class="pf-v6-c-nav__item">
210
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
211
211
  </li>
212
- <li class="pf-v5-c-nav__item">
212
+ <li class="pf-v6-c-nav__item">
213
213
  <a
214
214
  href="#"
215
- class="pf-v5-c-nav__link pf-m-current"
215
+ class="pf-v6-c-nav__link pf-m-current"
216
216
  aria-current="page"
217
217
  >Policy</a>
218
218
  </li>
219
- <li class="pf-v5-c-nav__item">
220
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
219
+ <li class="pf-v6-c-nav__item">
220
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
221
221
  </li>
222
- <li class="pf-v5-c-nav__item">
223
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
222
+ <li class="pf-v6-c-nav__item">
223
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
224
224
  </li>
225
- <li class="pf-v5-c-nav__item">
226
- <a href="#" class="pf-v5-c-nav__link">Server</a>
225
+ <li class="pf-v6-c-nav__item">
226
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
227
227
  </li>
228
228
  </ul>
229
229
  </nav>
230
230
  </div>
231
231
  </div>
232
232
  <main
233
- class="pf-v5-c-page__main"
233
+ class="pf-v6-c-page__main"
234
234
  tabindex="-1"
235
235
  id="main-content-jump-links-collapsed-mobile-example"
236
236
  >
237
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
238
- <div class="pf-v5-c-page__main-body">
239
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
240
- <ol class="pf-v5-c-breadcrumb__list" role="list">
241
- <li class="pf-v5-c-breadcrumb__item">
242
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
237
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
238
+ <div class="pf-v6-c-page__main-body">
239
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
240
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
241
+ <li class="pf-v6-c-breadcrumb__item">
242
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
243
243
  </li>
244
- <li class="pf-v5-c-breadcrumb__item">
245
- <span class="pf-v5-c-breadcrumb__item-divider">
244
+ <li class="pf-v6-c-breadcrumb__item">
245
+ <span class="pf-v6-c-breadcrumb__item-divider">
246
246
  <i class="fas fa-angle-right" aria-hidden="true"></i>
247
247
  </span>
248
248
 
249
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
249
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
250
250
  </li>
251
- <li class="pf-v5-c-breadcrumb__item">
252
- <span class="pf-v5-c-breadcrumb__item-divider">
251
+ <li class="pf-v6-c-breadcrumb__item">
252
+ <span class="pf-v6-c-breadcrumb__item-divider">
253
253
  <i class="fas fa-angle-right" aria-hidden="true"></i>
254
254
  </span>
255
255
 
256
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
256
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
257
  </li>
258
- <li class="pf-v5-c-breadcrumb__item">
259
- <span class="pf-v5-c-breadcrumb__item-divider">
258
+ <li class="pf-v6-c-breadcrumb__item">
259
+ <span class="pf-v6-c-breadcrumb__item-divider">
260
260
  <i class="fas fa-angle-right" aria-hidden="true"></i>
261
261
  </span>
262
262
 
263
263
  <a
264
264
  href="#"
265
- class="pf-v5-c-breadcrumb__link pf-m-current"
265
+ class="pf-v6-c-breadcrumb__link pf-m-current"
266
266
  aria-current="page"
267
267
  >Section landing</a>
268
268
  </li>
@@ -270,97 +270,97 @@ section: components
270
270
  </nav>
271
271
  </div>
272
272
  </section>
273
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
274
- <div class="pf-v5-c-page__main-body">
275
- <div class="pf-v5-c-content">
273
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
274
+ <div class="pf-v6-c-page__main-body">
275
+ <div class="pf-v6-c-content">
276
276
  <h1>Main title</h1>
277
277
  <p>This is a full page demo.</p>
278
278
  </div>
279
279
  </div>
280
280
  </section>
281
- <section class="pf-v5-c-page__main-section pf-m-no-padding">
282
- <div class="pf-v5-c-sidebar">
283
- <div class="pf-v5-c-sidebar__main">
284
- <div class="pf-v5-c-sidebar__panel pf-m-sticky pf-m-gutter">
285
- <section class="pf-v5-c-page__main-section">
281
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
282
+ <div class="pf-v6-c-sidebar">
283
+ <div class="pf-v6-c-sidebar__main">
284
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
285
+ <section class="pf-v6-c-page__main-section">
286
286
  <nav
287
- class="pf-v5-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
287
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
288
288
  >
289
- <div class="pf-v5-c-jump-links__header">
290
- <div class="pf-v5-c-jump-links__toggle">
289
+ <div class="pf-v6-c-jump-links__header">
290
+ <div class="pf-v6-c-jump-links__toggle">
291
291
  <button
292
- class="pf-v5-c-button pf-m-plain"
292
+ class="pf-v6-c-button pf-m-plain"
293
293
  type="button"
294
294
  aria-label="Toggle jump links"
295
295
  aria-expanded="false"
296
296
  >
297
- <span class="pf-v5-c-jump-links__toggle-icon">
297
+ <span class="pf-v6-c-jump-links__toggle-icon">
298
298
  <i class="fas fa-angle-right" aria-hidden="true"></i>
299
299
  </span>
300
300
  <span
301
- class="pf-v5-c-jump-links__toggle-text"
301
+ class="pf-v6-c-jump-links__toggle-text"
302
302
  >Jump to section</span>
303
303
  </button>
304
304
  </div>
305
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
305
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
306
306
  </div>
307
- <ul class="pf-v5-c-jump-links__list" role="list">
308
- <li class="pf-v5-c-jump-links__item pf-m-current">
309
- <span class="pf-v5-c-jump-links__link">
307
+ <ul class="pf-v6-c-jump-links__list" role="list">
308
+ <li class="pf-v6-c-jump-links__item pf-m-current">
309
+ <span class="pf-v6-c-jump-links__link">
310
310
  <a
311
- class="pf-v5-c-button pf-m-link"
311
+ class="pf-v6-c-button pf-m-link"
312
312
  href="#jump-links-collapsed-mobile-example-jump-links-first"
313
313
  >
314
314
  <span
315
- class="pf-v5-c-jump-links__link-text"
315
+ class="pf-v6-c-jump-links__link-text"
316
316
  >First section</span>
317
317
  </a>
318
318
  </span>
319
319
  </li>
320
- <li class="pf-v5-c-jump-links__item">
321
- <span class="pf-v5-c-jump-links__link">
320
+ <li class="pf-v6-c-jump-links__item">
321
+ <span class="pf-v6-c-jump-links__link">
322
322
  <a
323
- class="pf-v5-c-button pf-m-link"
323
+ class="pf-v6-c-button pf-m-link"
324
324
  href="#jump-links-collapsed-mobile-example-jump-links-second"
325
325
  >
326
326
  <span
327
- class="pf-v5-c-jump-links__link-text"
327
+ class="pf-v6-c-jump-links__link-text"
328
328
  >Second section</span>
329
329
  </a>
330
330
  </span>
331
331
  </li>
332
- <li class="pf-v5-c-jump-links__item">
333
- <span class="pf-v5-c-jump-links__link">
332
+ <li class="pf-v6-c-jump-links__item">
333
+ <span class="pf-v6-c-jump-links__link">
334
334
  <a
335
- class="pf-v5-c-button pf-m-link"
335
+ class="pf-v6-c-button pf-m-link"
336
336
  href="#jump-links-collapsed-mobile-example-jump-links-third"
337
337
  >
338
338
  <span
339
- class="pf-v5-c-jump-links__link-text"
339
+ class="pf-v6-c-jump-links__link-text"
340
340
  >Third section</span>
341
341
  </a>
342
342
  </span>
343
343
  </li>
344
- <li class="pf-v5-c-jump-links__item">
345
- <span class="pf-v5-c-jump-links__link">
344
+ <li class="pf-v6-c-jump-links__item">
345
+ <span class="pf-v6-c-jump-links__link">
346
346
  <a
347
- class="pf-v5-c-button pf-m-link"
347
+ class="pf-v6-c-button pf-m-link"
348
348
  href="#jump-links-collapsed-mobile-example-jump-links-fourth"
349
349
  >
350
350
  <span
351
- class="pf-v5-c-jump-links__link-text"
351
+ class="pf-v6-c-jump-links__link-text"
352
352
  >Fourth section</span>
353
353
  </a>
354
354
  </span>
355
355
  </li>
356
- <li class="pf-v5-c-jump-links__item">
357
- <span class="pf-v5-c-jump-links__link">
356
+ <li class="pf-v6-c-jump-links__item">
357
+ <span class="pf-v6-c-jump-links__link">
358
358
  <a
359
- class="pf-v5-c-button pf-m-link"
359
+ class="pf-v6-c-button pf-m-link"
360
360
  href="#jump-links-collapsed-mobile-example-jump-links-fifth"
361
361
  >
362
362
  <span
363
- class="pf-v5-c-jump-links__link-text"
363
+ class="pf-v6-c-jump-links__link-text"
364
364
  >Fifth section</span>
365
365
  </a>
366
366
  </span>
@@ -369,9 +369,9 @@ section: components
369
369
  </nav>
370
370
  </section>
371
371
  </div>
372
- <div class="pf-v5-c-sidebar__content">
373
- <section class="pf-v5-c-page__main-section">
374
- <div class="pf-v5-c-content">
372
+ <div class="pf-v6-c-sidebar__content">
373
+ <section class="pf-v6-c-page__main-section">
374
+ <div class="pf-v6-c-content">
375
375
  <p>
376
376
  <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
377
377
  </p>
@@ -414,28 +414,28 @@ section: components
414
414
  ### Vertical jump links expanded on mobile
415
415
 
416
416
  ```html isFullscreen
417
- <div class="pf-v5-c-page" id="jump-links-vertical-expanded-mobile-example">
418
- <div class="pf-v5-c-skip-to-content">
417
+ <div class="pf-v6-c-page" id="jump-links-vertical-expanded-mobile-example">
418
+ <div class="pf-v6-c-skip-to-content">
419
419
  <a
420
- class="pf-v5-c-button pf-m-primary"
420
+ class="pf-v6-c-button pf-m-primary"
421
421
  href="#main-content-jump-links-vertical-expanded-mobile-example"
422
422
  >Skip to content</a>
423
423
  </div>
424
424
  <header
425
- class="pf-v5-c-masthead"
425
+ class="pf-v6-c-masthead"
426
426
  id="jump-links-vertical-expanded-mobile-example-masthead"
427
427
  >
428
- <span class="pf-v5-c-masthead__toggle">
428
+ <span class="pf-v6-c-masthead__toggle">
429
429
  <button
430
- class="pf-v5-c-button pf-m-plain"
430
+ class="pf-v6-c-button pf-m-plain"
431
431
  type="button"
432
432
  aria-label="Global navigation"
433
433
  >
434
434
  <i class="fas fa-bars" aria-hidden="true"></i>
435
435
  </button>
436
436
  </span>
437
- <div class="pf-v5-c-masthead__main">
438
- <a class="pf-v5-c-masthead__brand" href="#">
437
+ <div class="pf-v6-c-masthead__main">
438
+ <a class="pf-v6-c-masthead__brand" href="#">
439
439
  <svg height="40px" viewBox="0 0 679 158">
440
440
  <title>PF-HorizontalLogo-Color</title>
441
441
  <defs>
@@ -508,37 +508,37 @@ section: components
508
508
  </svg>
509
509
  </a>
510
510
  </div>
511
- <div class="pf-v5-c-masthead__content">
511
+ <div class="pf-v6-c-masthead__content">
512
512
  <div
513
- class="pf-v5-c-toolbar pf-m-static"
513
+ class="pf-v6-c-toolbar pf-m-static"
514
514
  id="jump-links-vertical-expanded-mobile-example-masthead-toolbar"
515
515
  >
516
- <div class="pf-v5-c-toolbar__content">
517
- <div class="pf-v5-c-toolbar__content-section">
518
- <div class="pf-v5-c-toolbar__item">
516
+ <div class="pf-v6-c-toolbar__content">
517
+ <div class="pf-v6-c-toolbar__content-section">
518
+ <div class="pf-v6-c-toolbar__item">
519
519
  <button
520
- class="pf-v5-c-menu-toggle"
520
+ class="pf-v6-c-menu-toggle"
521
521
  type="button"
522
522
  aria-expanded="false"
523
523
  >
524
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
525
- <span class="pf-v5-c-menu-toggle__controls">
526
- <span class="pf-v5-c-menu-toggle__toggle-icon">
524
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
525
+ <span class="pf-v6-c-menu-toggle__controls">
526
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
527
527
  <i class="fas fa-caret-down" aria-hidden="true"></i>
528
528
  </span>
529
529
  </span>
530
530
  </button>
531
531
  </div>
532
532
 
533
- <div class="pf-v5-c-toolbar__item">
533
+ <div class="pf-v6-c-toolbar__item">
534
534
  <button
535
- class="pf-v5-c-menu-toggle"
535
+ class="pf-v6-c-menu-toggle"
536
536
  type="button"
537
537
  aria-expanded="false"
538
538
  >
539
- <span class="pf-v5-c-menu-toggle__text">Services</span>
540
- <span class="pf-v5-c-menu-toggle__controls">
541
- <span class="pf-v5-c-menu-toggle__toggle-icon">
539
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
540
+ <span class="pf-v6-c-menu-toggle__controls">
541
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
542
542
  <i class="fas fa-caret-down" aria-hidden="true"></i>
543
543
  </span>
544
544
  </span>
@@ -546,56 +546,56 @@ section: components
546
546
  </div>
547
547
 
548
548
  <div
549
- 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"
549
+ 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"
550
550
  >
551
551
  <div
552
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
552
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
553
553
  >
554
- <div class="pf-v5-c-toolbar__item">
554
+ <div class="pf-v6-c-toolbar__item">
555
555
  <button
556
- class="pf-v5-c-menu-toggle pf-m-plain"
556
+ class="pf-v6-c-menu-toggle pf-m-plain"
557
557
  type="button"
558
558
  aria-expanded="false"
559
559
  aria-label="Application launcher"
560
560
  >
561
- <span class="pf-v5-c-menu-toggle__icon">
561
+ <span class="pf-v6-c-menu-toggle__icon">
562
562
  <i class="fas fa-th" aria-hidden="true"></i>
563
563
  </span>
564
564
  </button>
565
565
  </div>
566
- <div class="pf-v5-c-toolbar__item">
566
+ <div class="pf-v6-c-toolbar__item">
567
567
  <button
568
- class="pf-v5-c-menu-toggle pf-m-plain"
568
+ class="pf-v6-c-menu-toggle pf-m-plain"
569
569
  type="button"
570
570
  aria-expanded="false"
571
571
  aria-label="Settings"
572
572
  >
573
- <span class="pf-v5-c-menu-toggle__icon">
573
+ <span class="pf-v6-c-menu-toggle__icon">
574
574
  <i class="fas fa-cog" aria-hidden="true"></i>
575
575
  </span>
576
576
  </button>
577
577
  </div>
578
- <div class="pf-v5-c-toolbar__item">
578
+ <div class="pf-v6-c-toolbar__item">
579
579
  <button
580
- class="pf-v5-c-menu-toggle pf-m-plain"
580
+ class="pf-v6-c-menu-toggle pf-m-plain"
581
581
  type="button"
582
582
  aria-expanded="false"
583
583
  aria-label="Help"
584
584
  >
585
- <span class="pf-v5-c-menu-toggle__icon">
585
+ <span class="pf-v6-c-menu-toggle__icon">
586
586
  <i class="fas fa-question-circle" aria-hidden="true"></i>
587
587
  </span>
588
588
  </button>
589
589
  </div>
590
590
  </div>
591
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
591
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
592
592
  <button
593
- class="pf-v5-c-menu-toggle pf-m-plain"
593
+ class="pf-v6-c-menu-toggle pf-m-plain"
594
594
  type="button"
595
595
  aria-expanded="false"
596
596
  aria-label="Actions"
597
597
  >
598
- <span class="pf-v5-c-menu-toggle__icon">
598
+ <span class="pf-v6-c-menu-toggle__icon">
599
599
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
600
600
  </span>
601
601
  </button>
@@ -606,71 +606,71 @@ section: components
606
606
  </div>
607
607
  </div>
608
608
  </header>
609
- <div class="pf-v5-c-page__sidebar">
610
- <div class="pf-v5-c-page__sidebar-body">
609
+ <div class="pf-v6-c-page__sidebar">
610
+ <div class="pf-v6-c-page__sidebar-body">
611
611
  <nav
612
- class="pf-v5-c-nav"
612
+ class="pf-v6-c-nav"
613
613
  id="jump-links-vertical-expanded-mobile-example-primary-nav"
614
614
  aria-label="Global"
615
615
  >
616
- <ul class="pf-v5-c-nav__list" role="list">
617
- <li class="pf-v5-c-nav__item">
618
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
616
+ <ul class="pf-v6-c-nav__list" role="list">
617
+ <li class="pf-v6-c-nav__item">
618
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
619
619
  </li>
620
- <li class="pf-v5-c-nav__item">
620
+ <li class="pf-v6-c-nav__item">
621
621
  <a
622
622
  href="#"
623
- class="pf-v5-c-nav__link pf-m-current"
623
+ class="pf-v6-c-nav__link pf-m-current"
624
624
  aria-current="page"
625
625
  >Policy</a>
626
626
  </li>
627
- <li class="pf-v5-c-nav__item">
628
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
627
+ <li class="pf-v6-c-nav__item">
628
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
629
629
  </li>
630
- <li class="pf-v5-c-nav__item">
631
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
630
+ <li class="pf-v6-c-nav__item">
631
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
632
632
  </li>
633
- <li class="pf-v5-c-nav__item">
634
- <a href="#" class="pf-v5-c-nav__link">Server</a>
633
+ <li class="pf-v6-c-nav__item">
634
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
635
635
  </li>
636
636
  </ul>
637
637
  </nav>
638
638
  </div>
639
639
  </div>
640
640
  <main
641
- class="pf-v5-c-page__main"
641
+ class="pf-v6-c-page__main"
642
642
  tabindex="-1"
643
643
  id="main-content-jump-links-vertical-expanded-mobile-example"
644
644
  >
645
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
646
- <div class="pf-v5-c-page__main-body">
647
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
648
- <ol class="pf-v5-c-breadcrumb__list" role="list">
649
- <li class="pf-v5-c-breadcrumb__item">
650
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
645
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
646
+ <div class="pf-v6-c-page__main-body">
647
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
648
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
649
+ <li class="pf-v6-c-breadcrumb__item">
650
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
651
651
  </li>
652
- <li class="pf-v5-c-breadcrumb__item">
653
- <span class="pf-v5-c-breadcrumb__item-divider">
652
+ <li class="pf-v6-c-breadcrumb__item">
653
+ <span class="pf-v6-c-breadcrumb__item-divider">
654
654
  <i class="fas fa-angle-right" aria-hidden="true"></i>
655
655
  </span>
656
656
 
657
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
657
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
658
658
  </li>
659
- <li class="pf-v5-c-breadcrumb__item">
660
- <span class="pf-v5-c-breadcrumb__item-divider">
659
+ <li class="pf-v6-c-breadcrumb__item">
660
+ <span class="pf-v6-c-breadcrumb__item-divider">
661
661
  <i class="fas fa-angle-right" aria-hidden="true"></i>
662
662
  </span>
663
663
 
664
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
664
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
665
665
  </li>
666
- <li class="pf-v5-c-breadcrumb__item">
667
- <span class="pf-v5-c-breadcrumb__item-divider">
666
+ <li class="pf-v6-c-breadcrumb__item">
667
+ <span class="pf-v6-c-breadcrumb__item-divider">
668
668
  <i class="fas fa-angle-right" aria-hidden="true"></i>
669
669
  </span>
670
670
 
671
671
  <a
672
672
  href="#"
673
- class="pf-v5-c-breadcrumb__link pf-m-current"
673
+ class="pf-v6-c-breadcrumb__link pf-m-current"
674
674
  aria-current="page"
675
675
  >Section landing</a>
676
676
  </li>
@@ -678,97 +678,97 @@ section: components
678
678
  </nav>
679
679
  </div>
680
680
  </section>
681
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
682
- <div class="pf-v5-c-page__main-body">
683
- <div class="pf-v5-c-content">
681
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
682
+ <div class="pf-v6-c-page__main-body">
683
+ <div class="pf-v6-c-content">
684
684
  <h1>Main title</h1>
685
685
  <p>This is a full page demo.</p>
686
686
  </div>
687
687
  </div>
688
688
  </section>
689
- <section class="pf-v5-c-page__main-section pf-m-no-padding">
690
- <div class="pf-v5-c-sidebar">
691
- <div class="pf-v5-c-sidebar__main">
692
- <div class="pf-v5-c-sidebar__panel pf-m-sticky pf-m-gutter">
693
- <section class="pf-v5-c-page__main-section">
689
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
690
+ <div class="pf-v6-c-sidebar">
691
+ <div class="pf-v6-c-sidebar__main">
692
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
693
+ <section class="pf-v6-c-page__main-section">
694
694
  <nav
695
- class="pf-v5-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expanded pf-m-expandable"
695
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expanded pf-m-expandable"
696
696
  >
697
- <div class="pf-v5-c-jump-links__header">
698
- <div class="pf-v5-c-jump-links__toggle">
697
+ <div class="pf-v6-c-jump-links__header">
698
+ <div class="pf-v6-c-jump-links__toggle">
699
699
  <button
700
- class="pf-v5-c-button pf-m-plain"
700
+ class="pf-v6-c-button pf-m-plain"
701
701
  type="button"
702
702
  aria-label="Toggle jump links"
703
703
  aria-expanded="false"
704
704
  >
705
- <span class="pf-v5-c-jump-links__toggle-icon">
705
+ <span class="pf-v6-c-jump-links__toggle-icon">
706
706
  <i class="fas fa-angle-right" aria-hidden="true"></i>
707
707
  </span>
708
708
  <span
709
- class="pf-v5-c-jump-links__toggle-text"
709
+ class="pf-v6-c-jump-links__toggle-text"
710
710
  >Jump to section</span>
711
711
  </button>
712
712
  </div>
713
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
713
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
714
714
  </div>
715
- <ul class="pf-v5-c-jump-links__list" role="list">
716
- <li class="pf-v5-c-jump-links__item pf-m-current">
717
- <span class="pf-v5-c-jump-links__link">
715
+ <ul class="pf-v6-c-jump-links__list" role="list">
716
+ <li class="pf-v6-c-jump-links__item pf-m-current">
717
+ <span class="pf-v6-c-jump-links__link">
718
718
  <a
719
- class="pf-v5-c-button pf-m-link"
719
+ class="pf-v6-c-button pf-m-link"
720
720
  href="#jump-links-vertical-expanded-mobile-example-jump-links-first"
721
721
  >
722
722
  <span
723
- class="pf-v5-c-jump-links__link-text"
723
+ class="pf-v6-c-jump-links__link-text"
724
724
  >First section</span>
725
725
  </a>
726
726
  </span>
727
727
  </li>
728
- <li class="pf-v5-c-jump-links__item">
729
- <span class="pf-v5-c-jump-links__link">
728
+ <li class="pf-v6-c-jump-links__item">
729
+ <span class="pf-v6-c-jump-links__link">
730
730
  <a
731
- class="pf-v5-c-button pf-m-link"
731
+ class="pf-v6-c-button pf-m-link"
732
732
  href="#jump-links-vertical-expanded-mobile-example-jump-links-second"
733
733
  >
734
734
  <span
735
- class="pf-v5-c-jump-links__link-text"
735
+ class="pf-v6-c-jump-links__link-text"
736
736
  >Second section</span>
737
737
  </a>
738
738
  </span>
739
739
  </li>
740
- <li class="pf-v5-c-jump-links__item">
741
- <span class="pf-v5-c-jump-links__link">
740
+ <li class="pf-v6-c-jump-links__item">
741
+ <span class="pf-v6-c-jump-links__link">
742
742
  <a
743
- class="pf-v5-c-button pf-m-link"
743
+ class="pf-v6-c-button pf-m-link"
744
744
  href="#jump-links-vertical-expanded-mobile-example-jump-links-third"
745
745
  >
746
746
  <span
747
- class="pf-v5-c-jump-links__link-text"
747
+ class="pf-v6-c-jump-links__link-text"
748
748
  >Third section</span>
749
749
  </a>
750
750
  </span>
751
751
  </li>
752
- <li class="pf-v5-c-jump-links__item">
753
- <span class="pf-v5-c-jump-links__link">
752
+ <li class="pf-v6-c-jump-links__item">
753
+ <span class="pf-v6-c-jump-links__link">
754
754
  <a
755
- class="pf-v5-c-button pf-m-link"
755
+ class="pf-v6-c-button pf-m-link"
756
756
  href="#jump-links-vertical-expanded-mobile-example-jump-links-fourth"
757
757
  >
758
758
  <span
759
- class="pf-v5-c-jump-links__link-text"
759
+ class="pf-v6-c-jump-links__link-text"
760
760
  >Fourth section</span>
761
761
  </a>
762
762
  </span>
763
763
  </li>
764
- <li class="pf-v5-c-jump-links__item">
765
- <span class="pf-v5-c-jump-links__link">
764
+ <li class="pf-v6-c-jump-links__item">
765
+ <span class="pf-v6-c-jump-links__link">
766
766
  <a
767
- class="pf-v5-c-button pf-m-link"
767
+ class="pf-v6-c-button pf-m-link"
768
768
  href="#jump-links-vertical-expanded-mobile-example-jump-links-fifth"
769
769
  >
770
770
  <span
771
- class="pf-v5-c-jump-links__link-text"
771
+ class="pf-v6-c-jump-links__link-text"
772
772
  >Fifth section</span>
773
773
  </a>
774
774
  </span>
@@ -777,9 +777,9 @@ section: components
777
777
  </nav>
778
778
  </section>
779
779
  </div>
780
- <div class="pf-v5-c-sidebar__content">
781
- <section class="pf-v5-c-page__main-section">
782
- <div class="pf-v5-c-content">
780
+ <div class="pf-v6-c-sidebar__content">
781
+ <section class="pf-v6-c-page__main-section">
782
+ <div class="pf-v6-c-content">
783
783
  <p>
784
784
  <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
785
785
  </p>
@@ -822,28 +822,28 @@ section: components
822
822
  ### Vertical jump links toggle text on mobile
823
823
 
824
824
  ```html isFullscreen
825
- <div class="pf-v5-c-page" id="jump-links-vertical-toggle-text-mobile-example">
826
- <div class="pf-v5-c-skip-to-content">
825
+ <div class="pf-v6-c-page" id="jump-links-vertical-toggle-text-mobile-example">
826
+ <div class="pf-v6-c-skip-to-content">
827
827
  <a
828
- class="pf-v5-c-button pf-m-primary"
828
+ class="pf-v6-c-button pf-m-primary"
829
829
  href="#main-content-jump-links-vertical-toggle-text-mobile-example"
830
830
  >Skip to content</a>
831
831
  </div>
832
832
  <header
833
- class="pf-v5-c-masthead"
833
+ class="pf-v6-c-masthead"
834
834
  id="jump-links-vertical-toggle-text-mobile-example-masthead"
835
835
  >
836
- <span class="pf-v5-c-masthead__toggle">
836
+ <span class="pf-v6-c-masthead__toggle">
837
837
  <button
838
- class="pf-v5-c-button pf-m-plain"
838
+ class="pf-v6-c-button pf-m-plain"
839
839
  type="button"
840
840
  aria-label="Global navigation"
841
841
  >
842
842
  <i class="fas fa-bars" aria-hidden="true"></i>
843
843
  </button>
844
844
  </span>
845
- <div class="pf-v5-c-masthead__main">
846
- <a class="pf-v5-c-masthead__brand" href="#">
845
+ <div class="pf-v6-c-masthead__main">
846
+ <a class="pf-v6-c-masthead__brand" href="#">
847
847
  <svg height="40px" viewBox="0 0 679 158">
848
848
  <title>PF-HorizontalLogo-Color</title>
849
849
  <defs>
@@ -916,37 +916,37 @@ section: components
916
916
  </svg>
917
917
  </a>
918
918
  </div>
919
- <div class="pf-v5-c-masthead__content">
919
+ <div class="pf-v6-c-masthead__content">
920
920
  <div
921
- class="pf-v5-c-toolbar pf-m-static"
921
+ class="pf-v6-c-toolbar pf-m-static"
922
922
  id="jump-links-vertical-toggle-text-mobile-example-masthead-toolbar"
923
923
  >
924
- <div class="pf-v5-c-toolbar__content">
925
- <div class="pf-v5-c-toolbar__content-section">
926
- <div class="pf-v5-c-toolbar__item">
924
+ <div class="pf-v6-c-toolbar__content">
925
+ <div class="pf-v6-c-toolbar__content-section">
926
+ <div class="pf-v6-c-toolbar__item">
927
927
  <button
928
- class="pf-v5-c-menu-toggle"
928
+ class="pf-v6-c-menu-toggle"
929
929
  type="button"
930
930
  aria-expanded="false"
931
931
  >
932
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
933
- <span class="pf-v5-c-menu-toggle__controls">
934
- <span class="pf-v5-c-menu-toggle__toggle-icon">
932
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
933
+ <span class="pf-v6-c-menu-toggle__controls">
934
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
935
935
  <i class="fas fa-caret-down" aria-hidden="true"></i>
936
936
  </span>
937
937
  </span>
938
938
  </button>
939
939
  </div>
940
940
 
941
- <div class="pf-v5-c-toolbar__item">
941
+ <div class="pf-v6-c-toolbar__item">
942
942
  <button
943
- class="pf-v5-c-menu-toggle"
943
+ class="pf-v6-c-menu-toggle"
944
944
  type="button"
945
945
  aria-expanded="false"
946
946
  >
947
- <span class="pf-v5-c-menu-toggle__text">Services</span>
948
- <span class="pf-v5-c-menu-toggle__controls">
949
- <span class="pf-v5-c-menu-toggle__toggle-icon">
947
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
948
+ <span class="pf-v6-c-menu-toggle__controls">
949
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
950
950
  <i class="fas fa-caret-down" aria-hidden="true"></i>
951
951
  </span>
952
952
  </span>
@@ -954,56 +954,56 @@ section: components
954
954
  </div>
955
955
 
956
956
  <div
957
- 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"
957
+ 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"
958
958
  >
959
959
  <div
960
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
960
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
961
961
  >
962
- <div class="pf-v5-c-toolbar__item">
962
+ <div class="pf-v6-c-toolbar__item">
963
963
  <button
964
- class="pf-v5-c-menu-toggle pf-m-plain"
964
+ class="pf-v6-c-menu-toggle pf-m-plain"
965
965
  type="button"
966
966
  aria-expanded="false"
967
967
  aria-label="Application launcher"
968
968
  >
969
- <span class="pf-v5-c-menu-toggle__icon">
969
+ <span class="pf-v6-c-menu-toggle__icon">
970
970
  <i class="fas fa-th" aria-hidden="true"></i>
971
971
  </span>
972
972
  </button>
973
973
  </div>
974
- <div class="pf-v5-c-toolbar__item">
974
+ <div class="pf-v6-c-toolbar__item">
975
975
  <button
976
- class="pf-v5-c-menu-toggle pf-m-plain"
976
+ class="pf-v6-c-menu-toggle pf-m-plain"
977
977
  type="button"
978
978
  aria-expanded="false"
979
979
  aria-label="Settings"
980
980
  >
981
- <span class="pf-v5-c-menu-toggle__icon">
981
+ <span class="pf-v6-c-menu-toggle__icon">
982
982
  <i class="fas fa-cog" aria-hidden="true"></i>
983
983
  </span>
984
984
  </button>
985
985
  </div>
986
- <div class="pf-v5-c-toolbar__item">
986
+ <div class="pf-v6-c-toolbar__item">
987
987
  <button
988
- class="pf-v5-c-menu-toggle pf-m-plain"
988
+ class="pf-v6-c-menu-toggle pf-m-plain"
989
989
  type="button"
990
990
  aria-expanded="false"
991
991
  aria-label="Help"
992
992
  >
993
- <span class="pf-v5-c-menu-toggle__icon">
993
+ <span class="pf-v6-c-menu-toggle__icon">
994
994
  <i class="fas fa-question-circle" aria-hidden="true"></i>
995
995
  </span>
996
996
  </button>
997
997
  </div>
998
998
  </div>
999
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
999
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1000
1000
  <button
1001
- class="pf-v5-c-menu-toggle pf-m-plain"
1001
+ class="pf-v6-c-menu-toggle pf-m-plain"
1002
1002
  type="button"
1003
1003
  aria-expanded="false"
1004
1004
  aria-label="Actions"
1005
1005
  >
1006
- <span class="pf-v5-c-menu-toggle__icon">
1006
+ <span class="pf-v6-c-menu-toggle__icon">
1007
1007
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1008
1008
  </span>
1009
1009
  </button>
@@ -1014,71 +1014,71 @@ section: components
1014
1014
  </div>
1015
1015
  </div>
1016
1016
  </header>
1017
- <div class="pf-v5-c-page__sidebar">
1018
- <div class="pf-v5-c-page__sidebar-body">
1017
+ <div class="pf-v6-c-page__sidebar">
1018
+ <div class="pf-v6-c-page__sidebar-body">
1019
1019
  <nav
1020
- class="pf-v5-c-nav"
1020
+ class="pf-v6-c-nav"
1021
1021
  id="jump-links-vertical-toggle-text-mobile-example-primary-nav"
1022
1022
  aria-label="Global"
1023
1023
  >
1024
- <ul class="pf-v5-c-nav__list" role="list">
1025
- <li class="pf-v5-c-nav__item">
1026
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
1024
+ <ul class="pf-v6-c-nav__list" role="list">
1025
+ <li class="pf-v6-c-nav__item">
1026
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
1027
1027
  </li>
1028
- <li class="pf-v5-c-nav__item">
1028
+ <li class="pf-v6-c-nav__item">
1029
1029
  <a
1030
1030
  href="#"
1031
- class="pf-v5-c-nav__link pf-m-current"
1031
+ class="pf-v6-c-nav__link pf-m-current"
1032
1032
  aria-current="page"
1033
1033
  >Policy</a>
1034
1034
  </li>
1035
- <li class="pf-v5-c-nav__item">
1036
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
1035
+ <li class="pf-v6-c-nav__item">
1036
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1037
1037
  </li>
1038
- <li class="pf-v5-c-nav__item">
1039
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
1038
+ <li class="pf-v6-c-nav__item">
1039
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
1040
1040
  </li>
1041
- <li class="pf-v5-c-nav__item">
1042
- <a href="#" class="pf-v5-c-nav__link">Server</a>
1041
+ <li class="pf-v6-c-nav__item">
1042
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
1043
1043
  </li>
1044
1044
  </ul>
1045
1045
  </nav>
1046
1046
  </div>
1047
1047
  </div>
1048
1048
  <main
1049
- class="pf-v5-c-page__main"
1049
+ class="pf-v6-c-page__main"
1050
1050
  tabindex="-1"
1051
1051
  id="main-content-jump-links-vertical-toggle-text-mobile-example"
1052
1052
  >
1053
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1054
- <div class="pf-v5-c-page__main-body">
1055
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1056
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1057
- <li class="pf-v5-c-breadcrumb__item">
1058
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1053
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1054
+ <div class="pf-v6-c-page__main-body">
1055
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1056
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1057
+ <li class="pf-v6-c-breadcrumb__item">
1058
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1059
1059
  </li>
1060
- <li class="pf-v5-c-breadcrumb__item">
1061
- <span class="pf-v5-c-breadcrumb__item-divider">
1060
+ <li class="pf-v6-c-breadcrumb__item">
1061
+ <span class="pf-v6-c-breadcrumb__item-divider">
1062
1062
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1063
1063
  </span>
1064
1064
 
1065
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1065
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1066
1066
  </li>
1067
- <li class="pf-v5-c-breadcrumb__item">
1068
- <span class="pf-v5-c-breadcrumb__item-divider">
1067
+ <li class="pf-v6-c-breadcrumb__item">
1068
+ <span class="pf-v6-c-breadcrumb__item-divider">
1069
1069
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1070
1070
  </span>
1071
1071
 
1072
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1072
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1073
1073
  </li>
1074
- <li class="pf-v5-c-breadcrumb__item">
1075
- <span class="pf-v5-c-breadcrumb__item-divider">
1074
+ <li class="pf-v6-c-breadcrumb__item">
1075
+ <span class="pf-v6-c-breadcrumb__item-divider">
1076
1076
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1077
1077
  </span>
1078
1078
 
1079
1079
  <a
1080
1080
  href="#"
1081
- class="pf-v5-c-breadcrumb__link pf-m-current"
1081
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1082
1082
  aria-current="page"
1083
1083
  >Section landing</a>
1084
1084
  </li>
@@ -1086,97 +1086,97 @@ section: components
1086
1086
  </nav>
1087
1087
  </div>
1088
1088
  </section>
1089
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1090
- <div class="pf-v5-c-page__main-body">
1091
- <div class="pf-v5-c-content">
1089
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1090
+ <div class="pf-v6-c-page__main-body">
1091
+ <div class="pf-v6-c-content">
1092
1092
  <h1>Main title</h1>
1093
1093
  <p>This is a full page demo.</p>
1094
1094
  </div>
1095
1095
  </div>
1096
1096
  </section>
1097
- <section class="pf-v5-c-page__main-section pf-m-no-padding">
1098
- <div class="pf-v5-c-sidebar">
1099
- <div class="pf-v5-c-sidebar__main">
1100
- <div class="pf-v5-c-sidebar__panel pf-m-sticky pf-m-gutter">
1101
- <section class="pf-v5-c-page__main-section">
1097
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
1098
+ <div class="pf-v6-c-sidebar">
1099
+ <div class="pf-v6-c-sidebar__main">
1100
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1101
+ <section class="pf-v6-c-page__main-section">
1102
1102
  <nav
1103
- class="pf-v5-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1103
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1104
1104
  >
1105
- <div class="pf-v5-c-jump-links__header">
1106
- <div class="pf-v5-c-jump-links__toggle">
1105
+ <div class="pf-v6-c-jump-links__header">
1106
+ <div class="pf-v6-c-jump-links__toggle">
1107
1107
  <button
1108
- class="pf-v5-c-button pf-m-plain"
1108
+ class="pf-v6-c-button pf-m-plain"
1109
1109
  type="button"
1110
1110
  aria-label="Toggle jump links"
1111
1111
  aria-expanded="false"
1112
1112
  >
1113
- <span class="pf-v5-c-jump-links__toggle-icon">
1113
+ <span class="pf-v6-c-jump-links__toggle-icon">
1114
1114
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1115
1115
  </span>
1116
1116
  <span
1117
- class="pf-v5-c-jump-links__toggle-text"
1117
+ class="pf-v6-c-jump-links__toggle-text"
1118
1118
  >Jump to section</span>
1119
1119
  </button>
1120
1120
  </div>
1121
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
1121
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
1122
1122
  </div>
1123
- <ul class="pf-v5-c-jump-links__list" role="list">
1124
- <li class="pf-v5-c-jump-links__item pf-m-current">
1125
- <span class="pf-v5-c-jump-links__link">
1123
+ <ul class="pf-v6-c-jump-links__list" role="list">
1124
+ <li class="pf-v6-c-jump-links__item pf-m-current">
1125
+ <span class="pf-v6-c-jump-links__link">
1126
1126
  <a
1127
- class="pf-v5-c-button pf-m-link"
1127
+ class="pf-v6-c-button pf-m-link"
1128
1128
  href="#jump-links-vertical-toggle-text-mobile-example-jump-links-first"
1129
1129
  >
1130
1130
  <span
1131
- class="pf-v5-c-jump-links__link-text"
1131
+ class="pf-v6-c-jump-links__link-text"
1132
1132
  >First section</span>
1133
1133
  </a>
1134
1134
  </span>
1135
1135
  </li>
1136
- <li class="pf-v5-c-jump-links__item">
1137
- <span class="pf-v5-c-jump-links__link">
1136
+ <li class="pf-v6-c-jump-links__item">
1137
+ <span class="pf-v6-c-jump-links__link">
1138
1138
  <a
1139
- class="pf-v5-c-button pf-m-link"
1139
+ class="pf-v6-c-button pf-m-link"
1140
1140
  href="#jump-links-vertical-toggle-text-mobile-example-jump-links-second"
1141
1141
  >
1142
1142
  <span
1143
- class="pf-v5-c-jump-links__link-text"
1143
+ class="pf-v6-c-jump-links__link-text"
1144
1144
  >Second section</span>
1145
1145
  </a>
1146
1146
  </span>
1147
1147
  </li>
1148
- <li class="pf-v5-c-jump-links__item">
1149
- <span class="pf-v5-c-jump-links__link">
1148
+ <li class="pf-v6-c-jump-links__item">
1149
+ <span class="pf-v6-c-jump-links__link">
1150
1150
  <a
1151
- class="pf-v5-c-button pf-m-link"
1151
+ class="pf-v6-c-button pf-m-link"
1152
1152
  href="#jump-links-vertical-toggle-text-mobile-example-jump-links-third"
1153
1153
  >
1154
1154
  <span
1155
- class="pf-v5-c-jump-links__link-text"
1155
+ class="pf-v6-c-jump-links__link-text"
1156
1156
  >Third section</span>
1157
1157
  </a>
1158
1158
  </span>
1159
1159
  </li>
1160
- <li class="pf-v5-c-jump-links__item">
1161
- <span class="pf-v5-c-jump-links__link">
1160
+ <li class="pf-v6-c-jump-links__item">
1161
+ <span class="pf-v6-c-jump-links__link">
1162
1162
  <a
1163
- class="pf-v5-c-button pf-m-link"
1163
+ class="pf-v6-c-button pf-m-link"
1164
1164
  href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fourth"
1165
1165
  >
1166
1166
  <span
1167
- class="pf-v5-c-jump-links__link-text"
1167
+ class="pf-v6-c-jump-links__link-text"
1168
1168
  >Fourth section</span>
1169
1169
  </a>
1170
1170
  </span>
1171
1171
  </li>
1172
- <li class="pf-v5-c-jump-links__item">
1173
- <span class="pf-v5-c-jump-links__link">
1172
+ <li class="pf-v6-c-jump-links__item">
1173
+ <span class="pf-v6-c-jump-links__link">
1174
1174
  <a
1175
- class="pf-v5-c-button pf-m-link"
1175
+ class="pf-v6-c-button pf-m-link"
1176
1176
  href="#jump-links-vertical-toggle-text-mobile-example-jump-links-fifth"
1177
1177
  >
1178
1178
  <span
1179
- class="pf-v5-c-jump-links__link-text"
1179
+ class="pf-v6-c-jump-links__link-text"
1180
1180
  >Fifth section</span>
1181
1181
  </a>
1182
1182
  </span>
@@ -1185,9 +1185,9 @@ section: components
1185
1185
  </nav>
1186
1186
  </section>
1187
1187
  </div>
1188
- <div class="pf-v5-c-sidebar__content">
1189
- <section class="pf-v5-c-page__main-section">
1190
- <div class="pf-v5-c-content">
1188
+ <div class="pf-v6-c-sidebar__content">
1189
+ <section class="pf-v6-c-page__main-section">
1190
+ <div class="pf-v6-c-content">
1191
1191
  <p>
1192
1192
  <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
1193
1193
  </p>
@@ -1230,25 +1230,25 @@ section: components
1230
1230
  ### Horizontal jump links
1231
1231
 
1232
1232
  ```html isFullscreen
1233
- <div class="pf-v5-c-page" id="jump-links-horizontal-example">
1234
- <div class="pf-v5-c-skip-to-content">
1233
+ <div class="pf-v6-c-page" id="jump-links-horizontal-example">
1234
+ <div class="pf-v6-c-skip-to-content">
1235
1235
  <a
1236
- class="pf-v5-c-button pf-m-primary"
1236
+ class="pf-v6-c-button pf-m-primary"
1237
1237
  href="#main-content-jump-links-horizontal-example"
1238
1238
  >Skip to content</a>
1239
1239
  </div>
1240
- <header class="pf-v5-c-masthead" id="jump-links-horizontal-example-masthead">
1241
- <span class="pf-v5-c-masthead__toggle">
1240
+ <header class="pf-v6-c-masthead" id="jump-links-horizontal-example-masthead">
1241
+ <span class="pf-v6-c-masthead__toggle">
1242
1242
  <button
1243
- class="pf-v5-c-button pf-m-plain"
1243
+ class="pf-v6-c-button pf-m-plain"
1244
1244
  type="button"
1245
1245
  aria-label="Global navigation"
1246
1246
  >
1247
1247
  <i class="fas fa-bars" aria-hidden="true"></i>
1248
1248
  </button>
1249
1249
  </span>
1250
- <div class="pf-v5-c-masthead__main">
1251
- <a class="pf-v5-c-masthead__brand" href="#">
1250
+ <div class="pf-v6-c-masthead__main">
1251
+ <a class="pf-v6-c-masthead__brand" href="#">
1252
1252
  <svg height="40px" viewBox="0 0 679 158">
1253
1253
  <title>PF-HorizontalLogo-Color</title>
1254
1254
  <defs>
@@ -1321,37 +1321,37 @@ section: components
1321
1321
  </svg>
1322
1322
  </a>
1323
1323
  </div>
1324
- <div class="pf-v5-c-masthead__content">
1324
+ <div class="pf-v6-c-masthead__content">
1325
1325
  <div
1326
- class="pf-v5-c-toolbar pf-m-static"
1326
+ class="pf-v6-c-toolbar pf-m-static"
1327
1327
  id="jump-links-horizontal-example-masthead-toolbar"
1328
1328
  >
1329
- <div class="pf-v5-c-toolbar__content">
1330
- <div class="pf-v5-c-toolbar__content-section">
1331
- <div class="pf-v5-c-toolbar__item">
1329
+ <div class="pf-v6-c-toolbar__content">
1330
+ <div class="pf-v6-c-toolbar__content-section">
1331
+ <div class="pf-v6-c-toolbar__item">
1332
1332
  <button
1333
- class="pf-v5-c-menu-toggle"
1333
+ class="pf-v6-c-menu-toggle"
1334
1334
  type="button"
1335
1335
  aria-expanded="false"
1336
1336
  >
1337
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
1338
- <span class="pf-v5-c-menu-toggle__controls">
1339
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1337
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
1338
+ <span class="pf-v6-c-menu-toggle__controls">
1339
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1340
1340
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1341
1341
  </span>
1342
1342
  </span>
1343
1343
  </button>
1344
1344
  </div>
1345
1345
 
1346
- <div class="pf-v5-c-toolbar__item">
1346
+ <div class="pf-v6-c-toolbar__item">
1347
1347
  <button
1348
- class="pf-v5-c-menu-toggle"
1348
+ class="pf-v6-c-menu-toggle"
1349
1349
  type="button"
1350
1350
  aria-expanded="false"
1351
1351
  >
1352
- <span class="pf-v5-c-menu-toggle__text">Services</span>
1353
- <span class="pf-v5-c-menu-toggle__controls">
1354
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1352
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
1353
+ <span class="pf-v6-c-menu-toggle__controls">
1354
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1355
1355
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1356
1356
  </span>
1357
1357
  </span>
@@ -1359,56 +1359,56 @@ section: components
1359
1359
  </div>
1360
1360
 
1361
1361
  <div
1362
- 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"
1362
+ 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"
1363
1363
  >
1364
1364
  <div
1365
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1365
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1366
1366
  >
1367
- <div class="pf-v5-c-toolbar__item">
1367
+ <div class="pf-v6-c-toolbar__item">
1368
1368
  <button
1369
- class="pf-v5-c-menu-toggle pf-m-plain"
1369
+ class="pf-v6-c-menu-toggle pf-m-plain"
1370
1370
  type="button"
1371
1371
  aria-expanded="false"
1372
1372
  aria-label="Application launcher"
1373
1373
  >
1374
- <span class="pf-v5-c-menu-toggle__icon">
1374
+ <span class="pf-v6-c-menu-toggle__icon">
1375
1375
  <i class="fas fa-th" aria-hidden="true"></i>
1376
1376
  </span>
1377
1377
  </button>
1378
1378
  </div>
1379
- <div class="pf-v5-c-toolbar__item">
1379
+ <div class="pf-v6-c-toolbar__item">
1380
1380
  <button
1381
- class="pf-v5-c-menu-toggle pf-m-plain"
1381
+ class="pf-v6-c-menu-toggle pf-m-plain"
1382
1382
  type="button"
1383
1383
  aria-expanded="false"
1384
1384
  aria-label="Settings"
1385
1385
  >
1386
- <span class="pf-v5-c-menu-toggle__icon">
1386
+ <span class="pf-v6-c-menu-toggle__icon">
1387
1387
  <i class="fas fa-cog" aria-hidden="true"></i>
1388
1388
  </span>
1389
1389
  </button>
1390
1390
  </div>
1391
- <div class="pf-v5-c-toolbar__item">
1391
+ <div class="pf-v6-c-toolbar__item">
1392
1392
  <button
1393
- class="pf-v5-c-menu-toggle pf-m-plain"
1393
+ class="pf-v6-c-menu-toggle pf-m-plain"
1394
1394
  type="button"
1395
1395
  aria-expanded="false"
1396
1396
  aria-label="Help"
1397
1397
  >
1398
- <span class="pf-v5-c-menu-toggle__icon">
1398
+ <span class="pf-v6-c-menu-toggle__icon">
1399
1399
  <i class="fas fa-question-circle" aria-hidden="true"></i>
1400
1400
  </span>
1401
1401
  </button>
1402
1402
  </div>
1403
1403
  </div>
1404
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1404
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1405
1405
  <button
1406
- class="pf-v5-c-menu-toggle pf-m-plain"
1406
+ class="pf-v6-c-menu-toggle pf-m-plain"
1407
1407
  type="button"
1408
1408
  aria-expanded="false"
1409
1409
  aria-label="Actions"
1410
1410
  >
1411
- <span class="pf-v5-c-menu-toggle__icon">
1411
+ <span class="pf-v6-c-menu-toggle__icon">
1412
1412
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1413
1413
  </span>
1414
1414
  </button>
@@ -1419,71 +1419,71 @@ section: components
1419
1419
  </div>
1420
1420
  </div>
1421
1421
  </header>
1422
- <div class="pf-v5-c-page__sidebar">
1423
- <div class="pf-v5-c-page__sidebar-body">
1422
+ <div class="pf-v6-c-page__sidebar">
1423
+ <div class="pf-v6-c-page__sidebar-body">
1424
1424
  <nav
1425
- class="pf-v5-c-nav"
1425
+ class="pf-v6-c-nav"
1426
1426
  id="jump-links-horizontal-example-primary-nav"
1427
1427
  aria-label="Global"
1428
1428
  >
1429
- <ul class="pf-v5-c-nav__list" role="list">
1430
- <li class="pf-v5-c-nav__item">
1431
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
1429
+ <ul class="pf-v6-c-nav__list" role="list">
1430
+ <li class="pf-v6-c-nav__item">
1431
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
1432
1432
  </li>
1433
- <li class="pf-v5-c-nav__item">
1433
+ <li class="pf-v6-c-nav__item">
1434
1434
  <a
1435
1435
  href="#"
1436
- class="pf-v5-c-nav__link pf-m-current"
1436
+ class="pf-v6-c-nav__link pf-m-current"
1437
1437
  aria-current="page"
1438
1438
  >Policy</a>
1439
1439
  </li>
1440
- <li class="pf-v5-c-nav__item">
1441
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
1440
+ <li class="pf-v6-c-nav__item">
1441
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1442
1442
  </li>
1443
- <li class="pf-v5-c-nav__item">
1444
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
1443
+ <li class="pf-v6-c-nav__item">
1444
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
1445
1445
  </li>
1446
- <li class="pf-v5-c-nav__item">
1447
- <a href="#" class="pf-v5-c-nav__link">Server</a>
1446
+ <li class="pf-v6-c-nav__item">
1447
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
1448
1448
  </li>
1449
1449
  </ul>
1450
1450
  </nav>
1451
1451
  </div>
1452
1452
  </div>
1453
1453
  <main
1454
- class="pf-v5-c-page__main"
1454
+ class="pf-v6-c-page__main"
1455
1455
  tabindex="-1"
1456
1456
  id="main-content-jump-links-horizontal-example"
1457
1457
  >
1458
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1459
- <div class="pf-v5-c-page__main-body">
1460
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1461
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1462
- <li class="pf-v5-c-breadcrumb__item">
1463
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1458
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1459
+ <div class="pf-v6-c-page__main-body">
1460
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1461
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1462
+ <li class="pf-v6-c-breadcrumb__item">
1463
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1464
1464
  </li>
1465
- <li class="pf-v5-c-breadcrumb__item">
1466
- <span class="pf-v5-c-breadcrumb__item-divider">
1465
+ <li class="pf-v6-c-breadcrumb__item">
1466
+ <span class="pf-v6-c-breadcrumb__item-divider">
1467
1467
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1468
1468
  </span>
1469
1469
 
1470
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1470
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1471
1471
  </li>
1472
- <li class="pf-v5-c-breadcrumb__item">
1473
- <span class="pf-v5-c-breadcrumb__item-divider">
1472
+ <li class="pf-v6-c-breadcrumb__item">
1473
+ <span class="pf-v6-c-breadcrumb__item-divider">
1474
1474
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1475
1475
  </span>
1476
1476
 
1477
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1477
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1478
1478
  </li>
1479
- <li class="pf-v5-c-breadcrumb__item">
1480
- <span class="pf-v5-c-breadcrumb__item-divider">
1479
+ <li class="pf-v6-c-breadcrumb__item">
1480
+ <span class="pf-v6-c-breadcrumb__item-divider">
1481
1481
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1482
1482
  </span>
1483
1483
 
1484
1484
  <a
1485
1485
  href="#"
1486
- class="pf-v5-c-breadcrumb__link pf-m-current"
1486
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1487
1487
  aria-current="page"
1488
1488
  >Section landing</a>
1489
1489
  </li>
@@ -1491,53 +1491,53 @@ section: components
1491
1491
  </nav>
1492
1492
  </div>
1493
1493
  </section>
1494
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1495
- <div class="pf-v5-c-page__main-body">
1496
- <div class="pf-v5-c-content">
1494
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1495
+ <div class="pf-v6-c-page__main-body">
1496
+ <div class="pf-v6-c-content">
1497
1497
  <h1>Main title</h1>
1498
1498
  <p>This is a full page demo.</p>
1499
1499
  </div>
1500
1500
  </div>
1501
1501
  </section>
1502
- <section class="pf-v5-c-page__main-section pf-m-sticky-top">
1503
- <nav class="pf-v5-c-jump-links pf-m-center">
1504
- <div class="pf-v5-c-jump-links__main">
1505
- <div class="pf-v5-c-jump-links__header">
1506
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
1502
+ <section class="pf-v6-c-page__main-section pf-m-sticky-top">
1503
+ <nav class="pf-v6-c-jump-links pf-m-center">
1504
+ <div class="pf-v6-c-jump-links__main">
1505
+ <div class="pf-v6-c-jump-links__header">
1506
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
1507
1507
  </div>
1508
- <ul class="pf-v5-c-jump-links__list" role="list">
1509
- <li class="pf-v5-c-jump-links__item pf-m-current">
1510
- <span class="pf-v5-c-jump-links__link">
1511
- <a class="pf-v5-c-button pf-m-link" href="#-first">
1512
- <span class="pf-v5-c-jump-links__link-text">First section</span>
1508
+ <ul class="pf-v6-c-jump-links__list" role="list">
1509
+ <li class="pf-v6-c-jump-links__item pf-m-current">
1510
+ <span class="pf-v6-c-jump-links__link">
1511
+ <a class="pf-v6-c-button pf-m-link" href="#-first">
1512
+ <span class="pf-v6-c-jump-links__link-text">First section</span>
1513
1513
  </a>
1514
1514
  </span>
1515
1515
  </li>
1516
- <li class="pf-v5-c-jump-links__item">
1517
- <span class="pf-v5-c-jump-links__link">
1518
- <a class="pf-v5-c-button pf-m-link" href="#-second">
1519
- <span class="pf-v5-c-jump-links__link-text">Second section</span>
1516
+ <li class="pf-v6-c-jump-links__item">
1517
+ <span class="pf-v6-c-jump-links__link">
1518
+ <a class="pf-v6-c-button pf-m-link" href="#-second">
1519
+ <span class="pf-v6-c-jump-links__link-text">Second section</span>
1520
1520
  </a>
1521
1521
  </span>
1522
1522
  </li>
1523
- <li class="pf-v5-c-jump-links__item">
1524
- <span class="pf-v5-c-jump-links__link">
1525
- <a class="pf-v5-c-button pf-m-link" href="#-third">
1526
- <span class="pf-v5-c-jump-links__link-text">Third section</span>
1523
+ <li class="pf-v6-c-jump-links__item">
1524
+ <span class="pf-v6-c-jump-links__link">
1525
+ <a class="pf-v6-c-button pf-m-link" href="#-third">
1526
+ <span class="pf-v6-c-jump-links__link-text">Third section</span>
1527
1527
  </a>
1528
1528
  </span>
1529
1529
  </li>
1530
- <li class="pf-v5-c-jump-links__item">
1531
- <span class="pf-v5-c-jump-links__link">
1532
- <a class="pf-v5-c-button pf-m-link" href="#-fourth">
1533
- <span class="pf-v5-c-jump-links__link-text">Fourth section</span>
1530
+ <li class="pf-v6-c-jump-links__item">
1531
+ <span class="pf-v6-c-jump-links__link">
1532
+ <a class="pf-v6-c-button pf-m-link" href="#-fourth">
1533
+ <span class="pf-v6-c-jump-links__link-text">Fourth section</span>
1534
1534
  </a>
1535
1535
  </span>
1536
1536
  </li>
1537
- <li class="pf-v5-c-jump-links__item">
1538
- <span class="pf-v5-c-jump-links__link">
1539
- <a class="pf-v5-c-button pf-m-link" href="#-fifth">
1540
- <span class="pf-v5-c-jump-links__link-text">Fifth section</span>
1537
+ <li class="pf-v6-c-jump-links__item">
1538
+ <span class="pf-v6-c-jump-links__link">
1539
+ <a class="pf-v6-c-button pf-m-link" href="#-fifth">
1540
+ <span class="pf-v6-c-jump-links__link-text">Fifth section</span>
1541
1541
  </a>
1542
1542
  </span>
1543
1543
  </li>
@@ -1545,8 +1545,8 @@ section: components
1545
1545
  </div>
1546
1546
  </nav>
1547
1547
  </section>
1548
- <section class="pf-v5-c-page__main-section">
1549
- <div class="pf-v5-c-content">
1548
+ <section class="pf-v6-c-page__main-section">
1549
+ <div class="pf-v6-c-content">
1550
1550
  <p>
1551
1551
  <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
1552
1552
  </p>
@@ -1575,25 +1575,25 @@ section: components
1575
1575
  ### Jump links in drawer
1576
1576
 
1577
1577
  ```html isFullscreen
1578
- <div class="pf-v5-c-page" id="jump-links-drawer">
1579
- <div class="pf-v5-c-skip-to-content">
1578
+ <div class="pf-v6-c-page" id="jump-links-drawer">
1579
+ <div class="pf-v6-c-skip-to-content">
1580
1580
  <a
1581
- class="pf-v5-c-button pf-m-primary"
1581
+ class="pf-v6-c-button pf-m-primary"
1582
1582
  href="#main-content-jump-links-drawer"
1583
1583
  >Skip to content</a>
1584
1584
  </div>
1585
- <header class="pf-v5-c-masthead" id="jump-links-drawer-masthead">
1586
- <span class="pf-v5-c-masthead__toggle">
1585
+ <header class="pf-v6-c-masthead" id="jump-links-drawer-masthead">
1586
+ <span class="pf-v6-c-masthead__toggle">
1587
1587
  <button
1588
- class="pf-v5-c-button pf-m-plain"
1588
+ class="pf-v6-c-button pf-m-plain"
1589
1589
  type="button"
1590
1590
  aria-label="Global navigation"
1591
1591
  >
1592
1592
  <i class="fas fa-bars" aria-hidden="true"></i>
1593
1593
  </button>
1594
1594
  </span>
1595
- <div class="pf-v5-c-masthead__main">
1596
- <a class="pf-v5-c-masthead__brand" href="#">
1595
+ <div class="pf-v6-c-masthead__main">
1596
+ <a class="pf-v6-c-masthead__brand" href="#">
1597
1597
  <svg height="40px" viewBox="0 0 679 158">
1598
1598
  <title>PF-HorizontalLogo-Color</title>
1599
1599
  <defs>
@@ -1666,37 +1666,37 @@ section: components
1666
1666
  </svg>
1667
1667
  </a>
1668
1668
  </div>
1669
- <div class="pf-v5-c-masthead__content">
1669
+ <div class="pf-v6-c-masthead__content">
1670
1670
  <div
1671
- class="pf-v5-c-toolbar pf-m-static"
1671
+ class="pf-v6-c-toolbar pf-m-static"
1672
1672
  id="jump-links-drawer-masthead-toolbar"
1673
1673
  >
1674
- <div class="pf-v5-c-toolbar__content">
1675
- <div class="pf-v5-c-toolbar__content-section">
1676
- <div class="pf-v5-c-toolbar__item">
1674
+ <div class="pf-v6-c-toolbar__content">
1675
+ <div class="pf-v6-c-toolbar__content-section">
1676
+ <div class="pf-v6-c-toolbar__item">
1677
1677
  <button
1678
- class="pf-v5-c-menu-toggle"
1678
+ class="pf-v6-c-menu-toggle"
1679
1679
  type="button"
1680
1680
  aria-expanded="false"
1681
1681
  >
1682
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
1683
- <span class="pf-v5-c-menu-toggle__controls">
1684
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1682
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
1683
+ <span class="pf-v6-c-menu-toggle__controls">
1684
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1685
1685
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1686
1686
  </span>
1687
1687
  </span>
1688
1688
  </button>
1689
1689
  </div>
1690
1690
 
1691
- <div class="pf-v5-c-toolbar__item">
1691
+ <div class="pf-v6-c-toolbar__item">
1692
1692
  <button
1693
- class="pf-v5-c-menu-toggle"
1693
+ class="pf-v6-c-menu-toggle"
1694
1694
  type="button"
1695
1695
  aria-expanded="false"
1696
1696
  >
1697
- <span class="pf-v5-c-menu-toggle__text">Services</span>
1698
- <span class="pf-v5-c-menu-toggle__controls">
1699
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1697
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
1698
+ <span class="pf-v6-c-menu-toggle__controls">
1699
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1700
1700
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1701
1701
  </span>
1702
1702
  </span>
@@ -1704,56 +1704,56 @@ section: components
1704
1704
  </div>
1705
1705
 
1706
1706
  <div
1707
- 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"
1707
+ 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"
1708
1708
  >
1709
1709
  <div
1710
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1710
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1711
1711
  >
1712
- <div class="pf-v5-c-toolbar__item">
1712
+ <div class="pf-v6-c-toolbar__item">
1713
1713
  <button
1714
- class="pf-v5-c-menu-toggle pf-m-plain"
1714
+ class="pf-v6-c-menu-toggle pf-m-plain"
1715
1715
  type="button"
1716
1716
  aria-expanded="false"
1717
1717
  aria-label="Application launcher"
1718
1718
  >
1719
- <span class="pf-v5-c-menu-toggle__icon">
1719
+ <span class="pf-v6-c-menu-toggle__icon">
1720
1720
  <i class="fas fa-th" aria-hidden="true"></i>
1721
1721
  </span>
1722
1722
  </button>
1723
1723
  </div>
1724
- <div class="pf-v5-c-toolbar__item">
1724
+ <div class="pf-v6-c-toolbar__item">
1725
1725
  <button
1726
- class="pf-v5-c-menu-toggle pf-m-plain"
1726
+ class="pf-v6-c-menu-toggle pf-m-plain"
1727
1727
  type="button"
1728
1728
  aria-expanded="false"
1729
1729
  aria-label="Settings"
1730
1730
  >
1731
- <span class="pf-v5-c-menu-toggle__icon">
1731
+ <span class="pf-v6-c-menu-toggle__icon">
1732
1732
  <i class="fas fa-cog" aria-hidden="true"></i>
1733
1733
  </span>
1734
1734
  </button>
1735
1735
  </div>
1736
- <div class="pf-v5-c-toolbar__item">
1736
+ <div class="pf-v6-c-toolbar__item">
1737
1737
  <button
1738
- class="pf-v5-c-menu-toggle pf-m-plain"
1738
+ class="pf-v6-c-menu-toggle pf-m-plain"
1739
1739
  type="button"
1740
1740
  aria-expanded="false"
1741
1741
  aria-label="Help"
1742
1742
  >
1743
- <span class="pf-v5-c-menu-toggle__icon">
1743
+ <span class="pf-v6-c-menu-toggle__icon">
1744
1744
  <i class="fas fa-question-circle" aria-hidden="true"></i>
1745
1745
  </span>
1746
1746
  </button>
1747
1747
  </div>
1748
1748
  </div>
1749
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1749
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1750
1750
  <button
1751
- class="pf-v5-c-menu-toggle pf-m-plain"
1751
+ class="pf-v6-c-menu-toggle pf-m-plain"
1752
1752
  type="button"
1753
1753
  aria-expanded="false"
1754
1754
  aria-label="Actions"
1755
1755
  >
1756
- <span class="pf-v5-c-menu-toggle__icon">
1756
+ <span class="pf-v6-c-menu-toggle__icon">
1757
1757
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1758
1758
  </span>
1759
1759
  </button>
@@ -1764,114 +1764,114 @@ section: components
1764
1764
  </div>
1765
1765
  </div>
1766
1766
  </header>
1767
- <div class="pf-v5-c-page__sidebar">
1768
- <div class="pf-v5-c-page__sidebar-body">
1767
+ <div class="pf-v6-c-page__sidebar">
1768
+ <div class="pf-v6-c-page__sidebar-body">
1769
1769
  <nav
1770
- class="pf-v5-c-nav"
1770
+ class="pf-v6-c-nav"
1771
1771
  id="jump-links-drawer-primary-nav"
1772
1772
  aria-label="Global"
1773
1773
  >
1774
- <ul class="pf-v5-c-nav__list" role="list">
1775
- <li class="pf-v5-c-nav__item">
1776
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
1774
+ <ul class="pf-v6-c-nav__list" role="list">
1775
+ <li class="pf-v6-c-nav__item">
1776
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
1777
1777
  </li>
1778
- <li class="pf-v5-c-nav__item">
1778
+ <li class="pf-v6-c-nav__item">
1779
1779
  <a
1780
1780
  href="#"
1781
- class="pf-v5-c-nav__link pf-m-current"
1781
+ class="pf-v6-c-nav__link pf-m-current"
1782
1782
  aria-current="page"
1783
1783
  >Policy</a>
1784
1784
  </li>
1785
- <li class="pf-v5-c-nav__item">
1786
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
1785
+ <li class="pf-v6-c-nav__item">
1786
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1787
1787
  </li>
1788
- <li class="pf-v5-c-nav__item">
1789
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
1788
+ <li class="pf-v6-c-nav__item">
1789
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
1790
1790
  </li>
1791
- <li class="pf-v5-c-nav__item">
1792
- <a href="#" class="pf-v5-c-nav__link">Server</a>
1791
+ <li class="pf-v6-c-nav__item">
1792
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
1793
1793
  </li>
1794
1794
  </ul>
1795
1795
  </nav>
1796
1796
  </div>
1797
1797
  </div>
1798
1798
  <main
1799
- class="pf-v5-c-page__main"
1799
+ class="pf-v6-c-page__main"
1800
1800
  tabindex="-1"
1801
1801
  id="main-content-jump-links-drawer"
1802
1802
  >
1803
- <div class="pf-v5-c-drawer">
1804
- <div class="pf-v5-c-drawer__main">
1803
+ <div class="pf-v6-c-drawer">
1804
+ <div class="pf-v6-c-drawer__main">
1805
1805
  <div
1806
- class="pf-v5-c-drawer__content"
1806
+ class="pf-v6-c-drawer__content"
1807
1807
  id="jump-links-drawer-drawer-scrollable-container"
1808
1808
  >
1809
- <div class="pf-v5-c-drawer__body">
1810
- <div class="pf-v5-c-sidebar">
1811
- <div class="pf-v5-c-sidebar__main">
1812
- <div class="pf-v5-c-sidebar__panel pf-m-sticky pf-m-gutter">
1813
- <section class="pf-v5-c-page__main-section pf-m-light">
1809
+ <div class="pf-v6-c-drawer__body">
1810
+ <div class="pf-v6-c-sidebar">
1811
+ <div class="pf-v6-c-sidebar__main">
1812
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
1813
+ <section class="pf-v6-c-page__main-section pf-m-light">
1814
1814
  <nav
1815
- class="pf-v5-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1815
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
1816
1816
  >
1817
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
1818
- <ul class="pf-v5-c-jump-links__list" role="list">
1819
- <li class="pf-v5-c-jump-links__item pf-m-current">
1820
- <span class="pf-v5-c-jump-links__link">
1817
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
1818
+ <ul class="pf-v6-c-jump-links__list" role="list">
1819
+ <li class="pf-v6-c-jump-links__item pf-m-current">
1820
+ <span class="pf-v6-c-jump-links__link">
1821
1821
  <a
1822
- class="pf-v5-c-button pf-m-link"
1822
+ class="pf-v6-c-button pf-m-link"
1823
1823
  href="#jump-links-drawer-jump-links-first"
1824
1824
  >
1825
1825
  <span
1826
- class="pf-v5-c-jump-links__link-text"
1826
+ class="pf-v6-c-jump-links__link-text"
1827
1827
  >First section</span>
1828
1828
  </a>
1829
1829
  </span>
1830
1830
  </li>
1831
- <li class="pf-v5-c-jump-links__item">
1832
- <span class="pf-v5-c-jump-links__link">
1831
+ <li class="pf-v6-c-jump-links__item">
1832
+ <span class="pf-v6-c-jump-links__link">
1833
1833
  <a
1834
- class="pf-v5-c-button pf-m-link"
1834
+ class="pf-v6-c-button pf-m-link"
1835
1835
  href="#jump-links-drawer-jump-links-second"
1836
1836
  >
1837
1837
  <span
1838
- class="pf-v5-c-jump-links__link-text"
1838
+ class="pf-v6-c-jump-links__link-text"
1839
1839
  >Second section</span>
1840
1840
  </a>
1841
1841
  </span>
1842
1842
  </li>
1843
- <li class="pf-v5-c-jump-links__item">
1844
- <span class="pf-v5-c-jump-links__link">
1843
+ <li class="pf-v6-c-jump-links__item">
1844
+ <span class="pf-v6-c-jump-links__link">
1845
1845
  <a
1846
- class="pf-v5-c-button pf-m-link"
1846
+ class="pf-v6-c-button pf-m-link"
1847
1847
  href="#jump-links-drawer-jump-links-third"
1848
1848
  >
1849
1849
  <span
1850
- class="pf-v5-c-jump-links__link-text"
1850
+ class="pf-v6-c-jump-links__link-text"
1851
1851
  >Third section</span>
1852
1852
  </a>
1853
1853
  </span>
1854
1854
  </li>
1855
- <li class="pf-v5-c-jump-links__item">
1856
- <span class="pf-v5-c-jump-links__link">
1855
+ <li class="pf-v6-c-jump-links__item">
1856
+ <span class="pf-v6-c-jump-links__link">
1857
1857
  <a
1858
- class="pf-v5-c-button pf-m-link"
1858
+ class="pf-v6-c-button pf-m-link"
1859
1859
  href="#jump-links-drawer-jump-links-fourth"
1860
1860
  >
1861
1861
  <span
1862
- class="pf-v5-c-jump-links__link-text"
1862
+ class="pf-v6-c-jump-links__link-text"
1863
1863
  >Fourth section</span>
1864
1864
  </a>
1865
1865
  </span>
1866
1866
  </li>
1867
- <li class="pf-v5-c-jump-links__item">
1868
- <span class="pf-v5-c-jump-links__link">
1867
+ <li class="pf-v6-c-jump-links__item">
1868
+ <span class="pf-v6-c-jump-links__link">
1869
1869
  <a
1870
- class="pf-v5-c-button pf-m-link"
1870
+ class="pf-v6-c-button pf-m-link"
1871
1871
  href="#jump-links-drawer-jump-links-fifth"
1872
1872
  >
1873
1873
  <span
1874
- class="pf-v5-c-jump-links__link-text"
1874
+ class="pf-v6-c-jump-links__link-text"
1875
1875
  >Fifth section</span>
1876
1876
  </a>
1877
1877
  </span>
@@ -1880,9 +1880,9 @@ section: components
1880
1880
  </nav>
1881
1881
  </section>
1882
1882
  </div>
1883
- <div class="pf-v5-c-sidebar__content">
1884
- <section class="pf-v5-c-page__main-section pf-m-light">
1885
- <div class="pf-v5-c-content">
1883
+ <div class="pf-v6-c-sidebar__content">
1884
+ <section class="pf-v6-c-page__main-section pf-m-light">
1885
+ <div class="pf-v6-c-content">
1886
1886
  <p>
1887
1887
  <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
1888
1888
  </p>
@@ -1912,13 +1912,13 @@ section: components
1912
1912
  </div>
1913
1913
  </div>
1914
1914
  </div>
1915
- <div class="pf-v5-c-drawer__panel" hidden>
1916
- <div class="pf-v5-c-drawer__head">
1915
+ <div class="pf-v6-c-drawer__panel" hidden>
1916
+ <div class="pf-v6-c-drawer__head">
1917
1917
  <span>Drawer panel header content</span>
1918
- <div class="pf-v5-c-drawer__actions">
1919
- <div class="pf-v5-c-drawer__close">
1918
+ <div class="pf-v6-c-drawer__actions">
1919
+ <div class="pf-v6-c-drawer__close">
1920
1920
  <button
1921
- class="pf-v5-c-button pf-m-plain"
1921
+ class="pf-v6-c-button pf-m-plain"
1922
1922
  type="button"
1923
1923
  aria-label="Close drawer panel"
1924
1924
  >
@@ -1928,9 +1928,9 @@ section: components
1928
1928
  </div>
1929
1929
  </div>
1930
1930
  <div
1931
- class="pf-v5-c-drawer__description"
1931
+ class="pf-v6-c-drawer__description"
1932
1932
  >This is a helpful description of the drawer panel.</div>
1933
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
1933
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
1934
1934
  </div>
1935
1935
  </div>
1936
1936
  </div>
@@ -1942,25 +1942,25 @@ section: components
1942
1942
  ### Jump links in expanded drawer
1943
1943
 
1944
1944
  ```html isFullscreen
1945
- <div class="pf-v5-c-page" id="jump-links-drawer-expanded">
1946
- <div class="pf-v5-c-skip-to-content">
1945
+ <div class="pf-v6-c-page" id="jump-links-drawer-expanded">
1946
+ <div class="pf-v6-c-skip-to-content">
1947
1947
  <a
1948
- class="pf-v5-c-button pf-m-primary"
1948
+ class="pf-v6-c-button pf-m-primary"
1949
1949
  href="#main-content-jump-links-drawer-expanded"
1950
1950
  >Skip to content</a>
1951
1951
  </div>
1952
- <header class="pf-v5-c-masthead" id="jump-links-drawer-expanded-masthead">
1953
- <span class="pf-v5-c-masthead__toggle">
1952
+ <header class="pf-v6-c-masthead" id="jump-links-drawer-expanded-masthead">
1953
+ <span class="pf-v6-c-masthead__toggle">
1954
1954
  <button
1955
- class="pf-v5-c-button pf-m-plain"
1955
+ class="pf-v6-c-button pf-m-plain"
1956
1956
  type="button"
1957
1957
  aria-label="Global navigation"
1958
1958
  >
1959
1959
  <i class="fas fa-bars" aria-hidden="true"></i>
1960
1960
  </button>
1961
1961
  </span>
1962
- <div class="pf-v5-c-masthead__main">
1963
- <a class="pf-v5-c-masthead__brand" href="#">
1962
+ <div class="pf-v6-c-masthead__main">
1963
+ <a class="pf-v6-c-masthead__brand" href="#">
1964
1964
  <svg height="40px" viewBox="0 0 679 158">
1965
1965
  <title>PF-HorizontalLogo-Color</title>
1966
1966
  <defs>
@@ -2033,37 +2033,37 @@ section: components
2033
2033
  </svg>
2034
2034
  </a>
2035
2035
  </div>
2036
- <div class="pf-v5-c-masthead__content">
2036
+ <div class="pf-v6-c-masthead__content">
2037
2037
  <div
2038
- class="pf-v5-c-toolbar pf-m-static"
2038
+ class="pf-v6-c-toolbar pf-m-static"
2039
2039
  id="jump-links-drawer-expanded-masthead-toolbar"
2040
2040
  >
2041
- <div class="pf-v5-c-toolbar__content">
2042
- <div class="pf-v5-c-toolbar__content-section">
2043
- <div class="pf-v5-c-toolbar__item">
2041
+ <div class="pf-v6-c-toolbar__content">
2042
+ <div class="pf-v6-c-toolbar__content-section">
2043
+ <div class="pf-v6-c-toolbar__item">
2044
2044
  <button
2045
- class="pf-v5-c-menu-toggle"
2045
+ class="pf-v6-c-menu-toggle"
2046
2046
  type="button"
2047
2047
  aria-expanded="false"
2048
2048
  >
2049
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
2050
- <span class="pf-v5-c-menu-toggle__controls">
2051
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2049
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
2050
+ <span class="pf-v6-c-menu-toggle__controls">
2051
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2052
2052
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2053
2053
  </span>
2054
2054
  </span>
2055
2055
  </button>
2056
2056
  </div>
2057
2057
 
2058
- <div class="pf-v5-c-toolbar__item">
2058
+ <div class="pf-v6-c-toolbar__item">
2059
2059
  <button
2060
- class="pf-v5-c-menu-toggle"
2060
+ class="pf-v6-c-menu-toggle"
2061
2061
  type="button"
2062
2062
  aria-expanded="false"
2063
2063
  >
2064
- <span class="pf-v5-c-menu-toggle__text">Services</span>
2065
- <span class="pf-v5-c-menu-toggle__controls">
2066
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2064
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
2065
+ <span class="pf-v6-c-menu-toggle__controls">
2066
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2067
2067
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2068
2068
  </span>
2069
2069
  </span>
@@ -2071,56 +2071,56 @@ section: components
2071
2071
  </div>
2072
2072
 
2073
2073
  <div
2074
- 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"
2074
+ 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"
2075
2075
  >
2076
2076
  <div
2077
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2077
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2078
2078
  >
2079
- <div class="pf-v5-c-toolbar__item">
2079
+ <div class="pf-v6-c-toolbar__item">
2080
2080
  <button
2081
- class="pf-v5-c-menu-toggle pf-m-plain"
2081
+ class="pf-v6-c-menu-toggle pf-m-plain"
2082
2082
  type="button"
2083
2083
  aria-expanded="false"
2084
2084
  aria-label="Application launcher"
2085
2085
  >
2086
- <span class="pf-v5-c-menu-toggle__icon">
2086
+ <span class="pf-v6-c-menu-toggle__icon">
2087
2087
  <i class="fas fa-th" aria-hidden="true"></i>
2088
2088
  </span>
2089
2089
  </button>
2090
2090
  </div>
2091
- <div class="pf-v5-c-toolbar__item">
2091
+ <div class="pf-v6-c-toolbar__item">
2092
2092
  <button
2093
- class="pf-v5-c-menu-toggle pf-m-plain"
2093
+ class="pf-v6-c-menu-toggle pf-m-plain"
2094
2094
  type="button"
2095
2095
  aria-expanded="false"
2096
2096
  aria-label="Settings"
2097
2097
  >
2098
- <span class="pf-v5-c-menu-toggle__icon">
2098
+ <span class="pf-v6-c-menu-toggle__icon">
2099
2099
  <i class="fas fa-cog" aria-hidden="true"></i>
2100
2100
  </span>
2101
2101
  </button>
2102
2102
  </div>
2103
- <div class="pf-v5-c-toolbar__item">
2103
+ <div class="pf-v6-c-toolbar__item">
2104
2104
  <button
2105
- class="pf-v5-c-menu-toggle pf-m-plain"
2105
+ class="pf-v6-c-menu-toggle pf-m-plain"
2106
2106
  type="button"
2107
2107
  aria-expanded="false"
2108
2108
  aria-label="Help"
2109
2109
  >
2110
- <span class="pf-v5-c-menu-toggle__icon">
2110
+ <span class="pf-v6-c-menu-toggle__icon">
2111
2111
  <i class="fas fa-question-circle" aria-hidden="true"></i>
2112
2112
  </span>
2113
2113
  </button>
2114
2114
  </div>
2115
2115
  </div>
2116
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2116
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
2117
2117
  <button
2118
- class="pf-v5-c-menu-toggle pf-m-plain"
2118
+ class="pf-v6-c-menu-toggle pf-m-plain"
2119
2119
  type="button"
2120
2120
  aria-expanded="false"
2121
2121
  aria-label="Actions"
2122
2122
  >
2123
- <span class="pf-v5-c-menu-toggle__icon">
2123
+ <span class="pf-v6-c-menu-toggle__icon">
2124
2124
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2125
2125
  </span>
2126
2126
  </button>
@@ -2131,114 +2131,114 @@ section: components
2131
2131
  </div>
2132
2132
  </div>
2133
2133
  </header>
2134
- <div class="pf-v5-c-page__sidebar">
2135
- <div class="pf-v5-c-page__sidebar-body">
2134
+ <div class="pf-v6-c-page__sidebar">
2135
+ <div class="pf-v6-c-page__sidebar-body">
2136
2136
  <nav
2137
- class="pf-v5-c-nav"
2137
+ class="pf-v6-c-nav"
2138
2138
  id="jump-links-drawer-expanded-primary-nav"
2139
2139
  aria-label="Global"
2140
2140
  >
2141
- <ul class="pf-v5-c-nav__list" role="list">
2142
- <li class="pf-v5-c-nav__item">
2143
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
2141
+ <ul class="pf-v6-c-nav__list" role="list">
2142
+ <li class="pf-v6-c-nav__item">
2143
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
2144
2144
  </li>
2145
- <li class="pf-v5-c-nav__item">
2145
+ <li class="pf-v6-c-nav__item">
2146
2146
  <a
2147
2147
  href="#"
2148
- class="pf-v5-c-nav__link pf-m-current"
2148
+ class="pf-v6-c-nav__link pf-m-current"
2149
2149
  aria-current="page"
2150
2150
  >Policy</a>
2151
2151
  </li>
2152
- <li class="pf-v5-c-nav__item">
2153
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
2152
+ <li class="pf-v6-c-nav__item">
2153
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
2154
2154
  </li>
2155
- <li class="pf-v5-c-nav__item">
2156
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
2155
+ <li class="pf-v6-c-nav__item">
2156
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
2157
2157
  </li>
2158
- <li class="pf-v5-c-nav__item">
2159
- <a href="#" class="pf-v5-c-nav__link">Server</a>
2158
+ <li class="pf-v6-c-nav__item">
2159
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
2160
2160
  </li>
2161
2161
  </ul>
2162
2162
  </nav>
2163
2163
  </div>
2164
2164
  </div>
2165
2165
  <main
2166
- class="pf-v5-c-page__main"
2166
+ class="pf-v6-c-page__main"
2167
2167
  tabindex="-1"
2168
2168
  id="main-content-jump-links-drawer-expanded"
2169
2169
  >
2170
- <div class="pf-v5-c-drawer pf-m-expanded">
2171
- <div class="pf-v5-c-drawer__main">
2170
+ <div class="pf-v6-c-drawer pf-m-expanded">
2171
+ <div class="pf-v6-c-drawer__main">
2172
2172
  <div
2173
- class="pf-v5-c-drawer__content"
2173
+ class="pf-v6-c-drawer__content"
2174
2174
  id="jump-links-drawer-expanded-drawer-scrollable-container"
2175
2175
  >
2176
- <div class="pf-v5-c-drawer__body">
2177
- <div class="pf-v5-c-sidebar">
2178
- <div class="pf-v5-c-sidebar__main">
2179
- <div class="pf-v5-c-sidebar__panel pf-m-sticky pf-m-gutter">
2180
- <section class="pf-v5-c-page__main-section pf-m-light">
2176
+ <div class="pf-v6-c-drawer__body">
2177
+ <div class="pf-v6-c-sidebar">
2178
+ <div class="pf-v6-c-sidebar__main">
2179
+ <div class="pf-v6-c-sidebar__panel pf-m-sticky pf-m-gutter">
2180
+ <section class="pf-v6-c-page__main-section pf-m-light">
2181
2181
  <nav
2182
- class="pf-v5-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
2182
+ class="pf-v6-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
2183
2183
  >
2184
- <div class="pf-v5-c-jump-links__label">Jump to section</div>
2185
- <ul class="pf-v5-c-jump-links__list" role="list">
2186
- <li class="pf-v5-c-jump-links__item pf-m-current">
2187
- <span class="pf-v5-c-jump-links__link">
2184
+ <div class="pf-v6-c-jump-links__label">Jump to section</div>
2185
+ <ul class="pf-v6-c-jump-links__list" role="list">
2186
+ <li class="pf-v6-c-jump-links__item pf-m-current">
2187
+ <span class="pf-v6-c-jump-links__link">
2188
2188
  <a
2189
- class="pf-v5-c-button pf-m-link"
2189
+ class="pf-v6-c-button pf-m-link"
2190
2190
  href="#jump-links-drawer-expanded-jump-links-first"
2191
2191
  >
2192
2192
  <span
2193
- class="pf-v5-c-jump-links__link-text"
2193
+ class="pf-v6-c-jump-links__link-text"
2194
2194
  >First section</span>
2195
2195
  </a>
2196
2196
  </span>
2197
2197
  </li>
2198
- <li class="pf-v5-c-jump-links__item">
2199
- <span class="pf-v5-c-jump-links__link">
2198
+ <li class="pf-v6-c-jump-links__item">
2199
+ <span class="pf-v6-c-jump-links__link">
2200
2200
  <a
2201
- class="pf-v5-c-button pf-m-link"
2201
+ class="pf-v6-c-button pf-m-link"
2202
2202
  href="#jump-links-drawer-expanded-jump-links-second"
2203
2203
  >
2204
2204
  <span
2205
- class="pf-v5-c-jump-links__link-text"
2205
+ class="pf-v6-c-jump-links__link-text"
2206
2206
  >Second section</span>
2207
2207
  </a>
2208
2208
  </span>
2209
2209
  </li>
2210
- <li class="pf-v5-c-jump-links__item">
2211
- <span class="pf-v5-c-jump-links__link">
2210
+ <li class="pf-v6-c-jump-links__item">
2211
+ <span class="pf-v6-c-jump-links__link">
2212
2212
  <a
2213
- class="pf-v5-c-button pf-m-link"
2213
+ class="pf-v6-c-button pf-m-link"
2214
2214
  href="#jump-links-drawer-expanded-jump-links-third"
2215
2215
  >
2216
2216
  <span
2217
- class="pf-v5-c-jump-links__link-text"
2217
+ class="pf-v6-c-jump-links__link-text"
2218
2218
  >Third section</span>
2219
2219
  </a>
2220
2220
  </span>
2221
2221
  </li>
2222
- <li class="pf-v5-c-jump-links__item">
2223
- <span class="pf-v5-c-jump-links__link">
2222
+ <li class="pf-v6-c-jump-links__item">
2223
+ <span class="pf-v6-c-jump-links__link">
2224
2224
  <a
2225
- class="pf-v5-c-button pf-m-link"
2225
+ class="pf-v6-c-button pf-m-link"
2226
2226
  href="#jump-links-drawer-expanded-jump-links-fourth"
2227
2227
  >
2228
2228
  <span
2229
- class="pf-v5-c-jump-links__link-text"
2229
+ class="pf-v6-c-jump-links__link-text"
2230
2230
  >Fourth section</span>
2231
2231
  </a>
2232
2232
  </span>
2233
2233
  </li>
2234
- <li class="pf-v5-c-jump-links__item">
2235
- <span class="pf-v5-c-jump-links__link">
2234
+ <li class="pf-v6-c-jump-links__item">
2235
+ <span class="pf-v6-c-jump-links__link">
2236
2236
  <a
2237
- class="pf-v5-c-button pf-m-link"
2237
+ class="pf-v6-c-button pf-m-link"
2238
2238
  href="#jump-links-drawer-expanded-jump-links-fifth"
2239
2239
  >
2240
2240
  <span
2241
- class="pf-v5-c-jump-links__link-text"
2241
+ class="pf-v6-c-jump-links__link-text"
2242
2242
  >Fifth section</span>
2243
2243
  </a>
2244
2244
  </span>
@@ -2247,9 +2247,9 @@ section: components
2247
2247
  </nav>
2248
2248
  </section>
2249
2249
  </div>
2250
- <div class="pf-v5-c-sidebar__content">
2251
- <section class="pf-v5-c-page__main-section pf-m-light">
2252
- <div class="pf-v5-c-content">
2250
+ <div class="pf-v6-c-sidebar__content">
2251
+ <section class="pf-v6-c-page__main-section pf-m-light">
2252
+ <div class="pf-v6-c-content">
2253
2253
  <p>
2254
2254
  <b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
2255
2255
  </p>
@@ -2285,13 +2285,13 @@ section: components
2285
2285
  </div>
2286
2286
  </div>
2287
2287
  </div>
2288
- <div class="pf-v5-c-drawer__panel">
2289
- <div class="pf-v5-c-drawer__head">
2288
+ <div class="pf-v6-c-drawer__panel">
2289
+ <div class="pf-v6-c-drawer__head">
2290
2290
  <span>Drawer panel header content</span>
2291
- <div class="pf-v5-c-drawer__actions">
2292
- <div class="pf-v5-c-drawer__close">
2291
+ <div class="pf-v6-c-drawer__actions">
2292
+ <div class="pf-v6-c-drawer__close">
2293
2293
  <button
2294
- class="pf-v5-c-button pf-m-plain"
2294
+ class="pf-v6-c-button pf-m-plain"
2295
2295
  type="button"
2296
2296
  aria-label="Close drawer panel"
2297
2297
  >
@@ -2301,9 +2301,9 @@ section: components
2301
2301
  </div>
2302
2302
  </div>
2303
2303
  <div
2304
- class="pf-v5-c-drawer__description"
2304
+ class="pf-v6-c-drawer__description"
2305
2305
  >This is a helpful description of the drawer panel.</div>
2306
- <div class="pf-v5-c-drawer__body">Drawer panel body content</div>
2306
+ <div class="pf-v6-c-drawer__body">Drawer panel body content</div>
2307
2307
  </div>
2308
2308
  </div>
2309
2309
  </div>