@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/components/Page/deprecated/PageHeader.md CHANGED
@@ -10,34 +10,34 @@ deprecated: true
10
10
  ### Vertical nav
11
11
 
12
12
  ```html
13
- <div class="pf-v5-c-page">
14
- <header class="pf-v5-c-page__header">
15
- <div class="pf-v5-c-page__header-brand">
16
- <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
17
- <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
13
+ <div class="pf-v6-c-page">
14
+ <header class="pf-v6-c-page__header">
15
+ <div class="pf-v6-c-page__header-brand">
16
+ <div class="pf-v6-c-page__header-brand-toggle">toggle</div>
17
+ <a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
18
18
  </div>
19
- <div class="pf-v5-c-page__header-tools">header-tools</div>
19
+ <div class="pf-v6-c-page__header-tools">header-tools</div>
20
20
  </header>
21
- <div class="pf-v5-c-page__sidebar">
22
- <div class="pf-v5-c-page__sidebar-body">Navigation</div>
21
+ <div class="pf-v6-c-page__sidebar">
22
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
23
23
  </div>
24
- <main class="pf-v5-c-page__main" tabindex="-1">
25
- <section class="pf-v5-c-page__main-section pf-m-dark-100">
24
+ <main class="pf-v6-c-page__main" tabindex="-1">
25
+ <section class="pf-v6-c-page__main-section pf-m-dark-100">
26
26
  This
27
27
  <code>.pf-v5-c-page__main-section</code> uses
28
28
  <code>.pf-m-dark-100</code>.
29
29
  </section>
30
- <section class="pf-v5-c-page__main-section pf-m-dark-200">
30
+ <section class="pf-v6-c-page__main-section pf-m-dark-200">
31
31
  This
32
32
  <code>.pf-v5-c-page__main-section</code> uses
33
33
  <code>.pf-m-dark-200</code>.
34
34
  </section>
35
- <section class="pf-v5-c-page__main-section pf-m-light">
35
+ <section class="pf-v6-c-page__main-section pf-m-light">
36
36
  This
37
37
  <code>.pf-v5-c-page__main-section</code> uses
38
38
  <code>.pf-m-light</code>.
39
39
  </section>
40
- <section class="pf-v5-c-page__main-section">
40
+ <section class="pf-v6-c-page__main-section">
41
41
  This is a default
42
42
  <code>.pf-v5-c-page__main-section</code>.
43
43
  </section>
@@ -49,19 +49,19 @@ deprecated: true
49
49
  ### Horizontal nav
50
50
 
51
51
  ```html
52
- <div class="pf-v5-c-page">
53
- <header class="pf-v5-c-page__header">
54
- <div class="pf-v5-c-page__header-brand">
55
- <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
52
+ <div class="pf-v6-c-page">
53
+ <header class="pf-v6-c-page__header">
54
+ <div class="pf-v6-c-page__header-brand">
55
+ <a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
56
56
  </div>
57
- <div class="pf-v5-c-page__header-nav">Navigation</div>
58
- <div class="pf-v5-c-page__header-tools">header-tools</div>
57
+ <div class="pf-v6-c-page__header-nav">Navigation</div>
58
+ <div class="pf-v6-c-page__header-tools">header-tools</div>
59
59
  </header>
60
- <main class="pf-v5-c-page__main" tabindex="-1">
61
- <section class="pf-v5-c-page__main-section pf-m-dark-100"></section>
62
- <section class="pf-v5-c-page__main-section pf-m-dark-200"></section>
63
- <section class="pf-v5-c-page__main-section pf-m-light"></section>
64
- <section class="pf-v5-c-page__main-section"></section>
60
+ <main class="pf-v6-c-page__main" tabindex="-1">
61
+ <section class="pf-v6-c-page__main-section pf-m-dark-100"></section>
62
+ <section class="pf-v6-c-page__main-section pf-m-dark-200"></section>
63
+ <section class="pf-v6-c-page__main-section pf-m-light"></section>
64
+ <section class="pf-v6-c-page__main-section"></section>
65
65
  </main>
66
66
  </div>
67
67
 
@@ -70,23 +70,23 @@ deprecated: true
70
70
  ### Multiple sidebar body elements, padding, and fill
71
71
 
72
72
  ```html
73
- <div class="pf-v5-c-page">
74
- <header class="pf-v5-c-page__header">
75
- <div class="pf-v5-c-page__header-brand">
76
- <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
77
- <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
73
+ <div class="pf-v6-c-page">
74
+ <header class="pf-v6-c-page__header">
75
+ <div class="pf-v6-c-page__header-brand">
76
+ <div class="pf-v6-c-page__header-brand-toggle">toggle</div>
77
+ <a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
78
78
  </div>
79
- <div class="pf-v5-c-page__header-tools">header-tools</div>
79
+ <div class="pf-v6-c-page__header-tools">header-tools</div>
80
80
  </header>
81
- <div class="pf-v5-c-page__sidebar">
82
- <div class="pf-v5-c-page__sidebar-body">Navigation</div>
81
+ <div class="pf-v6-c-page__sidebar">
82
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
83
83
  <div
84
- class="pf-v5-c-page__sidebar-body pf-m-fill pf-m-page-insets"
84
+ class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets"
85
85
  >inset content</div>
86
- <div class="pf-v5-c-page__sidebar-body pf-m-page-insets">footer content</div>
86
+ <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
87
87
  </div>
88
- <main class="pf-v5-c-page__main" tabindex="-1">
89
- <section class="pf-v5-c-page__main-section pf-m-light"></section>
88
+ <main class="pf-v6-c-page__main" tabindex="-1">
89
+ <section class="pf-v6-c-page__main-section pf-m-light"></section>
90
90
  </main>
91
91
  </div>
92
92
 
@@ -95,23 +95,23 @@ deprecated: true
95
95
  ### With or without fill
96
96
 
97
97
  ```html
98
- <div class="pf-v5-c-page">
99
- <header class="pf-v5-c-page__header">
100
- <div class="pf-v5-c-page__header-brand">
101
- <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
98
+ <div class="pf-v6-c-page">
99
+ <header class="pf-v6-c-page__header">
100
+ <div class="pf-v6-c-page__header-brand">
101
+ <a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
102
102
  </div>
103
- <div class="pf-v5-c-page__header-nav">Navigation</div>
104
- <div class="pf-v5-c-page__header-tools">header-tools</div>
103
+ <div class="pf-v6-c-page__header-nav">Navigation</div>
104
+ <div class="pf-v6-c-page__header-tools">header-tools</div>
105
105
  </header>
106
- <main class="pf-v5-c-page__main" tabindex="-1">
106
+ <main class="pf-v6-c-page__main" tabindex="-1">
107
107
  <section
108
- class="pf-v5-c-page__main-section pf-m-light"
108
+ class="pf-v6-c-page__main-section pf-m-light"
109
109
  >A regular page section.</section>
110
- <section class="pf-v5-c-page__main-section pf-m-fill">
110
+ <section class="pf-v6-c-page__main-section pf-m-fill">
111
111
  This section uses
112
112
  <code>.pf-m-fill</code> to fill the available space.
113
113
  </section>
114
- <section class="pf-v5-c-page__main-section pf-m-light pf-m-no-fill">
114
+ <section class="pf-v6-c-page__main-section pf-m-light pf-m-no-fill">
115
115
  This section uses
116
116
  <code>.pf-m-no-fill</code> to not fill the available space.
117
117
  </section>
@@ -123,29 +123,29 @@ deprecated: true
123
123
  ### Main section padding
124
124
 
125
125
  ```html
126
- <div class="pf-v5-c-page">
127
- <header class="pf-v5-c-page__header">
128
- <div class="pf-v5-c-page__header-brand">
129
- <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
130
- <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
126
+ <div class="pf-v6-c-page">
127
+ <header class="pf-v6-c-page__header">
128
+ <div class="pf-v6-c-page__header-brand">
129
+ <div class="pf-v6-c-page__header-brand-toggle">toggle</div>
130
+ <a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
131
131
  </div>
132
- <div class="pf-v5-c-page__header-tools">header-tools</div>
132
+ <div class="pf-v6-c-page__header-tools">header-tools</div>
133
133
  </header>
134
- <div class="pf-v5-c-page__sidebar">
135
- <div class="pf-v5-c-page__sidebar-body">Navigation</div>
134
+ <div class="pf-v6-c-page__sidebar">
135
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
136
136
  </div>
137
- <main class="pf-v5-c-page__main" tabindex="-1">
138
- <section class="pf-v5-c-page__main-section">
137
+ <main class="pf-v6-c-page__main" tabindex="-1">
138
+ <section class="pf-v6-c-page__main-section">
139
139
  This
140
140
  <code>.pf-v5-c-page__main-section</code> has default padding.
141
141
  </section>
142
- <section class="pf-v5-c-page__main-section pf-m-no-padding pf-m-light">
142
+ <section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
143
143
  This
144
144
  <code>.pf-v5-c-page__main-section</code> uses
145
145
  <code>.pf-m-no-padding</code> to remove all padding.
146
146
  </section>
147
147
  <section
148
- class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
148
+ class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
149
149
  >
150
150
  This
151
151
  <code>.pf-v5-c-page__main-section</code> uses
@@ -160,37 +160,37 @@ deprecated: true
160
160
  ### Main section variations
161
161
 
162
162
  ```html
163
- <div class="pf-v5-c-page">
164
- <header class="pf-v5-c-page__header">
165
- <div class="pf-v5-c-page__header-brand">
166
- <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
167
- <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
163
+ <div class="pf-v6-c-page">
164
+ <header class="pf-v6-c-page__header">
165
+ <div class="pf-v6-c-page__header-brand">
166
+ <div class="pf-v6-c-page__header-brand-toggle">toggle</div>
167
+ <a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
168
168
  </div>
169
- <div class="pf-v5-c-page__header-tools">header-tools</div>
169
+ <div class="pf-v6-c-page__header-tools">header-tools</div>
170
170
  </header>
171
- <div class="pf-v5-c-page__sidebar">
172
- <div class="pf-v5-c-page__sidebar-body">Navigation</div>
171
+ <div class="pf-v6-c-page__sidebar">
172
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
173
173
  </div>
174
- <main class="pf-v5-c-page__main" tabindex="-1">
175
- <section class="pf-v5-c-page__main-subnav">
174
+ <main class="pf-v6-c-page__main" tabindex="-1">
175
+ <section class="pf-v6-c-page__main-subnav">
176
176
  <code>.pf-v5-c-page__main-subnav</code> for horizontal subnav navigation
177
177
  </section>
178
- <section class="pf-v5-c-page__main-nav">
178
+ <section class="pf-v6-c-page__main-nav">
179
179
  <code>.pf-v5-c-page__main-nav</code> for tertiary navigation
180
180
  </section>
181
- <section class="pf-v5-c-page__main-tabs">
181
+ <section class="pf-v6-c-page__main-tabs">
182
182
  <code>.pf-v5-c-page__main-tabs</code> for tabs
183
183
  </section>
184
- <div class="pf-v5-c-page__main-group">
184
+ <div class="pf-v6-c-page__main-group">
185
185
  <code>.pf-v5-c-page__main-group</code> for a group of page sections
186
186
  </div>
187
- <section class="pf-v5-c-page__main-breadcrumb">
187
+ <section class="pf-v6-c-page__main-breadcrumb">
188
188
  <code>.pf-v5-c-page__main-breadcrumb</code> for breadcrumbs
189
189
  </section>
190
- <section class="pf-v5-c-page__main-section">
190
+ <section class="pf-v6-c-page__main-section">
191
191
  <code>.pf-v5-c-page__main-section</code> for main sections
192
192
  </section>
193
- <section class="pf-v5-c-page__main-wizard">
193
+ <section class="pf-v6-c-page__main-wizard">
194
194
  <code>.pf-v5-c-page__main-wizard</code> for wizards
195
195
  </section>
196
196
  </main>
@@ -201,21 +201,21 @@ deprecated: true
201
201
  ### Centered section
202
202
 
203
203
  ```html
204
- <div class="pf-v5-c-page">
205
- <header class="pf-v5-c-page__header">
206
- <div class="pf-v5-c-page__header-brand">
207
- <div class="pf-v5-c-page__header-brand-toggle">toggle</div>
208
- <a href="#" class="pf-v5-c-page__header-brand-link">Logo</a>
204
+ <div class="pf-v6-c-page">
205
+ <header class="pf-v6-c-page__header">
206
+ <div class="pf-v6-c-page__header-brand">
207
+ <div class="pf-v6-c-page__header-brand-toggle">toggle</div>
208
+ <a href="#" class="pf-v6-c-page__header-brand-link">Logo</a>
209
209
  </div>
210
- <div class="pf-v5-c-page__header-tools">header-tools</div>
210
+ <div class="pf-v6-c-page__header-tools">header-tools</div>
211
211
  </header>
212
- <main class="pf-v5-c-page__main" tabindex="-1">
212
+ <main class="pf-v6-c-page__main" tabindex="-1">
213
213
  <section
214
- class="pf-v5-c-page__main-section pf-m-limit-width pf-m-align-center"
214
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
215
215
  >
216
- <div class="pf-v5-c-page__main-body">
217
- <div class="pf-v5-c-card">
218
- <div class="pf-v5-c-card__body">
216
+ <div class="pf-v6-c-page__main-body">
217
+ <div class="pf-v6-c-card">
218
+ <div class="pf-v6-c-card__body">
219
219
  When a width limited page section is wider than the value of
220
220
  <code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
221
221
  <br />
package/docs/components/Page/examples/Page.md CHANGED
@@ -10,38 +10,38 @@ wrapperTag: div
10
10
  ### Vertical nav
11
11
 
12
12
  ```html
13
- <div class="pf-v5-c-page">
14
- <header class="pf-v5-c-masthead">
15
- <span class="pf-v5-c-masthead__toggle">
13
+ <div class="pf-v6-c-page">
14
+ <header class="pf-v6-c-masthead">
15
+ <span class="pf-v6-c-masthead__toggle">
16
16
  <button
17
- class="pf-v5-c-button pf-m-plain"
17
+ class="pf-v6-c-button pf-m-plain"
18
18
  type="button"
19
19
  aria-label="Global navigation"
20
20
  >
21
21
  <i class="fas fa-bars" aria-hidden="true"></i>
22
22
  </button>
23
23
  </span>
24
- <div class="pf-v5-c-masthead__main">
25
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
24
+ <div class="pf-v6-c-masthead__main">
25
+ <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
26
26
  </div>
27
- <div class="pf-v5-c-masthead__content">
27
+ <div class="pf-v6-c-masthead__content">
28
28
  <span>Content</span>
29
29
  </div>
30
30
  </header>
31
- <div class="pf-v5-c-page__sidebar">
32
- <div class="pf-v5-c-page__sidebar-body">Navigation</div>
31
+ <div class="pf-v6-c-page__sidebar">
32
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
33
33
  </div>
34
- <main class="pf-v5-c-page__main" tabindex="-1">
35
- <section class="pf-v5-c-page__main-section">
34
+ <main class="pf-v6-c-page__main" tabindex="-1">
35
+ <section class="pf-v6-c-page__main-section">
36
36
  This is a default
37
37
  <code>.pf-v5-c-page__main-section</code>.
38
38
  </section>
39
- <section class="pf-v5-c-page__main-section pf-m-secondary">
39
+ <section class="pf-v6-c-page__main-section pf-m-secondary">
40
40
  This
41
41
  <code>.pf-v5-c-page__main-section</code> uses
42
42
  <code>.pf-m-secondary</code>.
43
43
  </section>
44
- <section class="pf-v5-c-page__main-section">
44
+ <section class="pf-v6-c-page__main-section">
45
45
  This is a default
46
46
  <code>.pf-v5-c-page__main-section</code>.
47
47
  </section>
@@ -53,35 +53,35 @@ wrapperTag: div
53
53
  ### Horizontal nav
54
54
 
55
55
  ```html
56
- <div class="pf-v5-c-page">
57
- <header class="pf-v5-c-masthead">
58
- <span class="pf-v5-c-masthead__toggle">
56
+ <div class="pf-v6-c-page">
57
+ <header class="pf-v6-c-masthead">
58
+ <span class="pf-v6-c-masthead__toggle">
59
59
  <button
60
- class="pf-v5-c-button pf-m-plain"
60
+ class="pf-v6-c-button pf-m-plain"
61
61
  type="button"
62
62
  aria-label="Global navigation"
63
63
  >
64
64
  <i class="fas fa-bars" aria-hidden="true"></i>
65
65
  </button>
66
66
  </span>
67
- <div class="pf-v5-c-masthead__main">
68
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
67
+ <div class="pf-v6-c-masthead__main">
68
+ <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
69
69
  </div>
70
- <div class="pf-v5-c-masthead__content">
70
+ <div class="pf-v6-c-masthead__content">
71
71
  <span>Content</span>
72
72
  </div>
73
73
  </header>
74
- <main class="pf-v5-c-page__main" tabindex="-1">
75
- <section class="pf-v5-c-page__main-section">
74
+ <main class="pf-v6-c-page__main" tabindex="-1">
75
+ <section class="pf-v6-c-page__main-section">
76
76
  This is a default
77
77
  <code>.pf-v5-c-page__main-section</code>.
78
78
  </section>
79
- <section class="pf-v5-c-page__main-section pf-m-secondary">
79
+ <section class="pf-v6-c-page__main-section pf-m-secondary">
80
80
  This
81
81
  <code>.pf-v5-c-page__main-section</code> uses
82
82
  <code>.pf-m-secondary</code>.
83
83
  </section>
84
- <section class="pf-v5-c-page__main-section">
84
+ <section class="pf-v6-c-page__main-section">
85
85
  This is a default
86
86
  <code>.pf-v5-c-page__main-section</code>.
87
87
  </section>
@@ -93,33 +93,33 @@ wrapperTag: div
93
93
  ### Multiple sidebar body elements, padding, and fill
94
94
 
95
95
  ```html
96
- <div class="pf-v5-c-page">
97
- <header class="pf-v5-c-masthead">
98
- <span class="pf-v5-c-masthead__toggle">
96
+ <div class="pf-v6-c-page">
97
+ <header class="pf-v6-c-masthead">
98
+ <span class="pf-v6-c-masthead__toggle">
99
99
  <button
100
- class="pf-v5-c-button pf-m-plain"
100
+ class="pf-v6-c-button pf-m-plain"
101
101
  type="button"
102
102
  aria-label="Global navigation"
103
103
  >
104
104
  <i class="fas fa-bars" aria-hidden="true"></i>
105
105
  </button>
106
106
  </span>
107
- <div class="pf-v5-c-masthead__main">
108
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
107
+ <div class="pf-v6-c-masthead__main">
108
+ <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
109
109
  </div>
110
- <div class="pf-v5-c-masthead__content">
110
+ <div class="pf-v6-c-masthead__content">
111
111
  <span>Content</span>
112
112
  </div>
113
113
  </header>
114
- <div class="pf-v5-c-page__sidebar">
115
- <div class="pf-v5-c-page__sidebar-body">Navigation</div>
114
+ <div class="pf-v6-c-page__sidebar">
115
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
116
116
  <div
117
- class="pf-v5-c-page__sidebar-body pf-m-fill pf-m-page-insets"
117
+ class="pf-v6-c-page__sidebar-body pf-m-fill pf-m-page-insets"
118
118
  >inset content</div>
119
- <div class="pf-v5-c-page__sidebar-body pf-m-page-insets">footer content</div>
119
+ <div class="pf-v6-c-page__sidebar-body pf-m-page-insets">footer content</div>
120
120
  </div>
121
- <main class="pf-v5-c-page__main" tabindex="-1">
122
- <section class="pf-v5-c-page__main-section"></section>
121
+ <main class="pf-v6-c-page__main" tabindex="-1">
122
+ <section class="pf-v6-c-page__main-section"></section>
123
123
  </main>
124
124
  </div>
125
125
 
@@ -128,31 +128,31 @@ wrapperTag: div
128
128
  ### With or without fill
129
129
 
130
130
  ```html
131
- <div class="pf-v5-c-page">
132
- <header class="pf-v5-c-masthead">
133
- <span class="pf-v5-c-masthead__toggle">
131
+ <div class="pf-v6-c-page">
132
+ <header class="pf-v6-c-masthead">
133
+ <span class="pf-v6-c-masthead__toggle">
134
134
  <button
135
- class="pf-v5-c-button pf-m-plain"
135
+ class="pf-v6-c-button pf-m-plain"
136
136
  type="button"
137
137
  aria-label="Global navigation"
138
138
  >
139
139
  <i class="fas fa-bars" aria-hidden="true"></i>
140
140
  </button>
141
141
  </span>
142
- <div class="pf-v5-c-masthead__main">
143
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
142
+ <div class="pf-v6-c-masthead__main">
143
+ <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
144
144
  </div>
145
- <div class="pf-v5-c-masthead__content">
145
+ <div class="pf-v6-c-masthead__content">
146
146
  <span>Content</span>
147
147
  </div>
148
148
  </header>
149
- <main class="pf-v5-c-page__main" tabindex="-1">
150
- <section class="pf-v5-c-page__main-section">A regular page section.</section>
151
- <section class="pf-v5-c-page__main-section pf-m-fill">
149
+ <main class="pf-v6-c-page__main" tabindex="-1">
150
+ <section class="pf-v6-c-page__main-section">A regular page section.</section>
151
+ <section class="pf-v6-c-page__main-section pf-m-fill">
152
152
  This section uses
153
153
  <code>.pf-m-fill</code> to fill the available space.
154
154
  </section>
155
- <section class="pf-v5-c-page__main-section pf-m-no-fill">
155
+ <section class="pf-v6-c-page__main-section pf-m-no-fill">
156
156
  This section uses
157
157
  <code>.pf-m-no-fill</code> to not fill the available space.
158
158
  </section>
@@ -164,39 +164,39 @@ wrapperTag: div
164
164
  ### Main section padding
165
165
 
166
166
  ```html
167
- <div class="pf-v5-c-page">
168
- <header class="pf-v5-c-masthead">
169
- <span class="pf-v5-c-masthead__toggle">
167
+ <div class="pf-v6-c-page">
168
+ <header class="pf-v6-c-masthead">
169
+ <span class="pf-v6-c-masthead__toggle">
170
170
  <button
171
- class="pf-v5-c-button pf-m-plain"
171
+ class="pf-v6-c-button pf-m-plain"
172
172
  type="button"
173
173
  aria-label="Global navigation"
174
174
  >
175
175
  <i class="fas fa-bars" aria-hidden="true"></i>
176
176
  </button>
177
177
  </span>
178
- <div class="pf-v5-c-masthead__main">
179
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
178
+ <div class="pf-v6-c-masthead__main">
179
+ <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
180
180
  </div>
181
- <div class="pf-v5-c-masthead__content">
181
+ <div class="pf-v6-c-masthead__content">
182
182
  <span>Content</span>
183
183
  </div>
184
184
  </header>
185
- <div class="pf-v5-c-page__sidebar">
186
- <div class="pf-v5-c-page__sidebar-body">Navigation</div>
185
+ <div class="pf-v6-c-page__sidebar">
186
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
187
187
  </div>
188
- <main class="pf-v5-c-page__main" tabindex="-1">
189
- <section class="pf-v5-c-page__main-section">
188
+ <main class="pf-v6-c-page__main" tabindex="-1">
189
+ <section class="pf-v6-c-page__main-section">
190
190
  This
191
191
  <code>.pf-v5-c-page__main-section</code> has default padding.
192
192
  </section>
193
- <section class="pf-v5-c-page__main-section pf-m-no-padding">
193
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
194
194
  This
195
195
  <code>.pf-v5-c-page__main-section</code> uses
196
196
  <code>.pf-m-no-padding</code> to remove all padding.
197
197
  </section>
198
198
  <section
199
- class="pf-v5-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
199
+ class="pf-v6-c-page__main-section pf-m-no-padding pf-m-padding-on-md"
200
200
  >
201
201
  This
202
202
  <code>.pf-v5-c-page__main-section</code> uses
@@ -211,47 +211,47 @@ wrapperTag: div
211
211
  ### Main section variations
212
212
 
213
213
  ```html
214
- <div class="pf-v5-c-page">
215
- <header class="pf-v5-c-masthead">
216
- <span class="pf-v5-c-masthead__toggle">
214
+ <div class="pf-v6-c-page">
215
+ <header class="pf-v6-c-masthead">
216
+ <span class="pf-v6-c-masthead__toggle">
217
217
  <button
218
- class="pf-v5-c-button pf-m-plain"
218
+ class="pf-v6-c-button pf-m-plain"
219
219
  type="button"
220
220
  aria-label="Global navigation"
221
221
  >
222
222
  <i class="fas fa-bars" aria-hidden="true"></i>
223
223
  </button>
224
224
  </span>
225
- <div class="pf-v5-c-masthead__main">
226
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
225
+ <div class="pf-v6-c-masthead__main">
226
+ <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
227
227
  </div>
228
- <div class="pf-v5-c-masthead__content">
228
+ <div class="pf-v6-c-masthead__content">
229
229
  <span>Content</span>
230
230
  </div>
231
231
  </header>
232
- <div class="pf-v5-c-page__sidebar">
233
- <div class="pf-v5-c-page__sidebar-body">Navigation</div>
232
+ <div class="pf-v6-c-page__sidebar">
233
+ <div class="pf-v6-c-page__sidebar-body">Navigation</div>
234
234
  </div>
235
- <main class="pf-v5-c-page__main" tabindex="-1">
236
- <section class="pf-v5-c-page__main-subnav">
235
+ <main class="pf-v6-c-page__main" tabindex="-1">
236
+ <section class="pf-v6-c-page__main-subnav">
237
237
  <code>.pf-v5-c-page__main-subnav</code> for horizontal subnav navigation
238
238
  </section>
239
- <section class="pf-v5-c-page__main-nav">
239
+ <section class="pf-v6-c-page__main-nav">
240
240
  <code>.pf-v5-c-page__main-nav</code> for tertiary navigation
241
241
  </section>
242
- <section class="pf-v5-c-page__main-tabs">
242
+ <section class="pf-v6-c-page__main-tabs">
243
243
  <code>.pf-v5-c-page__main-tabs</code> for tabs
244
244
  </section>
245
- <div class="pf-v5-c-page__main-group">
245
+ <div class="pf-v6-c-page__main-group">
246
246
  <code>.pf-v5-c-page__main-group</code> for a group of page sections
247
247
  </div>
248
- <section class="pf-v5-c-page__main-breadcrumb">
248
+ <section class="pf-v6-c-page__main-breadcrumb">
249
249
  <code>.pf-v5-c-page__main-breadcrumb</code> for breadcrumbs
250
250
  </section>
251
- <section class="pf-v5-c-page__main-section">
251
+ <section class="pf-v6-c-page__main-section">
252
252
  <code>.pf-v5-c-page__main-section</code> for main sections
253
253
  </section>
254
- <section class="pf-v5-c-page__main-wizard">
254
+ <section class="pf-v6-c-page__main-wizard">
255
255
  <code>.pf-v5-c-page__main-wizard</code> for wizards
256
256
  </section>
257
257
  </main>
@@ -262,31 +262,31 @@ wrapperTag: div
262
262
  ### Centered section
263
263
 
264
264
  ```html
265
- <div class="pf-v5-c-page">
266
- <header class="pf-v5-c-masthead">
267
- <span class="pf-v5-c-masthead__toggle">
265
+ <div class="pf-v6-c-page">
266
+ <header class="pf-v6-c-masthead">
267
+ <span class="pf-v6-c-masthead__toggle">
268
268
  <button
269
- class="pf-v5-c-button pf-m-plain"
269
+ class="pf-v6-c-button pf-m-plain"
270
270
  type="button"
271
271
  aria-label="Global navigation"
272
272
  >
273
273
  <i class="fas fa-bars" aria-hidden="true"></i>
274
274
  </button>
275
275
  </span>
276
- <div class="pf-v5-c-masthead__main">
277
- <a class="pf-v5-c-masthead__brand" href="#">Logo</a>
276
+ <div class="pf-v6-c-masthead__main">
277
+ <a class="pf-v6-c-masthead__brand" href="#">Logo</a>
278
278
  </div>
279
- <div class="pf-v5-c-masthead__content">
279
+ <div class="pf-v6-c-masthead__content">
280
280
  <span>Content</span>
281
281
  </div>
282
282
  </header>
283
- <main class="pf-v5-c-page__main" tabindex="-1">
283
+ <main class="pf-v6-c-page__main" tabindex="-1">
284
284
  <section
285
- class="pf-v5-c-page__main-section pf-m-limit-width pf-m-align-center"
285
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
286
286
  >
287
- <div class="pf-v5-c-page__main-body">
288
- <div class="pf-v5-c-card">
289
- <div class="pf-v5-c-card__body">
287
+ <div class="pf-v6-c-page__main-body">
288
+ <div class="pf-v6-c-card">
289
+ <div class="pf-v6-c-card__body">
290
290
  When a width limited page section is wider than the value of
291
291
  <code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
292
292
  <br />