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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (259) hide show
  1. package/base/patternfly-common.css +10 -10
  2. package/base/patternfly-globals.css +3 -3
  3. package/base/patternfly-icons.css +1 -1
  4. package/base/patternfly-themes.css +53 -53
  5. package/base/patternfly-variables.css +236 -245
  6. package/base/tokens/_tokens-font.scss +0 -11
  7. package/components/AboutModalBox/about-modal-box.css +102 -102
  8. package/components/Accordion/accordion.css +118 -118
  9. package/components/ActionList/action-list.css +16 -16
  10. package/components/Alert/alert-group.css +50 -50
  11. package/components/Alert/alert.css +161 -161
  12. package/components/AppLauncher/app-launcher.css +167 -167
  13. package/components/Avatar/avatar.css +116 -116
  14. package/components/BackToTop/back-to-top.css +21 -21
  15. package/components/Backdrop/backdrop.css +9 -9
  16. package/components/BackgroundImage/background-image.css +15 -15
  17. package/components/Badge/badge.css +35 -35
  18. package/components/Banner/banner.css +114 -114
  19. package/components/Brand/brand.css +28 -28
  20. package/components/Breadcrumb/breadcrumb.css +62 -62
  21. package/components/Button/button.css +514 -514
  22. package/components/CalendarMonth/calendar-month.css +144 -144
  23. package/components/Card/card.css +230 -230
  24. package/components/Check/check.css +43 -43
  25. package/components/Chip/chip-group.css +60 -60
  26. package/components/Chip/chip.css +83 -83
  27. package/components/ClipboardCopy/clipboard-copy.css +71 -71
  28. package/components/CodeBlock/code-block.css +35 -35
  29. package/components/CodeEditor/code-editor.css +121 -121
  30. package/components/Content/content.css +216 -216
  31. package/components/ContextSelector/context-selector.css +251 -251
  32. package/components/DataList/data-list-grid.css +182 -182
  33. package/components/DataList/data-list.css +468 -468
  34. package/components/DatePicker/date-picker.css +35 -35
  35. package/components/DescriptionList/description-list-order.css +90 -90
  36. package/components/DescriptionList/description-list.css +193 -193
  37. package/components/Divider/divider.css +143 -143
  38. package/components/DragDrop/drag-drop.css +46 -46
  39. package/components/Drawer/drawer.css +474 -474
  40. package/components/Dropdown/dropdown.css +457 -457
  41. package/components/DualListSelector/dual-list-selector.css +199 -199
  42. package/components/EmptyState/empty-state.css +104 -104
  43. package/components/ExpandableSection/expandable-section.css +113 -113
  44. package/components/FileUpload/file-upload.css +32 -32
  45. package/components/Form/form.css +281 -281
  46. package/components/FormControl/form-control.css +197 -197
  47. package/components/HelperText/helper-text.css +51 -51
  48. package/components/Hint/hint.css +46 -46
  49. package/components/Icon/icon.css +218 -218
  50. package/components/InlineEdit/inline-edit.css +43 -43
  51. package/components/InputGroup/input-group.css +52 -52
  52. package/components/JumpLinks/jump-links.css +183 -183
  53. package/components/Label/label-group.css +86 -86
  54. package/components/Label/label.css +438 -438
  55. package/components/List/list.css +53 -53
  56. package/components/LogViewer/log-viewer.css +138 -138
  57. package/components/Login/login.css +139 -139
  58. package/components/Masthead/masthead.css +319 -319
  59. package/components/Menu/menu.css +415 -415
  60. package/components/MenuToggle/menu-toggle.css +275 -275
  61. package/components/ModalBox/modal-box.css +121 -121
  62. package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
  63. package/components/Nav/nav.css +225 -225
  64. package/components/NotificationBadge/notification-badge.css +66 -66
  65. package/components/NotificationDrawer/notification-drawer.css +179 -179
  66. package/components/NumberInput/number-input.css +20 -20
  67. package/components/OptionsMenu/options-menu.css +190 -190
  68. package/components/OverflowMenu/overflow-menu.css +19 -19
  69. package/components/Page/page.css +598 -598
  70. package/components/Pagination/pagination.css +220 -220
  71. package/components/Panel/panel.css +72 -72
  72. package/components/Popover/popover.css +148 -148
  73. package/components/Progress/progress.css +80 -80
  74. package/components/ProgressStepper/progress-stepper.css +514 -514
  75. package/components/Radio/radio.css +44 -44
  76. package/components/Select/select.css +423 -423
  77. package/components/Sidebar/sidebar.css +166 -166
  78. package/components/SimpleList/simple-list.css +53 -53
  79. package/components/Skeleton/skeleton.css +112 -112
  80. package/components/SkipToContent/skip-to-content.css +8 -8
  81. package/components/Slider/slider.css +144 -144
  82. package/components/Spinner/spinner.css +36 -36
  83. package/components/Switch/switch.css +89 -89
  84. package/components/TabContent/tab-content.css +34 -34
  85. package/components/Table/table-grid.css +911 -911
  86. package/components/Table/table-scrollable.css +38 -38
  87. package/components/Table/table-tree-view.css +497 -497
  88. package/components/Table/table.css +660 -660
  89. package/components/Tabs/tabs.css +616 -616
  90. package/components/TextInputGroup/text-input-group.css +88 -88
  91. package/components/Tile/tile.css +68 -68
  92. package/components/Timestamp/timestamp.css +29 -29
  93. package/components/Title/title.css +87 -87
  94. package/components/ToggleGroup/toggle-group.css +86 -86
  95. package/components/Toolbar/toolbar.css +2279 -2279
  96. package/components/Tooltip/tooltip.css +85 -85
  97. package/components/TreeView/tree-view.css +363 -363
  98. package/components/Truncate/truncate.css +15 -15
  99. package/components/Wizard/wizard.css +272 -272
  100. package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
  101. package/docs/components/Accordion/examples/Accordion.md +188 -188
  102. package/docs/components/ActionList/examples/ActionList.md +55 -55
  103. package/docs/components/Alert/examples/Alert.md +222 -222
  104. package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
  105. package/docs/components/Avatar/examples/Avatar.md +6 -6
  106. package/docs/components/BackToTop/examples/BackToTop.md +3 -3
  107. package/docs/components/Backdrop/examples/Backdrop.md +1 -1
  108. package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
  109. package/docs/components/Badge/examples/Badge.md +17 -17
  110. package/docs/components/Banner/examples/Banner.md +42 -42
  111. package/docs/components/Brand/examples/Brand.md +4 -4
  112. package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
  113. package/docs/components/Button/examples/Button.md +364 -364
  114. package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
  115. package/docs/components/Card/examples/Card.md +515 -515
  116. package/docs/components/Check/examples/Check.md +37 -37
  117. package/docs/components/Chip/examples/Chip.md +216 -216
  118. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
  119. package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
  120. package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
  121. package/docs/components/Content/examples/Content.md +1 -1
  122. package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
  123. package/docs/components/DataList/examples/DataList.md +666 -666
  124. package/docs/components/DatePicker/examples/DatePicker.md +54 -54
  125. package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
  126. package/docs/components/Divider/examples/Divider.md +18 -18
  127. package/docs/components/DragDrop/examples/DragDrop.md +27 -27
  128. package/docs/components/Drawer/examples/Drawer.md +225 -225
  129. package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
  130. package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
  131. package/docs/components/EmptyState/examples/EmptyState.md +100 -100
  132. package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
  133. package/docs/components/FileUpload/examples/FileUpload.md +94 -94
  134. package/docs/components/Form/examples/Form.md +226 -226
  135. package/docs/components/FormControl/examples/FormControl.md +65 -65
  136. package/docs/components/HelperText/examples/HelperText.md +72 -72
  137. package/docs/components/Hint/examples/Hint.md +44 -44
  138. package/docs/components/Icon/examples/Icon.md +85 -85
  139. package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
  140. package/docs/components/InputGroup/examples/InputGroup.md +73 -73
  141. package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
  142. package/docs/components/Label/examples/Label.md +1717 -1717
  143. package/docs/components/List/examples/List.md +30 -30
  144. package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
  145. package/docs/components/Login/examples/Login.md +287 -287
  146. package/docs/components/Masthead/examples/masthead.md +39 -39
  147. package/docs/components/Menu/examples/Menu.md +2377 -2377
  148. package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
  149. package/docs/components/ModalBox/examples/ModalBox.md +119 -119
  150. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
  151. package/docs/components/Nav/examples/Navigation.md +856 -856
  152. package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
  153. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
  154. package/docs/components/NumberInput/examples/NumberInput.md +127 -127
  155. package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
  157. package/docs/components/Page/deprecated/PageHeader.md +85 -85
  158. package/docs/components/Page/examples/Page.md +90 -90
  159. package/docs/components/Pagination/examples/Pagination.md +285 -285
  160. package/docs/components/Panel/examples/Panel.md +38 -38
  161. package/docs/components/Popover/examples/Popover.md +169 -169
  162. package/docs/components/Progress/examples/Progress.md +145 -145
  163. package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
  164. package/docs/components/Radio/examples/Radio.md +33 -33
  165. package/docs/components/Select/deprecated/Select.md +736 -736
  166. package/docs/components/Sidebar/examples/Sidebar.md +65 -65
  167. package/docs/components/SimpleList/examples/SimpleList.md +39 -39
  168. package/docs/components/Skeleton/examples/Skeleton.md +29 -29
  169. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
  170. package/docs/components/Slider/examples/Slider.md +213 -213
  171. package/docs/components/Spinner/examples/Spinner.md +14 -14
  172. package/docs/components/Switch/examples/Switch.md +58 -58
  173. package/docs/components/TabContent/examples/TabContent.md +24 -24
  174. package/docs/components/Table/examples/Table.md +6982 -6982
  175. package/docs/components/Tabs/examples/Tabs.md +2114 -2114
  176. package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
  177. package/docs/components/Tile/examples/Tile.md +131 -131
  178. package/docs/components/Timestamp/examples/Timestamp.md +10 -10
  179. package/docs/components/Title/examples/Title.md +12 -12
  180. package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
  181. package/docs/components/Toolbar/examples/Toolbar.md +611 -611
  182. package/docs/components/Tooltip/examples/Tooltip.md +27 -27
  183. package/docs/components/TreeView/examples/TreeView.md +1166 -1166
  184. package/docs/components/Truncate/examples/Truncate.md +7 -7
  185. package/docs/components/Wizard/examples/Wizard.md +522 -522
  186. package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
  187. package/docs/demos/Alert/examples/Alert.md +391 -391
  188. package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
  189. package/docs/demos/Banner/examples/Banner.md +364 -364
  190. package/docs/demos/Button/examples/Button.md +50 -50
  191. package/docs/demos/Card/examples/Card.md +1054 -1054
  192. package/docs/demos/CardView/examples/CardView.md +378 -378
  193. package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
  194. package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
  195. package/docs/demos/DataList/examples/DataList.md +1148 -1148
  196. package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
  197. package/docs/demos/Drawer/examples/Drawer.md +531 -531
  198. package/docs/demos/Form/examples/BasicForms.md +444 -444
  199. package/docs/demos/HelperText/examples/HelperText.md +51 -51
  200. package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
  201. package/docs/demos/Masthead/examples/Masthead.md +763 -763
  202. package/docs/demos/Modal/examples/Modal.md +645 -645
  203. package/docs/demos/Nav/examples/Nav.md +649 -649
  204. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
  205. package/docs/demos/Page/examples/Page.md +1330 -1330
  206. package/docs/demos/Page/examples/Penta.md +217 -217
  207. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
  208. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
  209. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
  210. package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
  211. package/docs/demos/Table/examples/Table.md +4580 -4580
  212. package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
  213. package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
  214. package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
  215. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
  216. package/docs/layouts/Flex/examples/Flex.md +290 -290
  217. package/docs/layouts/Gallery/examples/Gallery.md +48 -48
  218. package/docs/layouts/Grid/examples/Grid.md +121 -121
  219. package/docs/layouts/Level/examples/Level.md +11 -11
  220. package/docs/layouts/Split/examples/Split.md +23 -23
  221. package/docs/layouts/Stack/examples/Stack.md +8 -8
  222. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
  223. package/docs/utilities/Alignment/examples/Alignment.md +4 -4
  224. package/docs/utilities/Display/examples/Display.md +16 -16
  225. package/docs/utilities/Flex/examples/Flex.md +53 -53
  226. package/docs/utilities/Float/examples/Float.md +2 -2
  227. package/docs/utilities/Spacing/examples/Spacing.md +16 -16
  228. package/layouts/Bullseye/bullseye.css +3 -3
  229. package/layouts/Flex/flex.css +1276 -1276
  230. package/layouts/Gallery/gallery.css +34 -34
  231. package/layouts/Grid/grid.css +531 -531
  232. package/layouts/Level/level.css +4 -4
  233. package/layouts/Split/split.css +6 -6
  234. package/layouts/Stack/stack.css +5 -5
  235. package/package.json +1 -1
  236. package/patternfly-addons.css +2989 -2989
  237. package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
  238. package/patternfly-base-no-globals.css +284 -293
  239. package/patternfly-base-theme-dark-unversioned.css +271 -280
  240. package/patternfly-base.css +286 -295
  241. package/patternfly-charts-theme-dark-unversioned.css +66 -66
  242. package/patternfly-charts-theme-dark.css +66 -66
  243. package/patternfly-charts.css +320 -320
  244. package/patternfly-no-globals.css +20217 -20226
  245. package/patternfly-theme-dark-unversioned.css +20209 -20218
  246. package/patternfly.css +20219 -20228
  247. package/patternfly.min.css +1 -1
  248. package/patternfly.min.css.map +1 -1
  249. package/sass-utilities/_init.scss +1 -1
  250. package/utilities/Accessibility/accessibility.css +18 -18
  251. package/utilities/Alignment/alignment.css +24 -24
  252. package/utilities/BackgroundColor/BackgroundColor.css +252 -252
  253. package/utilities/BoxShadow/box-shadow.css +42 -42
  254. package/utilities/Display/display.css +54 -54
  255. package/utilities/Flex/flex.css +228 -228
  256. package/utilities/Float/float.css +12 -12
  257. package/utilities/Sizing/sizing.css +216 -216
  258. package/utilities/Spacing/spacing.css +1512 -1512
  259. package/utilities/Text/text.css +631 -631
package/docs/demos/Alert/examples/Alert.md CHANGED
@@ -6,25 +6,25 @@ section: components
6
6
  ### Toast
7
7
 
8
8
  ```html isFullscreen
9
- <div class="pf-v5-c-page" id="alert-basic-example">
10
- <div class="pf-v5-c-skip-to-content">
9
+ <div class="pf-v6-c-page" id="alert-basic-example">
10
+ <div class="pf-v6-c-skip-to-content">
11
11
  <a
12
- class="pf-v5-c-button pf-m-primary"
12
+ class="pf-v6-c-button pf-m-primary"
13
13
  href="#main-content-alert-basic-example"
14
14
  >Skip to content</a>
15
15
  </div>
16
- <header class="pf-v5-c-masthead" id="alert-basic-example-masthead">
17
- <span class="pf-v5-c-masthead__toggle">
16
+ <header class="pf-v6-c-masthead" id="alert-basic-example-masthead">
17
+ <span class="pf-v6-c-masthead__toggle">
18
18
  <button
19
- class="pf-v5-c-button pf-m-plain"
19
+ class="pf-v6-c-button pf-m-plain"
20
20
  type="button"
21
21
  aria-label="Global navigation"
22
22
  >
23
23
  <i class="fas fa-bars" aria-hidden="true"></i>
24
24
  </button>
25
25
  </span>
26
- <div class="pf-v5-c-masthead__main">
27
- <a class="pf-v5-c-masthead__brand" href="#">
26
+ <div class="pf-v6-c-masthead__main">
27
+ <a class="pf-v6-c-masthead__brand" href="#">
28
28
  <svg height="40px" viewBox="0 0 679 158">
29
29
  <title>PF-HorizontalLogo-Color</title>
30
30
  <defs>
@@ -97,37 +97,37 @@ section: components
97
97
  </svg>
98
98
  </a>
99
99
  </div>
100
- <div class="pf-v5-c-masthead__content">
100
+ <div class="pf-v6-c-masthead__content">
101
101
  <div
102
- class="pf-v5-c-toolbar pf-m-static"
102
+ class="pf-v6-c-toolbar pf-m-static"
103
103
  id="alert-basic-example-masthead-toolbar"
104
104
  >
105
- <div class="pf-v5-c-toolbar__content">
106
- <div class="pf-v5-c-toolbar__content-section">
107
- <div class="pf-v5-c-toolbar__item">
105
+ <div class="pf-v6-c-toolbar__content">
106
+ <div class="pf-v6-c-toolbar__content-section">
107
+ <div class="pf-v6-c-toolbar__item">
108
108
  <button
109
- class="pf-v5-c-menu-toggle"
109
+ class="pf-v6-c-menu-toggle"
110
110
  type="button"
111
111
  aria-expanded="false"
112
112
  >
113
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
114
- <span class="pf-v5-c-menu-toggle__controls">
115
- <span class="pf-v5-c-menu-toggle__toggle-icon">
113
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
114
+ <span class="pf-v6-c-menu-toggle__controls">
115
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
116
116
  <i class="fas fa-caret-down" aria-hidden="true"></i>
117
117
  </span>
118
118
  </span>
119
119
  </button>
120
120
  </div>
121
121
 
122
- <div class="pf-v5-c-toolbar__item">
122
+ <div class="pf-v6-c-toolbar__item">
123
123
  <button
124
- class="pf-v5-c-menu-toggle"
124
+ class="pf-v6-c-menu-toggle"
125
125
  type="button"
126
126
  aria-expanded="false"
127
127
  >
128
- <span class="pf-v5-c-menu-toggle__text">Services</span>
129
- <span class="pf-v5-c-menu-toggle__controls">
130
- <span class="pf-v5-c-menu-toggle__toggle-icon">
128
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
129
+ <span class="pf-v6-c-menu-toggle__controls">
130
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
131
131
  <i class="fas fa-caret-down" aria-hidden="true"></i>
132
132
  </span>
133
133
  </span>
@@ -135,56 +135,56 @@ section: components
135
135
  </div>
136
136
 
137
137
  <div
138
- 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"
138
+ 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"
139
139
  >
140
140
  <div
141
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
141
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
142
142
  >
143
- <div class="pf-v5-c-toolbar__item">
143
+ <div class="pf-v6-c-toolbar__item">
144
144
  <button
145
- class="pf-v5-c-menu-toggle pf-m-plain"
145
+ class="pf-v6-c-menu-toggle pf-m-plain"
146
146
  type="button"
147
147
  aria-expanded="false"
148
148
  aria-label="Application launcher"
149
149
  >
150
- <span class="pf-v5-c-menu-toggle__icon">
150
+ <span class="pf-v6-c-menu-toggle__icon">
151
151
  <i class="fas fa-th" aria-hidden="true"></i>
152
152
  </span>
153
153
  </button>
154
154
  </div>
155
- <div class="pf-v5-c-toolbar__item">
155
+ <div class="pf-v6-c-toolbar__item">
156
156
  <button
157
- class="pf-v5-c-menu-toggle pf-m-plain"
157
+ class="pf-v6-c-menu-toggle pf-m-plain"
158
158
  type="button"
159
159
  aria-expanded="false"
160
160
  aria-label="Settings"
161
161
  >
162
- <span class="pf-v5-c-menu-toggle__icon">
162
+ <span class="pf-v6-c-menu-toggle__icon">
163
163
  <i class="fas fa-cog" aria-hidden="true"></i>
164
164
  </span>
165
165
  </button>
166
166
  </div>
167
- <div class="pf-v5-c-toolbar__item">
167
+ <div class="pf-v6-c-toolbar__item">
168
168
  <button
169
- class="pf-v5-c-menu-toggle pf-m-plain"
169
+ class="pf-v6-c-menu-toggle pf-m-plain"
170
170
  type="button"
171
171
  aria-expanded="false"
172
172
  aria-label="Help"
173
173
  >
174
- <span class="pf-v5-c-menu-toggle__icon">
174
+ <span class="pf-v6-c-menu-toggle__icon">
175
175
  <i class="fas fa-question-circle" aria-hidden="true"></i>
176
176
  </span>
177
177
  </button>
178
178
  </div>
179
179
  </div>
180
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
180
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
181
181
  <button
182
- class="pf-v5-c-menu-toggle pf-m-plain"
182
+ class="pf-v6-c-menu-toggle pf-m-plain"
183
183
  type="button"
184
184
  aria-expanded="false"
185
185
  aria-label="Actions"
186
186
  >
187
- <span class="pf-v5-c-menu-toggle__icon">
187
+ <span class="pf-v6-c-menu-toggle__icon">
188
188
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
189
189
  </span>
190
190
  </button>
@@ -195,71 +195,71 @@ section: components
195
195
  </div>
196
196
  </div>
197
197
  </header>
198
- <div class="pf-v5-c-page__sidebar">
199
- <div class="pf-v5-c-page__sidebar-body">
198
+ <div class="pf-v6-c-page__sidebar">
199
+ <div class="pf-v6-c-page__sidebar-body">
200
200
  <nav
201
- class="pf-v5-c-nav"
201
+ class="pf-v6-c-nav"
202
202
  id="alert-basic-example-primary-nav"
203
203
  aria-label="Global"
204
204
  >
205
- <ul class="pf-v5-c-nav__list" role="list">
206
- <li class="pf-v5-c-nav__item">
207
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
205
+ <ul class="pf-v6-c-nav__list" role="list">
206
+ <li class="pf-v6-c-nav__item">
207
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
208
208
  </li>
209
- <li class="pf-v5-c-nav__item">
209
+ <li class="pf-v6-c-nav__item">
210
210
  <a
211
211
  href="#"
212
- class="pf-v5-c-nav__link pf-m-current"
212
+ class="pf-v6-c-nav__link pf-m-current"
213
213
  aria-current="page"
214
214
  >Policy</a>
215
215
  </li>
216
- <li class="pf-v5-c-nav__item">
217
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
216
+ <li class="pf-v6-c-nav__item">
217
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
218
218
  </li>
219
- <li class="pf-v5-c-nav__item">
220
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
219
+ <li class="pf-v6-c-nav__item">
220
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
221
221
  </li>
222
- <li class="pf-v5-c-nav__item">
223
- <a href="#" class="pf-v5-c-nav__link">Server</a>
222
+ <li class="pf-v6-c-nav__item">
223
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
224
224
  </li>
225
225
  </ul>
226
226
  </nav>
227
227
  </div>
228
228
  </div>
229
229
  <main
230
- class="pf-v5-c-page__main"
230
+ class="pf-v6-c-page__main"
231
231
  tabindex="-1"
232
232
  id="main-content-alert-basic-example"
233
233
  >
234
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v5-c-page__main-body">
236
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v5-c-breadcrumb__list" role="list">
238
- <li class="pf-v5-c-breadcrumb__item">
239
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
234
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
+ <div class="pf-v6-c-page__main-body">
236
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
238
+ <li class="pf-v6-c-breadcrumb__item">
239
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
240
  </li>
241
- <li class="pf-v5-c-breadcrumb__item">
242
- <span class="pf-v5-c-breadcrumb__item-divider">
241
+ <li class="pf-v6-c-breadcrumb__item">
242
+ <span class="pf-v6-c-breadcrumb__item-divider">
243
243
  <i class="fas fa-angle-right" aria-hidden="true"></i>
244
244
  </span>
245
245
 
246
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
246
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
247
  </li>
248
- <li class="pf-v5-c-breadcrumb__item">
249
- <span class="pf-v5-c-breadcrumb__item-divider">
248
+ <li class="pf-v6-c-breadcrumb__item">
249
+ <span class="pf-v6-c-breadcrumb__item-divider">
250
250
  <i class="fas fa-angle-right" aria-hidden="true"></i>
251
251
  </span>
252
252
 
253
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
253
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
254
  </li>
255
- <li class="pf-v5-c-breadcrumb__item">
256
- <span class="pf-v5-c-breadcrumb__item-divider">
255
+ <li class="pf-v6-c-breadcrumb__item">
256
+ <span class="pf-v6-c-breadcrumb__item-divider">
257
257
  <i class="fas fa-angle-right" aria-hidden="true"></i>
258
258
  </span>
259
259
 
260
260
  <a
261
261
  href="#"
262
- class="pf-v5-c-breadcrumb__link pf-m-current"
262
+ class="pf-v6-c-breadcrumb__link pf-m-current"
263
263
  aria-current="page"
264
264
  >Section landing</a>
265
265
  </li>
@@ -267,118 +267,118 @@ section: components
267
267
  </nav>
268
268
  </div>
269
269
  </section>
270
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v5-c-page__main-body">
272
- <div class="pf-v5-c-content">
270
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
+ <div class="pf-v6-c-page__main-body">
272
+ <div class="pf-v6-c-content">
273
273
  <h1>Main title</h1>
274
274
  <p>This is a full page demo.</p>
275
275
  </div>
276
276
  </div>
277
277
  </section>
278
- <section class="pf-v5-c-page__main-section pf-m-limit-width">
279
- <div class="pf-v5-c-page__main-body">
280
- <div class="pf-v5-l-gallery pf-m-gutter">
281
- <div class="pf-v5-c-card">
282
- <div class="pf-v5-c-card__body">This is a card</div>
278
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
279
+ <div class="pf-v6-c-page__main-body">
280
+ <div class="pf-v6-l-gallery pf-m-gutter">
281
+ <div class="pf-v6-c-card">
282
+ <div class="pf-v6-c-card__body">This is a card</div>
283
283
  </div>
284
- <div class="pf-v5-c-card">
285
- <div class="pf-v5-c-card__body">This is a card</div>
284
+ <div class="pf-v6-c-card">
285
+ <div class="pf-v6-c-card__body">This is a card</div>
286
286
  </div>
287
- <div class="pf-v5-c-card">
288
- <div class="pf-v5-c-card__body">This is a card</div>
287
+ <div class="pf-v6-c-card">
288
+ <div class="pf-v6-c-card__body">This is a card</div>
289
289
  </div>
290
- <div class="pf-v5-c-card">
291
- <div class="pf-v5-c-card__body">This is a card</div>
290
+ <div class="pf-v6-c-card">
291
+ <div class="pf-v6-c-card__body">This is a card</div>
292
292
  </div>
293
- <div class="pf-v5-c-card">
294
- <div class="pf-v5-c-card__body">This is a card</div>
293
+ <div class="pf-v6-c-card">
294
+ <div class="pf-v6-c-card__body">This is a card</div>
295
295
  </div>
296
- <div class="pf-v5-c-card">
297
- <div class="pf-v5-c-card__body">This is a card</div>
296
+ <div class="pf-v6-c-card">
297
+ <div class="pf-v6-c-card__body">This is a card</div>
298
298
  </div>
299
- <div class="pf-v5-c-card">
300
- <div class="pf-v5-c-card__body">This is a card</div>
299
+ <div class="pf-v6-c-card">
300
+ <div class="pf-v6-c-card__body">This is a card</div>
301
301
  </div>
302
- <div class="pf-v5-c-card">
303
- <div class="pf-v5-c-card__body">This is a card</div>
302
+ <div class="pf-v6-c-card">
303
+ <div class="pf-v6-c-card__body">This is a card</div>
304
304
  </div>
305
- <div class="pf-v5-c-card">
306
- <div class="pf-v5-c-card__body">This is a card</div>
305
+ <div class="pf-v6-c-card">
306
+ <div class="pf-v6-c-card__body">This is a card</div>
307
307
  </div>
308
- <div class="pf-v5-c-card">
309
- <div class="pf-v5-c-card__body">This is a card</div>
308
+ <div class="pf-v6-c-card">
309
+ <div class="pf-v6-c-card__body">This is a card</div>
310
310
  </div>
311
311
  </div>
312
312
  </div>
313
313
  </section>
314
314
  </main>
315
315
  </div>
316
- <ul class="pf-v5-c-alert-group pf-m-toast" role="list">
317
- <li class="pf-v5-c-alert-group__item">
318
- <div class="pf-v5-c-alert pf-m-success" aria-label="Success alert">
319
- <div class="pf-v5-c-alert__icon">
316
+ <ul class="pf-v6-c-alert-group pf-m-toast" role="list">
317
+ <li class="pf-v6-c-alert-group__item">
318
+ <div class="pf-v6-c-alert pf-m-success" aria-label="Success alert">
319
+ <div class="pf-v6-c-alert__icon">
320
320
  <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i>
321
321
  </div>
322
- <p class="pf-v5-c-alert__title">
323
- <span class="pf-v5-screen-reader">Success alert:</span>
322
+ <p class="pf-v6-c-alert__title">
323
+ <span class="pf-v6-screen-reader">Success alert:</span>
324
324
  Newest notification
325
325
  </p>
326
- <div class="pf-v5-c-alert__action">
326
+ <div class="pf-v6-c-alert__action">
327
327
  <button
328
- class="pf-v5-c-button pf-m-plain"
328
+ class="pf-v6-c-button pf-m-plain"
329
329
  type="button"
330
330
  aria-label="Close success alert: Newest notification"
331
331
  >
332
332
  <i class="fas fa-times" aria-hidden="true"></i>
333
333
  </button>
334
334
  </div>
335
- <div class="pf-v5-c-alert__description">
335
+ <div class="pf-v6-c-alert__description">
336
336
  <p>This is a description of the notification content.</p>
337
337
  </div>
338
338
  </div>
339
339
  </li>
340
- <li class="pf-v5-c-alert-group__item">
341
- <div class="pf-v5-c-alert pf-m-warning" aria-label="Warning alert">
342
- <div class="pf-v5-c-alert__icon">
340
+ <li class="pf-v6-c-alert-group__item">
341
+ <div class="pf-v6-c-alert pf-m-warning" aria-label="Warning alert">
342
+ <div class="pf-v6-c-alert__icon">
343
343
  <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true"></i>
344
344
  </div>
345
- <p class="pf-v5-c-alert__title">
346
- <span class="pf-v5-screen-reader">Info alert:</span>
345
+ <p class="pf-v6-c-alert__title">
346
+ <span class="pf-v6-screen-reader">Info alert:</span>
347
347
  Second newest notification
348
348
  </p>
349
- <div class="pf-v5-c-alert__action">
349
+ <div class="pf-v6-c-alert__action">
350
350
  <button
351
- class="pf-v5-c-button pf-m-plain"
351
+ class="pf-v6-c-button pf-m-plain"
352
352
  type="button"
353
353
  aria-label="Close warning alert: second newest notification"
354
354
  >
355
355
  <i class="fas fa-times" aria-hidden="true"></i>
356
356
  </button>
357
357
  </div>
358
- <div class="pf-v5-c-alert__description">
358
+ <div class="pf-v6-c-alert__description">
359
359
  <p>This is a description of the notification content.</p>
360
360
  </div>
361
361
  </div>
362
362
  </li>
363
- <li class="pf-v5-c-alert-group__item">
364
- <div class="pf-v5-c-alert pf-m-danger" aria-label="Danger alert">
365
- <div class="pf-v5-c-alert__icon">
363
+ <li class="pf-v6-c-alert-group__item">
364
+ <div class="pf-v6-c-alert pf-m-danger" aria-label="Danger alert">
365
+ <div class="pf-v6-c-alert__icon">
366
366
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
367
367
  </div>
368
- <p class="pf-v5-c-alert__title">
369
- <span class="pf-v5-screen-reader">Last notification</span>
368
+ <p class="pf-v6-c-alert__title">
369
+ <span class="pf-v6-screen-reader">Last notification</span>
370
370
  Last notification
371
371
  </p>
372
- <div class="pf-v5-c-alert__action">
372
+ <div class="pf-v6-c-alert__action">
373
373
  <button
374
- class="pf-v5-c-button pf-m-plain"
374
+ class="pf-v6-c-button pf-m-plain"
375
375
  type="button"
376
376
  aria-label="Close danger alert: Last notification"
377
377
  >
378
378
  <i class="fas fa-times" aria-hidden="true"></i>
379
379
  </button>
380
380
  </div>
381
- <div class="pf-v5-c-alert__description">
381
+ <div class="pf-v6-c-alert__description">
382
382
  <p>This is a description of the notification content.</p>
383
383
  </div>
384
384
  </div>
@@ -390,25 +390,25 @@ section: components
390
390
  ### Inline Alert in Horizontal Form
391
391
 
392
392
  ```html isFullscreen
393
- <div class="pf-v5-c-page" id="alert-horizontal-example">
394
- <div class="pf-v5-c-skip-to-content">
393
+ <div class="pf-v6-c-page" id="alert-horizontal-example">
394
+ <div class="pf-v6-c-skip-to-content">
395
395
  <a
396
- class="pf-v5-c-button pf-m-primary"
396
+ class="pf-v6-c-button pf-m-primary"
397
397
  href="#main-content-alert-horizontal-example"
398
398
  >Skip to content</a>
399
399
  </div>
400
- <header class="pf-v5-c-masthead" id="alert-horizontal-example-masthead">
401
- <span class="pf-v5-c-masthead__toggle">
400
+ <header class="pf-v6-c-masthead" id="alert-horizontal-example-masthead">
401
+ <span class="pf-v6-c-masthead__toggle">
402
402
  <button
403
- class="pf-v5-c-button pf-m-plain"
403
+ class="pf-v6-c-button pf-m-plain"
404
404
  type="button"
405
405
  aria-label="Global navigation"
406
406
  >
407
407
  <i class="fas fa-bars" aria-hidden="true"></i>
408
408
  </button>
409
409
  </span>
410
- <div class="pf-v5-c-masthead__main">
411
- <a class="pf-v5-c-masthead__brand" href="#">
410
+ <div class="pf-v6-c-masthead__main">
411
+ <a class="pf-v6-c-masthead__brand" href="#">
412
412
  <svg height="40px" viewBox="0 0 679 158">
413
413
  <title>PF-HorizontalLogo-Color</title>
414
414
  <defs>
@@ -481,37 +481,37 @@ section: components
481
481
  </svg>
482
482
  </a>
483
483
  </div>
484
- <div class="pf-v5-c-masthead__content">
484
+ <div class="pf-v6-c-masthead__content">
485
485
  <div
486
- class="pf-v5-c-toolbar pf-m-static"
486
+ class="pf-v6-c-toolbar pf-m-static"
487
487
  id="alert-horizontal-example-masthead-toolbar"
488
488
  >
489
- <div class="pf-v5-c-toolbar__content">
490
- <div class="pf-v5-c-toolbar__content-section">
491
- <div class="pf-v5-c-toolbar__item">
489
+ <div class="pf-v6-c-toolbar__content">
490
+ <div class="pf-v6-c-toolbar__content-section">
491
+ <div class="pf-v6-c-toolbar__item">
492
492
  <button
493
- class="pf-v5-c-menu-toggle"
493
+ class="pf-v6-c-menu-toggle"
494
494
  type="button"
495
495
  aria-expanded="false"
496
496
  >
497
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
498
- <span class="pf-v5-c-menu-toggle__controls">
499
- <span class="pf-v5-c-menu-toggle__toggle-icon">
497
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
498
+ <span class="pf-v6-c-menu-toggle__controls">
499
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
500
500
  <i class="fas fa-caret-down" aria-hidden="true"></i>
501
501
  </span>
502
502
  </span>
503
503
  </button>
504
504
  </div>
505
505
 
506
- <div class="pf-v5-c-toolbar__item">
506
+ <div class="pf-v6-c-toolbar__item">
507
507
  <button
508
- class="pf-v5-c-menu-toggle"
508
+ class="pf-v6-c-menu-toggle"
509
509
  type="button"
510
510
  aria-expanded="false"
511
511
  >
512
- <span class="pf-v5-c-menu-toggle__text">Services</span>
513
- <span class="pf-v5-c-menu-toggle__controls">
514
- <span class="pf-v5-c-menu-toggle__toggle-icon">
512
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
513
+ <span class="pf-v6-c-menu-toggle__controls">
514
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
515
515
  <i class="fas fa-caret-down" aria-hidden="true"></i>
516
516
  </span>
517
517
  </span>
@@ -519,56 +519,56 @@ section: components
519
519
  </div>
520
520
 
521
521
  <div
522
- 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"
522
+ 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"
523
523
  >
524
524
  <div
525
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
525
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
526
526
  >
527
- <div class="pf-v5-c-toolbar__item">
527
+ <div class="pf-v6-c-toolbar__item">
528
528
  <button
529
- class="pf-v5-c-menu-toggle pf-m-plain"
529
+ class="pf-v6-c-menu-toggle pf-m-plain"
530
530
  type="button"
531
531
  aria-expanded="false"
532
532
  aria-label="Application launcher"
533
533
  >
534
- <span class="pf-v5-c-menu-toggle__icon">
534
+ <span class="pf-v6-c-menu-toggle__icon">
535
535
  <i class="fas fa-th" aria-hidden="true"></i>
536
536
  </span>
537
537
  </button>
538
538
  </div>
539
- <div class="pf-v5-c-toolbar__item">
539
+ <div class="pf-v6-c-toolbar__item">
540
540
  <button
541
- class="pf-v5-c-menu-toggle pf-m-plain"
541
+ class="pf-v6-c-menu-toggle pf-m-plain"
542
542
  type="button"
543
543
  aria-expanded="false"
544
544
  aria-label="Settings"
545
545
  >
546
- <span class="pf-v5-c-menu-toggle__icon">
546
+ <span class="pf-v6-c-menu-toggle__icon">
547
547
  <i class="fas fa-cog" aria-hidden="true"></i>
548
548
  </span>
549
549
  </button>
550
550
  </div>
551
- <div class="pf-v5-c-toolbar__item">
551
+ <div class="pf-v6-c-toolbar__item">
552
552
  <button
553
- class="pf-v5-c-menu-toggle pf-m-plain"
553
+ class="pf-v6-c-menu-toggle pf-m-plain"
554
554
  type="button"
555
555
  aria-expanded="false"
556
556
  aria-label="Help"
557
557
  >
558
- <span class="pf-v5-c-menu-toggle__icon">
558
+ <span class="pf-v6-c-menu-toggle__icon">
559
559
  <i class="fas fa-question-circle" aria-hidden="true"></i>
560
560
  </span>
561
561
  </button>
562
562
  </div>
563
563
  </div>
564
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
564
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
565
565
  <button
566
- class="pf-v5-c-menu-toggle pf-m-plain"
566
+ class="pf-v6-c-menu-toggle pf-m-plain"
567
567
  type="button"
568
568
  aria-expanded="false"
569
569
  aria-label="Actions"
570
570
  >
571
- <span class="pf-v5-c-menu-toggle__icon">
571
+ <span class="pf-v6-c-menu-toggle__icon">
572
572
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
573
573
  </span>
574
574
  </button>
@@ -579,71 +579,71 @@ section: components
579
579
  </div>
580
580
  </div>
581
581
  </header>
582
- <div class="pf-v5-c-page__sidebar">
583
- <div class="pf-v5-c-page__sidebar-body">
582
+ <div class="pf-v6-c-page__sidebar">
583
+ <div class="pf-v6-c-page__sidebar-body">
584
584
  <nav
585
- class="pf-v5-c-nav"
585
+ class="pf-v6-c-nav"
586
586
  id="alert-horizontal-example-primary-nav"
587
587
  aria-label="Global"
588
588
  >
589
- <ul class="pf-v5-c-nav__list" role="list">
590
- <li class="pf-v5-c-nav__item">
591
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
589
+ <ul class="pf-v6-c-nav__list" role="list">
590
+ <li class="pf-v6-c-nav__item">
591
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
592
592
  </li>
593
- <li class="pf-v5-c-nav__item">
593
+ <li class="pf-v6-c-nav__item">
594
594
  <a
595
595
  href="#"
596
- class="pf-v5-c-nav__link pf-m-current"
596
+ class="pf-v6-c-nav__link pf-m-current"
597
597
  aria-current="page"
598
598
  >Policy</a>
599
599
  </li>
600
- <li class="pf-v5-c-nav__item">
601
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
600
+ <li class="pf-v6-c-nav__item">
601
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
602
602
  </li>
603
- <li class="pf-v5-c-nav__item">
604
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
603
+ <li class="pf-v6-c-nav__item">
604
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
605
605
  </li>
606
- <li class="pf-v5-c-nav__item">
607
- <a href="#" class="pf-v5-c-nav__link">Server</a>
606
+ <li class="pf-v6-c-nav__item">
607
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
608
608
  </li>
609
609
  </ul>
610
610
  </nav>
611
611
  </div>
612
612
  </div>
613
613
  <main
614
- class="pf-v5-c-page__main"
614
+ class="pf-v6-c-page__main"
615
615
  tabindex="-1"
616
616
  id="main-content-alert-horizontal-example"
617
617
  >
618
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
619
- <div class="pf-v5-c-page__main-body">
620
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
621
- <ol class="pf-v5-c-breadcrumb__list" role="list">
622
- <li class="pf-v5-c-breadcrumb__item">
623
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
618
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
619
+ <div class="pf-v6-c-page__main-body">
620
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
621
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
622
+ <li class="pf-v6-c-breadcrumb__item">
623
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
624
624
  </li>
625
- <li class="pf-v5-c-breadcrumb__item">
626
- <span class="pf-v5-c-breadcrumb__item-divider">
625
+ <li class="pf-v6-c-breadcrumb__item">
626
+ <span class="pf-v6-c-breadcrumb__item-divider">
627
627
  <i class="fas fa-angle-right" aria-hidden="true"></i>
628
628
  </span>
629
629
 
630
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
630
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
631
631
  </li>
632
- <li class="pf-v5-c-breadcrumb__item">
633
- <span class="pf-v5-c-breadcrumb__item-divider">
632
+ <li class="pf-v6-c-breadcrumb__item">
633
+ <span class="pf-v6-c-breadcrumb__item-divider">
634
634
  <i class="fas fa-angle-right" aria-hidden="true"></i>
635
635
  </span>
636
636
 
637
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
637
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
638
638
  </li>
639
- <li class="pf-v5-c-breadcrumb__item">
640
- <span class="pf-v5-c-breadcrumb__item-divider">
639
+ <li class="pf-v6-c-breadcrumb__item">
640
+ <span class="pf-v6-c-breadcrumb__item-divider">
641
641
  <i class="fas fa-angle-right" aria-hidden="true"></i>
642
642
  </span>
643
643
 
644
644
  <a
645
645
  href="#"
646
- class="pf-v5-c-breadcrumb__link pf-m-current"
646
+ class="pf-v6-c-breadcrumb__link pf-m-current"
647
647
  aria-current="page"
648
648
  >Section landing</a>
649
649
  </li>
@@ -651,42 +651,42 @@ section: components
651
651
  </nav>
652
652
  </div>
653
653
  </section>
654
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
655
- <div class="pf-v5-c-page__main-body">
656
- <div class="pf-v5-c-content">
654
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
655
+ <div class="pf-v6-c-page__main-body">
656
+ <div class="pf-v6-c-content">
657
657
  <h1>Main title</h1>
658
658
  <p>This is a full page demo.</p>
659
659
  </div>
660
660
  </div>
661
661
  </section>
662
- <section class="pf-v5-c-page__main-section pf-m-light">
663
- <form class="pf-v5-c-form pf-m-limit-width pf-m-horizontal" novalidate>
664
- <div class="pf-v5-c-form__alert">
662
+ <section class="pf-v6-c-page__main-section pf-m-light">
663
+ <form class="pf-v6-c-form pf-m-limit-width pf-m-horizontal" novalidate>
664
+ <div class="pf-v6-c-form__alert">
665
665
  <div
666
- class="pf-v5-c-alert pf-m-danger pf-m-inline"
666
+ class="pf-v6-c-alert pf-m-danger pf-m-inline"
667
667
  aria-label="Inline danger alert"
668
668
  >
669
- <div class="pf-v5-c-alert__icon">
669
+ <div class="pf-v6-c-alert__icon">
670
670
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
671
671
  </div>
672
- <p class="pf-v5-c-alert__title">
673
- <span class="pf-v5-screen-reader">Danger alert:</span>
672
+ <p class="pf-v6-c-alert__title">
673
+ <span class="pf-v6-screen-reader">Danger alert:</span>
674
674
  Fill out all required fields before continuing.
675
675
  </p>
676
676
  </div>
677
677
  </div>
678
- <div class="pf-v5-c-form__group">
679
- <div class="pf-v5-c-form__group-label"><label
680
- class="pf-v5-c-form__label"
678
+ <div class="pf-v6-c-form__group">
679
+ <div class="pf-v6-c-form__group-label"><label
680
+ class="pf-v6-c-form__label"
681
681
  for="alert-horizontal-example-form-name"
682
682
  >
683
- <span class="pf-v5-c-form__label-text">Name</span>&nbsp;<span
684
- class="pf-v5-c-form__label-required"
683
+ <span class="pf-v6-c-form__label-text">Name</span>&nbsp;<span
684
+ class="pf-v6-c-form__label-required"
685
685
  aria-hidden="true"
686
686
  >&#42;</span></label>
687
687
  </div>
688
- <div class="pf-v5-c-form__group-control">
689
- <span class="pf-v5-c-form-control pf-m-required pf-m-error">
688
+ <div class="pf-v6-c-form__group-control">
689
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
690
690
  <input
691
691
  required
692
692
  type="text"
@@ -695,42 +695,42 @@ section: components
695
695
  aria-invalid="true"
696
696
  aria-describedby="alert-horizontal-example-form-name-helper"
697
697
  />
698
- <span class="pf-v5-c-form-control__utilities">
699
- <span class="pf-v5-c-form-control__icon pf-m-status">
698
+ <span class="pf-v6-c-form-control__utilities">
699
+ <span class="pf-v6-c-form-control__icon pf-m-status">
700
700
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
701
701
  </span>
702
702
  </span>
703
703
  </span>
704
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
705
- <div class="pf-v5-c-helper-text">
704
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
705
+ <div class="pf-v6-c-helper-text">
706
706
  <div
707
- class="pf-v5-c-helper-text__item pf-m-error"
707
+ class="pf-v6-c-helper-text__item pf-m-error"
708
708
  id="alert-horizontal-example-form-name-helper"
709
709
  >
710
- <span class="pf-v5-c-helper-text__item-icon">
710
+ <span class="pf-v6-c-helper-text__item-icon">
711
711
  <i
712
712
  class="fas fa-fw fa-exclamation-circle"
713
713
  aria-hidden="true"
714
714
  ></i>
715
715
  </span>
716
- <span class="pf-v5-c-helper-text__item-text">Required field</span>
716
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
717
717
  </div>
718
718
  </div>
719
719
  </div>
720
720
  </div>
721
721
  </div>
722
- <div class="pf-v5-c-form__group">
723
- <div class="pf-v5-c-form__group-label"><label
724
- class="pf-v5-c-form__label"
722
+ <div class="pf-v6-c-form__group">
723
+ <div class="pf-v6-c-form__group-label"><label
724
+ class="pf-v6-c-form__label"
725
725
  for="alert-horizontal-example-form-email"
726
726
  >
727
- <span class="pf-v5-c-form__label-text">Email</span>&nbsp;<span
728
- class="pf-v5-c-form__label-required"
727
+ <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
728
+ class="pf-v6-c-form__label-required"
729
729
  aria-hidden="true"
730
730
  >&#42;</span></label>
731
731
  </div>
732
- <div class="pf-v5-c-form__group-control">
733
- <span class="pf-v5-c-form-control pf-m-required">
732
+ <div class="pf-v6-c-form__group-control">
733
+ <span class="pf-v6-c-form-control pf-m-required">
734
734
  <input
735
735
  required
736
736
  type="text"
@@ -741,18 +741,18 @@ section: components
741
741
  </span>
742
742
  </div>
743
743
  </div>
744
- <div class="pf-v5-c-form__group">
745
- <div class="pf-v5-c-form__group-label"><label
746
- class="pf-v5-c-form__label"
744
+ <div class="pf-v6-c-form__group">
745
+ <div class="pf-v6-c-form__group-label"><label
746
+ class="pf-v6-c-form__label"
747
747
  for="alert-horizontal-example-form-phone"
748
748
  >
749
- <span class="pf-v5-c-form__label-text">Phone number</span>&nbsp;<span
750
- class="pf-v5-c-form__label-required"
749
+ <span class="pf-v6-c-form__label-text">Phone number</span>&nbsp;<span
750
+ class="pf-v6-c-form__label-required"
751
751
  aria-hidden="true"
752
752
  >&#42;</span></label>
753
753
  </div>
754
- <div class="pf-v5-c-form__group-control">
755
- <span class="pf-v5-c-form-control pf-m-required pf-m-error">
754
+ <div class="pf-v6-c-form__group-control">
755
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
756
756
  <input
757
757
  required
758
758
  type="text"
@@ -761,99 +761,99 @@ section: components
761
761
  aria-invalid="true"
762
762
  aria-describedby="alert-horizontal-example-form-phone-helper"
763
763
  />
764
- <span class="pf-v5-c-form-control__utilities">
765
- <span class="pf-v5-c-form-control__icon pf-m-status">
764
+ <span class="pf-v6-c-form-control__utilities">
765
+ <span class="pf-v6-c-form-control__icon pf-m-status">
766
766
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
767
767
  </span>
768
768
  </span>
769
769
  </span>
770
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
771
- <div class="pf-v5-c-helper-text">
770
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
771
+ <div class="pf-v6-c-helper-text">
772
772
  <div
773
- class="pf-v5-c-helper-text__item pf-m-error"
773
+ class="pf-v6-c-helper-text__item pf-m-error"
774
774
  id="alert-horizontal-example-form-phone-helper"
775
775
  >
776
- <span class="pf-v5-c-helper-text__item-icon">
776
+ <span class="pf-v6-c-helper-text__item-icon">
777
777
  <i
778
778
  class="fas fa-fw fa-exclamation-circle"
779
779
  aria-hidden="true"
780
780
  ></i>
781
781
  </span>
782
- <span class="pf-v5-c-helper-text__item-text">Required field</span>
782
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
783
783
  </div>
784
784
  </div>
785
785
  </div>
786
786
  </div>
787
787
  </div>
788
788
  <div
789
- class="pf-v5-c-form__group"
789
+ class="pf-v6-c-form__group"
790
790
  role="group"
791
791
  aria-labelledby="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
792
792
  >
793
793
  <div
794
- class="pf-v5-c-form__group-label pf-m-no-padding-top"
794
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
795
795
  id="alert-horizontal-example-formalert-horizontal-example-form-check-group-legend"
796
796
  ><span
797
- class="pf-v5-c-form__label"
797
+ class="pf-v6-c-form__label"
798
798
  for="alert-horizontal-example-form-check-group"
799
799
  >
800
- <span class="pf-v5-c-form__label-text">Your experience</span>&nbsp;<span
801
- class="pf-v5-c-form__label-required"
800
+ <span class="pf-v6-c-form__label-text">Your experience</span>&nbsp;<span
801
+ class="pf-v6-c-form__label-required"
802
802
  aria-hidden="true"
803
803
  >&#42;</span></span>
804
804
  </div>
805
- <div class="pf-v5-c-form__group-control">
806
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
807
- <div class="pf-v5-c-helper-text">
805
+ <div class="pf-v6-c-form__group-control">
806
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
807
+ <div class="pf-v6-c-helper-text">
808
808
  <div
809
- class="pf-v5-c-helper-text__item pf-m-error"
809
+ class="pf-v6-c-helper-text__item pf-m-error"
810
810
  id="alert-horizontal-example-form-check-group-helper"
811
811
  >
812
- <span class="pf-v5-c-helper-text__item-icon">
812
+ <span class="pf-v6-c-helper-text__item-icon">
813
813
  <i
814
814
  class="fas fa-fw fa-exclamation-circle"
815
815
  aria-hidden="true"
816
816
  ></i>
817
817
  </span>
818
818
  <span
819
- class="pf-v5-c-helper-text__item-text"
819
+ class="pf-v6-c-helper-text__item-text"
820
820
  >This is a required field</span>
821
821
  </div>
822
822
  </div>
823
823
  </div>
824
- <div class="pf-v5-c-check">
824
+ <div class="pf-v6-c-check">
825
825
  <input
826
- class="pf-v5-c-check__input"
826
+ class="pf-v6-c-check__input"
827
827
  type="checkbox"
828
828
  id="alt-checkbox1"
829
829
  name="alt-checkbox1"
830
830
  />
831
831
 
832
832
  <label
833
- class="pf-v5-c-check__label"
833
+ class="pf-v6-c-check__label"
834
834
  for="alt-checkbox1"
835
835
  >Follow up via email.</label>
836
836
  </div>
837
- <div class="pf-v5-c-check">
837
+ <div class="pf-v6-c-check">
838
838
  <input
839
- class="pf-v5-c-check__input"
839
+ class="pf-v6-c-check__input"
840
840
  type="checkbox"
841
841
  id="alt-checkbox2"
842
842
  name="alt-checkbox2"
843
843
  />
844
844
 
845
845
  <label
846
- class="pf-v5-c-check__label"
846
+ class="pf-v6-c-check__label"
847
847
  for="alt-checkbox2"
848
848
  >Remember my password for 30 days.</label>
849
849
  </div>
850
850
  </div>
851
851
  </div>
852
- <div class="pf-v5-c-form__group pf-m-action">
853
- <div class="pf-v5-c-form__group-control">
854
- <div class="pf-v5-c-form__actions">
855
- <button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
856
- <button class="pf-v5-c-button pf-m-secondary" type="reset">Cancel</button>
852
+ <div class="pf-v6-c-form__group pf-m-action">
853
+ <div class="pf-v6-c-form__group-control">
854
+ <div class="pf-v6-c-form__actions">
855
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
856
+ <button class="pf-v6-c-button pf-m-secondary" type="reset">Cancel</button>
857
857
  </div>
858
858
  </div>
859
859
  </div>
@@ -867,25 +867,25 @@ section: components
867
867
  ### Inline Alert in Stacked Form
868
868
 
869
869
  ```html isFullscreen
870
- <div class="pf-v5-c-page" id="alert-stacked-example">
871
- <div class="pf-v5-c-skip-to-content">
870
+ <div class="pf-v6-c-page" id="alert-stacked-example">
871
+ <div class="pf-v6-c-skip-to-content">
872
872
  <a
873
- class="pf-v5-c-button pf-m-primary"
873
+ class="pf-v6-c-button pf-m-primary"
874
874
  href="#main-content-alert-stacked-example"
875
875
  >Skip to content</a>
876
876
  </div>
877
- <header class="pf-v5-c-masthead" id="alert-stacked-example-masthead">
878
- <span class="pf-v5-c-masthead__toggle">
877
+ <header class="pf-v6-c-masthead" id="alert-stacked-example-masthead">
878
+ <span class="pf-v6-c-masthead__toggle">
879
879
  <button
880
- class="pf-v5-c-button pf-m-plain"
880
+ class="pf-v6-c-button pf-m-plain"
881
881
  type="button"
882
882
  aria-label="Global navigation"
883
883
  >
884
884
  <i class="fas fa-bars" aria-hidden="true"></i>
885
885
  </button>
886
886
  </span>
887
- <div class="pf-v5-c-masthead__main">
888
- <a class="pf-v5-c-masthead__brand" href="#">
887
+ <div class="pf-v6-c-masthead__main">
888
+ <a class="pf-v6-c-masthead__brand" href="#">
889
889
  <svg height="40px" viewBox="0 0 679 158">
890
890
  <title>PF-HorizontalLogo-Color</title>
891
891
  <defs>
@@ -958,37 +958,37 @@ section: components
958
958
  </svg>
959
959
  </a>
960
960
  </div>
961
- <div class="pf-v5-c-masthead__content">
961
+ <div class="pf-v6-c-masthead__content">
962
962
  <div
963
- class="pf-v5-c-toolbar pf-m-static"
963
+ class="pf-v6-c-toolbar pf-m-static"
964
964
  id="alert-stacked-example-masthead-toolbar"
965
965
  >
966
- <div class="pf-v5-c-toolbar__content">
967
- <div class="pf-v5-c-toolbar__content-section">
968
- <div class="pf-v5-c-toolbar__item">
966
+ <div class="pf-v6-c-toolbar__content">
967
+ <div class="pf-v6-c-toolbar__content-section">
968
+ <div class="pf-v6-c-toolbar__item">
969
969
  <button
970
- class="pf-v5-c-menu-toggle"
970
+ class="pf-v6-c-menu-toggle"
971
971
  type="button"
972
972
  aria-expanded="false"
973
973
  >
974
- <span class="pf-v5-c-menu-toggle__text">Overview</span>
975
- <span class="pf-v5-c-menu-toggle__controls">
976
- <span class="pf-v5-c-menu-toggle__toggle-icon">
974
+ <span class="pf-v6-c-menu-toggle__text">Overview</span>
975
+ <span class="pf-v6-c-menu-toggle__controls">
976
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
977
977
  <i class="fas fa-caret-down" aria-hidden="true"></i>
978
978
  </span>
979
979
  </span>
980
980
  </button>
981
981
  </div>
982
982
 
983
- <div class="pf-v5-c-toolbar__item">
983
+ <div class="pf-v6-c-toolbar__item">
984
984
  <button
985
- class="pf-v5-c-menu-toggle"
985
+ class="pf-v6-c-menu-toggle"
986
986
  type="button"
987
987
  aria-expanded="false"
988
988
  >
989
- <span class="pf-v5-c-menu-toggle__text">Services</span>
990
- <span class="pf-v5-c-menu-toggle__controls">
991
- <span class="pf-v5-c-menu-toggle__toggle-icon">
989
+ <span class="pf-v6-c-menu-toggle__text">Services</span>
990
+ <span class="pf-v6-c-menu-toggle__controls">
991
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
992
992
  <i class="fas fa-caret-down" aria-hidden="true"></i>
993
993
  </span>
994
994
  </span>
@@ -996,56 +996,56 @@ section: components
996
996
  </div>
997
997
 
998
998
  <div
999
- 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"
999
+ 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"
1000
1000
  >
1001
1001
  <div
1002
- class="pf-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1002
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1003
1003
  >
1004
- <div class="pf-v5-c-toolbar__item">
1004
+ <div class="pf-v6-c-toolbar__item">
1005
1005
  <button
1006
- class="pf-v5-c-menu-toggle pf-m-plain"
1006
+ class="pf-v6-c-menu-toggle pf-m-plain"
1007
1007
  type="button"
1008
1008
  aria-expanded="false"
1009
1009
  aria-label="Application launcher"
1010
1010
  >
1011
- <span class="pf-v5-c-menu-toggle__icon">
1011
+ <span class="pf-v6-c-menu-toggle__icon">
1012
1012
  <i class="fas fa-th" aria-hidden="true"></i>
1013
1013
  </span>
1014
1014
  </button>
1015
1015
  </div>
1016
- <div class="pf-v5-c-toolbar__item">
1016
+ <div class="pf-v6-c-toolbar__item">
1017
1017
  <button
1018
- class="pf-v5-c-menu-toggle pf-m-plain"
1018
+ class="pf-v6-c-menu-toggle pf-m-plain"
1019
1019
  type="button"
1020
1020
  aria-expanded="false"
1021
1021
  aria-label="Settings"
1022
1022
  >
1023
- <span class="pf-v5-c-menu-toggle__icon">
1023
+ <span class="pf-v6-c-menu-toggle__icon">
1024
1024
  <i class="fas fa-cog" aria-hidden="true"></i>
1025
1025
  </span>
1026
1026
  </button>
1027
1027
  </div>
1028
- <div class="pf-v5-c-toolbar__item">
1028
+ <div class="pf-v6-c-toolbar__item">
1029
1029
  <button
1030
- class="pf-v5-c-menu-toggle pf-m-plain"
1030
+ class="pf-v6-c-menu-toggle pf-m-plain"
1031
1031
  type="button"
1032
1032
  aria-expanded="false"
1033
1033
  aria-label="Help"
1034
1034
  >
1035
- <span class="pf-v5-c-menu-toggle__icon">
1035
+ <span class="pf-v6-c-menu-toggle__icon">
1036
1036
  <i class="fas fa-question-circle" aria-hidden="true"></i>
1037
1037
  </span>
1038
1038
  </button>
1039
1039
  </div>
1040
1040
  </div>
1041
- <div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
1041
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1042
1042
  <button
1043
- class="pf-v5-c-menu-toggle pf-m-plain"
1043
+ class="pf-v6-c-menu-toggle pf-m-plain"
1044
1044
  type="button"
1045
1045
  aria-expanded="false"
1046
1046
  aria-label="Actions"
1047
1047
  >
1048
- <span class="pf-v5-c-menu-toggle__icon">
1048
+ <span class="pf-v6-c-menu-toggle__icon">
1049
1049
  <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1050
1050
  </span>
1051
1051
  </button>
@@ -1056,71 +1056,71 @@ section: components
1056
1056
  </div>
1057
1057
  </div>
1058
1058
  </header>
1059
- <div class="pf-v5-c-page__sidebar">
1060
- <div class="pf-v5-c-page__sidebar-body">
1059
+ <div class="pf-v6-c-page__sidebar">
1060
+ <div class="pf-v6-c-page__sidebar-body">
1061
1061
  <nav
1062
- class="pf-v5-c-nav"
1062
+ class="pf-v6-c-nav"
1063
1063
  id="alert-stacked-example-primary-nav"
1064
1064
  aria-label="Global"
1065
1065
  >
1066
- <ul class="pf-v5-c-nav__list" role="list">
1067
- <li class="pf-v5-c-nav__item">
1068
- <a href="#" class="pf-v5-c-nav__link">System panel</a>
1066
+ <ul class="pf-v6-c-nav__list" role="list">
1067
+ <li class="pf-v6-c-nav__item">
1068
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
1069
1069
  </li>
1070
- <li class="pf-v5-c-nav__item">
1070
+ <li class="pf-v6-c-nav__item">
1071
1071
  <a
1072
1072
  href="#"
1073
- class="pf-v5-c-nav__link pf-m-current"
1073
+ class="pf-v6-c-nav__link pf-m-current"
1074
1074
  aria-current="page"
1075
1075
  >Policy</a>
1076
1076
  </li>
1077
- <li class="pf-v5-c-nav__item">
1078
- <a href="#" class="pf-v5-c-nav__link">Authentication</a>
1077
+ <li class="pf-v6-c-nav__item">
1078
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1079
1079
  </li>
1080
- <li class="pf-v5-c-nav__item">
1081
- <a href="#" class="pf-v5-c-nav__link">Network services</a>
1080
+ <li class="pf-v6-c-nav__item">
1081
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
1082
1082
  </li>
1083
- <li class="pf-v5-c-nav__item">
1084
- <a href="#" class="pf-v5-c-nav__link">Server</a>
1083
+ <li class="pf-v6-c-nav__item">
1084
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
1085
1085
  </li>
1086
1086
  </ul>
1087
1087
  </nav>
1088
1088
  </div>
1089
1089
  </div>
1090
1090
  <main
1091
- class="pf-v5-c-page__main"
1091
+ class="pf-v6-c-page__main"
1092
1092
  tabindex="-1"
1093
1093
  id="main-content-alert-stacked-example"
1094
1094
  >
1095
- <section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
1096
- <div class="pf-v5-c-page__main-body">
1097
- <nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
1098
- <ol class="pf-v5-c-breadcrumb__list" role="list">
1099
- <li class="pf-v5-c-breadcrumb__item">
1100
- <a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
1095
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1096
+ <div class="pf-v6-c-page__main-body">
1097
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1098
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1099
+ <li class="pf-v6-c-breadcrumb__item">
1100
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1101
1101
  </li>
1102
- <li class="pf-v5-c-breadcrumb__item">
1103
- <span class="pf-v5-c-breadcrumb__item-divider">
1102
+ <li class="pf-v6-c-breadcrumb__item">
1103
+ <span class="pf-v6-c-breadcrumb__item-divider">
1104
1104
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1105
1105
  </span>
1106
1106
 
1107
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1107
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1108
1108
  </li>
1109
- <li class="pf-v5-c-breadcrumb__item">
1110
- <span class="pf-v5-c-breadcrumb__item-divider">
1109
+ <li class="pf-v6-c-breadcrumb__item">
1110
+ <span class="pf-v6-c-breadcrumb__item-divider">
1111
1111
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1112
1112
  </span>
1113
1113
 
1114
- <a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
1114
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1115
1115
  </li>
1116
- <li class="pf-v5-c-breadcrumb__item">
1117
- <span class="pf-v5-c-breadcrumb__item-divider">
1116
+ <li class="pf-v6-c-breadcrumb__item">
1117
+ <span class="pf-v6-c-breadcrumb__item-divider">
1118
1118
  <i class="fas fa-angle-right" aria-hidden="true"></i>
1119
1119
  </span>
1120
1120
 
1121
1121
  <a
1122
1122
  href="#"
1123
- class="pf-v5-c-breadcrumb__link pf-m-current"
1123
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1124
1124
  aria-current="page"
1125
1125
  >Section landing</a>
1126
1126
  </li>
@@ -1128,42 +1128,42 @@ section: components
1128
1128
  </nav>
1129
1129
  </div>
1130
1130
  </section>
1131
- <section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
1132
- <div class="pf-v5-c-page__main-body">
1133
- <div class="pf-v5-c-content">
1131
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1132
+ <div class="pf-v6-c-page__main-body">
1133
+ <div class="pf-v6-c-content">
1134
1134
  <h1>Main title</h1>
1135
1135
  <p>This is a full page demo.</p>
1136
1136
  </div>
1137
1137
  </div>
1138
1138
  </section>
1139
- <section class="pf-v5-c-page__main-section pf-m-light">
1140
- <form class="pf-v5-c-form pf-m-limit-width" novalidate>
1141
- <div class="pf-v5-c-form__alert">
1139
+ <section class="pf-v6-c-page__main-section pf-m-light">
1140
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
1141
+ <div class="pf-v6-c-form__alert">
1142
1142
  <div
1143
- class="pf-v5-c-alert pf-m-danger pf-m-inline"
1143
+ class="pf-v6-c-alert pf-m-danger pf-m-inline"
1144
1144
  aria-label="Inline danger alert"
1145
1145
  >
1146
- <div class="pf-v5-c-alert__icon">
1146
+ <div class="pf-v6-c-alert__icon">
1147
1147
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1148
1148
  </div>
1149
- <p class="pf-v5-c-alert__title">
1150
- <span class="pf-v5-screen-reader">Danger alert:</span>
1149
+ <p class="pf-v6-c-alert__title">
1150
+ <span class="pf-v6-screen-reader">Danger alert:</span>
1151
1151
  Fill out all required fields before continuing.
1152
1152
  </p>
1153
1153
  </div>
1154
1154
  </div>
1155
- <div class="pf-v5-c-form__group">
1156
- <div class="pf-v5-c-form__group-label"><label
1157
- class="pf-v5-c-form__label"
1155
+ <div class="pf-v6-c-form__group">
1156
+ <div class="pf-v6-c-form__group-label"><label
1157
+ class="pf-v6-c-form__label"
1158
1158
  for="alert-stacked-example-form-name"
1159
1159
  >
1160
- <span class="pf-v5-c-form__label-text">Full name</span>&nbsp;<span
1161
- class="pf-v5-c-form__label-required"
1160
+ <span class="pf-v6-c-form__label-text">Full name</span>&nbsp;<span
1161
+ class="pf-v6-c-form__label-required"
1162
1162
  aria-hidden="true"
1163
1163
  >&#42;</span></label>
1164
1164
  </div>
1165
- <div class="pf-v5-c-form__group-control">
1166
- <span class="pf-v5-c-form-control pf-m-required pf-m-error">
1165
+ <div class="pf-v6-c-form__group-control">
1166
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1167
1167
  <input
1168
1168
  required
1169
1169
  type="text"
@@ -1172,42 +1172,42 @@ section: components
1172
1172
  aria-invalid="true"
1173
1173
  aria-describedby="alert-stacked-example-form-helper"
1174
1174
  />
1175
- <span class="pf-v5-c-form-control__utilities">
1176
- <span class="pf-v5-c-form-control__icon pf-m-status">
1175
+ <span class="pf-v6-c-form-control__utilities">
1176
+ <span class="pf-v6-c-form-control__icon pf-m-status">
1177
1177
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1178
1178
  </span>
1179
1179
  </span>
1180
1180
  </span>
1181
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
1182
- <div class="pf-v5-c-helper-text">
1181
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1182
+ <div class="pf-v6-c-helper-text">
1183
1183
  <div
1184
- class="pf-v5-c-helper-text__item pf-m-error"
1184
+ class="pf-v6-c-helper-text__item pf-m-error"
1185
1185
  id="alert-stacked-example-form-name-helper"
1186
1186
  >
1187
- <span class="pf-v5-c-helper-text__item-icon">
1187
+ <span class="pf-v6-c-helper-text__item-icon">
1188
1188
  <i
1189
1189
  class="fas fa-fw fa-exclamation-circle"
1190
1190
  aria-hidden="true"
1191
1191
  ></i>
1192
1192
  </span>
1193
- <span class="pf-v5-c-helper-text__item-text">Required field</span>
1193
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
1194
1194
  </div>
1195
1195
  </div>
1196
1196
  </div>
1197
1197
  </div>
1198
1198
  </div>
1199
- <div class="pf-v5-c-form__group">
1200
- <div class="pf-v5-c-form__group-label"><label
1201
- class="pf-v5-c-form__label"
1199
+ <div class="pf-v6-c-form__group">
1200
+ <div class="pf-v6-c-form__group-label"><label
1201
+ class="pf-v6-c-form__label"
1202
1202
  for="alert-stacked-example-form-email"
1203
1203
  >
1204
- <span class="pf-v5-c-form__label-text">Email</span>&nbsp;<span
1205
- class="pf-v5-c-form__label-required"
1204
+ <span class="pf-v6-c-form__label-text">Email</span>&nbsp;<span
1205
+ class="pf-v6-c-form__label-required"
1206
1206
  aria-hidden="true"
1207
1207
  >&#42;</span></label>
1208
1208
  </div>
1209
- <div class="pf-v5-c-form__group-control">
1210
- <span class="pf-v5-c-form-control pf-m-required">
1209
+ <div class="pf-v6-c-form__group-control">
1210
+ <span class="pf-v6-c-form-control pf-m-required">
1211
1211
  <input
1212
1212
  required
1213
1213
  type="text"
@@ -1217,33 +1217,33 @@ section: components
1217
1217
  />
1218
1218
  </span>
1219
1219
  </div>
1220
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
1221
- <div class="pf-v5-c-helper-text">
1220
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1221
+ <div class="pf-v6-c-helper-text">
1222
1222
  <div
1223
- class="pf-v5-c-helper-text__item pf-m-error"
1223
+ class="pf-v6-c-helper-text__item pf-m-error"
1224
1224
  id="alert-stacked-example-form-email-helper"
1225
1225
  >
1226
- <span class="pf-v5-c-helper-text__item-icon">
1226
+ <span class="pf-v6-c-helper-text__item-icon">
1227
1227
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1228
1228
  </span>
1229
1229
  <span
1230
- class="pf-v5-c-helper-text__item-text"
1230
+ class="pf-v6-c-helper-text__item-text"
1231
1231
  >Enter a valid email address: example@gmail.com</span>
1232
1232
  </div>
1233
1233
  </div>
1234
1234
  </div>
1235
1235
  </div>
1236
- <div class="pf-v5-c-form__group">
1237
- <div class="pf-v5-c-form__group-label"><label
1238
- class="pf-v5-c-form__label"
1236
+ <div class="pf-v6-c-form__group">
1237
+ <div class="pf-v6-c-form__group-label"><label
1238
+ class="pf-v6-c-form__label"
1239
1239
  for="alert-stacked-example-form-state"
1240
1240
  >
1241
- <span class="pf-v5-c-form__label-text">State of residence</span>&nbsp;<span
1242
- class="pf-v5-c-form__label-required"
1241
+ <span class="pf-v6-c-form__label-text">State of residence</span>&nbsp;<span
1242
+ class="pf-v6-c-form__label-required"
1243
1243
  aria-hidden="true"
1244
1244
  >&#42;</span></label>
1245
1245
  </div>
1246
- <span class="pf-v5-c-form-control pf-m-required pf-m-error">
1246
+ <span class="pf-v6-c-form-control pf-m-required pf-m-error">
1247
1247
  <select
1248
1248
  class
1249
1249
  required
@@ -1258,106 +1258,106 @@ section: components
1258
1258
  <option value="Option 3">MA</option>
1259
1259
  <option value="Option 4">NY</option>
1260
1260
  </select>
1261
- <span class="pf-v5-c-form-control__utilities">
1262
- <span class="pf-v5-c-form-control__icon pf-m-status">
1261
+ <span class="pf-v6-c-form-control__utilities">
1262
+ <span class="pf-v6-c-form-control__icon pf-m-status">
1263
1263
  <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
1264
1264
  </span>
1265
- <span class="pf-v5-c-form-control__toggle-icon">
1265
+ <span class="pf-v6-c-form-control__toggle-icon">
1266
1266
  <i class="fas fa-caret-down" aria-hidden="true"></i>
1267
1267
  </span>
1268
1268
  </span>
1269
1269
  </span>
1270
1270
  <div
1271
- class="pf-v5-c-form__helper-text"
1271
+ class="pf-v6-c-form__helper-text"
1272
1272
  aria-live="polite"
1273
1273
  id="alert-stacked-example-form-state-form-email-helper-state"
1274
1274
  >
1275
- <div class="pf-v5-c-helper-text">
1275
+ <div class="pf-v6-c-helper-text">
1276
1276
  <div
1277
- class="pf-v5-c-helper-text__item pf-m-error"
1277
+ class="pf-v6-c-helper-text__item pf-m-error"
1278
1278
  id="alert-stacked-example-form-state-helper"
1279
1279
  >
1280
- <span class="pf-v5-c-helper-text__item-icon">
1280
+ <span class="pf-v6-c-helper-text__item-icon">
1281
1281
  <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true"></i>
1282
1282
  </span>
1283
- <span class="pf-v5-c-helper-text__item-text">Required field</span>
1283
+ <span class="pf-v6-c-helper-text__item-text">Required field</span>
1284
1284
  </div>
1285
1285
  </div>
1286
1286
  </div>
1287
1287
  </div>
1288
1288
  <div
1289
- class="pf-v5-c-form__group"
1289
+ class="pf-v6-c-form__group"
1290
1290
  role="group"
1291
1291
  aria-labelledby="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1292
1292
  >
1293
1293
  <div
1294
- class="pf-v5-c-form__group-label pf-m-no-padding-top"
1294
+ class="pf-v6-c-form__group-label pf-m-no-padding-top"
1295
1295
  id="alert-stacked-example-formalert-stacked-example-form-check-group-legend"
1296
1296
  ><span
1297
- class="pf-v5-c-form__label"
1297
+ class="pf-v6-c-form__label"
1298
1298
  for="alert-stacked-example-form-check-group"
1299
1299
  >
1300
- <span class="pf-v5-c-form__label-text">How can we contact you?</span>&nbsp;<span
1301
- class="pf-v5-c-form__label-required"
1300
+ <span class="pf-v6-c-form__label-text">How can we contact you?</span>&nbsp;<span
1301
+ class="pf-v6-c-form__label-required"
1302
1302
  aria-hidden="true"
1303
1303
  >&#42;</span></span>
1304
- <div class="pf-v5-c-form__helper-text" aria-live="polite">
1305
- <div class="pf-v5-c-helper-text">
1304
+ <div class="pf-v6-c-form__helper-text" aria-live="polite">
1305
+ <div class="pf-v6-c-helper-text">
1306
1306
  <div
1307
- class="pf-v5-c-helper-text__item pf-m-error"
1307
+ class="pf-v6-c-helper-text__item pf-m-error"
1308
1308
  id="alert-stacked-example-form-check-group-helper"
1309
1309
  >
1310
- <span class="pf-v5-c-helper-text__item-icon">
1310
+ <span class="pf-v6-c-helper-text__item-icon">
1311
1311
  <i
1312
1312
  class="fas fa-fw fa-exclamation-circle"
1313
1313
  aria-hidden="true"
1314
1314
  ></i>
1315
1315
  </span>
1316
1316
  <span
1317
- class="pf-v5-c-helper-text__item-text"
1317
+ class="pf-v6-c-helper-text__item-text"
1318
1318
  >This is a required field</span>
1319
1319
  </div>
1320
1320
  </div>
1321
1321
  </div>
1322
1322
  </div>
1323
- <div class="pf-v5-c-form__group-control pf-m-inline">
1324
- <div class="pf-v5-c-check">
1323
+ <div class="pf-v6-c-form__group-control pf-m-inline">
1324
+ <div class="pf-v6-c-check">
1325
1325
  <input
1326
- class="pf-v5-c-check__input"
1326
+ class="pf-v6-c-check__input"
1327
1327
  type="checkbox"
1328
1328
  id="alt-form-checkbox1"
1329
1329
  name="alt-form-checkbox1"
1330
1330
  />
1331
1331
 
1332
- <label class="pf-v5-c-check__label" for="alt-form-checkbox1">Email</label>
1332
+ <label class="pf-v6-c-check__label" for="alt-form-checkbox1">Email</label>
1333
1333
  </div>
1334
- <div class="pf-v5-c-check">
1334
+ <div class="pf-v6-c-check">
1335
1335
  <input
1336
- class="pf-v5-c-check__input"
1336
+ class="pf-v6-c-check__input"
1337
1337
  type="checkbox"
1338
1338
  id="alt-form-checkbox2"
1339
1339
  name="alt-form-checkbox2"
1340
1340
  />
1341
1341
 
1342
- <label class="pf-v5-c-check__label" for="alt-form-checkbox2">Phone</label>
1342
+ <label class="pf-v6-c-check__label" for="alt-form-checkbox2">Phone</label>
1343
1343
  </div>
1344
- <div class="pf-v5-c-check">
1344
+ <div class="pf-v6-c-check">
1345
1345
  <input
1346
- class="pf-v5-c-check__input"
1346
+ class="pf-v6-c-check__input"
1347
1347
  type="checkbox"
1348
1348
  id="alt-form-checkbox3"
1349
1349
  name="alt-form-checkbox3"
1350
1350
  />
1351
1351
 
1352
- <label class="pf-v5-c-check__label" for="alt-form-checkbox3">Mail</label>
1352
+ <label class="pf-v6-c-check__label" for="alt-form-checkbox3">Mail</label>
1353
1353
  </div>
1354
1354
  </div>
1355
1355
  </div>
1356
- <div class="pf-v5-c-form__group pf-m-action">
1357
- <div class="pf-v5-c-form__group-control">
1358
- <div class="pf-v5-c-form__actions">
1359
- <button class="pf-v5-c-button pf-m-primary" type="submit">Submit</button>
1360
- <button class="pf-v5-c-button pf-m-secondary" type="reset">Cancel</button>
1356
+ <div class="pf-v6-c-form__group pf-m-action">
1357
+ <div class="pf-v6-c-form__group-control">
1358
+ <div class="pf-v6-c-form__actions">
1359
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1360
+ <button class="pf-v6-c-button pf-m-secondary" type="reset">Cancel</button>
1361
1361
  </div>
1362
1362
  </div>
1363
1363
  </div>