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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +5 -5
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -7,25 +7,25 @@ wrapperTag: div
7
7
  ### Basic
8
8
 
9
9
  ```html isFullscreen
10
- <div class="pf-v5-c-page" id="masthead-basic-example">
11
- <div class="pf-v5-c-skip-to-content">
10
+ <div class="pf-v6-c-page" id="masthead-basic-example">
11
+ <div class="pf-v6-c-skip-to-content">
12
12
  <a
13
- class="pf-v5-c-button pf-m-primary"
13
+ class="pf-v6-c-button pf-m-primary"
14
14
  href="#main-content-masthead-basic-example"
15
15
  >Skip to content</a>
16
16
  </div>
17
- <header class="pf-v5-c-masthead" id="masthead-basic-example-masthead">
18
- <span class="pf-v5-c-masthead__toggle">
17
+ <header class="pf-v6-c-masthead" id="masthead-basic-example-masthead">
18
+ <span class="pf-v6-c-masthead__toggle">
19
19
  <button
20
- class="pf-v5-c-button pf-m-plain"
20
+ class="pf-v6-c-button pf-m-plain"
21
21
  type="button"
22
22
  aria-label="Global navigation"
23
23
  >
24
24
  <i class="fas fa-bars" aria-hidden="true"></i>
25
25
  </button>
26
26
  </span>
27
- <div class="pf-v5-c-masthead__main">
28
- <a class="pf-v5-c-masthead__brand" href="#">
27
+ <div class="pf-v6-c-masthead__main">
28
+ <a class="pf-v6-c-masthead__brand" href="#">
29
29
  <svg height="40px" viewBox="0 0 679 158">
30
30
  <title>PF-HorizontalLogo-Color</title>
31
31
  <defs>
@@ -98,22 +98,22 @@ wrapperTag: div
98
98
  </svg>
99
99
  </a>
100
100
  </div>
101
- <div class="pf-v5-c-masthead__content">
101
+ <div class="pf-v6-c-masthead__content">
102
102
  <div
103
- class="pf-v5-c-toolbar pf-m-static"
103
+ class="pf-v6-c-toolbar pf-m-static"
104
104
  id="masthead-basic-example-masthead-toolbar"
105
105
  >
106
- <div class="pf-v5-c-toolbar__content">
107
- <div class="pf-v5-c-toolbar__content-section">
108
- <div class="pf-v5-c-toolbar__group pf-m-align-end">
109
- <div class="pf-v5-c-toolbar__item">
106
+ <div class="pf-v6-c-toolbar__content">
107
+ <div class="pf-v6-c-toolbar__content-section">
108
+ <div class="pf-v6-c-toolbar__group pf-m-align-end">
109
+ <div class="pf-v6-c-toolbar__item">
110
110
  <button
111
- class="pf-v5-c-menu-toggle pf-m-plain"
111
+ class="pf-v6-c-menu-toggle pf-m-plain"
112
112
  type="button"
113
113
  aria-expanded="false"
114
114
  aria-label="Actions"
115
115
  >
116
- <span class="pf-v5-c-menu-toggle__icon">
116
+ <span class="pf-v6-c-menu-toggle__icon">
117
117
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
118
118
  </span>
119
119
  </button>
@@ -124,71 +124,71 @@ wrapperTag: div
124
124
  </div>
125
125
  </div>
126
126
  </header>
127
- <div class="pf-v5-c-page__sidebar">
128
- <div class="pf-v5-c-page__sidebar-body">
127
+ <div class="pf-v6-c-page__sidebar">
128
+ <div class="pf-v6-c-page__sidebar-body">
129
129
  <nav
130
- class="pf-v5-c-nav"
130
+ class="pf-v6-c-nav"
131
131
  id="masthead-basic-example-primary-nav"
132
132
  aria-label="Global"
133
133
  >
134
- <ul class="pf-v5-c-nav__list" role="list">
135
- <li class="pf-v5-c-nav__item">
136
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
134
+ <ul class="pf-v6-c-nav__list" role="list">
135
+ <li class="pf-v6-c-nav__item">
136
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
137
137
  </li>
138
- <li class="pf-v5-c-nav__item">
138
+ <li class="pf-v6-c-nav__item">
139
139
  <a
140
140
  href="#"
141
- class="pf-v5-c-nav__link pf-m-current"
141
+ class="pf-v6-c-nav__link pf-m-current"
142
142
  aria-current="page"
143
143
  >Policy</a>
144
144
  </li>
145
- <li class="pf-v5-c-nav__item">
146
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
145
+ <li class="pf-v6-c-nav__item">
146
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
147
147
  </li>
148
- <li class="pf-v5-c-nav__item">
149
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
148
+ <li class="pf-v6-c-nav__item">
149
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
150
150
  </li>
151
- <li class="pf-v5-c-nav__item">
152
- <a href="#" class="pf-v5-c-nav__link">Server</a>
151
+ <li class="pf-v6-c-nav__item">
152
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
153
153
  </li>
154
154
  </ul>
155
155
  </nav>
156
156
  </div>
157
157
  </div>
158
158
  <main
159
- class="pf-v5-c-page__main"
159
+ class="pf-v6-c-page__main"
160
160
  tabindex="-1"
161
161
  id="main-content-masthead-basic-example"
162
162
  >
163
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
164
- <div class="pf-v5-c-page__main-body">
165
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
166
- <ol class="pf-v5-c-breadcrumb__list" role="list">
167
- <li class="pf-v5-c-breadcrumb__item">
168
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
163
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
164
+ <div class="pf-v6-c-page__main-body">
165
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
166
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
167
+ <li class="pf-v6-c-breadcrumb__item">
168
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
169
169
  </li>
170
- <li class="pf-v5-c-breadcrumb__item">
171
- <span class="pf-v5-c-breadcrumb__item-divider">
170
+ <li class="pf-v6-c-breadcrumb__item">
171
+ <span class="pf-v6-c-breadcrumb__item-divider">
172
172
  <i class="fas fa-angle-right" aria-hidden="true"></i>
173
173
  </span>
174
174
 
175
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
175
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
176
176
  </li>
177
- <li class="pf-v5-c-breadcrumb__item">
178
- <span class="pf-v5-c-breadcrumb__item-divider">
177
+ <li class="pf-v6-c-breadcrumb__item">
178
+ <span class="pf-v6-c-breadcrumb__item-divider">
179
179
  <i class="fas fa-angle-right" aria-hidden="true"></i>
180
180
  </span>
181
181
 
182
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
182
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
183
183
  </li>
184
- <li class="pf-v5-c-breadcrumb__item">
185
- <span class="pf-v5-c-breadcrumb__item-divider">
184
+ <li class="pf-v6-c-breadcrumb__item">
185
+ <span class="pf-v6-c-breadcrumb__item-divider">
186
186
  <i class="fas fa-angle-right" aria-hidden="true"></i>
187
187
  </span>
188
188
 
189
189
  <a
190
190
  href="#"
191
- class="pf-v5-c-breadcrumb__link pf-m-current"
191
+ class="pf-v6-c-breadcrumb__link pf-m-current"
192
192
  aria-current="page"
193
193
  >Section landing</a>
194
194
  </li>
@@ -196,46 +196,46 @@ wrapperTag: div
196
196
  </nav>
197
197
  </div>
198
198
  </section>
199
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
200
- <div class="pf-v5-c-page__main-body">
201
- <div class="pf-v5-c-content">
199
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
200
+ <div class="pf-v6-c-page__main-body">
201
+ <div class="pf-v6-c-content">
202
202
  <h1>Main title</h1>
203
203
  <p>This is a full page demo.</p>
204
204
  </div>
205
205
  </div>
206
206
  </section>
207
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
208
- <div class="pf-v5-c-page__main-body">
209
- <div class="pf-v5-l-gallery pf-m-gutter">
210
- <div class="pf-v5-c-card">
211
- <div class="pf-v5-c-card__body">This is a card</div>
207
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
208
+ <div class="pf-v6-c-page__main-body">
209
+ <div class="pf-v6-l-gallery pf-m-gutter">
210
+ <div class="pf-v6-c-card">
211
+ <div class="pf-v6-c-card__body">This is a card</div>
212
212
  </div>
213
- <div class="pf-v5-c-card">
214
- <div class="pf-v5-c-card__body">This is a card</div>
213
+ <div class="pf-v6-c-card">
214
+ <div class="pf-v6-c-card__body">This is a card</div>
215
215
  </div>
216
- <div class="pf-v5-c-card">
217
- <div class="pf-v5-c-card__body">This is a card</div>
216
+ <div class="pf-v6-c-card">
217
+ <div class="pf-v6-c-card__body">This is a card</div>
218
218
  </div>
219
- <div class="pf-v5-c-card">
220
- <div class="pf-v5-c-card__body">This is a card</div>
219
+ <div class="pf-v6-c-card">
220
+ <div class="pf-v6-c-card__body">This is a card</div>
221
221
  </div>
222
- <div class="pf-v5-c-card">
223
- <div class="pf-v5-c-card__body">This is a card</div>
222
+ <div class="pf-v6-c-card">
223
+ <div class="pf-v6-c-card__body">This is a card</div>
224
224
  </div>
225
- <div class="pf-v5-c-card">
226
- <div class="pf-v5-c-card__body">This is a card</div>
225
+ <div class="pf-v6-c-card">
226
+ <div class="pf-v6-c-card__body">This is a card</div>
227
227
  </div>
228
- <div class="pf-v5-c-card">
229
- <div class="pf-v5-c-card__body">This is a card</div>
228
+ <div class="pf-v6-c-card">
229
+ <div class="pf-v6-c-card__body">This is a card</div>
230
230
  </div>
231
- <div class="pf-v5-c-card">
232
- <div class="pf-v5-c-card__body">This is a card</div>
231
+ <div class="pf-v6-c-card">
232
+ <div class="pf-v6-c-card__body">This is a card</div>
233
233
  </div>
234
- <div class="pf-v5-c-card">
235
- <div class="pf-v5-c-card__body">This is a card</div>
234
+ <div class="pf-v6-c-card">
235
+ <div class="pf-v6-c-card__body">This is a card</div>
236
236
  </div>
237
- <div class="pf-v5-c-card">
238
- <div class="pf-v5-c-card__body">This is a card</div>
237
+ <div class="pf-v6-c-card">
238
+ <div class="pf-v6-c-card__body">This is a card</div>
239
239
  </div>
240
240
  </div>
241
241
  </div>
@@ -248,28 +248,28 @@ wrapperTag: div
248
248
  ### With context selector and dropdown
249
249
 
250
250
  ```html isFullscreen
251
- <div class="pf-v5-c-page" id="masthead-context-selecton-drilldown-example">
252
- <div class="pf-v5-c-skip-to-content">
251
+ <div class="pf-v6-c-page" id="masthead-context-selecton-drilldown-example">
252
+ <div class="pf-v6-c-skip-to-content">
253
253
  <a
254
- class="pf-v5-c-button pf-m-primary"
254
+ class="pf-v6-c-button pf-m-primary"
255
255
  href="#main-content-masthead-context-selecton-drilldown-example"
256
256
  >Skip to content</a>
257
257
  </div>
258
258
  <header
259
- class="pf-v5-c-masthead"
259
+ class="pf-v6-c-masthead"
260
260
  id="masthead-context-selecton-drilldown-example-masthead"
261
261
  >
262
- <span class="pf-v5-c-masthead__toggle">
262
+ <span class="pf-v6-c-masthead__toggle">
263
263
  <button
264
- class="pf-v5-c-button pf-m-plain"
264
+ class="pf-v6-c-button pf-m-plain"
265
265
  type="button"
266
266
  aria-label="Global navigation"
267
267
  >
268
268
  <i class="fas fa-bars" aria-hidden="true"></i>
269
269
  </button>
270
270
  </span>
271
- <div class="pf-v5-c-masthead__main">
272
- <a class="pf-v5-c-masthead__brand" href="#">
271
+ <div class="pf-v6-c-masthead__main">
272
+ <a class="pf-v6-c-masthead__brand" href="#">
273
273
  <svg height="40px" viewBox="0 0 679 158">
274
274
  <title>PF-HorizontalLogo-Color</title>
275
275
  <defs>
@@ -342,51 +342,51 @@ wrapperTag: div
342
342
  </svg>
343
343
  </a>
344
344
  </div>
345
- <div class="pf-v5-c-masthead__content">
345
+ <div class="pf-v6-c-masthead__content">
346
346
  <div
347
- class="pf-v5-c-toolbar pf-m-static"
347
+ class="pf-v6-c-toolbar pf-m-static"
348
348
  id="masthead-context-selecton-drilldown-example-masthead-toolbar"
349
349
  >
350
- <div class="pf-v5-c-toolbar__content">
351
- <div class="pf-v5-c-toolbar__content-section">
352
- <div class="pf-v5-c-toolbar__group pf-m-filter-group">
353
- <div class="pf-v5-c-toolbar__item">
350
+ <div class="pf-v6-c-toolbar__content">
351
+ <div class="pf-v6-c-toolbar__content-section">
352
+ <div class="pf-v6-c-toolbar__group pf-m-filter-group">
353
+ <div class="pf-v6-c-toolbar__item">
354
354
  <button
355
- class="pf-v5-c-menu-toggle pf-m-full-height"
355
+ class="pf-v6-c-menu-toggle pf-m-full-height"
356
356
  type="button"
357
357
  aria-expanded="false"
358
358
  >
359
- <span class="pf-v5-c-menu-toggle__text">Context selector</span>
360
- <span class="pf-v5-c-menu-toggle__controls">
361
- <span class="pf-v5-c-menu-toggle__toggle-icon">
359
+ <span class="pf-v6-c-menu-toggle__text">Context selector</span>
360
+ <span class="pf-v6-c-menu-toggle__controls">
361
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
362
362
  <i class="fas fa-caret-down" aria-hidden="true"></i>
363
363
  </span>
364
364
  </span>
365
365
  </button>
366
366
  </div>
367
- <div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-lg">
367
+ <div class="pf-v6-c-toolbar__item pf-m-hidden pf-m-visible-on-lg">
368
368
  <button
369
- class="pf-v5-c-menu-toggle pf-m-full-height"
369
+ class="pf-v6-c-menu-toggle pf-m-full-height"
370
370
  type="button"
371
371
  aria-expanded="false"
372
372
  >
373
- <span class="pf-v5-c-menu-toggle__text">Dropdown</span>
374
- <span class="pf-v5-c-menu-toggle__controls">
375
- <span class="pf-v5-c-menu-toggle__toggle-icon">
373
+ <span class="pf-v6-c-menu-toggle__text">Dropdown</span>
374
+ <span class="pf-v6-c-menu-toggle__controls">
375
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
376
376
  <i class="fas fa-caret-down" aria-hidden="true"></i>
377
377
  </span>
378
378
  </span>
379
379
  </button>
380
380
  </div>
381
381
  </div>
382
- <div class="pf-v5-c-toolbar__item pf-m-align-end">
382
+ <div class="pf-v6-c-toolbar__item pf-m-align-end">
383
383
  <button
384
- class="pf-v5-c-menu-toggle pf-m-plain"
384
+ class="pf-v6-c-menu-toggle pf-m-plain"
385
385
  type="button"
386
386
  aria-expanded="false"
387
387
  aria-label="Actions"
388
388
  >
389
- <span class="pf-v5-c-menu-toggle__icon">
389
+ <span class="pf-v6-c-menu-toggle__icon">
390
390
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
391
391
  </span>
392
392
  </button>
@@ -396,71 +396,71 @@ wrapperTag: div
396
396
  </div>
397
397
  </div>
398
398
  </header>
399
- <div class="pf-v5-c-page__sidebar">
400
- <div class="pf-v5-c-page__sidebar-body">
399
+ <div class="pf-v6-c-page__sidebar">
400
+ <div class="pf-v6-c-page__sidebar-body">
401
401
  <nav
402
- class="pf-v5-c-nav"
402
+ class="pf-v6-c-nav"
403
403
  id="masthead-context-selecton-drilldown-example-primary-nav"
404
404
  aria-label="Global"
405
405
  >
406
- <ul class="pf-v5-c-nav__list" role="list">
407
- <li class="pf-v5-c-nav__item">
408
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
406
+ <ul class="pf-v6-c-nav__list" role="list">
407
+ <li class="pf-v6-c-nav__item">
408
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
409
409
  </li>
410
- <li class="pf-v5-c-nav__item">
410
+ <li class="pf-v6-c-nav__item">
411
411
  <a
412
412
  href="#"
413
- class="pf-v5-c-nav__link pf-m-current"
413
+ class="pf-v6-c-nav__link pf-m-current"
414
414
  aria-current="page"
415
415
  >Policy</a>
416
416
  </li>
417
- <li class="pf-v5-c-nav__item">
418
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
417
+ <li class="pf-v6-c-nav__item">
418
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
419
419
  </li>
420
- <li class="pf-v5-c-nav__item">
421
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
420
+ <li class="pf-v6-c-nav__item">
421
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
422
422
  </li>
423
- <li class="pf-v5-c-nav__item">
424
- <a href="#" class="pf-v5-c-nav__link">Server</a>
423
+ <li class="pf-v6-c-nav__item">
424
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
425
425
  </li>
426
426
  </ul>
427
427
  </nav>
428
428
  </div>
429
429
  </div>
430
430
  <main
431
- class="pf-v5-c-page__main"
431
+ class="pf-v6-c-page__main"
432
432
  tabindex="-1"
433
433
  id="main-content-masthead-context-selecton-drilldown-example"
434
434
  >
435
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
436
- <div class="pf-v5-c-page__main-body">
437
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
438
- <ol class="pf-v5-c-breadcrumb__list" role="list">
439
- <li class="pf-v5-c-breadcrumb__item">
440
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
435
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
436
+ <div class="pf-v6-c-page__main-body">
437
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
438
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
439
+ <li class="pf-v6-c-breadcrumb__item">
440
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
441
441
  </li>
442
- <li class="pf-v5-c-breadcrumb__item">
443
- <span class="pf-v5-c-breadcrumb__item-divider">
442
+ <li class="pf-v6-c-breadcrumb__item">
443
+ <span class="pf-v6-c-breadcrumb__item-divider">
444
444
  <i class="fas fa-angle-right" aria-hidden="true"></i>
445
445
  </span>
446
446
 
447
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
447
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
448
448
  </li>
449
- <li class="pf-v5-c-breadcrumb__item">
450
- <span class="pf-v5-c-breadcrumb__item-divider">
449
+ <li class="pf-v6-c-breadcrumb__item">
450
+ <span class="pf-v6-c-breadcrumb__item-divider">
451
451
  <i class="fas fa-angle-right" aria-hidden="true"></i>
452
452
  </span>
453
453
 
454
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
454
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
455
455
  </li>
456
- <li class="pf-v5-c-breadcrumb__item">
457
- <span class="pf-v5-c-breadcrumb__item-divider">
456
+ <li class="pf-v6-c-breadcrumb__item">
457
+ <span class="pf-v6-c-breadcrumb__item-divider">
458
458
  <i class="fas fa-angle-right" aria-hidden="true"></i>
459
459
  </span>
460
460
 
461
461
  <a
462
462
  href="#"
463
- class="pf-v5-c-breadcrumb__link pf-m-current"
463
+ class="pf-v6-c-breadcrumb__link pf-m-current"
464
464
  aria-current="page"
465
465
  >Section landing</a>
466
466
  </li>
@@ -468,46 +468,46 @@ wrapperTag: div
468
468
  </nav>
469
469
  </div>
470
470
  </section>
471
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
472
- <div class="pf-v5-c-page__main-body">
473
- <div class="pf-v5-c-content">
471
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
472
+ <div class="pf-v6-c-page__main-body">
473
+ <div class="pf-v6-c-content">
474
474
  <h1>Main title</h1>
475
475
  <p>This is a full page demo.</p>
476
476
  </div>
477
477
  </div>
478
478
  </section>
479
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
480
- <div class="pf-v5-c-page__main-body">
481
- <div class="pf-v5-l-gallery pf-m-gutter">
482
- <div class="pf-v5-c-card">
483
- <div class="pf-v5-c-card__body">This is a card</div>
479
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
480
+ <div class="pf-v6-c-page__main-body">
481
+ <div class="pf-v6-l-gallery pf-m-gutter">
482
+ <div class="pf-v6-c-card">
483
+ <div class="pf-v6-c-card__body">This is a card</div>
484
484
  </div>
485
- <div class="pf-v5-c-card">
486
- <div class="pf-v5-c-card__body">This is a card</div>
485
+ <div class="pf-v6-c-card">
486
+ <div class="pf-v6-c-card__body">This is a card</div>
487
487
  </div>
488
- <div class="pf-v5-c-card">
489
- <div class="pf-v5-c-card__body">This is a card</div>
488
+ <div class="pf-v6-c-card">
489
+ <div class="pf-v6-c-card__body">This is a card</div>
490
490
  </div>
491
- <div class="pf-v5-c-card">
492
- <div class="pf-v5-c-card__body">This is a card</div>
491
+ <div class="pf-v6-c-card">
492
+ <div class="pf-v6-c-card__body">This is a card</div>
493
493
  </div>
494
- <div class="pf-v5-c-card">
495
- <div class="pf-v5-c-card__body">This is a card</div>
494
+ <div class="pf-v6-c-card">
495
+ <div class="pf-v6-c-card__body">This is a card</div>
496
496
  </div>
497
- <div class="pf-v5-c-card">
498
- <div class="pf-v5-c-card__body">This is a card</div>
497
+ <div class="pf-v6-c-card">
498
+ <div class="pf-v6-c-card__body">This is a card</div>
499
499
  </div>
500
- <div class="pf-v5-c-card">
501
- <div class="pf-v5-c-card__body">This is a card</div>
500
+ <div class="pf-v6-c-card">
501
+ <div class="pf-v6-c-card__body">This is a card</div>
502
502
  </div>
503
- <div class="pf-v5-c-card">
504
- <div class="pf-v5-c-card__body">This is a card</div>
503
+ <div class="pf-v6-c-card">
504
+ <div class="pf-v6-c-card__body">This is a card</div>
505
505
  </div>
506
- <div class="pf-v5-c-card">
507
- <div class="pf-v5-c-card__body">This is a card</div>
506
+ <div class="pf-v6-c-card">
507
+ <div class="pf-v6-c-card__body">This is a card</div>
508
508
  </div>
509
- <div class="pf-v5-c-card">
510
- <div class="pf-v5-c-card__body">This is a card</div>
509
+ <div class="pf-v6-c-card">
510
+ <div class="pf-v6-c-card__body">This is a card</div>
511
511
  </div>
512
512
  </div>
513
513
  </div>
@@ -520,28 +520,28 @@ wrapperTag: div
520
520
  ### With toolbar, filters
521
521
 
522
522
  ```html isFullscreen
523
- <div class="pf-v5-c-page" id="masthead-toolbar-filters-example">
524
- <div class="pf-v5-c-skip-to-content">
523
+ <div class="pf-v6-c-page" id="masthead-toolbar-filters-example">
524
+ <div class="pf-v6-c-skip-to-content">
525
525
  <a
526
- class="pf-v5-c-button pf-m-primary"
526
+ class="pf-v6-c-button pf-m-primary"
527
527
  href="#main-content-masthead-toolbar-filters-example"
528
528
  >Skip to content</a>
529
529
  </div>
530
530
  <header
531
- class="pf-v5-c-masthead"
531
+ class="pf-v6-c-masthead"
532
532
  id="masthead-toolbar-filters-example-masthead"
533
533
  >
534
- <span class="pf-v5-c-masthead__toggle">
534
+ <span class="pf-v6-c-masthead__toggle">
535
535
  <button
536
- class="pf-v5-c-button pf-m-plain"
536
+ class="pf-v6-c-button pf-m-plain"
537
537
  type="button"
538
538
  aria-label="Global navigation"
539
539
  >
540
540
  <i class="fas fa-bars" aria-hidden="true"></i>
541
541
  </button>
542
542
  </span>
543
- <div class="pf-v5-c-masthead__main">
544
- <a class="pf-v5-c-masthead__brand" href="#">
543
+ <div class="pf-v6-c-masthead__main">
544
+ <a class="pf-v6-c-masthead__brand" href="#">
545
545
  <svg height="40px" viewBox="0 0 679 158">
546
546
  <title>PF-HorizontalLogo-Color</title>
547
547
  <defs>
@@ -614,62 +614,62 @@ wrapperTag: div
614
614
  </svg>
615
615
  </a>
616
616
  </div>
617
- <div class="pf-v5-c-masthead__content">
617
+ <div class="pf-v6-c-masthead__content">
618
618
  <div
619
- class="pf-v5-c-toolbar pf-m-static"
619
+ class="pf-v6-c-toolbar pf-m-static"
620
620
  id="masthead-toolbar-filters-example-masthead-toolbar"
621
621
  >
622
- <div class="pf-v5-c-toolbar__content">
623
- <div class="pf-v5-c-toolbar__content-section">
622
+ <div class="pf-v6-c-toolbar__content">
623
+ <div class="pf-v6-c-toolbar__content-section">
624
624
  <div
625
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-end"
625
+ class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-end"
626
626
  >
627
- <div class="pf-v5-c-toolbar__toggle pf-m-show">
627
+ <div class="pf-v6-c-toolbar__toggle pf-m-show">
628
628
  <button
629
- class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
629
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
630
630
  type="button"
631
631
  aria-expanded="true"
632
632
  aria-label="Show filters"
633
633
  aria-controls="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
634
634
  >
635
- <span class="pf-v5-c-menu-toggle__icon">
635
+ <span class="pf-v6-c-menu-toggle__icon">
636
636
  <i class="fas fa-filter" aria-hidden="true"></i>
637
637
  </span>
638
638
  </button>
639
639
  </div>
640
- <div class="pf-v5-c-toolbar__item pf-m-search-filter">
640
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
641
641
  <div
642
- class="pf-v5-c-input-group"
642
+ class="pf-v6-c-input-group"
643
643
  aria-label="search filter"
644
644
  role="group"
645
645
  >
646
- <div class="pf-v5-c-input-group__item">
646
+ <div class="pf-v6-c-input-group__item">
647
647
  <button
648
- class="pf-v5-c-menu-toggle"
648
+ class="pf-v6-c-menu-toggle"
649
649
  type="button"
650
650
  aria-expanded="false"
651
651
  id="masthead-toolbar-filters-example-masthead-toolbar-search-filter-menu"
652
652
  >
653
- <span class="pf-v5-c-menu-toggle__icon">
653
+ <span class="pf-v6-c-menu-toggle__icon">
654
654
  <i class="fas fa-filter" aria-hidden="true"></i>
655
655
  </span>
656
- <span class="pf-v5-c-menu-toggle__text">Name</span>
657
- <span class="pf-v5-c-menu-toggle__controls">
658
- <span class="pf-v5-c-menu-toggle__toggle-icon">
656
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
657
+ <span class="pf-v6-c-menu-toggle__controls">
658
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
659
659
  <i class="fas fa-caret-down" aria-hidden="true"></i>
660
660
  </span>
661
661
  </span>
662
662
  </button>
663
663
  </div>
664
- <div class="pf-v5-c-input-group__item pf-m-fill">
665
- <div class="pf-v5-c-text-input-group">
666
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
667
- <span class="pf-v5-c-text-input-group__text">
668
- <span class="pf-v5-c-text-input-group__icon">
664
+ <div class="pf-v6-c-input-group__item pf-m-fill">
665
+ <div class="pf-v6-c-text-input-group">
666
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
667
+ <span class="pf-v6-c-text-input-group__text">
668
+ <span class="pf-v6-c-text-input-group__icon">
669
669
  <i class="fas fa-fw fa-search"></i>
670
670
  </span>
671
671
  <input
672
- class="pf-v5-c-text-input-group__text-input"
672
+ class="pf-v6-c-text-input-group__text-input"
673
673
  type="text"
674
674
  placeholder="Filter by name"
675
675
  value
@@ -682,21 +682,21 @@ wrapperTag: div
682
682
  </div>
683
683
  </div>
684
684
  </div>
685
- <div class="pf-v5-c-toolbar__item">
685
+ <div class="pf-v6-c-toolbar__item">
686
686
  <button
687
- class="pf-v5-c-menu-toggle pf-m-plain"
687
+ class="pf-v6-c-menu-toggle pf-m-plain"
688
688
  type="button"
689
689
  aria-expanded="false"
690
690
  aria-label="Actions"
691
691
  >
692
- <span class="pf-v5-c-menu-toggle__icon">
692
+ <span class="pf-v6-c-menu-toggle__icon">
693
693
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
694
694
  </span>
695
695
  </button>
696
696
  </div>
697
697
  </div>
698
698
  <div
699
- class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
699
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
700
700
  id="masthead-toolbar-filters-example-masthead-toolbar-expandable-content"
701
701
  hidden
702
702
  ></div>
@@ -704,71 +704,71 @@ wrapperTag: div
704
704
  </div>
705
705
  </div>
706
706
  </header>
707
- <div class="pf-v5-c-page__sidebar">
708
- <div class="pf-v5-c-page__sidebar-body">
707
+ <div class="pf-v6-c-page__sidebar">
708
+ <div class="pf-v6-c-page__sidebar-body">
709
709
  <nav
710
- class="pf-v5-c-nav"
710
+ class="pf-v6-c-nav"
711
711
  id="masthead-toolbar-filters-example-primary-nav"
712
712
  aria-label="Global"
713
713
  >
714
- <ul class="pf-v5-c-nav__list" role="list">
715
- <li class="pf-v5-c-nav__item">
716
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
714
+ <ul class="pf-v6-c-nav__list" role="list">
715
+ <li class="pf-v6-c-nav__item">
716
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
717
717
  </li>
718
- <li class="pf-v5-c-nav__item">
718
+ <li class="pf-v6-c-nav__item">
719
719
  <a
720
720
  href="#"
721
- class="pf-v5-c-nav__link pf-m-current"
721
+ class="pf-v6-c-nav__link pf-m-current"
722
722
  aria-current="page"
723
723
  >Policy</a>
724
724
  </li>
725
- <li class="pf-v5-c-nav__item">
726
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
725
+ <li class="pf-v6-c-nav__item">
726
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
727
727
  </li>
728
- <li class="pf-v5-c-nav__item">
729
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
728
+ <li class="pf-v6-c-nav__item">
729
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
730
730
  </li>
731
- <li class="pf-v5-c-nav__item">
732
- <a href="#" class="pf-v5-c-nav__link">Server</a>
731
+ <li class="pf-v6-c-nav__item">
732
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
733
733
  </li>
734
734
  </ul>
735
735
  </nav>
736
736
  </div>
737
737
  </div>
738
738
  <main
739
- class="pf-v5-c-page__main"
739
+ class="pf-v6-c-page__main"
740
740
  tabindex="-1"
741
741
  id="main-content-masthead-toolbar-filters-example"
742
742
  >
743
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
744
- <div class="pf-v5-c-page__main-body">
745
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
746
- <ol class="pf-v5-c-breadcrumb__list" role="list">
747
- <li class="pf-v5-c-breadcrumb__item">
748
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
743
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
744
+ <div class="pf-v6-c-page__main-body">
745
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
746
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
747
+ <li class="pf-v6-c-breadcrumb__item">
748
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
749
749
  </li>
750
- <li class="pf-v5-c-breadcrumb__item">
751
- <span class="pf-v5-c-breadcrumb__item-divider">
750
+ <li class="pf-v6-c-breadcrumb__item">
751
+ <span class="pf-v6-c-breadcrumb__item-divider">
752
752
  <i class="fas fa-angle-right" aria-hidden="true"></i>
753
753
  </span>
754
754
 
755
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
755
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
756
756
  </li>
757
- <li class="pf-v5-c-breadcrumb__item">
758
- <span class="pf-v5-c-breadcrumb__item-divider">
757
+ <li class="pf-v6-c-breadcrumb__item">
758
+ <span class="pf-v6-c-breadcrumb__item-divider">
759
759
  <i class="fas fa-angle-right" aria-hidden="true"></i>
760
760
  </span>
761
761
 
762
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
762
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
763
763
  </li>
764
- <li class="pf-v5-c-breadcrumb__item">
765
- <span class="pf-v5-c-breadcrumb__item-divider">
764
+ <li class="pf-v6-c-breadcrumb__item">
765
+ <span class="pf-v6-c-breadcrumb__item-divider">
766
766
  <i class="fas fa-angle-right" aria-hidden="true"></i>
767
767
  </span>
768
768
 
769
769
  <a
770
770
  href="#"
771
- class="pf-v5-c-breadcrumb__link pf-m-current"
771
+ class="pf-v6-c-breadcrumb__link pf-m-current"
772
772
  aria-current="page"
773
773
  >Section landing</a>
774
774
  </li>
@@ -776,46 +776,46 @@ wrapperTag: div
776
776
  </nav>
777
777
  </div>
778
778
  </section>
779
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
780
- <div class="pf-v5-c-page__main-body">
781
- <div class="pf-v5-c-content">
779
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
780
+ <div class="pf-v6-c-page__main-body">
781
+ <div class="pf-v6-c-content">
782
782
  <h1>Main title</h1>
783
783
  <p>This is a full page demo.</p>
784
784
  </div>
785
785
  </div>
786
786
  </section>
787
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
788
- <div class="pf-v5-c-page__main-body">
789
- <div class="pf-v5-l-gallery pf-m-gutter">
790
- <div class="pf-v5-c-card">
791
- <div class="pf-v5-c-card__body">This is a card</div>
787
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
788
+ <div class="pf-v6-c-page__main-body">
789
+ <div class="pf-v6-l-gallery pf-m-gutter">
790
+ <div class="pf-v6-c-card">
791
+ <div class="pf-v6-c-card__body">This is a card</div>
792
792
  </div>
793
- <div class="pf-v5-c-card">
794
- <div class="pf-v5-c-card__body">This is a card</div>
793
+ <div class="pf-v6-c-card">
794
+ <div class="pf-v6-c-card__body">This is a card</div>
795
795
  </div>
796
- <div class="pf-v5-c-card">
797
- <div class="pf-v5-c-card__body">This is a card</div>
796
+ <div class="pf-v6-c-card">
797
+ <div class="pf-v6-c-card__body">This is a card</div>
798
798
  </div>
799
- <div class="pf-v5-c-card">
800
- <div class="pf-v5-c-card__body">This is a card</div>
799
+ <div class="pf-v6-c-card">
800
+ <div class="pf-v6-c-card__body">This is a card</div>
801
801
  </div>
802
- <div class="pf-v5-c-card">
803
- <div class="pf-v5-c-card__body">This is a card</div>
802
+ <div class="pf-v6-c-card">
803
+ <div class="pf-v6-c-card__body">This is a card</div>
804
804
  </div>
805
- <div class="pf-v5-c-card">
806
- <div class="pf-v5-c-card__body">This is a card</div>
805
+ <div class="pf-v6-c-card">
806
+ <div class="pf-v6-c-card__body">This is a card</div>
807
807
  </div>
808
- <div class="pf-v5-c-card">
809
- <div class="pf-v5-c-card__body">This is a card</div>
808
+ <div class="pf-v6-c-card">
809
+ <div class="pf-v6-c-card__body">This is a card</div>
810
810
  </div>
811
- <div class="pf-v5-c-card">
812
- <div class="pf-v5-c-card__body">This is a card</div>
811
+ <div class="pf-v6-c-card">
812
+ <div class="pf-v6-c-card__body">This is a card</div>
813
813
  </div>
814
- <div class="pf-v5-c-card">
815
- <div class="pf-v5-c-card__body">This is a card</div>
814
+ <div class="pf-v6-c-card">
815
+ <div class="pf-v6-c-card__body">This is a card</div>
816
816
  </div>
817
- <div class="pf-v5-c-card">
818
- <div class="pf-v5-c-card__body">This is a card</div>
817
+ <div class="pf-v6-c-card">
818
+ <div class="pf-v6-c-card__body">This is a card</div>
819
819
  </div>
820
820
  </div>
821
821
  </div>
@@ -828,28 +828,28 @@ wrapperTag: div
828
828
  ### With toggle group and filters
829
829
 
830
830
  ```html isFullscreen
831
- <div class="pf-v5-c-page" id="masthead-toggle-group-filters-example">
832
- <div class="pf-v5-c-skip-to-content">
831
+ <div class="pf-v6-c-page" id="masthead-toggle-group-filters-example">
832
+ <div class="pf-v6-c-skip-to-content">
833
833
  <a
834
- class="pf-v5-c-button pf-m-primary"
834
+ class="pf-v6-c-button pf-m-primary"
835
835
  href="#main-content-masthead-toggle-group-filters-example"
836
836
  >Skip to content</a>
837
837
  </div>
838
838
  <header
839
- class="pf-v5-c-masthead"
839
+ class="pf-v6-c-masthead"
840
840
  id="masthead-toggle-group-filters-example-masthead"
841
841
  >
842
- <span class="pf-v5-c-masthead__toggle">
842
+ <span class="pf-v6-c-masthead__toggle">
843
843
  <button
844
- class="pf-v5-c-button pf-m-plain"
844
+ class="pf-v6-c-button pf-m-plain"
845
845
  type="button"
846
846
  aria-label="Global navigation"
847
847
  >
848
848
  <i class="fas fa-bars" aria-hidden="true"></i>
849
849
  </button>
850
850
  </span>
851
- <div class="pf-v5-c-masthead__main">
852
- <a class="pf-v5-c-masthead__brand" href="#">
851
+ <div class="pf-v6-c-masthead__main">
852
+ <a class="pf-v6-c-masthead__brand" href="#">
853
853
  <svg height="40px" viewBox="0 0 679 158">
854
854
  <title>PF-HorizontalLogo-Color</title>
855
855
  <defs>
@@ -922,62 +922,62 @@ wrapperTag: div
922
922
  </svg>
923
923
  </a>
924
924
  </div>
925
- <div class="pf-v5-c-masthead__content">
925
+ <div class="pf-v6-c-masthead__content">
926
926
  <div
927
- class="pf-v5-c-toolbar pf-m-static"
927
+ class="pf-v6-c-toolbar pf-m-static"
928
928
  id="masthead-toggle-group-filters-example-masthead-toolbar"
929
929
  >
930
- <div class="pf-v5-c-toolbar__content">
931
- <div class="pf-v5-c-toolbar__content-section">
930
+ <div class="pf-v6-c-toolbar__content">
931
+ <div class="pf-v6-c-toolbar__content-section">
932
932
  <div
933
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg pf-m-align-end"
933
+ class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-lg pf-m-align-end"
934
934
  >
935
- <div class="pf-v5-c-toolbar__toggle pf-m-show">
935
+ <div class="pf-v6-c-toolbar__toggle pf-m-show">
936
936
  <button
937
- class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
937
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
938
938
  type="button"
939
939
  aria-expanded="true"
940
940
  aria-label="Show filters"
941
941
  aria-controls="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
942
942
  >
943
- <span class="pf-v5-c-menu-toggle__icon">
943
+ <span class="pf-v6-c-menu-toggle__icon">
944
944
  <i class="fas fa-filter" aria-hidden="true"></i>
945
945
  </span>
946
946
  </button>
947
947
  </div>
948
- <div class="pf-v5-c-toolbar__item pf-m-search-filter">
948
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
949
949
  <div
950
- class="pf-v5-c-input-group"
950
+ class="pf-v6-c-input-group"
951
951
  aria-label="search filter"
952
952
  role="group"
953
953
  >
954
- <div class="pf-v5-c-input-group__item">
954
+ <div class="pf-v6-c-input-group__item">
955
955
  <button
956
- class="pf-v5-c-menu-toggle"
956
+ class="pf-v6-c-menu-toggle"
957
957
  type="button"
958
958
  aria-expanded="false"
959
959
  id="masthead-toggle-group-filters-example-masthead-toolbar-search-filter-menu"
960
960
  >
961
- <span class="pf-v5-c-menu-toggle__icon">
961
+ <span class="pf-v6-c-menu-toggle__icon">
962
962
  <i class="fas fa-filter" aria-hidden="true"></i>
963
963
  </span>
964
- <span class="pf-v5-c-menu-toggle__text">Name</span>
965
- <span class="pf-v5-c-menu-toggle__controls">
966
- <span class="pf-v5-c-menu-toggle__toggle-icon">
964
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
965
+ <span class="pf-v6-c-menu-toggle__controls">
966
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
967
967
  <i class="fas fa-caret-down" aria-hidden="true"></i>
968
968
  </span>
969
969
  </span>
970
970
  </button>
971
971
  </div>
972
- <div class="pf-v5-c-input-group__item pf-m-fill">
973
- <div class="pf-v5-c-text-input-group">
974
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
975
- <span class="pf-v5-c-text-input-group__text">
976
- <span class="pf-v5-c-text-input-group__icon">
972
+ <div class="pf-v6-c-input-group__item pf-m-fill">
973
+ <div class="pf-v6-c-text-input-group">
974
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
975
+ <span class="pf-v6-c-text-input-group__text">
976
+ <span class="pf-v6-c-text-input-group__icon">
977
977
  <i class="fas fa-fw fa-search"></i>
978
978
  </span>
979
979
  <input
980
- class="pf-v5-c-text-input-group__text-input"
980
+ class="pf-v6-c-text-input-group__text-input"
981
981
  type="text"
982
982
  placeholder="Filter by name"
983
983
  value
@@ -990,21 +990,21 @@ wrapperTag: div
990
990
  </div>
991
991
  </div>
992
992
  </div>
993
- <div class="pf-v5-c-toolbar__item">
993
+ <div class="pf-v6-c-toolbar__item">
994
994
  <button
995
- class="pf-v5-c-menu-toggle pf-m-plain"
995
+ class="pf-v6-c-menu-toggle pf-m-plain"
996
996
  type="button"
997
997
  aria-expanded="false"
998
998
  aria-label="Actions"
999
999
  >
1000
- <span class="pf-v5-c-menu-toggle__icon">
1000
+ <span class="pf-v6-c-menu-toggle__icon">
1001
1001
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1002
1002
  </span>
1003
1003
  </button>
1004
1004
  </div>
1005
1005
  </div>
1006
1006
  <div
1007
- class="pf-v5-c-toolbar__expandable-content pf-m-hidden"
1007
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
1008
1008
  id="masthead-toggle-group-filters-example-masthead-toolbar-expandable-content"
1009
1009
  hidden
1010
1010
  ></div>
@@ -1012,71 +1012,71 @@ wrapperTag: div
1012
1012
  </div>
1013
1013
  </div>
1014
1014
  </header>
1015
- <div class="pf-v5-c-page__sidebar">
1016
- <div class="pf-v5-c-page__sidebar-body">
1015
+ <div class="pf-v6-c-page__sidebar">
1016
+ <div class="pf-v6-c-page__sidebar-body">
1017
1017
  <nav
1018
- class="pf-v5-c-nav"
1018
+ class="pf-v6-c-nav"
1019
1019
  id="masthead-toggle-group-filters-example-primary-nav"
1020
1020
  aria-label="Global"
1021
1021
  >
1022
- <ul class="pf-v5-c-nav__list" role="list">
1023
- <li class="pf-v5-c-nav__item">
1024
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
1022
+ <ul class="pf-v6-c-nav__list" role="list">
1023
+ <li class="pf-v6-c-nav__item">
1024
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
1025
1025
  </li>
1026
- <li class="pf-v5-c-nav__item">
1026
+ <li class="pf-v6-c-nav__item">
1027
1027
  <a
1028
1028
  href="#"
1029
- class="pf-v5-c-nav__link pf-m-current"
1029
+ class="pf-v6-c-nav__link pf-m-current"
1030
1030
  aria-current="page"
1031
1031
  >Policy</a>
1032
1032
  </li>
1033
- <li class="pf-v5-c-nav__item">
1034
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
1033
+ <li class="pf-v6-c-nav__item">
1034
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1035
1035
  </li>
1036
- <li class="pf-v5-c-nav__item">
1037
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
1036
+ <li class="pf-v6-c-nav__item">
1037
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
1038
1038
  </li>
1039
- <li class="pf-v5-c-nav__item">
1040
- <a href="#" class="pf-v5-c-nav__link">Server</a>
1039
+ <li class="pf-v6-c-nav__item">
1040
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
1041
1041
  </li>
1042
1042
  </ul>
1043
1043
  </nav>
1044
1044
  </div>
1045
1045
  </div>
1046
1046
  <main
1047
- class="pf-v5-c-page__main"
1047
+ class="pf-v6-c-page__main"
1048
1048
  tabindex="-1"
1049
1049
  id="main-content-masthead-toggle-group-filters-example"
1050
1050
  >
1051
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1052
- <div class="pf-v5-c-page__main-body">
1053
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1054
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1055
- <li class="pf-v5-c-breadcrumb__item">
1056
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1051
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1052
+ <div class="pf-v6-c-page__main-body">
1053
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1054
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1055
+ <li class="pf-v6-c-breadcrumb__item">
1056
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1057
1057
  </li>
1058
- <li class="pf-v5-c-breadcrumb__item">
1059
- <span class="pf-v5-c-breadcrumb__item-divider">
1058
+ <li class="pf-v6-c-breadcrumb__item">
1059
+ <span class="pf-v6-c-breadcrumb__item-divider">
1060
1060
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1061
1061
  </span>
1062
1062
 
1063
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1063
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1064
1064
  </li>
1065
- <li class="pf-v5-c-breadcrumb__item">
1066
- <span class="pf-v5-c-breadcrumb__item-divider">
1065
+ <li class="pf-v6-c-breadcrumb__item">
1066
+ <span class="pf-v6-c-breadcrumb__item-divider">
1067
1067
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1068
1068
  </span>
1069
1069
 
1070
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1070
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1071
1071
  </li>
1072
- <li class="pf-v5-c-breadcrumb__item">
1073
- <span class="pf-v5-c-breadcrumb__item-divider">
1072
+ <li class="pf-v6-c-breadcrumb__item">
1073
+ <span class="pf-v6-c-breadcrumb__item-divider">
1074
1074
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1075
1075
  </span>
1076
1076
 
1077
1077
  <a
1078
1078
  href="#"
1079
- class="pf-v5-c-breadcrumb__link pf-m-current"
1079
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1080
1080
  aria-current="page"
1081
1081
  >Section landing</a>
1082
1082
  </li>
@@ -1084,46 +1084,46 @@ wrapperTag: div
1084
1084
  </nav>
1085
1085
  </div>
1086
1086
  </section>
1087
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1088
- <div class="pf-v5-c-page__main-body">
1089
- <div class="pf-v5-c-content">
1087
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1088
+ <div class="pf-v6-c-page__main-body">
1089
+ <div class="pf-v6-c-content">
1090
1090
  <h1>Main title</h1>
1091
1091
  <p>This is a full page demo.</p>
1092
1092
  </div>
1093
1093
  </div>
1094
1094
  </section>
1095
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
1096
- <div class="pf-v5-c-page__main-body">
1097
- <div class="pf-v5-l-gallery pf-m-gutter">
1098
- <div class="pf-v5-c-card">
1099
- <div class="pf-v5-c-card__body">This is a card</div>
1095
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1096
+ <div class="pf-v6-c-page__main-body">
1097
+ <div class="pf-v6-l-gallery pf-m-gutter">
1098
+ <div class="pf-v6-c-card">
1099
+ <div class="pf-v6-c-card__body">This is a card</div>
1100
1100
  </div>
1101
- <div class="pf-v5-c-card">
1102
- <div class="pf-v5-c-card__body">This is a card</div>
1101
+ <div class="pf-v6-c-card">
1102
+ <div class="pf-v6-c-card__body">This is a card</div>
1103
1103
  </div>
1104
- <div class="pf-v5-c-card">
1105
- <div class="pf-v5-c-card__body">This is a card</div>
1104
+ <div class="pf-v6-c-card">
1105
+ <div class="pf-v6-c-card__body">This is a card</div>
1106
1106
  </div>
1107
- <div class="pf-v5-c-card">
1108
- <div class="pf-v5-c-card__body">This is a card</div>
1107
+ <div class="pf-v6-c-card">
1108
+ <div class="pf-v6-c-card__body">This is a card</div>
1109
1109
  </div>
1110
- <div class="pf-v5-c-card">
1111
- <div class="pf-v5-c-card__body">This is a card</div>
1110
+ <div class="pf-v6-c-card">
1111
+ <div class="pf-v6-c-card__body">This is a card</div>
1112
1112
  </div>
1113
- <div class="pf-v5-c-card">
1114
- <div class="pf-v5-c-card__body">This is a card</div>
1113
+ <div class="pf-v6-c-card">
1114
+ <div class="pf-v6-c-card__body">This is a card</div>
1115
1115
  </div>
1116
- <div class="pf-v5-c-card">
1117
- <div class="pf-v5-c-card__body">This is a card</div>
1116
+ <div class="pf-v6-c-card">
1117
+ <div class="pf-v6-c-card__body">This is a card</div>
1118
1118
  </div>
1119
- <div class="pf-v5-c-card">
1120
- <div class="pf-v5-c-card__body">This is a card</div>
1119
+ <div class="pf-v6-c-card">
1120
+ <div class="pf-v6-c-card__body">This is a card</div>
1121
1121
  </div>
1122
- <div class="pf-v5-c-card">
1123
- <div class="pf-v5-c-card__body">This is a card</div>
1122
+ <div class="pf-v6-c-card">
1123
+ <div class="pf-v6-c-card__body">This is a card</div>
1124
1124
  </div>
1125
- <div class="pf-v5-c-card">
1126
- <div class="pf-v5-c-card__body">This is a card</div>
1125
+ <div class="pf-v6-c-card">
1126
+ <div class="pf-v6-c-card__body">This is a card</div>
1127
1127
  </div>
1128
1128
  </div>
1129
1129
  </div>
@@ -1136,28 +1136,28 @@ wrapperTag: div
1136
1136
  ### With expandable search, collapsed
1137
1137
 
1138
1138
  ```html isFullscreen
1139
- <div class="pf-v5-c-page" id="masthead-expandable-search-example">
1140
- <div class="pf-v5-c-skip-to-content">
1139
+ <div class="pf-v6-c-page" id="masthead-expandable-search-example">
1140
+ <div class="pf-v6-c-skip-to-content">
1141
1141
  <a
1142
- class="pf-v5-c-button pf-m-primary"
1142
+ class="pf-v6-c-button pf-m-primary"
1143
1143
  href="#main-content-masthead-expandable-search-example"
1144
1144
  >Skip to content</a>
1145
1145
  </div>
1146
1146
  <header
1147
- class="pf-v5-c-masthead"
1147
+ class="pf-v6-c-masthead"
1148
1148
  id="masthead-expandable-search-example-masthead"
1149
1149
  >
1150
- <span class="pf-v5-c-masthead__toggle">
1150
+ <span class="pf-v6-c-masthead__toggle">
1151
1151
  <button
1152
- class="pf-v5-c-button pf-m-plain"
1152
+ class="pf-v6-c-button pf-m-plain"
1153
1153
  type="button"
1154
1154
  aria-label="Global navigation"
1155
1155
  >
1156
1156
  <i class="fas fa-bars" aria-hidden="true"></i>
1157
1157
  </button>
1158
1158
  </span>
1159
- <div class="pf-v5-c-masthead__main">
1160
- <a class="pf-v5-c-masthead__brand" href="#">
1159
+ <div class="pf-v6-c-masthead__main">
1160
+ <a class="pf-v6-c-masthead__brand" href="#">
1161
1161
  <svg height="40px" viewBox="0 0 679 158">
1162
1162
  <title>PF-HorizontalLogo-Color</title>
1163
1163
  <defs>
@@ -1230,19 +1230,19 @@ wrapperTag: div
1230
1230
  </svg>
1231
1231
  </a>
1232
1232
  </div>
1233
- <div class="pf-v5-c-masthead__content">
1233
+ <div class="pf-v6-c-masthead__content">
1234
1234
  <div
1235
- class="pf-v5-c-toolbar pf-m-static"
1235
+ class="pf-v6-c-toolbar pf-m-static"
1236
1236
  id="masthead-expandable-search-example-masthead-toolbar"
1237
1237
  >
1238
- <div class="pf-v5-c-toolbar__content">
1239
- <div class="pf-v5-c-toolbar__content-section">
1240
- <div class="pf-v5-c-toolbar__group pf-m-align-end">
1241
- <div class="pf-v5-c-toolbar__item">
1242
- <div class="pf-v5-c-input-group pf-m-plain">
1243
- <div class="pf-v5-c-input-group__item pf-m-plain">
1238
+ <div class="pf-v6-c-toolbar__content">
1239
+ <div class="pf-v6-c-toolbar__content-section">
1240
+ <div class="pf-v6-c-toolbar__group pf-m-align-end">
1241
+ <div class="pf-v6-c-toolbar__item">
1242
+ <div class="pf-v6-c-input-group pf-m-plain">
1243
+ <div class="pf-v6-c-input-group__item pf-m-plain">
1244
1244
  <button
1245
- class="pf-v5-c-button pf-m-plain"
1245
+ class="pf-v6-c-button pf-m-plain"
1246
1246
  type="button"
1247
1247
  aria-label="Open search"
1248
1248
  >
@@ -1257,71 +1257,71 @@ wrapperTag: div
1257
1257
  </div>
1258
1258
  </div>
1259
1259
  </header>
1260
- <div class="pf-v5-c-page__sidebar">
1261
- <div class="pf-v5-c-page__sidebar-body">
1260
+ <div class="pf-v6-c-page__sidebar">
1261
+ <div class="pf-v6-c-page__sidebar-body">
1262
1262
  <nav
1263
- class="pf-v5-c-nav"
1263
+ class="pf-v6-c-nav"
1264
1264
  id="masthead-expandable-search-example-primary-nav"
1265
1265
  aria-label="Global"
1266
1266
  >
1267
- <ul class="pf-v5-c-nav__list" role="list">
1268
- <li class="pf-v5-c-nav__item">
1269
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
1267
+ <ul class="pf-v6-c-nav__list" role="list">
1268
+ <li class="pf-v6-c-nav__item">
1269
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
1270
1270
  </li>
1271
- <li class="pf-v5-c-nav__item">
1271
+ <li class="pf-v6-c-nav__item">
1272
1272
  <a
1273
1273
  href="#"
1274
- class="pf-v5-c-nav__link pf-m-current"
1274
+ class="pf-v6-c-nav__link pf-m-current"
1275
1275
  aria-current="page"
1276
1276
  >Policy</a>
1277
1277
  </li>
1278
- <li class="pf-v5-c-nav__item">
1279
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
1278
+ <li class="pf-v6-c-nav__item">
1279
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1280
1280
  </li>
1281
- <li class="pf-v5-c-nav__item">
1282
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
1281
+ <li class="pf-v6-c-nav__item">
1282
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
1283
1283
  </li>
1284
- <li class="pf-v5-c-nav__item">
1285
- <a href="#" class="pf-v5-c-nav__link">Server</a>
1284
+ <li class="pf-v6-c-nav__item">
1285
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
1286
1286
  </li>
1287
1287
  </ul>
1288
1288
  </nav>
1289
1289
  </div>
1290
1290
  </div>
1291
1291
  <main
1292
- class="pf-v5-c-page__main"
1292
+ class="pf-v6-c-page__main"
1293
1293
  tabindex="-1"
1294
1294
  id="main-content-masthead-expandable-search-example"
1295
1295
  >
1296
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1297
- <div class="pf-v5-c-page__main-body">
1298
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1299
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1300
- <li class="pf-v5-c-breadcrumb__item">
1301
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1296
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1297
+ <div class="pf-v6-c-page__main-body">
1298
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1299
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1300
+ <li class="pf-v6-c-breadcrumb__item">
1301
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1302
1302
  </li>
1303
- <li class="pf-v5-c-breadcrumb__item">
1304
- <span class="pf-v5-c-breadcrumb__item-divider">
1303
+ <li class="pf-v6-c-breadcrumb__item">
1304
+ <span class="pf-v6-c-breadcrumb__item-divider">
1305
1305
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1306
1306
  </span>
1307
1307
 
1308
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1308
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1309
1309
  </li>
1310
- <li class="pf-v5-c-breadcrumb__item">
1311
- <span class="pf-v5-c-breadcrumb__item-divider">
1310
+ <li class="pf-v6-c-breadcrumb__item">
1311
+ <span class="pf-v6-c-breadcrumb__item-divider">
1312
1312
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1313
1313
  </span>
1314
1314
 
1315
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1315
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1316
1316
  </li>
1317
- <li class="pf-v5-c-breadcrumb__item">
1318
- <span class="pf-v5-c-breadcrumb__item-divider">
1317
+ <li class="pf-v6-c-breadcrumb__item">
1318
+ <span class="pf-v6-c-breadcrumb__item-divider">
1319
1319
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1320
1320
  </span>
1321
1321
 
1322
1322
  <a
1323
1323
  href="#"
1324
- class="pf-v5-c-breadcrumb__link pf-m-current"
1324
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1325
1325
  aria-current="page"
1326
1326
  >Section landing</a>
1327
1327
  </li>
@@ -1329,46 +1329,46 @@ wrapperTag: div
1329
1329
  </nav>
1330
1330
  </div>
1331
1331
  </section>
1332
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1333
- <div class="pf-v5-c-page__main-body">
1334
- <div class="pf-v5-c-content">
1332
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1333
+ <div class="pf-v6-c-page__main-body">
1334
+ <div class="pf-v6-c-content">
1335
1335
  <h1>Main title</h1>
1336
1336
  <p>This is a full page demo.</p>
1337
1337
  </div>
1338
1338
  </div>
1339
1339
  </section>
1340
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
1341
- <div class="pf-v5-c-page__main-body">
1342
- <div class="pf-v5-l-gallery pf-m-gutter">
1343
- <div class="pf-v5-c-card">
1344
- <div class="pf-v5-c-card__body">This is a card</div>
1340
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1341
+ <div class="pf-v6-c-page__main-body">
1342
+ <div class="pf-v6-l-gallery pf-m-gutter">
1343
+ <div class="pf-v6-c-card">
1344
+ <div class="pf-v6-c-card__body">This is a card</div>
1345
1345
  </div>
1346
- <div class="pf-v5-c-card">
1347
- <div class="pf-v5-c-card__body">This is a card</div>
1346
+ <div class="pf-v6-c-card">
1347
+ <div class="pf-v6-c-card__body">This is a card</div>
1348
1348
  </div>
1349
- <div class="pf-v5-c-card">
1350
- <div class="pf-v5-c-card__body">This is a card</div>
1349
+ <div class="pf-v6-c-card">
1350
+ <div class="pf-v6-c-card__body">This is a card</div>
1351
1351
  </div>
1352
- <div class="pf-v5-c-card">
1353
- <div class="pf-v5-c-card__body">This is a card</div>
1352
+ <div class="pf-v6-c-card">
1353
+ <div class="pf-v6-c-card__body">This is a card</div>
1354
1354
  </div>
1355
- <div class="pf-v5-c-card">
1356
- <div class="pf-v5-c-card__body">This is a card</div>
1355
+ <div class="pf-v6-c-card">
1356
+ <div class="pf-v6-c-card__body">This is a card</div>
1357
1357
  </div>
1358
- <div class="pf-v5-c-card">
1359
- <div class="pf-v5-c-card__body">This is a card</div>
1358
+ <div class="pf-v6-c-card">
1359
+ <div class="pf-v6-c-card__body">This is a card</div>
1360
1360
  </div>
1361
- <div class="pf-v5-c-card">
1362
- <div class="pf-v5-c-card__body">This is a card</div>
1361
+ <div class="pf-v6-c-card">
1362
+ <div class="pf-v6-c-card__body">This is a card</div>
1363
1363
  </div>
1364
- <div class="pf-v5-c-card">
1365
- <div class="pf-v5-c-card__body">This is a card</div>
1364
+ <div class="pf-v6-c-card">
1365
+ <div class="pf-v6-c-card__body">This is a card</div>
1366
1366
  </div>
1367
- <div class="pf-v5-c-card">
1368
- <div class="pf-v5-c-card__body">This is a card</div>
1367
+ <div class="pf-v6-c-card">
1368
+ <div class="pf-v6-c-card__body">This is a card</div>
1369
1369
  </div>
1370
- <div class="pf-v5-c-card">
1371
- <div class="pf-v5-c-card__body">This is a card</div>
1370
+ <div class="pf-v6-c-card">
1371
+ <div class="pf-v6-c-card__body">This is a card</div>
1372
1372
  </div>
1373
1373
  </div>
1374
1374
  </div>
@@ -1381,28 +1381,28 @@ wrapperTag: div
1381
1381
  ### With expandable search, expanded
1382
1382
 
1383
1383
  ```html isFullscreen
1384
- <div class="pf-v5-c-page" id="masthead-expandable-search-expanded-example">
1385
- <div class="pf-v5-c-skip-to-content">
1384
+ <div class="pf-v6-c-page" id="masthead-expandable-search-expanded-example">
1385
+ <div class="pf-v6-c-skip-to-content">
1386
1386
  <a
1387
- class="pf-v5-c-button pf-m-primary"
1387
+ class="pf-v6-c-button pf-m-primary"
1388
1388
  href="#main-content-masthead-expandable-search-expanded-example"
1389
1389
  >Skip to content</a>
1390
1390
  </div>
1391
1391
  <header
1392
- class="pf-v5-c-masthead"
1392
+ class="pf-v6-c-masthead"
1393
1393
  id="masthead-expandable-search-expanded-example-masthead"
1394
1394
  >
1395
- <span class="pf-v5-c-masthead__toggle">
1395
+ <span class="pf-v6-c-masthead__toggle">
1396
1396
  <button
1397
- class="pf-v5-c-button pf-m-plain"
1397
+ class="pf-v6-c-button pf-m-plain"
1398
1398
  type="button"
1399
1399
  aria-label="Global navigation"
1400
1400
  >
1401
1401
  <i class="fas fa-bars" aria-hidden="true"></i>
1402
1402
  </button>
1403
1403
  </span>
1404
- <div class="pf-v5-c-masthead__main">
1405
- <a class="pf-v5-c-masthead__brand" href="#">
1404
+ <div class="pf-v6-c-masthead__main">
1405
+ <a class="pf-v6-c-masthead__brand" href="#">
1406
1406
  <svg height="40px" viewBox="0 0 679 158">
1407
1407
  <title>PF-HorizontalLogo-Color</title>
1408
1408
  <defs>
@@ -1475,25 +1475,25 @@ wrapperTag: div
1475
1475
  </svg>
1476
1476
  </a>
1477
1477
  </div>
1478
- <div class="pf-v5-c-masthead__content">
1478
+ <div class="pf-v6-c-masthead__content">
1479
1479
  <div
1480
- class="pf-v5-c-toolbar pf-m-static"
1480
+ class="pf-v6-c-toolbar pf-m-static"
1481
1481
  id="masthead-expandable-search-expanded-example-masthead-toolbar"
1482
1482
  >
1483
- <div class="pf-v5-c-toolbar__content">
1484
- <div class="pf-v5-c-toolbar__content-section">
1485
- <div class="pf-v5-c-toolbar__group pf-m-align-end">
1486
- <div class="pf-v5-c-toolbar__item">
1487
- <div class="pf-v5-c-input-group pf-m-plain">
1488
- <div class="pf-v5-c-input-group__item pf-m-fill">
1489
- <div class="pf-v5-c-text-input-group">
1490
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
1491
- <span class="pf-v5-c-text-input-group__text">
1492
- <span class="pf-v5-c-text-input-group__icon">
1483
+ <div class="pf-v6-c-toolbar__content">
1484
+ <div class="pf-v6-c-toolbar__content-section">
1485
+ <div class="pf-v6-c-toolbar__group pf-m-align-end">
1486
+ <div class="pf-v6-c-toolbar__item">
1487
+ <div class="pf-v6-c-input-group pf-m-plain">
1488
+ <div class="pf-v6-c-input-group__item pf-m-fill">
1489
+ <div class="pf-v6-c-text-input-group">
1490
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1491
+ <span class="pf-v6-c-text-input-group__text">
1492
+ <span class="pf-v6-c-text-input-group__icon">
1493
1493
  <i class="fas fa-fw fa-search"></i>
1494
1494
  </span>
1495
1495
  <input
1496
- class="pf-v5-c-text-input-group__text-input"
1496
+ class="pf-v6-c-text-input-group__text-input"
1497
1497
  type="text"
1498
1498
  placeholder="Search"
1499
1499
  value
@@ -1503,9 +1503,9 @@ wrapperTag: div
1503
1503
  </div>
1504
1504
  </div>
1505
1505
  </div>
1506
- <div class="pf-v5-c-input-group__item pf-m-plain">
1506
+ <div class="pf-v6-c-input-group__item pf-m-plain">
1507
1507
  <button
1508
- class="pf-v5-c-button pf-m-plain"
1508
+ class="pf-v6-c-button pf-m-plain"
1509
1509
  type="button"
1510
1510
  aria-label="Close"
1511
1511
  >
@@ -1520,71 +1520,71 @@ wrapperTag: div
1520
1520
  </div>
1521
1521
  </div>
1522
1522
  </header>
1523
- <div class="pf-v5-c-page__sidebar">
1524
- <div class="pf-v5-c-page__sidebar-body">
1523
+ <div class="pf-v6-c-page__sidebar">
1524
+ <div class="pf-v6-c-page__sidebar-body">
1525
1525
  <nav
1526
- class="pf-v5-c-nav"
1526
+ class="pf-v6-c-nav"
1527
1527
  id="masthead-expandable-search-expanded-example-primary-nav"
1528
1528
  aria-label="Global"
1529
1529
  >
1530
- <ul class="pf-v5-c-nav__list" role="list">
1531
- <li class="pf-v5-c-nav__item">
1532
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
1530
+ <ul class="pf-v6-c-nav__list" role="list">
1531
+ <li class="pf-v6-c-nav__item">
1532
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
1533
1533
  </li>
1534
- <li class="pf-v5-c-nav__item">
1534
+ <li class="pf-v6-c-nav__item">
1535
1535
  <a
1536
1536
  href="#"
1537
- class="pf-v5-c-nav__link pf-m-current"
1537
+ class="pf-v6-c-nav__link pf-m-current"
1538
1538
  aria-current="page"
1539
1539
  >Policy</a>
1540
1540
  </li>
1541
- <li class="pf-v5-c-nav__item">
1542
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
1541
+ <li class="pf-v6-c-nav__item">
1542
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1543
1543
  </li>
1544
- <li class="pf-v5-c-nav__item">
1545
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
1544
+ <li class="pf-v6-c-nav__item">
1545
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
1546
1546
  </li>
1547
- <li class="pf-v5-c-nav__item">
1548
- <a href="#" class="pf-v5-c-nav__link">Server</a>
1547
+ <li class="pf-v6-c-nav__item">
1548
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
1549
1549
  </li>
1550
1550
  </ul>
1551
1551
  </nav>
1552
1552
  </div>
1553
1553
  </div>
1554
1554
  <main
1555
- class="pf-v5-c-page__main"
1555
+ class="pf-v6-c-page__main"
1556
1556
  tabindex="-1"
1557
1557
  id="main-content-masthead-expandable-search-expanded-example"
1558
1558
  >
1559
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1560
- <div class="pf-v5-c-page__main-body">
1561
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1562
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1563
- <li class="pf-v5-c-breadcrumb__item">
1564
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1559
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1560
+ <div class="pf-v6-c-page__main-body">
1561
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1562
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1563
+ <li class="pf-v6-c-breadcrumb__item">
1564
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1565
1565
  </li>
1566
- <li class="pf-v5-c-breadcrumb__item">
1567
- <span class="pf-v5-c-breadcrumb__item-divider">
1566
+ <li class="pf-v6-c-breadcrumb__item">
1567
+ <span class="pf-v6-c-breadcrumb__item-divider">
1568
1568
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1569
1569
  </span>
1570
1570
 
1571
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1571
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1572
1572
  </li>
1573
- <li class="pf-v5-c-breadcrumb__item">
1574
- <span class="pf-v5-c-breadcrumb__item-divider">
1573
+ <li class="pf-v6-c-breadcrumb__item">
1574
+ <span class="pf-v6-c-breadcrumb__item-divider">
1575
1575
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1576
1576
  </span>
1577
1577
 
1578
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1578
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1579
1579
  </li>
1580
- <li class="pf-v5-c-breadcrumb__item">
1581
- <span class="pf-v5-c-breadcrumb__item-divider">
1580
+ <li class="pf-v6-c-breadcrumb__item">
1581
+ <span class="pf-v6-c-breadcrumb__item-divider">
1582
1582
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1583
1583
  </span>
1584
1584
 
1585
1585
  <a
1586
1586
  href="#"
1587
- class="pf-v5-c-breadcrumb__link pf-m-current"
1587
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1588
1588
  aria-current="page"
1589
1589
  >Section landing</a>
1590
1590
  </li>
@@ -1592,46 +1592,46 @@ wrapperTag: div
1592
1592
  </nav>
1593
1593
  </div>
1594
1594
  </section>
1595
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1596
- <div class="pf-v5-c-page__main-body">
1597
- <div class="pf-v5-c-content">
1595
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1596
+ <div class="pf-v6-c-page__main-body">
1597
+ <div class="pf-v6-c-content">
1598
1598
  <h1>Main title</h1>
1599
1599
  <p>This is a full page demo.</p>
1600
1600
  </div>
1601
1601
  </div>
1602
1602
  </section>
1603
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
1604
- <div class="pf-v5-c-page__main-body">
1605
- <div class="pf-v5-l-gallery pf-m-gutter">
1606
- <div class="pf-v5-c-card">
1607
- <div class="pf-v5-c-card__body">This is a card</div>
1603
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1604
+ <div class="pf-v6-c-page__main-body">
1605
+ <div class="pf-v6-l-gallery pf-m-gutter">
1606
+ <div class="pf-v6-c-card">
1607
+ <div class="pf-v6-c-card__body">This is a card</div>
1608
1608
  </div>
1609
- <div class="pf-v5-c-card">
1610
- <div class="pf-v5-c-card__body">This is a card</div>
1609
+ <div class="pf-v6-c-card">
1610
+ <div class="pf-v6-c-card__body">This is a card</div>
1611
1611
  </div>
1612
- <div class="pf-v5-c-card">
1613
- <div class="pf-v5-c-card__body">This is a card</div>
1612
+ <div class="pf-v6-c-card">
1613
+ <div class="pf-v6-c-card__body">This is a card</div>
1614
1614
  </div>
1615
- <div class="pf-v5-c-card">
1616
- <div class="pf-v5-c-card__body">This is a card</div>
1615
+ <div class="pf-v6-c-card">
1616
+ <div class="pf-v6-c-card__body">This is a card</div>
1617
1617
  </div>
1618
- <div class="pf-v5-c-card">
1619
- <div class="pf-v5-c-card__body">This is a card</div>
1618
+ <div class="pf-v6-c-card">
1619
+ <div class="pf-v6-c-card__body">This is a card</div>
1620
1620
  </div>
1621
- <div class="pf-v5-c-card">
1622
- <div class="pf-v5-c-card__body">This is a card</div>
1621
+ <div class="pf-v6-c-card">
1622
+ <div class="pf-v6-c-card__body">This is a card</div>
1623
1623
  </div>
1624
- <div class="pf-v5-c-card">
1625
- <div class="pf-v5-c-card__body">This is a card</div>
1624
+ <div class="pf-v6-c-card">
1625
+ <div class="pf-v6-c-card__body">This is a card</div>
1626
1626
  </div>
1627
- <div class="pf-v5-c-card">
1628
- <div class="pf-v5-c-card__body">This is a card</div>
1627
+ <div class="pf-v6-c-card">
1628
+ <div class="pf-v6-c-card__body">This is a card</div>
1629
1629
  </div>
1630
- <div class="pf-v5-c-card">
1631
- <div class="pf-v5-c-card__body">This is a card</div>
1630
+ <div class="pf-v6-c-card">
1631
+ <div class="pf-v6-c-card__body">This is a card</div>
1632
1632
  </div>
1633
- <div class="pf-v5-c-card">
1634
- <div class="pf-v5-c-card__body">This is a card</div>
1633
+ <div class="pf-v6-c-card">
1634
+ <div class="pf-v6-c-card__body">This is a card</div>
1635
1635
  </div>
1636
1636
  </div>
1637
1637
  </div>
@@ -1644,28 +1644,28 @@ wrapperTag: div
1644
1644
  ### Advanced integration with menu options
1645
1645
 
1646
1646
  ```html isFullscreen
1647
- <div class="pf-v5-c-page" id="masthead-advanced-with-menu-example">
1648
- <div class="pf-v5-c-skip-to-content">
1647
+ <div class="pf-v6-c-page" id="masthead-advanced-with-menu-example">
1648
+ <div class="pf-v6-c-skip-to-content">
1649
1649
  <a
1650
- class="pf-v5-c-button pf-m-primary"
1650
+ class="pf-v6-c-button pf-m-primary"
1651
1651
  href="#main-content-masthead-advanced-with-menu-example"
1652
1652
  >Skip to content</a>
1653
1653
  </div>
1654
1654
  <header
1655
- class="pf-v5-c-masthead"
1655
+ class="pf-v6-c-masthead"
1656
1656
  id="masthead-advanced-with-menu-example-masthead"
1657
1657
  >
1658
- <span class="pf-v5-c-masthead__toggle">
1658
+ <span class="pf-v6-c-masthead__toggle">
1659
1659
  <button
1660
- class="pf-v5-c-button pf-m-plain"
1660
+ class="pf-v6-c-button pf-m-plain"
1661
1661
  type="button"
1662
1662
  aria-label="Global navigation"
1663
1663
  >
1664
1664
  <i class="fas fa-bars" aria-hidden="true"></i>
1665
1665
  </button>
1666
1666
  </span>
1667
- <div class="pf-v5-c-masthead__main">
1668
- <a class="pf-v5-c-masthead__brand" href="#">
1667
+ <div class="pf-v6-c-masthead__main">
1668
+ <a class="pf-v6-c-masthead__brand" href="#">
1669
1669
  <svg height="40px" viewBox="0 0 679 158">
1670
1670
  <title>PF-HorizontalLogo-Color</title>
1671
1671
  <defs>
@@ -1738,37 +1738,37 @@ wrapperTag: div
1738
1738
  </svg>
1739
1739
  </a>
1740
1740
  </div>
1741
- <div class="pf-v5-c-masthead__content">
1741
+ <div class="pf-v6-c-masthead__content">
1742
1742
  <div
1743
- class="pf-v5-c-toolbar pf-m-static"
1743
+ class="pf-v6-c-toolbar pf-m-static"
1744
1744
  id="masthead-advanced-with-menu-example-masthead-toolbar"
1745
1745
  >
1746
- <div class="pf-v5-c-toolbar__content">
1747
- <div class="pf-v5-c-toolbar__content-section">
1748
- <div class="pf-v5-c-toolbar__item">
1746
+ <div class="pf-v6-c-toolbar__content">
1747
+ <div class="pf-v6-c-toolbar__content-section">
1748
+ <div class="pf-v6-c-toolbar__item">
1749
1749
  <button
1750
- class="pf-v5-c-menu-toggle"
1750
+ class="pf-v6-c-menu-toggle"
1751
1751
  type="button"
1752
1752
  aria-expanded="false"
1753
1753
  >
1754
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
1755
- <span class="pf-v5-c-menu-toggle__controls">
1756
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1754
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
1755
+ <span class="pf-v6-c-menu-toggle__controls">
1756
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1757
1757
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1758
1758
  </span>
1759
1759
  </span>
1760
1760
  </button>
1761
1761
  </div>
1762
1762
 
1763
- <div class="pf-v5-c-toolbar__item">
1763
+ <div class="pf-v6-c-toolbar__item">
1764
1764
  <button
1765
- class="pf-v5-c-menu-toggle"
1765
+ class="pf-v6-c-menu-toggle"
1766
1766
  type="button"
1767
1767
  aria-expanded="false"
1768
1768
  >
1769
- <span class="pf-v5-c-menu-toggle__text">Services</span>
1770
- <span class="pf-v5-c-menu-toggle__controls">
1771
- <span class="pf-v5-c-menu-toggle__toggle-icon">
1769
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
1770
+ <span class="pf-v6-c-menu-toggle__controls">
1771
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1772
1772
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1773
1773
  </span>
1774
1774
  </span>
@@ -1776,56 +1776,56 @@ wrapperTag: div
1776
1776
  </div>
1777
1777
 
1778
1778
  <div
1779
- 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"
1779
+ 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"
1780
1780
  >
1781
1781
  <div
1782
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1782
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1783
1783
  >
1784
- <div class="pf-v5-c-toolbar__item">
1784
+ <div class="pf-v6-c-toolbar__item">
1785
1785
  <button
1786
- class="pf-v5-c-menu-toggle pf-m-plain"
1786
+ class="pf-v6-c-menu-toggle pf-m-plain"
1787
1787
  type="button"
1788
1788
  aria-expanded="false"
1789
1789
  aria-label="Application launcher"
1790
1790
  >
1791
- <span class="pf-v5-c-menu-toggle__icon">
1791
+ <span class="pf-v6-c-menu-toggle__icon">
1792
1792
  <i class="fas fa-th" aria-hidden="true"></i>
1793
1793
  </span>
1794
1794
  </button>
1795
1795
  </div>
1796
- <div class="pf-v5-c-toolbar__item">
1796
+ <div class="pf-v6-c-toolbar__item">
1797
1797
  <button
1798
- class="pf-v5-c-menu-toggle pf-m-plain"
1798
+ class="pf-v6-c-menu-toggle pf-m-plain"
1799
1799
  type="button"
1800
1800
  aria-expanded="false"
1801
1801
  aria-label="Settings"
1802
1802
  >
1803
- <span class="pf-v5-c-menu-toggle__icon">
1803
+ <span class="pf-v6-c-menu-toggle__icon">
1804
1804
  <i class="fas fa-cog" aria-hidden="true"></i>
1805
1805
  </span>
1806
1806
  </button>
1807
1807
  </div>
1808
- <div class="pf-v5-c-toolbar__item">
1808
+ <div class="pf-v6-c-toolbar__item">
1809
1809
  <button
1810
- class="pf-v5-c-menu-toggle pf-m-plain"
1810
+ class="pf-v6-c-menu-toggle pf-m-plain"
1811
1811
  type="button"
1812
1812
  aria-expanded="false"
1813
1813
  aria-label="Help"
1814
1814
  >
1815
- <span class="pf-v5-c-menu-toggle__icon">
1815
+ <span class="pf-v6-c-menu-toggle__icon">
1816
1816
  <i class="fas fa-question-circle" aria-hidden="true"></i>
1817
1817
  </span>
1818
1818
  </button>
1819
1819
  </div>
1820
1820
  </div>
1821
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1821
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1822
1822
  <button
1823
- class="pf-v5-c-menu-toggle pf-m-plain"
1823
+ class="pf-v6-c-menu-toggle pf-m-plain"
1824
1824
  type="button"
1825
1825
  aria-expanded="false"
1826
1826
  aria-label="Actions"
1827
1827
  >
1828
- <span class="pf-v5-c-menu-toggle__icon">
1828
+ <span class="pf-v6-c-menu-toggle__icon">
1829
1829
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1830
1830
  </span>
1831
1831
  </button>
@@ -1836,71 +1836,71 @@ wrapperTag: div
1836
1836
  </div>
1837
1837
  </div>
1838
1838
  </header>
1839
- <div class="pf-v5-c-page__sidebar">
1840
- <div class="pf-v5-c-page__sidebar-body">
1839
+ <div class="pf-v6-c-page__sidebar">
1840
+ <div class="pf-v6-c-page__sidebar-body">
1841
1841
  <nav
1842
- class="pf-v5-c-nav"
1842
+ class="pf-v6-c-nav"
1843
1843
  id="masthead-advanced-with-menu-example-primary-nav"
1844
1844
  aria-label="Global"
1845
1845
  >
1846
- <ul class="pf-v5-c-nav__list" role="list">
1847
- <li class="pf-v5-c-nav__item">
1848
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
1846
+ <ul class="pf-v6-c-nav__list" role="list">
1847
+ <li class="pf-v6-c-nav__item">
1848
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
1849
1849
  </li>
1850
- <li class="pf-v5-c-nav__item">
1850
+ <li class="pf-v6-c-nav__item">
1851
1851
  <a
1852
1852
  href="#"
1853
- class="pf-v5-c-nav__link pf-m-current"
1853
+ class="pf-v6-c-nav__link pf-m-current"
1854
1854
  aria-current="page"
1855
1855
  >Policy</a>
1856
1856
  </li>
1857
- <li class="pf-v5-c-nav__item">
1858
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
1857
+ <li class="pf-v6-c-nav__item">
1858
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1859
1859
  </li>
1860
- <li class="pf-v5-c-nav__item">
1861
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
1860
+ <li class="pf-v6-c-nav__item">
1861
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
1862
1862
  </li>
1863
- <li class="pf-v5-c-nav__item">
1864
- <a href="#" class="pf-v5-c-nav__link">Server</a>
1863
+ <li class="pf-v6-c-nav__item">
1864
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
1865
1865
  </li>
1866
1866
  </ul>
1867
1867
  </nav>
1868
1868
  </div>
1869
1869
  </div>
1870
1870
  <main
1871
- class="pf-v5-c-page__main"
1871
+ class="pf-v6-c-page__main"
1872
1872
  tabindex="-1"
1873
1873
  id="main-content-masthead-advanced-with-menu-example"
1874
1874
  >
1875
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1876
- <div class="pf-v5-c-page__main-body">
1877
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1878
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1879
- <li class="pf-v5-c-breadcrumb__item">
1880
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1875
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1876
+ <div class="pf-v6-c-page__main-body">
1877
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1878
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1879
+ <li class="pf-v6-c-breadcrumb__item">
1880
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1881
1881
  </li>
1882
- <li class="pf-v5-c-breadcrumb__item">
1883
- <span class="pf-v5-c-breadcrumb__item-divider">
1882
+ <li class="pf-v6-c-breadcrumb__item">
1883
+ <span class="pf-v6-c-breadcrumb__item-divider">
1884
1884
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1885
1885
  </span>
1886
1886
 
1887
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1887
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1888
1888
  </li>
1889
- <li class="pf-v5-c-breadcrumb__item">
1890
- <span class="pf-v5-c-breadcrumb__item-divider">
1889
+ <li class="pf-v6-c-breadcrumb__item">
1890
+ <span class="pf-v6-c-breadcrumb__item-divider">
1891
1891
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1892
1892
  </span>
1893
1893
 
1894
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1894
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1895
1895
  </li>
1896
- <li class="pf-v5-c-breadcrumb__item">
1897
- <span class="pf-v5-c-breadcrumb__item-divider">
1896
+ <li class="pf-v6-c-breadcrumb__item">
1897
+ <span class="pf-v6-c-breadcrumb__item-divider">
1898
1898
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1899
1899
  </span>
1900
1900
 
1901
1901
  <a
1902
1902
  href="#"
1903
- class="pf-v5-c-breadcrumb__link pf-m-current"
1903
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1904
1904
  aria-current="page"
1905
1905
  >Section landing</a>
1906
1906
  </li>
@@ -1908,46 +1908,46 @@ wrapperTag: div
1908
1908
  </nav>
1909
1909
  </div>
1910
1910
  </section>
1911
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1912
- <div class="pf-v5-c-page__main-body">
1913
- <div class="pf-v5-c-content">
1911
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1912
+ <div class="pf-v6-c-page__main-body">
1913
+ <div class="pf-v6-c-content">
1914
1914
  <h1>Main title</h1>
1915
1915
  <p>This is a full page demo.</p>
1916
1916
  </div>
1917
1917
  </div>
1918
1918
  </section>
1919
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
1920
- <div class="pf-v5-c-page__main-body">
1921
- <div class="pf-v5-l-gallery pf-m-gutter">
1922
- <div class="pf-v5-c-card">
1923
- <div class="pf-v5-c-card__body">This is a card</div>
1919
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1920
+ <div class="pf-v6-c-page__main-body">
1921
+ <div class="pf-v6-l-gallery pf-m-gutter">
1922
+ <div class="pf-v6-c-card">
1923
+ <div class="pf-v6-c-card__body">This is a card</div>
1924
1924
  </div>
1925
- <div class="pf-v5-c-card">
1926
- <div class="pf-v5-c-card__body">This is a card</div>
1925
+ <div class="pf-v6-c-card">
1926
+ <div class="pf-v6-c-card__body">This is a card</div>
1927
1927
  </div>
1928
- <div class="pf-v5-c-card">
1929
- <div class="pf-v5-c-card__body">This is a card</div>
1928
+ <div class="pf-v6-c-card">
1929
+ <div class="pf-v6-c-card__body">This is a card</div>
1930
1930
  </div>
1931
- <div class="pf-v5-c-card">
1932
- <div class="pf-v5-c-card__body">This is a card</div>
1931
+ <div class="pf-v6-c-card">
1932
+ <div class="pf-v6-c-card__body">This is a card</div>
1933
1933
  </div>
1934
- <div class="pf-v5-c-card">
1935
- <div class="pf-v5-c-card__body">This is a card</div>
1934
+ <div class="pf-v6-c-card">
1935
+ <div class="pf-v6-c-card__body">This is a card</div>
1936
1936
  </div>
1937
- <div class="pf-v5-c-card">
1938
- <div class="pf-v5-c-card__body">This is a card</div>
1937
+ <div class="pf-v6-c-card">
1938
+ <div class="pf-v6-c-card__body">This is a card</div>
1939
1939
  </div>
1940
- <div class="pf-v5-c-card">
1941
- <div class="pf-v5-c-card__body">This is a card</div>
1940
+ <div class="pf-v6-c-card">
1941
+ <div class="pf-v6-c-card__body">This is a card</div>
1942
1942
  </div>
1943
- <div class="pf-v5-c-card">
1944
- <div class="pf-v5-c-card__body">This is a card</div>
1943
+ <div class="pf-v6-c-card">
1944
+ <div class="pf-v6-c-card__body">This is a card</div>
1945
1945
  </div>
1946
- <div class="pf-v5-c-card">
1947
- <div class="pf-v5-c-card__body">This is a card</div>
1946
+ <div class="pf-v6-c-card">
1947
+ <div class="pf-v6-c-card__body">This is a card</div>
1948
1948
  </div>
1949
- <div class="pf-v5-c-card">
1950
- <div class="pf-v5-c-card__body">This is a card</div>
1949
+ <div class="pf-v6-c-card">
1950
+ <div class="pf-v6-c-card__body">This is a card</div>
1951
1951
  </div>
1952
1952
  </div>
1953
1953
  </div>
@@ -1960,16 +1960,16 @@ wrapperTag: div
1960
1960
  ### Horizontal nav
1961
1961
 
1962
1962
  ```html isFullscreen
1963
- <div class="pf-v5-c-page" id="masthead-horizontal-nav">
1964
- <div class="pf-v5-c-skip-to-content">
1963
+ <div class="pf-v6-c-page" id="masthead-horizontal-nav">
1964
+ <div class="pf-v6-c-skip-to-content">
1965
1965
  <a
1966
- class="pf-v5-c-button pf-m-primary"
1966
+ class="pf-v6-c-button pf-m-primary"
1967
1967
  href="#main-content-masthead-horizontal-nav"
1968
1968
  >Skip to content</a>
1969
1969
  </div>
1970
- <header class="pf-v5-c-masthead" id="masthead-horizontal-nav-masthead">
1971
- <div class="pf-v5-c-masthead__main">
1972
- <a class="pf-v5-c-masthead__brand" href="#">
1970
+ <header class="pf-v6-c-masthead" id="masthead-horizontal-nav-masthead">
1971
+ <div class="pf-v6-c-masthead__main">
1972
+ <a class="pf-v6-c-masthead__brand" href="#">
1973
1973
  <svg height="40px" viewBox="0 0 679 158">
1974
1974
  <title>PF-HorizontalLogo-Color</title>
1975
1975
  <defs>
@@ -2042,37 +2042,37 @@ wrapperTag: div
2042
2042
  </svg>
2043
2043
  </a>
2044
2044
  </div>
2045
- <div class="pf-v5-c-masthead__content">
2045
+ <div class="pf-v6-c-masthead__content">
2046
2046
  <div
2047
- class="pf-v5-c-toolbar pf-m-static"
2047
+ class="pf-v6-c-toolbar pf-m-static"
2048
2048
  id="masthead-horizontal-nav-masthead-toolbar"
2049
2049
  >
2050
- <div class="pf-v5-c-toolbar__content">
2051
- <div class="pf-v5-c-toolbar__content-section">
2052
- <div class="pf-v5-c-toolbar__item">
2050
+ <div class="pf-v6-c-toolbar__content">
2051
+ <div class="pf-v6-c-toolbar__content-section">
2052
+ <div class="pf-v6-c-toolbar__item">
2053
2053
  <button
2054
- class="pf-v5-c-menu-toggle"
2054
+ class="pf-v6-c-menu-toggle"
2055
2055
  type="button"
2056
2056
  aria-expanded="false"
2057
2057
  >
2058
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
2059
- <span class="pf-v5-c-menu-toggle__controls">
2060
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2058
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
2059
+ <span class="pf-v6-c-menu-toggle__controls">
2060
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2061
2061
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2062
2062
  </span>
2063
2063
  </span>
2064
2064
  </button>
2065
2065
  </div>
2066
2066
 
2067
- <div class="pf-v5-c-toolbar__item">
2067
+ <div class="pf-v6-c-toolbar__item">
2068
2068
  <button
2069
- class="pf-v5-c-menu-toggle"
2069
+ class="pf-v6-c-menu-toggle"
2070
2070
  type="button"
2071
2071
  aria-expanded="false"
2072
2072
  >
2073
- <span class="pf-v5-c-menu-toggle__text">Services</span>
2074
- <span class="pf-v5-c-menu-toggle__controls">
2075
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2073
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
2074
+ <span class="pf-v6-c-menu-toggle__controls">
2075
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2076
2076
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2077
2077
  </span>
2078
2078
  </span>
@@ -2080,53 +2080,53 @@ wrapperTag: div
2080
2080
  </div>
2081
2081
 
2082
2082
  <div
2083
- class="pf-v5-c-toolbar__item pf-m-overflow-container"
2083
+ class="pf-v6-c-toolbar__item pf-m-overflow-container"
2084
2084
  style="--pf-v5-c-toolbar__item--MinWidth: 18ch;"
2085
2085
  >
2086
2086
  <nav
2087
- class="pf-v5-c-nav pf-m-scrollable pf-m-horizontal"
2087
+ class="pf-v6-c-nav pf-m-scrollable pf-m-horizontal"
2088
2088
  id="masthead-horizontal-nav-masthead-horizontal-nav"
2089
2089
  aria-label="Global"
2090
2090
  >
2091
- <div class="pf-v5-c-nav__scroll-button">
2091
+ <div class="pf-v6-c-nav__scroll-button">
2092
2092
  <button
2093
- class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
2093
+ class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
2094
2094
  type="button"
2095
2095
  aria-label="Scroll start"
2096
2096
  >
2097
- <span class="pf-v5-c-button__icon">
2097
+ <span class="pf-v6-c-button__icon">
2098
2098
  <i class="fas fa-angle-left" aria-hidden="true"></i>
2099
2099
  </span>
2100
2100
  </button>
2101
2101
  </div>
2102
- <ul class="pf-v5-c-nav__list" role="list">
2103
- <li class="pf-v5-c-nav__item">
2104
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 1</a>
2102
+ <ul class="pf-v6-c-nav__list" role="list">
2103
+ <li class="pf-v6-c-nav__item">
2104
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 1</a>
2105
2105
  </li>
2106
- <li class="pf-v5-c-nav__item">
2107
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 2</a>
2106
+ <li class="pf-v6-c-nav__item">
2107
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 2</a>
2108
2108
  </li>
2109
- <li class="pf-v5-c-nav__item">
2110
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 3</a>
2109
+ <li class="pf-v6-c-nav__item">
2110
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 3</a>
2111
2111
  </li>
2112
- <li class="pf-v5-c-nav__item">
2113
- <a href="#" class="pf-v5-c-nav__link">Horizontal nav item 4</a>
2112
+ <li class="pf-v6-c-nav__item">
2113
+ <a href="#" class="pf-v6-c-nav__link">Horizontal nav item 4</a>
2114
2114
  </li>
2115
- <li class="pf-v5-c-nav__item">
2115
+ <li class="pf-v6-c-nav__item">
2116
2116
  <a
2117
2117
  href="#"
2118
- class="pf-v5-c-nav__link pf-m-current"
2118
+ class="pf-v6-c-nav__link pf-m-current"
2119
2119
  aria-current="page"
2120
2120
  >Horizontal nav item 5</a>
2121
2121
  </li>
2122
2122
  </ul>
2123
- <div class="pf-v5-c-nav__scroll-button">
2123
+ <div class="pf-v6-c-nav__scroll-button">
2124
2124
  <button
2125
- class="pf-v5-c-button pf-m-plain pf-m-RTL-icon-static"
2125
+ class="pf-v6-c-button pf-m-plain pf-m-RTL-icon-static"
2126
2126
  type="button"
2127
2127
  aria-label="Scroll end"
2128
2128
  >
2129
- <span class="pf-v5-c-button__icon">
2129
+ <span class="pf-v6-c-button__icon">
2130
2130
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2131
2131
  </span>
2132
2132
  </button>
@@ -2134,56 +2134,56 @@ wrapperTag: div
2134
2134
  </nav>
2135
2135
  </div>
2136
2136
  <div
2137
- 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"
2137
+ 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"
2138
2138
  >
2139
2139
  <div
2140
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2140
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2141
2141
  >
2142
- <div class="pf-v5-c-toolbar__item">
2142
+ <div class="pf-v6-c-toolbar__item">
2143
2143
  <button
2144
- class="pf-v5-c-menu-toggle pf-m-plain"
2144
+ class="pf-v6-c-menu-toggle pf-m-plain"
2145
2145
  type="button"
2146
2146
  aria-expanded="false"
2147
2147
  aria-label="Application launcher"
2148
2148
  >
2149
- <span class="pf-v5-c-menu-toggle__icon">
2149
+ <span class="pf-v6-c-menu-toggle__icon">
2150
2150
  <i class="fas fa-th" aria-hidden="true"></i>
2151
2151
  </span>
2152
2152
  </button>
2153
2153
  </div>
2154
- <div class="pf-v5-c-toolbar__item">
2154
+ <div class="pf-v6-c-toolbar__item">
2155
2155
  <button
2156
- class="pf-v5-c-menu-toggle pf-m-plain"
2156
+ class="pf-v6-c-menu-toggle pf-m-plain"
2157
2157
  type="button"
2158
2158
  aria-expanded="false"
2159
2159
  aria-label="Settings"
2160
2160
  >
2161
- <span class="pf-v5-c-menu-toggle__icon">
2161
+ <span class="pf-v6-c-menu-toggle__icon">
2162
2162
  <i class="fas fa-cog" aria-hidden="true"></i>
2163
2163
  </span>
2164
2164
  </button>
2165
2165
  </div>
2166
- <div class="pf-v5-c-toolbar__item">
2166
+ <div class="pf-v6-c-toolbar__item">
2167
2167
  <button
2168
- class="pf-v5-c-menu-toggle pf-m-plain"
2168
+ class="pf-v6-c-menu-toggle pf-m-plain"
2169
2169
  type="button"
2170
2170
  aria-expanded="false"
2171
2171
  aria-label="Help"
2172
2172
  >
2173
- <span class="pf-v5-c-menu-toggle__icon">
2173
+ <span class="pf-v6-c-menu-toggle__icon">
2174
2174
  <i class="fas fa-question-circle" aria-hidden="true"></i>
2175
2175
  </span>
2176
2176
  </button>
2177
2177
  </div>
2178
2178
  </div>
2179
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
2179
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
2180
2180
  <button
2181
- class="pf-v5-c-menu-toggle pf-m-plain"
2181
+ class="pf-v6-c-menu-toggle pf-m-plain"
2182
2182
  type="button"
2183
2183
  aria-expanded="false"
2184
2184
  aria-label="Actions"
2185
2185
  >
2186
- <span class="pf-v5-c-menu-toggle__icon">
2186
+ <span class="pf-v6-c-menu-toggle__icon">
2187
2187
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2188
2188
  </span>
2189
2189
  </button>
@@ -2195,39 +2195,39 @@ wrapperTag: div
2195
2195
  </div>
2196
2196
  </header>
2197
2197
  <main
2198
- class="pf-v5-c-page__main"
2198
+ class="pf-v6-c-page__main"
2199
2199
  tabindex="-1"
2200
2200
  id="main-content-masthead-horizontal-nav"
2201
2201
  >
2202
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
2203
- <div class="pf-v5-c-page__main-body">
2204
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
2205
- <ol class="pf-v5-c-breadcrumb__list" role="list">
2206
- <li class="pf-v5-c-breadcrumb__item">
2207
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
2202
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2203
+ <div class="pf-v6-c-page__main-body">
2204
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2205
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2206
+ <li class="pf-v6-c-breadcrumb__item">
2207
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2208
2208
  </li>
2209
- <li class="pf-v5-c-breadcrumb__item">
2210
- <span class="pf-v5-c-breadcrumb__item-divider">
2209
+ <li class="pf-v6-c-breadcrumb__item">
2210
+ <span class="pf-v6-c-breadcrumb__item-divider">
2211
2211
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2212
2212
  </span>
2213
2213
 
2214
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
2214
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2215
2215
  </li>
2216
- <li class="pf-v5-c-breadcrumb__item">
2217
- <span class="pf-v5-c-breadcrumb__item-divider">
2216
+ <li class="pf-v6-c-breadcrumb__item">
2217
+ <span class="pf-v6-c-breadcrumb__item-divider">
2218
2218
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2219
2219
  </span>
2220
2220
 
2221
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
2221
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2222
2222
  </li>
2223
- <li class="pf-v5-c-breadcrumb__item">
2224
- <span class="pf-v5-c-breadcrumb__item-divider">
2223
+ <li class="pf-v6-c-breadcrumb__item">
2224
+ <span class="pf-v6-c-breadcrumb__item-divider">
2225
2225
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2226
2226
  </span>
2227
2227
 
2228
2228
  <a
2229
2229
  href="#"
2230
- class="pf-v5-c-breadcrumb__link pf-m-current"
2230
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2231
2231
  aria-current="page"
2232
2232
  >Section landing</a>
2233
2233
  </li>
@@ -2235,46 +2235,46 @@ wrapperTag: div
2235
2235
  </nav>
2236
2236
  </div>
2237
2237
  </section>
2238
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
2239
- <div class="pf-v5-c-page__main-body">
2240
- <div class="pf-v5-c-content">
2238
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2239
+ <div class="pf-v6-c-page__main-body">
2240
+ <div class="pf-v6-c-content">
2241
2241
  <h1>Main title</h1>
2242
2242
  <p>This is a full page demo.</p>
2243
2243
  </div>
2244
2244
  </div>
2245
2245
  </section>
2246
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
2247
- <div class="pf-v5-c-page__main-body">
2248
- <div class="pf-v5-l-gallery pf-m-gutter">
2249
- <div class="pf-v5-c-card">
2250
- <div class="pf-v5-c-card__body">This is a card</div>
2246
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2247
+ <div class="pf-v6-c-page__main-body">
2248
+ <div class="pf-v6-l-gallery pf-m-gutter">
2249
+ <div class="pf-v6-c-card">
2250
+ <div class="pf-v6-c-card__body">This is a card</div>
2251
2251
  </div>
2252
- <div class="pf-v5-c-card">
2253
- <div class="pf-v5-c-card__body">This is a card</div>
2252
+ <div class="pf-v6-c-card">
2253
+ <div class="pf-v6-c-card__body">This is a card</div>
2254
2254
  </div>
2255
- <div class="pf-v5-c-card">
2256
- <div class="pf-v5-c-card__body">This is a card</div>
2255
+ <div class="pf-v6-c-card">
2256
+ <div class="pf-v6-c-card__body">This is a card</div>
2257
2257
  </div>
2258
- <div class="pf-v5-c-card">
2259
- <div class="pf-v5-c-card__body">This is a card</div>
2258
+ <div class="pf-v6-c-card">
2259
+ <div class="pf-v6-c-card__body">This is a card</div>
2260
2260
  </div>
2261
- <div class="pf-v5-c-card">
2262
- <div class="pf-v5-c-card__body">This is a card</div>
2261
+ <div class="pf-v6-c-card">
2262
+ <div class="pf-v6-c-card__body">This is a card</div>
2263
2263
  </div>
2264
- <div class="pf-v5-c-card">
2265
- <div class="pf-v5-c-card__body">This is a card</div>
2264
+ <div class="pf-v6-c-card">
2265
+ <div class="pf-v6-c-card__body">This is a card</div>
2266
2266
  </div>
2267
- <div class="pf-v5-c-card">
2268
- <div class="pf-v5-c-card__body">This is a card</div>
2267
+ <div class="pf-v6-c-card">
2268
+ <div class="pf-v6-c-card__body">This is a card</div>
2269
2269
  </div>
2270
- <div class="pf-v5-c-card">
2271
- <div class="pf-v5-c-card__body">This is a card</div>
2270
+ <div class="pf-v6-c-card">
2271
+ <div class="pf-v6-c-card__body">This is a card</div>
2272
2272
  </div>
2273
- <div class="pf-v5-c-card">
2274
- <div class="pf-v5-c-card__body">This is a card</div>
2273
+ <div class="pf-v6-c-card">
2274
+ <div class="pf-v6-c-card__body">This is a card</div>
2275
2275
  </div>
2276
- <div class="pf-v5-c-card">
2277
- <div class="pf-v5-c-card__body">This is a card</div>
2276
+ <div class="pf-v6-c-card">
2277
+ <div class="pf-v6-c-card__body">This is a card</div>
2278
2278
  </div>
2279
2279
  </div>
2280
2280
  </div>
@@ -2290,30 +2290,30 @@ wrapperTag: div
2290
2290
 
2291
2291
  ```html isFullscreen
2292
2292
  <div
2293
- class="pf-v5-c-page"
2293
+ class="pf-v6-c-page"
2294
2294
  id="masthead-toggle-group-filters-expanded-mobile-example"
2295
2295
  >
2296
- <div class="pf-v5-c-skip-to-content">
2296
+ <div class="pf-v6-c-skip-to-content">
2297
2297
  <a
2298
- class="pf-v5-c-button pf-m-primary"
2298
+ class="pf-v6-c-button pf-m-primary"
2299
2299
  href="#main-content-masthead-toggle-group-filters-expanded-mobile-example"
2300
2300
  >Skip to content</a>
2301
2301
  </div>
2302
2302
  <header
2303
- class="pf-v5-c-masthead"
2303
+ class="pf-v6-c-masthead"
2304
2304
  id="masthead-toggle-group-filters-expanded-mobile-example-masthead"
2305
2305
  >
2306
- <span class="pf-v5-c-masthead__toggle">
2306
+ <span class="pf-v6-c-masthead__toggle">
2307
2307
  <button
2308
- class="pf-v5-c-button pf-m-plain"
2308
+ class="pf-v6-c-button pf-m-plain"
2309
2309
  type="button"
2310
2310
  aria-label="Global navigation"
2311
2311
  >
2312
2312
  <i class="fas fa-bars" aria-hidden="true"></i>
2313
2313
  </button>
2314
2314
  </span>
2315
- <div class="pf-v5-c-masthead__main">
2316
- <a class="pf-v5-c-masthead__brand" href="#">
2315
+ <div class="pf-v6-c-masthead__main">
2316
+ <a class="pf-v6-c-masthead__brand" href="#">
2317
2317
  <svg height="40px" viewBox="0 0 679 158">
2318
2318
  <title>PF-HorizontalLogo-Color</title>
2319
2319
  <defs>
@@ -2386,80 +2386,80 @@ wrapperTag: div
2386
2386
  </svg>
2387
2387
  </a>
2388
2388
  </div>
2389
- <div class="pf-v5-c-masthead__content">
2389
+ <div class="pf-v6-c-masthead__content">
2390
2390
  <div
2391
- class="pf-v5-c-toolbar pf-m-static"
2391
+ class="pf-v6-c-toolbar pf-m-static"
2392
2392
  id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar"
2393
2393
  >
2394
- <div class="pf-v5-c-toolbar__content">
2395
- <div class="pf-v5-c-toolbar__content-section">
2394
+ <div class="pf-v6-c-toolbar__content">
2395
+ <div class="pf-v6-c-toolbar__content-section">
2396
2396
  <div
2397
- class="pf-v5-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-end"
2397
+ class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show pf-m-align-end"
2398
2398
  >
2399
- <div class="pf-v5-c-toolbar__toggle pf-m-show">
2399
+ <div class="pf-v6-c-toolbar__toggle pf-m-show">
2400
2400
  <button
2401
- class="pf-v5-c-menu-toggle pf-m-plain pf-m-expanded"
2401
+ class="pf-v6-c-menu-toggle pf-m-plain pf-m-expanded"
2402
2402
  type="button"
2403
2403
  aria-expanded="true"
2404
2404
  aria-label="Show filters"
2405
2405
  aria-controls="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
2406
2406
  >
2407
- <span class="pf-v5-c-menu-toggle__icon">
2407
+ <span class="pf-v6-c-menu-toggle__icon">
2408
2408
  <i class="fas fa-filter" aria-hidden="true"></i>
2409
2409
  </span>
2410
2410
  </button>
2411
2411
  </div>
2412
2412
  </div>
2413
- <div class="pf-v5-c-toolbar__item">
2413
+ <div class="pf-v6-c-toolbar__item">
2414
2414
  <button
2415
- class="pf-v5-c-menu-toggle pf-m-plain"
2415
+ class="pf-v6-c-menu-toggle pf-m-plain"
2416
2416
  type="button"
2417
2417
  aria-expanded="false"
2418
2418
  aria-label="Actions"
2419
2419
  >
2420
- <span class="pf-v5-c-menu-toggle__icon">
2420
+ <span class="pf-v6-c-menu-toggle__icon">
2421
2421
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2422
2422
  </span>
2423
2423
  </button>
2424
2424
  </div>
2425
2425
  </div>
2426
2426
  <div
2427
- class="pf-v5-c-toolbar__expandable-content pf-m-expanded"
2427
+ class="pf-v6-c-toolbar__expandable-content pf-m-expanded"
2428
2428
  id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-expandable-content"
2429
2429
  >
2430
- <div class="pf-v5-c-toolbar__item pf-m-search-filter">
2430
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
2431
2431
  <div
2432
- class="pf-v5-c-input-group"
2432
+ class="pf-v6-c-input-group"
2433
2433
  aria-label="search filter"
2434
2434
  role="group"
2435
2435
  >
2436
- <div class="pf-v5-c-input-group__item">
2436
+ <div class="pf-v6-c-input-group__item">
2437
2437
  <button
2438
- class="pf-v5-c-menu-toggle"
2438
+ class="pf-v6-c-menu-toggle"
2439
2439
  type="button"
2440
2440
  aria-expanded="false"
2441
2441
  id="masthead-toggle-group-filters-expanded-mobile-example-masthead-toolbar-search-filter-menu"
2442
2442
  >
2443
- <span class="pf-v5-c-menu-toggle__icon">
2443
+ <span class="pf-v6-c-menu-toggle__icon">
2444
2444
  <i class="fas fa-filter" aria-hidden="true"></i>
2445
2445
  </span>
2446
- <span class="pf-v5-c-menu-toggle__text">Name</span>
2447
- <span class="pf-v5-c-menu-toggle__controls">
2448
- <span class="pf-v5-c-menu-toggle__toggle-icon">
2446
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
2447
+ <span class="pf-v6-c-menu-toggle__controls">
2448
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2449
2449
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2450
2450
  </span>
2451
2451
  </span>
2452
2452
  </button>
2453
2453
  </div>
2454
- <div class="pf-v5-c-input-group__item pf-m-fill">
2455
- <div class="pf-v5-c-text-input-group">
2456
- <div class="pf-v5-c-text-input-group__main pf-m-icon">
2457
- <span class="pf-v5-c-text-input-group__text">
2458
- <span class="pf-v5-c-text-input-group__icon">
2454
+ <div class="pf-v6-c-input-group__item pf-m-fill">
2455
+ <div class="pf-v6-c-text-input-group">
2456
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
2457
+ <span class="pf-v6-c-text-input-group__text">
2458
+ <span class="pf-v6-c-text-input-group__icon">
2459
2459
  <i class="fas fa-fw fa-search"></i>
2460
2460
  </span>
2461
2461
  <input
2462
- class="pf-v5-c-text-input-group__text-input"
2462
+ class="pf-v6-c-text-input-group__text-input"
2463
2463
  type="text"
2464
2464
  placeholder="Filter by name"
2465
2465
  value
@@ -2476,71 +2476,71 @@ wrapperTag: div
2476
2476
  </div>
2477
2477
  </div>
2478
2478
  </header>
2479
- <div class="pf-v5-c-page__sidebar">
2480
- <div class="pf-v5-c-page__sidebar-body">
2479
+ <div class="pf-v6-c-page__sidebar">
2480
+ <div class="pf-v6-c-page__sidebar-body">
2481
2481
  <nav
2482
- class="pf-v5-c-nav"
2482
+ class="pf-v6-c-nav"
2483
2483
  id="masthead-toggle-group-filters-expanded-mobile-example-primary-nav"
2484
2484
  aria-label="Global"
2485
2485
  >
2486
- <ul class="pf-v5-c-nav__list" role="list">
2487
- <li class="pf-v5-c-nav__item">
2488
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
2486
+ <ul class="pf-v6-c-nav__list" role="list">
2487
+ <li class="pf-v6-c-nav__item">
2488
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
2489
2489
  </li>
2490
- <li class="pf-v5-c-nav__item">
2490
+ <li class="pf-v6-c-nav__item">
2491
2491
  <a
2492
2492
  href="#"
2493
- class="pf-v5-c-nav__link pf-m-current"
2493
+ class="pf-v6-c-nav__link pf-m-current"
2494
2494
  aria-current="page"
2495
2495
  >Policy</a>
2496
2496
  </li>
2497
- <li class="pf-v5-c-nav__item">
2498
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
2497
+ <li class="pf-v6-c-nav__item">
2498
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
2499
2499
  </li>
2500
- <li class="pf-v5-c-nav__item">
2501
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
2500
+ <li class="pf-v6-c-nav__item">
2501
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
2502
2502
  </li>
2503
- <li class="pf-v5-c-nav__item">
2504
- <a href="#" class="pf-v5-c-nav__link">Server</a>
2503
+ <li class="pf-v6-c-nav__item">
2504
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
2505
2505
  </li>
2506
2506
  </ul>
2507
2507
  </nav>
2508
2508
  </div>
2509
2509
  </div>
2510
2510
  <main
2511
- class="pf-v5-c-page__main"
2511
+ class="pf-v6-c-page__main"
2512
2512
  tabindex="-1"
2513
2513
  id="main-content-masthead-toggle-group-filters-expanded-mobile-example"
2514
2514
  >
2515
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
2516
- <div class="pf-v5-c-page__main-body">
2517
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
2518
- <ol class="pf-v5-c-breadcrumb__list" role="list">
2519
- <li class="pf-v5-c-breadcrumb__item">
2520
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
2515
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2516
+ <div class="pf-v6-c-page__main-body">
2517
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2518
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2519
+ <li class="pf-v6-c-breadcrumb__item">
2520
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2521
2521
  </li>
2522
- <li class="pf-v5-c-breadcrumb__item">
2523
- <span class="pf-v5-c-breadcrumb__item-divider">
2522
+ <li class="pf-v6-c-breadcrumb__item">
2523
+ <span class="pf-v6-c-breadcrumb__item-divider">
2524
2524
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2525
2525
  </span>
2526
2526
 
2527
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
2527
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2528
2528
  </li>
2529
- <li class="pf-v5-c-breadcrumb__item">
2530
- <span class="pf-v5-c-breadcrumb__item-divider">
2529
+ <li class="pf-v6-c-breadcrumb__item">
2530
+ <span class="pf-v6-c-breadcrumb__item-divider">
2531
2531
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2532
2532
  </span>
2533
2533
 
2534
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
2534
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2535
2535
  </li>
2536
- <li class="pf-v5-c-breadcrumb__item">
2537
- <span class="pf-v5-c-breadcrumb__item-divider">
2536
+ <li class="pf-v6-c-breadcrumb__item">
2537
+ <span class="pf-v6-c-breadcrumb__item-divider">
2538
2538
  <i class="fas fa-angle-right" aria-hidden="true"></i>
2539
2539
  </span>
2540
2540
 
2541
2541
  <a
2542
2542
  href="#"
2543
- class="pf-v5-c-breadcrumb__link pf-m-current"
2543
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2544
2544
  aria-current="page"
2545
2545
  >Section landing</a>
2546
2546
  </li>
@@ -2548,46 +2548,46 @@ wrapperTag: div
2548
2548
  </nav>
2549
2549
  </div>
2550
2550
  </section>
2551
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
2552
- <div class="pf-v5-c-page__main-body">
2553
- <div class="pf-v5-c-content">
2551
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2552
+ <div class="pf-v6-c-page__main-body">
2553
+ <div class="pf-v6-c-content">
2554
2554
  <h1>Main title</h1>
2555
2555
  <p>This is a full page demo.</p>
2556
2556
  </div>
2557
2557
  </div>
2558
2558
  </section>
2559
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
2560
- <div class="pf-v5-c-page__main-body">
2561
- <div class="pf-v5-l-gallery pf-m-gutter">
2562
- <div class="pf-v5-c-card">
2563
- <div class="pf-v5-c-card__body">This is a card</div>
2559
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2560
+ <div class="pf-v6-c-page__main-body">
2561
+ <div class="pf-v6-l-gallery pf-m-gutter">
2562
+ <div class="pf-v6-c-card">
2563
+ <div class="pf-v6-c-card__body">This is a card</div>
2564
2564
  </div>
2565
- <div class="pf-v5-c-card">
2566
- <div class="pf-v5-c-card__body">This is a card</div>
2565
+ <div class="pf-v6-c-card">
2566
+ <div class="pf-v6-c-card__body">This is a card</div>
2567
2567
  </div>
2568
- <div class="pf-v5-c-card">
2569
- <div class="pf-v5-c-card__body">This is a card</div>
2568
+ <div class="pf-v6-c-card">
2569
+ <div class="pf-v6-c-card__body">This is a card</div>
2570
2570
  </div>
2571
- <div class="pf-v5-c-card">
2572
- <div class="pf-v5-c-card__body">This is a card</div>
2571
+ <div class="pf-v6-c-card">
2572
+ <div class="pf-v6-c-card__body">This is a card</div>
2573
2573
  </div>
2574
- <div class="pf-v5-c-card">
2575
- <div class="pf-v5-c-card__body">This is a card</div>
2574
+ <div class="pf-v6-c-card">
2575
+ <div class="pf-v6-c-card__body">This is a card</div>
2576
2576
  </div>
2577
- <div class="pf-v5-c-card">
2578
- <div class="pf-v5-c-card__body">This is a card</div>
2577
+ <div class="pf-v6-c-card">
2578
+ <div class="pf-v6-c-card__body">This is a card</div>
2579
2579
  </div>
2580
- <div class="pf-v5-c-card">
2581
- <div class="pf-v5-c-card__body">This is a card</div>
2580
+ <div class="pf-v6-c-card">
2581
+ <div class="pf-v6-c-card__body">This is a card</div>
2582
2582
  </div>
2583
- <div class="pf-v5-c-card">
2584
- <div class="pf-v5-c-card__body">This is a card</div>
2583
+ <div class="pf-v6-c-card">
2584
+ <div class="pf-v6-c-card__body">This is a card</div>
2585
2585
  </div>
2586
- <div class="pf-v5-c-card">
2587
- <div class="pf-v5-c-card__body">This is a card</div>
2586
+ <div class="pf-v6-c-card">
2587
+ <div class="pf-v6-c-card__body">This is a card</div>
2588
2588
  </div>
2589
- <div class="pf-v5-c-card">
2590
- <div class="pf-v5-c-card__body">This is a card</div>
2589
+ <div class="pf-v6-c-card">
2590
+ <div class="pf-v6-c-card__body">This is a card</div>
2591
2591
  </div>
2592
2592
  </div>
2593
2593
  </div>