@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -13,91 +13,99 @@ wrapperTag: div
13
13
  <a
14
14
  class="pf-v6-c-button pf-m-primary"
15
15
  href="#main-content-banner-basic-example"
16
- >Skip to content</a>
16
+ >
17
+ <span class="pf-v6-c-button__text">Skip to content</span>
18
+ </a>
17
19
  </div>
18
20
  <header class="pf-v6-c-masthead" id="banner-basic-example-masthead">
19
- <span class="pf-v6-c-masthead__toggle">
20
- <button
21
- class="pf-v6-c-button pf-m-plain"
22
- type="button"
23
- aria-label="Global navigation"
24
- >
25
- <i class="fas fa-bars" aria-hidden="true"></i>
26
- </button>
27
- </span>
28
21
  <div class="pf-v6-c-masthead__main">
29
- <a class="pf-v6-c-masthead__brand" href="#">
30
- <svg height="40px" viewBox="0 0 679 158">
31
- <title>PF-HorizontalLogo-Color</title>
32
- <defs>
33
- <linearGradient
34
- x1="68%"
35
- y1="2.25860997e-13%"
36
- x2="32%"
37
- y2="100%"
38
- id="linearGradient-banner-basic-example-masthead"
39
- >
40
- <stop stop-color="#2B9AF3" offset="0%" />
41
- <stop
42
- stop-color="#73BCF7"
43
- stop-opacity="0.502212631"
44
- offset="100%"
45
- />
46
- </linearGradient>
47
- </defs>
48
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
49
- <g
50
- transform="translate(206.000000, 45.750000)"
51
- fill="var(--pf-t--global--text--color--regular)"
52
- fill-rule="nonzero"
53
- >
54
- <path
55
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
56
- />
57
- <path
58
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
59
- />
60
- <path
61
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
62
- />
63
- <path
64
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
65
- />
66
- <path
67
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
68
- />
69
- <path
70
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
71
- />
72
- <path
73
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
74
- />
75
- <polygon
76
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
77
- />
78
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
79
- <path
80
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
81
- />
82
- </g>
83
- <g transform="translate(0.000000, 0.000000)">
84
- <path
85
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
86
- fill="#0066CC"
87
- />
88
- <path
89
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
90
- fill="url(#linearGradient-banner-basic-example-masthead)"
91
- />
92
- <path
93
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
94
- fill="url(#linearGradient-banner-basic-example-masthead)"
95
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
96
- />
22
+ <span class="pf-v6-c-masthead__toggle">
23
+ <button
24
+ class="pf-v6-c-button pf-m-plain"
25
+ type="button"
26
+ aria-label="Global navigation"
27
+ >
28
+ <span class="pf-v6-c-button__icon">
29
+ <i class="fas fa-bars" aria-hidden="true"></i>
30
+ </span>
31
+ </button>
32
+ </span>
33
+ <div class="pf-v6-c-masthead__brand">
34
+ <a class="pf-v6-c-masthead__logo" href="#">
35
+ <svg height="37px" viewBox="0 0 679 158">
36
+ <title>PF-HorizontalLogo-Color</title>
37
+ <defs>
38
+ <linearGradient
39
+ x1="68%"
40
+ y1="2.25860997e-13%"
41
+ x2="32%"
42
+ y2="100%"
43
+ id="linearGradient-banner-basic-example-masthead"
44
+ >
45
+ <stop stop-color="#2B9AF3" offset="0%" />
46
+ <stop
47
+ stop-color="#73BCF7"
48
+ stop-opacity="0.502212631"
49
+ offset="100%"
50
+ />
51
+ </linearGradient>
52
+ </defs>
53
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
54
+ <g
55
+ transform="translate(206.000000, 45.750000)"
56
+ fill="var(--pf-t--global--text--color--regular)"
57
+ fill-rule="nonzero"
58
+ >
59
+ <path
60
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
61
+ />
62
+ <path
63
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
64
+ />
65
+ <path
66
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
67
+ />
68
+ <path
69
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
70
+ />
71
+ <path
72
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
73
+ />
74
+ <path
75
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
76
+ />
77
+ <path
78
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
79
+ />
80
+ <polygon
81
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
82
+ />
83
+ <polygon
84
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
85
+ />
86
+ <path
87
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
88
+ />
89
+ </g>
90
+ <g transform="translate(0.000000, 0.000000)">
91
+ <path
92
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
93
+ fill="#0066CC"
94
+ />
95
+ <path
96
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
97
+ fill="url(#linearGradient-banner-basic-example-masthead)"
98
+ />
99
+ <path
100
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
101
+ fill="url(#linearGradient-banner-basic-example-masthead)"
102
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
103
+ />
104
+ </g>
97
105
  </g>
98
- </g>
99
- </svg>
100
- </a>
106
+ </svg>
107
+ </a>
108
+ </div>
101
109
  </div>
102
110
  <div class="pf-v6-c-masthead__content">
103
111
  <div
@@ -106,41 +114,11 @@ wrapperTag: div
106
114
  >
107
115
  <div class="pf-v6-c-toolbar__content">
108
116
  <div class="pf-v6-c-toolbar__content-section">
109
- <div class="pf-v6-c-toolbar__item">
110
- <button
111
- class="pf-v6-c-menu-toggle"
112
- type="button"
113
- aria-expanded="false"
114
- >
115
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
116
- <span class="pf-v6-c-menu-toggle__controls">
117
- <span class="pf-v6-c-menu-toggle__toggle-icon">
118
- <i class="fas fa-caret-down" aria-hidden="true"></i>
119
- </span>
120
- </span>
121
- </button>
122
- </div>
123
-
124
- <div class="pf-v6-c-toolbar__item">
125
- <button
126
- class="pf-v6-c-menu-toggle"
127
- type="button"
128
- aria-expanded="false"
129
- >
130
- <span class="pf-v6-c-menu-toggle__text">Services</span>
131
- <span class="pf-v6-c-menu-toggle__controls">
132
- <span class="pf-v6-c-menu-toggle__toggle-icon">
133
- <i class="fas fa-caret-down" aria-hidden="true"></i>
134
- </span>
135
- </span>
136
- </button>
137
- </div>
138
-
139
117
  <div
140
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
118
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
141
119
  >
142
120
  <div
143
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
121
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
144
122
  >
145
123
  <div class="pf-v6-c-toolbar__item">
146
124
  <button
@@ -179,6 +157,7 @@ wrapperTag: div
179
157
  </button>
180
158
  </div>
181
159
  </div>
160
+
182
161
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
183
162
  <button
184
163
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -206,250 +185,264 @@ wrapperTag: div
206
185
  >
207
186
  <ul class="pf-v6-c-nav__list" role="list">
208
187
  <li class="pf-v6-c-nav__item">
209
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
188
+ <a href="#" class="pf-v6-c-nav__link">
189
+ <span class="pf-v6-c-nav__link-text">System panel</span>
190
+ </a>
210
191
  </li>
211
192
  <li class="pf-v6-c-nav__item">
212
193
  <a
213
194
  href="#"
214
195
  class="pf-v6-c-nav__link pf-m-current"
215
196
  aria-current="page"
216
- >Policy</a>
197
+ >
198
+ <span class="pf-v6-c-nav__link-text">Policy</span>
199
+ </a>
217
200
  </li>
218
201
  <li class="pf-v6-c-nav__item">
219
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
202
+ <a href="#" class="pf-v6-c-nav__link">
203
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
204
+ </a>
220
205
  </li>
221
206
  <li class="pf-v6-c-nav__item">
222
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
207
+ <a href="#" class="pf-v6-c-nav__link">
208
+ <span class="pf-v6-c-nav__link-text">Network services</span>
209
+ </a>
223
210
  </li>
224
211
  <li class="pf-v6-c-nav__item">
225
- <a href="#" class="pf-v6-c-nav__link">Server</a>
212
+ <a href="#" class="pf-v6-c-nav__link">
213
+ <span class="pf-v6-c-nav__link-text">Server</span>
214
+ </a>
226
215
  </li>
227
216
  </ul>
228
217
  </nav>
229
218
  </div>
230
219
  </div>
231
- <main
232
- class="pf-v6-c-page__main"
233
- tabindex="-1"
234
- id="main-content-banner-basic-example"
235
- >
236
- <div class="pf-v6-c-banner pf-m-sticky">
237
- <div
238
- class="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
239
- >
240
- <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
241
- <div
242
- class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
243
- >This message is sticky to the top or bottom of the page.</div>
244
- <div
245
- class="pf-v6-u-display-none-on-lg"
246
- >Drop some text on mobile, truncate if needed.</div>
220
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
221
+ <main
222
+ class="pf-v6-c-page__main"
223
+ tabindex="-1"
224
+ id="main-content-banner-basic-example"
225
+ >
226
+ <div class="pf-v6-c-banner pf-m-sticky">
247
227
  <div
248
- class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
249
- >Ned Username</div>
228
+ class="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
229
+ >
230
+ <div
231
+ class="pf-v6-u-display-none pf-v6-u-display-block-on-lg"
232
+ >Localhost</div>
233
+ <div
234
+ class="pf-v6-u-display-none pf-v6-u-display-block-on-lg"
235
+ >This message is sticky to the top or bottom of the page.</div>
236
+ <div
237
+ class="pf-v6-u-display-none-on-lg"
238
+ >Drop some text on mobile, truncate if needed.</div>
239
+ <div
240
+ class="pf-v6-u-display-none pf-v6-u-display-block-on-lg"
241
+ >Ned Username</div>
242
+ </div>
250
243
  </div>
251
- </div>
252
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
253
- <div class="pf-v6-c-page__main-body">
254
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
255
- <ol class="pf-v6-c-breadcrumb__list" role="list">
256
- <li class="pf-v6-c-breadcrumb__item">
257
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
258
- </li>
259
- <li class="pf-v6-c-breadcrumb__item">
260
- <span class="pf-v6-c-breadcrumb__item-divider">
261
- <i class="fas fa-angle-right" aria-hidden="true"></i>
262
- </span>
244
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
245
+ <div class="pf-v6-c-page__main-body">
246
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
247
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
248
+ <li class="pf-v6-c-breadcrumb__item">
249
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
250
+ </li>
251
+ <li class="pf-v6-c-breadcrumb__item">
252
+ <span class="pf-v6-c-breadcrumb__item-divider">
253
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
254
+ </span>
263
255
 
264
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
265
- </li>
266
- <li class="pf-v6-c-breadcrumb__item">
267
- <span class="pf-v6-c-breadcrumb__item-divider">
268
- <i class="fas fa-angle-right" aria-hidden="true"></i>
269
- </span>
256
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
257
+ </li>
258
+ <li class="pf-v6-c-breadcrumb__item">
259
+ <span class="pf-v6-c-breadcrumb__item-divider">
260
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
261
+ </span>
270
262
 
271
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
272
- </li>
273
- <li class="pf-v6-c-breadcrumb__item">
274
- <span class="pf-v6-c-breadcrumb__item-divider">
275
- <i class="fas fa-angle-right" aria-hidden="true"></i>
276
- </span>
263
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
264
+ </li>
265
+ <li class="pf-v6-c-breadcrumb__item">
266
+ <span class="pf-v6-c-breadcrumb__item-divider">
267
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
268
+ </span>
277
269
 
278
- <a
279
- href="#"
280
- class="pf-v6-c-breadcrumb__link pf-m-current"
281
- aria-current="page"
282
- >Section landing</a>
283
- </li>
284
- </ol>
285
- </nav>
286
- </div>
287
- </section>
288
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
289
- <div class="pf-v6-c-page__main-body">
290
- <div class="pf-v6-c-content">
291
- <h1>Main title</h1>
292
- <p>This is a full page demo.</p>
270
+ <a
271
+ href="#"
272
+ class="pf-v6-c-breadcrumb__link pf-m-current"
273
+ aria-current="page"
274
+ >Section landing</a>
275
+ </li>
276
+ </ol>
277
+ </nav>
293
278
  </div>
294
- </div>
295
- </section>
296
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
297
- <div class="pf-v6-c-page__main-body">
298
- <div class="pf-v6-l-gallery pf-m-gutter">
299
- <div class="pf-v6-c-card">
300
- <div class="pf-v6-c-card__body">This is a card</div>
301
- </div>
302
- <div class="pf-v6-c-card">
303
- <div class="pf-v6-c-card__body">This is a card</div>
304
- </div>
305
- <div class="pf-v6-c-card">
306
- <div class="pf-v6-c-card__body">This is a card</div>
307
- </div>
308
- <div class="pf-v6-c-card">
309
- <div class="pf-v6-c-card__body">This is a card</div>
310
- </div>
311
- <div class="pf-v6-c-card">
312
- <div class="pf-v6-c-card__body">This is a card</div>
313
- </div>
314
- <div class="pf-v6-c-card">
315
- <div class="pf-v6-c-card__body">This is a card</div>
316
- </div>
317
- <div class="pf-v6-c-card">
318
- <div class="pf-v6-c-card__body">This is a card</div>
319
- </div>
320
- <div class="pf-v6-c-card">
321
- <div class="pf-v6-c-card__body">This is a card</div>
322
- </div>
323
- <div class="pf-v6-c-card">
324
- <div class="pf-v6-c-card__body">This is a card</div>
325
- </div>
326
- <div class="pf-v6-c-card">
327
- <div class="pf-v6-c-card__body">This is a card</div>
328
- </div>
329
- <div class="pf-v6-c-card">
330
- <div class="pf-v6-c-card__body">This is a card</div>
331
- </div>
332
- <div class="pf-v6-c-card">
333
- <div class="pf-v6-c-card__body">This is a card</div>
334
- </div>
335
- <div class="pf-v6-c-card">
336
- <div class="pf-v6-c-card__body">This is a card</div>
337
- </div>
338
- <div class="pf-v6-c-card">
339
- <div class="pf-v6-c-card__body">This is a card</div>
340
- </div>
341
- <div class="pf-v6-c-card">
342
- <div class="pf-v6-c-card__body">This is a card</div>
343
- </div>
344
- <div class="pf-v6-c-card">
345
- <div class="pf-v6-c-card__body">This is a card</div>
346
- </div>
347
- <div class="pf-v6-c-card">
348
- <div class="pf-v6-c-card__body">This is a card</div>
349
- </div>
350
- <div class="pf-v6-c-card">
351
- <div class="pf-v6-c-card__body">This is a card</div>
352
- </div>
353
- <div class="pf-v6-c-card">
354
- <div class="pf-v6-c-card__body">This is a card</div>
355
- </div>
356
- <div class="pf-v6-c-card">
357
- <div class="pf-v6-c-card__body">This is a card</div>
358
- </div>
359
- <div class="pf-v6-c-card">
360
- <div class="pf-v6-c-card__body">This is a card</div>
361
- </div>
362
- <div class="pf-v6-c-card">
363
- <div class="pf-v6-c-card__body">This is a card</div>
364
- </div>
365
- <div class="pf-v6-c-card">
366
- <div class="pf-v6-c-card__body">This is a card</div>
367
- </div>
368
- <div class="pf-v6-c-card">
369
- <div class="pf-v6-c-card__body">This is a card</div>
279
+ </section>
280
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
281
+ <div class="pf-v6-c-page__main-body">
282
+ <div class="pf-v6-c-content">
283
+ <h1>Main title</h1>
284
+ <p>This is a full page demo.</p>
370
285
  </div>
371
- <div class="pf-v6-c-card">
372
- <div class="pf-v6-c-card__body">This is a card</div>
373
- </div>
374
- <div class="pf-v6-c-card">
375
- <div class="pf-v6-c-card__body">This is a card</div>
376
- </div>
377
- <div class="pf-v6-c-card">
378
- <div class="pf-v6-c-card__body">This is a card</div>
379
- </div>
380
- <div class="pf-v6-c-card">
381
- <div class="pf-v6-c-card__body">This is a card</div>
382
- </div>
383
- <div class="pf-v6-c-card">
384
- <div class="pf-v6-c-card__body">This is a card</div>
385
- </div>
386
- <div class="pf-v6-c-card">
387
- <div class="pf-v6-c-card__body">This is a card</div>
388
- </div>
389
- <div class="pf-v6-c-card">
390
- <div class="pf-v6-c-card__body">This is a card</div>
391
- </div>
392
- <div class="pf-v6-c-card">
393
- <div class="pf-v6-c-card__body">This is a card</div>
394
- </div>
395
- <div class="pf-v6-c-card">
396
- <div class="pf-v6-c-card__body">This is a card</div>
397
- </div>
398
- <div class="pf-v6-c-card">
399
- <div class="pf-v6-c-card__body">This is a card</div>
400
- </div>
401
- <div class="pf-v6-c-card">
402
- <div class="pf-v6-c-card__body">This is a card</div>
403
- </div>
404
- <div class="pf-v6-c-card">
405
- <div class="pf-v6-c-card__body">This is a card</div>
406
- </div>
407
- <div class="pf-v6-c-card">
408
- <div class="pf-v6-c-card__body">This is a card</div>
409
- </div>
410
- <div class="pf-v6-c-card">
411
- <div class="pf-v6-c-card__body">This is a card</div>
412
- </div>
413
- <div class="pf-v6-c-card">
414
- <div class="pf-v6-c-card__body">This is a card</div>
415
- </div>
416
- <div class="pf-v6-c-card">
417
- <div class="pf-v6-c-card__body">This is a card</div>
418
- </div>
419
- <div class="pf-v6-c-card">
420
- <div class="pf-v6-c-card__body">This is a card</div>
421
- </div>
422
- <div class="pf-v6-c-card">
423
- <div class="pf-v6-c-card__body">This is a card</div>
424
- </div>
425
- <div class="pf-v6-c-card">
426
- <div class="pf-v6-c-card__body">This is a card</div>
427
- </div>
428
- <div class="pf-v6-c-card">
429
- <div class="pf-v6-c-card__body">This is a card</div>
430
- </div>
431
- <div class="pf-v6-c-card">
432
- <div class="pf-v6-c-card__body">This is a card</div>
433
- </div>
434
- <div class="pf-v6-c-card">
435
- <div class="pf-v6-c-card__body">This is a card</div>
436
- </div>
437
- <div class="pf-v6-c-card">
438
- <div class="pf-v6-c-card__body">This is a card</div>
439
- </div>
440
- <div class="pf-v6-c-card">
441
- <div class="pf-v6-c-card__body">This is a card</div>
442
- </div>
443
- <div class="pf-v6-c-card">
444
- <div class="pf-v6-c-card__body">This is a card</div>
445
- </div>
446
- <div class="pf-v6-c-card">
447
- <div class="pf-v6-c-card__body">This is a card</div>
286
+ </div>
287
+ </section>
288
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
289
+ <div class="pf-v6-c-page__main-body">
290
+ <div class="pf-v6-l-gallery pf-m-gutter">
291
+ <div class="pf-v6-c-card">
292
+ <div class="pf-v6-c-card__body">This is a card</div>
293
+ </div>
294
+ <div class="pf-v6-c-card">
295
+ <div class="pf-v6-c-card__body">This is a card</div>
296
+ </div>
297
+ <div class="pf-v6-c-card">
298
+ <div class="pf-v6-c-card__body">This is a card</div>
299
+ </div>
300
+ <div class="pf-v6-c-card">
301
+ <div class="pf-v6-c-card__body">This is a card</div>
302
+ </div>
303
+ <div class="pf-v6-c-card">
304
+ <div class="pf-v6-c-card__body">This is a card</div>
305
+ </div>
306
+ <div class="pf-v6-c-card">
307
+ <div class="pf-v6-c-card__body">This is a card</div>
308
+ </div>
309
+ <div class="pf-v6-c-card">
310
+ <div class="pf-v6-c-card__body">This is a card</div>
311
+ </div>
312
+ <div class="pf-v6-c-card">
313
+ <div class="pf-v6-c-card__body">This is a card</div>
314
+ </div>
315
+ <div class="pf-v6-c-card">
316
+ <div class="pf-v6-c-card__body">This is a card</div>
317
+ </div>
318
+ <div class="pf-v6-c-card">
319
+ <div class="pf-v6-c-card__body">This is a card</div>
320
+ </div>
321
+ <div class="pf-v6-c-card">
322
+ <div class="pf-v6-c-card__body">This is a card</div>
323
+ </div>
324
+ <div class="pf-v6-c-card">
325
+ <div class="pf-v6-c-card__body">This is a card</div>
326
+ </div>
327
+ <div class="pf-v6-c-card">
328
+ <div class="pf-v6-c-card__body">This is a card</div>
329
+ </div>
330
+ <div class="pf-v6-c-card">
331
+ <div class="pf-v6-c-card__body">This is a card</div>
332
+ </div>
333
+ <div class="pf-v6-c-card">
334
+ <div class="pf-v6-c-card__body">This is a card</div>
335
+ </div>
336
+ <div class="pf-v6-c-card">
337
+ <div class="pf-v6-c-card__body">This is a card</div>
338
+ </div>
339
+ <div class="pf-v6-c-card">
340
+ <div class="pf-v6-c-card__body">This is a card</div>
341
+ </div>
342
+ <div class="pf-v6-c-card">
343
+ <div class="pf-v6-c-card__body">This is a card</div>
344
+ </div>
345
+ <div class="pf-v6-c-card">
346
+ <div class="pf-v6-c-card__body">This is a card</div>
347
+ </div>
348
+ <div class="pf-v6-c-card">
349
+ <div class="pf-v6-c-card__body">This is a card</div>
350
+ </div>
351
+ <div class="pf-v6-c-card">
352
+ <div class="pf-v6-c-card__body">This is a card</div>
353
+ </div>
354
+ <div class="pf-v6-c-card">
355
+ <div class="pf-v6-c-card__body">This is a card</div>
356
+ </div>
357
+ <div class="pf-v6-c-card">
358
+ <div class="pf-v6-c-card__body">This is a card</div>
359
+ </div>
360
+ <div class="pf-v6-c-card">
361
+ <div class="pf-v6-c-card__body">This is a card</div>
362
+ </div>
363
+ <div class="pf-v6-c-card">
364
+ <div class="pf-v6-c-card__body">This is a card</div>
365
+ </div>
366
+ <div class="pf-v6-c-card">
367
+ <div class="pf-v6-c-card__body">This is a card</div>
368
+ </div>
369
+ <div class="pf-v6-c-card">
370
+ <div class="pf-v6-c-card__body">This is a card</div>
371
+ </div>
372
+ <div class="pf-v6-c-card">
373
+ <div class="pf-v6-c-card__body">This is a card</div>
374
+ </div>
375
+ <div class="pf-v6-c-card">
376
+ <div class="pf-v6-c-card__body">This is a card</div>
377
+ </div>
378
+ <div class="pf-v6-c-card">
379
+ <div class="pf-v6-c-card__body">This is a card</div>
380
+ </div>
381
+ <div class="pf-v6-c-card">
382
+ <div class="pf-v6-c-card__body">This is a card</div>
383
+ </div>
384
+ <div class="pf-v6-c-card">
385
+ <div class="pf-v6-c-card__body">This is a card</div>
386
+ </div>
387
+ <div class="pf-v6-c-card">
388
+ <div class="pf-v6-c-card__body">This is a card</div>
389
+ </div>
390
+ <div class="pf-v6-c-card">
391
+ <div class="pf-v6-c-card__body">This is a card</div>
392
+ </div>
393
+ <div class="pf-v6-c-card">
394
+ <div class="pf-v6-c-card__body">This is a card</div>
395
+ </div>
396
+ <div class="pf-v6-c-card">
397
+ <div class="pf-v6-c-card__body">This is a card</div>
398
+ </div>
399
+ <div class="pf-v6-c-card">
400
+ <div class="pf-v6-c-card__body">This is a card</div>
401
+ </div>
402
+ <div class="pf-v6-c-card">
403
+ <div class="pf-v6-c-card__body">This is a card</div>
404
+ </div>
405
+ <div class="pf-v6-c-card">
406
+ <div class="pf-v6-c-card__body">This is a card</div>
407
+ </div>
408
+ <div class="pf-v6-c-card">
409
+ <div class="pf-v6-c-card__body">This is a card</div>
410
+ </div>
411
+ <div class="pf-v6-c-card">
412
+ <div class="pf-v6-c-card__body">This is a card</div>
413
+ </div>
414
+ <div class="pf-v6-c-card">
415
+ <div class="pf-v6-c-card__body">This is a card</div>
416
+ </div>
417
+ <div class="pf-v6-c-card">
418
+ <div class="pf-v6-c-card__body">This is a card</div>
419
+ </div>
420
+ <div class="pf-v6-c-card">
421
+ <div class="pf-v6-c-card__body">This is a card</div>
422
+ </div>
423
+ <div class="pf-v6-c-card">
424
+ <div class="pf-v6-c-card__body">This is a card</div>
425
+ </div>
426
+ <div class="pf-v6-c-card">
427
+ <div class="pf-v6-c-card__body">This is a card</div>
428
+ </div>
429
+ <div class="pf-v6-c-card">
430
+ <div class="pf-v6-c-card__body">This is a card</div>
431
+ </div>
432
+ <div class="pf-v6-c-card">
433
+ <div class="pf-v6-c-card__body">This is a card</div>
434
+ </div>
435
+ <div class="pf-v6-c-card">
436
+ <div class="pf-v6-c-card__body">This is a card</div>
437
+ </div>
438
+ <div class="pf-v6-c-card">
439
+ <div class="pf-v6-c-card__body">This is a card</div>
440
+ </div>
448
441
  </div>
449
442
  </div>
450
- </div>
451
- </section>
452
- </main>
443
+ </section>
444
+ </main>
445
+ </div>
453
446
  </div>
454
447
 
455
448
  ```
@@ -466,14 +459,14 @@ wrapperTag: div
466
459
  class="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
467
460
  style="height: 100%;"
468
461
  >
469
- <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
462
+ <div class="pf-v6-u-display-none pf-v6-u-display-block-on-lg">Localhost</div>
470
463
  <div
471
- class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
464
+ class="pf-v6-u-display-none pf-v6-u-display-block-on-lg"
472
465
  >This message is sticky to the top or bottom of the page.</div>
473
466
  <div
474
467
  class="pf-v6-u-display-none-on-lg"
475
468
  >Drop some text on mobile, truncate if needed.</div>
476
- <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
469
+ <div class="pf-v6-u-display-none pf-v6-u-display-block-on-lg">Ned Username</div>
477
470
  </div>
478
471
  </div>
479
472
  <div class="pf-v6-l-flex__item pf-m-grow" style="min-height: 0;">
@@ -482,98 +475,104 @@ wrapperTag: div
482
475
  <a
483
476
  class="pf-v6-c-button pf-m-primary"
484
477
  href="#main-content-banner-top-bottom-example"
485
- >Skip to content</a>
478
+ >
479
+ <span class="pf-v6-c-button__text">Skip to content</span>
480
+ </a>
486
481
  </div>
487
482
  <header class="pf-v6-c-masthead" id="banner-top-bottom-example-masthead">
488
- <span class="pf-v6-c-masthead__toggle">
489
- <button
490
- class="pf-v6-c-button pf-m-plain"
491
- type="button"
492
- aria-label="Global navigation"
493
- >
494
- <i class="fas fa-bars" aria-hidden="true"></i>
495
- </button>
496
- </span>
497
483
  <div class="pf-v6-c-masthead__main">
498
- <a class="pf-v6-c-masthead__brand" href="#">
499
- <svg height="40px" viewBox="0 0 679 158">
500
- <title>PF-HorizontalLogo-Color</title>
501
- <defs>
502
- <linearGradient
503
- x1="68%"
504
- y1="2.25860997e-13%"
505
- x2="32%"
506
- y2="100%"
507
- id="linearGradient-banner-top-bottom-example-masthead"
508
- >
509
- <stop stop-color="#2B9AF3" offset="0%" />
510
- <stop
511
- stop-color="#73BCF7"
512
- stop-opacity="0.502212631"
513
- offset="100%"
514
- />
515
- </linearGradient>
516
- </defs>
517
- <g
518
- stroke="none"
519
- stroke-width="1"
520
- fill="none"
521
- fill-rule="evenodd"
522
- >
484
+ <span class="pf-v6-c-masthead__toggle">
485
+ <button
486
+ class="pf-v6-c-button pf-m-plain"
487
+ type="button"
488
+ aria-label="Global navigation"
489
+ >
490
+ <span class="pf-v6-c-button__icon">
491
+ <i class="fas fa-bars" aria-hidden="true"></i>
492
+ </span>
493
+ </button>
494
+ </span>
495
+ <div class="pf-v6-c-masthead__brand">
496
+ <a class="pf-v6-c-masthead__logo" href="#">
497
+ <svg height="37px" viewBox="0 0 679 158">
498
+ <title>PF-HorizontalLogo-Color</title>
499
+ <defs>
500
+ <linearGradient
501
+ x1="68%"
502
+ y1="2.25860997e-13%"
503
+ x2="32%"
504
+ y2="100%"
505
+ id="linearGradient-banner-top-bottom-example-masthead"
506
+ >
507
+ <stop stop-color="#2B9AF3" offset="0%" />
508
+ <stop
509
+ stop-color="#73BCF7"
510
+ stop-opacity="0.502212631"
511
+ offset="100%"
512
+ />
513
+ </linearGradient>
514
+ </defs>
523
515
  <g
524
- transform="translate(206.000000, 45.750000)"
525
- fill="var(--pf-t--global--text--color--regular)"
526
- fill-rule="nonzero"
516
+ stroke="none"
517
+ stroke-width="1"
518
+ fill="none"
519
+ fill-rule="evenodd"
527
520
  >
528
- <path
529
- d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
530
- />
531
- <path
532
- d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
533
- />
534
- <path
535
- d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
536
- />
537
- <path
538
- d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
539
- />
540
- <path
541
- d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
542
- />
543
- <path
544
- d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
545
- />
546
- <path
547
- d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
548
- />
549
- <polygon
550
- points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
551
- />
552
- <polygon
553
- points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
554
- />
555
- <path
556
- d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
557
- />
558
- </g>
559
- <g transform="translate(0.000000, 0.000000)">
560
- <path
561
- d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
562
- fill="#0066CC"
563
- />
564
- <path
565
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
566
- fill="url(#linearGradient-banner-top-bottom-example-masthead)"
567
- />
568
- <path
569
- d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
570
- fill="url(#linearGradient-banner-top-bottom-example-masthead)"
571
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
572
- />
521
+ <g
522
+ transform="translate(206.000000, 45.750000)"
523
+ fill="var(--pf-t--global--text--color--regular)"
524
+ fill-rule="nonzero"
525
+ >
526
+ <path
527
+ d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"
528
+ />
529
+ <path
530
+ d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"
531
+ />
532
+ <path
533
+ d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"
534
+ />
535
+ <path
536
+ d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"
537
+ />
538
+ <path
539
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
540
+ />
541
+ <path
542
+ d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"
543
+ />
544
+ <path
545
+ d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"
546
+ />
547
+ <polygon
548
+ points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"
549
+ />
550
+ <polygon
551
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
552
+ />
553
+ <path
554
+ d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"
555
+ />
556
+ </g>
557
+ <g transform="translate(0.000000, 0.000000)">
558
+ <path
559
+ d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z"
560
+ fill="#0066CC"
561
+ />
562
+ <path
563
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
564
+ fill="url(#linearGradient-banner-top-bottom-example-masthead)"
565
+ />
566
+ <path
567
+ d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z"
568
+ fill="url(#linearGradient-banner-top-bottom-example-masthead)"
569
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
570
+ />
571
+ </g>
573
572
  </g>
574
- </g>
575
- </svg>
576
- </a>
573
+ </svg>
574
+ </a>
575
+ </div>
577
576
  </div>
578
577
  <div class="pf-v6-c-masthead__content">
579
578
  <div
@@ -582,41 +581,11 @@ wrapperTag: div
582
581
  >
583
582
  <div class="pf-v6-c-toolbar__content">
584
583
  <div class="pf-v6-c-toolbar__content-section">
585
- <div class="pf-v6-c-toolbar__item">
586
- <button
587
- class="pf-v6-c-menu-toggle"
588
- type="button"
589
- aria-expanded="false"
590
- >
591
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
592
- <span class="pf-v6-c-menu-toggle__controls">
593
- <span class="pf-v6-c-menu-toggle__toggle-icon">
594
- <i class="fas fa-caret-down" aria-hidden="true"></i>
595
- </span>
596
- </span>
597
- </button>
598
- </div>
599
-
600
- <div class="pf-v6-c-toolbar__item">
601
- <button
602
- class="pf-v6-c-menu-toggle"
603
- type="button"
604
- aria-expanded="false"
605
- >
606
- <span class="pf-v6-c-menu-toggle__text">Services</span>
607
- <span class="pf-v6-c-menu-toggle__controls">
608
- <span class="pf-v6-c-menu-toggle__toggle-icon">
609
- <i class="fas fa-caret-down" aria-hidden="true"></i>
610
- </span>
611
- </span>
612
- </button>
613
- </div>
614
-
615
584
  <div
616
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
585
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
617
586
  >
618
587
  <div
619
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
588
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
620
589
  >
621
590
  <div class="pf-v6-c-toolbar__item">
622
591
  <button
@@ -655,6 +624,7 @@ wrapperTag: div
655
624
  </button>
656
625
  </div>
657
626
  </div>
627
+
658
628
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
659
629
  <button
660
630
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -682,234 +652,246 @@ wrapperTag: div
682
652
  >
683
653
  <ul class="pf-v6-c-nav__list" role="list">
684
654
  <li class="pf-v6-c-nav__item">
685
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
655
+ <a href="#" class="pf-v6-c-nav__link">
656
+ <span class="pf-v6-c-nav__link-text">System panel</span>
657
+ </a>
686
658
  </li>
687
659
  <li class="pf-v6-c-nav__item">
688
660
  <a
689
661
  href="#"
690
662
  class="pf-v6-c-nav__link pf-m-current"
691
663
  aria-current="page"
692
- >Policy</a>
664
+ >
665
+ <span class="pf-v6-c-nav__link-text">Policy</span>
666
+ </a>
693
667
  </li>
694
668
  <li class="pf-v6-c-nav__item">
695
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
669
+ <a href="#" class="pf-v6-c-nav__link">
670
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
671
+ </a>
696
672
  </li>
697
673
  <li class="pf-v6-c-nav__item">
698
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
674
+ <a href="#" class="pf-v6-c-nav__link">
675
+ <span class="pf-v6-c-nav__link-text">Network services</span>
676
+ </a>
699
677
  </li>
700
678
  <li class="pf-v6-c-nav__item">
701
- <a href="#" class="pf-v6-c-nav__link">Server</a>
679
+ <a href="#" class="pf-v6-c-nav__link">
680
+ <span class="pf-v6-c-nav__link-text">Server</span>
681
+ </a>
702
682
  </li>
703
683
  </ul>
704
684
  </nav>
705
685
  </div>
706
686
  </div>
707
- <main
708
- class="pf-v6-c-page__main"
709
- tabindex="-1"
710
- id="main-content-banner-top-bottom-example"
711
- >
712
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
713
- <div class="pf-v6-c-page__main-body">
714
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
715
- <ol class="pf-v6-c-breadcrumb__list" role="list">
716
- <li class="pf-v6-c-breadcrumb__item">
717
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
718
- </li>
719
- <li class="pf-v6-c-breadcrumb__item">
720
- <span class="pf-v6-c-breadcrumb__item-divider">
721
- <i class="fas fa-angle-right" aria-hidden="true"></i>
722
- </span>
687
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
688
+ <main
689
+ class="pf-v6-c-page__main"
690
+ tabindex="-1"
691
+ id="main-content-banner-top-bottom-example"
692
+ >
693
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
694
+ <div class="pf-v6-c-page__main-body">
695
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
696
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
697
+ <li class="pf-v6-c-breadcrumb__item">
698
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
699
+ </li>
700
+ <li class="pf-v6-c-breadcrumb__item">
701
+ <span class="pf-v6-c-breadcrumb__item-divider">
702
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
703
+ </span>
723
704
 
724
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
725
- </li>
726
- <li class="pf-v6-c-breadcrumb__item">
727
- <span class="pf-v6-c-breadcrumb__item-divider">
728
- <i class="fas fa-angle-right" aria-hidden="true"></i>
729
- </span>
705
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
706
+ </li>
707
+ <li class="pf-v6-c-breadcrumb__item">
708
+ <span class="pf-v6-c-breadcrumb__item-divider">
709
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
710
+ </span>
730
711
 
731
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
732
- </li>
733
- <li class="pf-v6-c-breadcrumb__item">
734
- <span class="pf-v6-c-breadcrumb__item-divider">
735
- <i class="fas fa-angle-right" aria-hidden="true"></i>
736
- </span>
712
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
713
+ </li>
714
+ <li class="pf-v6-c-breadcrumb__item">
715
+ <span class="pf-v6-c-breadcrumb__item-divider">
716
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
717
+ </span>
737
718
 
738
- <a
739
- href="#"
740
- class="pf-v6-c-breadcrumb__link pf-m-current"
741
- aria-current="page"
742
- >Section landing</a>
743
- </li>
744
- </ol>
745
- </nav>
746
- </div>
747
- </section>
748
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
749
- <div class="pf-v6-c-page__main-body">
750
- <div class="pf-v6-c-content">
751
- <h1>Main title</h1>
752
- <p>This is a full page demo.</p>
719
+ <a
720
+ href="#"
721
+ class="pf-v6-c-breadcrumb__link pf-m-current"
722
+ aria-current="page"
723
+ >Section landing</a>
724
+ </li>
725
+ </ol>
726
+ </nav>
753
727
  </div>
754
- </div>
755
- </section>
756
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
757
- <div class="pf-v6-c-page__main-body">
758
- <div class="pf-v6-l-gallery pf-m-gutter">
759
- <div class="pf-v6-c-card">
760
- <div class="pf-v6-c-card__body">This is a card</div>
761
- </div>
762
- <div class="pf-v6-c-card">
763
- <div class="pf-v6-c-card__body">This is a card</div>
764
- </div>
765
- <div class="pf-v6-c-card">
766
- <div class="pf-v6-c-card__body">This is a card</div>
767
- </div>
768
- <div class="pf-v6-c-card">
769
- <div class="pf-v6-c-card__body">This is a card</div>
770
- </div>
771
- <div class="pf-v6-c-card">
772
- <div class="pf-v6-c-card__body">This is a card</div>
773
- </div>
774
- <div class="pf-v6-c-card">
775
- <div class="pf-v6-c-card__body">This is a card</div>
776
- </div>
777
- <div class="pf-v6-c-card">
778
- <div class="pf-v6-c-card__body">This is a card</div>
779
- </div>
780
- <div class="pf-v6-c-card">
781
- <div class="pf-v6-c-card__body">This is a card</div>
782
- </div>
783
- <div class="pf-v6-c-card">
784
- <div class="pf-v6-c-card__body">This is a card</div>
785
- </div>
786
- <div class="pf-v6-c-card">
787
- <div class="pf-v6-c-card__body">This is a card</div>
788
- </div>
789
- <div class="pf-v6-c-card">
790
- <div class="pf-v6-c-card__body">This is a card</div>
791
- </div>
792
- <div class="pf-v6-c-card">
793
- <div class="pf-v6-c-card__body">This is a card</div>
794
- </div>
795
- <div class="pf-v6-c-card">
796
- <div class="pf-v6-c-card__body">This is a card</div>
797
- </div>
798
- <div class="pf-v6-c-card">
799
- <div class="pf-v6-c-card__body">This is a card</div>
800
- </div>
801
- <div class="pf-v6-c-card">
802
- <div class="pf-v6-c-card__body">This is a card</div>
803
- </div>
804
- <div class="pf-v6-c-card">
805
- <div class="pf-v6-c-card__body">This is a card</div>
806
- </div>
807
- <div class="pf-v6-c-card">
808
- <div class="pf-v6-c-card__body">This is a card</div>
809
- </div>
810
- <div class="pf-v6-c-card">
811
- <div class="pf-v6-c-card__body">This is a card</div>
812
- </div>
813
- <div class="pf-v6-c-card">
814
- <div class="pf-v6-c-card__body">This is a card</div>
815
- </div>
816
- <div class="pf-v6-c-card">
817
- <div class="pf-v6-c-card__body">This is a card</div>
818
- </div>
819
- <div class="pf-v6-c-card">
820
- <div class="pf-v6-c-card__body">This is a card</div>
821
- </div>
822
- <div class="pf-v6-c-card">
823
- <div class="pf-v6-c-card__body">This is a card</div>
824
- </div>
825
- <div class="pf-v6-c-card">
826
- <div class="pf-v6-c-card__body">This is a card</div>
827
- </div>
828
- <div class="pf-v6-c-card">
829
- <div class="pf-v6-c-card__body">This is a card</div>
830
- </div>
831
- <div class="pf-v6-c-card">
832
- <div class="pf-v6-c-card__body">This is a card</div>
833
- </div>
834
- <div class="pf-v6-c-card">
835
- <div class="pf-v6-c-card__body">This is a card</div>
836
- </div>
837
- <div class="pf-v6-c-card">
838
- <div class="pf-v6-c-card__body">This is a card</div>
839
- </div>
840
- <div class="pf-v6-c-card">
841
- <div class="pf-v6-c-card__body">This is a card</div>
728
+ </section>
729
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
730
+ <div class="pf-v6-c-page__main-body">
731
+ <div class="pf-v6-c-content">
732
+ <h1>Main title</h1>
733
+ <p>This is a full page demo.</p>
842
734
  </div>
843
- <div class="pf-v6-c-card">
844
- <div class="pf-v6-c-card__body">This is a card</div>
845
- </div>
846
- <div class="pf-v6-c-card">
847
- <div class="pf-v6-c-card__body">This is a card</div>
848
- </div>
849
- <div class="pf-v6-c-card">
850
- <div class="pf-v6-c-card__body">This is a card</div>
851
- </div>
852
- <div class="pf-v6-c-card">
853
- <div class="pf-v6-c-card__body">This is a card</div>
854
- </div>
855
- <div class="pf-v6-c-card">
856
- <div class="pf-v6-c-card__body">This is a card</div>
857
- </div>
858
- <div class="pf-v6-c-card">
859
- <div class="pf-v6-c-card__body">This is a card</div>
860
- </div>
861
- <div class="pf-v6-c-card">
862
- <div class="pf-v6-c-card__body">This is a card</div>
863
- </div>
864
- <div class="pf-v6-c-card">
865
- <div class="pf-v6-c-card__body">This is a card</div>
866
- </div>
867
- <div class="pf-v6-c-card">
868
- <div class="pf-v6-c-card__body">This is a card</div>
869
- </div>
870
- <div class="pf-v6-c-card">
871
- <div class="pf-v6-c-card__body">This is a card</div>
872
- </div>
873
- <div class="pf-v6-c-card">
874
- <div class="pf-v6-c-card__body">This is a card</div>
875
- </div>
876
- <div class="pf-v6-c-card">
877
- <div class="pf-v6-c-card__body">This is a card</div>
878
- </div>
879
- <div class="pf-v6-c-card">
880
- <div class="pf-v6-c-card__body">This is a card</div>
881
- </div>
882
- <div class="pf-v6-c-card">
883
- <div class="pf-v6-c-card__body">This is a card</div>
884
- </div>
885
- <div class="pf-v6-c-card">
886
- <div class="pf-v6-c-card__body">This is a card</div>
887
- </div>
888
- <div class="pf-v6-c-card">
889
- <div class="pf-v6-c-card__body">This is a card</div>
890
- </div>
891
- <div class="pf-v6-c-card">
892
- <div class="pf-v6-c-card__body">This is a card</div>
893
- </div>
894
- <div class="pf-v6-c-card">
895
- <div class="pf-v6-c-card__body">This is a card</div>
896
- </div>
897
- <div class="pf-v6-c-card">
898
- <div class="pf-v6-c-card__body">This is a card</div>
899
- </div>
900
- <div class="pf-v6-c-card">
901
- <div class="pf-v6-c-card__body">This is a card</div>
902
- </div>
903
- <div class="pf-v6-c-card">
904
- <div class="pf-v6-c-card__body">This is a card</div>
905
- </div>
906
- <div class="pf-v6-c-card">
907
- <div class="pf-v6-c-card__body">This is a card</div>
735
+ </div>
736
+ </section>
737
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
738
+ <div class="pf-v6-c-page__main-body">
739
+ <div class="pf-v6-l-gallery pf-m-gutter">
740
+ <div class="pf-v6-c-card">
741
+ <div class="pf-v6-c-card__body">This is a card</div>
742
+ </div>
743
+ <div class="pf-v6-c-card">
744
+ <div class="pf-v6-c-card__body">This is a card</div>
745
+ </div>
746
+ <div class="pf-v6-c-card">
747
+ <div class="pf-v6-c-card__body">This is a card</div>
748
+ </div>
749
+ <div class="pf-v6-c-card">
750
+ <div class="pf-v6-c-card__body">This is a card</div>
751
+ </div>
752
+ <div class="pf-v6-c-card">
753
+ <div class="pf-v6-c-card__body">This is a card</div>
754
+ </div>
755
+ <div class="pf-v6-c-card">
756
+ <div class="pf-v6-c-card__body">This is a card</div>
757
+ </div>
758
+ <div class="pf-v6-c-card">
759
+ <div class="pf-v6-c-card__body">This is a card</div>
760
+ </div>
761
+ <div class="pf-v6-c-card">
762
+ <div class="pf-v6-c-card__body">This is a card</div>
763
+ </div>
764
+ <div class="pf-v6-c-card">
765
+ <div class="pf-v6-c-card__body">This is a card</div>
766
+ </div>
767
+ <div class="pf-v6-c-card">
768
+ <div class="pf-v6-c-card__body">This is a card</div>
769
+ </div>
770
+ <div class="pf-v6-c-card">
771
+ <div class="pf-v6-c-card__body">This is a card</div>
772
+ </div>
773
+ <div class="pf-v6-c-card">
774
+ <div class="pf-v6-c-card__body">This is a card</div>
775
+ </div>
776
+ <div class="pf-v6-c-card">
777
+ <div class="pf-v6-c-card__body">This is a card</div>
778
+ </div>
779
+ <div class="pf-v6-c-card">
780
+ <div class="pf-v6-c-card__body">This is a card</div>
781
+ </div>
782
+ <div class="pf-v6-c-card">
783
+ <div class="pf-v6-c-card__body">This is a card</div>
784
+ </div>
785
+ <div class="pf-v6-c-card">
786
+ <div class="pf-v6-c-card__body">This is a card</div>
787
+ </div>
788
+ <div class="pf-v6-c-card">
789
+ <div class="pf-v6-c-card__body">This is a card</div>
790
+ </div>
791
+ <div class="pf-v6-c-card">
792
+ <div class="pf-v6-c-card__body">This is a card</div>
793
+ </div>
794
+ <div class="pf-v6-c-card">
795
+ <div class="pf-v6-c-card__body">This is a card</div>
796
+ </div>
797
+ <div class="pf-v6-c-card">
798
+ <div class="pf-v6-c-card__body">This is a card</div>
799
+ </div>
800
+ <div class="pf-v6-c-card">
801
+ <div class="pf-v6-c-card__body">This is a card</div>
802
+ </div>
803
+ <div class="pf-v6-c-card">
804
+ <div class="pf-v6-c-card__body">This is a card</div>
805
+ </div>
806
+ <div class="pf-v6-c-card">
807
+ <div class="pf-v6-c-card__body">This is a card</div>
808
+ </div>
809
+ <div class="pf-v6-c-card">
810
+ <div class="pf-v6-c-card__body">This is a card</div>
811
+ </div>
812
+ <div class="pf-v6-c-card">
813
+ <div class="pf-v6-c-card__body">This is a card</div>
814
+ </div>
815
+ <div class="pf-v6-c-card">
816
+ <div class="pf-v6-c-card__body">This is a card</div>
817
+ </div>
818
+ <div class="pf-v6-c-card">
819
+ <div class="pf-v6-c-card__body">This is a card</div>
820
+ </div>
821
+ <div class="pf-v6-c-card">
822
+ <div class="pf-v6-c-card__body">This is a card</div>
823
+ </div>
824
+ <div class="pf-v6-c-card">
825
+ <div class="pf-v6-c-card__body">This is a card</div>
826
+ </div>
827
+ <div class="pf-v6-c-card">
828
+ <div class="pf-v6-c-card__body">This is a card</div>
829
+ </div>
830
+ <div class="pf-v6-c-card">
831
+ <div class="pf-v6-c-card__body">This is a card</div>
832
+ </div>
833
+ <div class="pf-v6-c-card">
834
+ <div class="pf-v6-c-card__body">This is a card</div>
835
+ </div>
836
+ <div class="pf-v6-c-card">
837
+ <div class="pf-v6-c-card__body">This is a card</div>
838
+ </div>
839
+ <div class="pf-v6-c-card">
840
+ <div class="pf-v6-c-card__body">This is a card</div>
841
+ </div>
842
+ <div class="pf-v6-c-card">
843
+ <div class="pf-v6-c-card__body">This is a card</div>
844
+ </div>
845
+ <div class="pf-v6-c-card">
846
+ <div class="pf-v6-c-card__body">This is a card</div>
847
+ </div>
848
+ <div class="pf-v6-c-card">
849
+ <div class="pf-v6-c-card__body">This is a card</div>
850
+ </div>
851
+ <div class="pf-v6-c-card">
852
+ <div class="pf-v6-c-card__body">This is a card</div>
853
+ </div>
854
+ <div class="pf-v6-c-card">
855
+ <div class="pf-v6-c-card__body">This is a card</div>
856
+ </div>
857
+ <div class="pf-v6-c-card">
858
+ <div class="pf-v6-c-card__body">This is a card</div>
859
+ </div>
860
+ <div class="pf-v6-c-card">
861
+ <div class="pf-v6-c-card__body">This is a card</div>
862
+ </div>
863
+ <div class="pf-v6-c-card">
864
+ <div class="pf-v6-c-card__body">This is a card</div>
865
+ </div>
866
+ <div class="pf-v6-c-card">
867
+ <div class="pf-v6-c-card__body">This is a card</div>
868
+ </div>
869
+ <div class="pf-v6-c-card">
870
+ <div class="pf-v6-c-card__body">This is a card</div>
871
+ </div>
872
+ <div class="pf-v6-c-card">
873
+ <div class="pf-v6-c-card__body">This is a card</div>
874
+ </div>
875
+ <div class="pf-v6-c-card">
876
+ <div class="pf-v6-c-card__body">This is a card</div>
877
+ </div>
878
+ <div class="pf-v6-c-card">
879
+ <div class="pf-v6-c-card__body">This is a card</div>
880
+ </div>
881
+ <div class="pf-v6-c-card">
882
+ <div class="pf-v6-c-card__body">This is a card</div>
883
+ </div>
884
+ <div class="pf-v6-c-card">
885
+ <div class="pf-v6-c-card__body">This is a card</div>
886
+ </div>
887
+ <div class="pf-v6-c-card">
888
+ <div class="pf-v6-c-card__body">This is a card</div>
889
+ </div>
908
890
  </div>
909
891
  </div>
910
- </div>
911
- </section>
912
- </main>
892
+ </section>
893
+ </main>
894
+ </div>
913
895
  </div>
914
896
  </div>
915
897
  <div class="pf-v6-c-banner pf-m-sticky">
@@ -917,14 +899,14 @@ wrapperTag: div
917
899
  class="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
918
900
  style="height: 100%;"
919
901
  >
920
- <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
902
+ <div class="pf-v6-u-display-none pf-v6-u-display-block-on-lg">Localhost</div>
921
903
  <div
922
- class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
904
+ class="pf-v6-u-display-none pf-v6-u-display-block-on-lg"
923
905
  >This message is sticky to the top or bottom of the page.</div>
924
906
  <div
925
907
  class="pf-v6-u-display-none-on-lg"
926
908
  >Drop some text on mobile, truncate if needed.</div>
927
- <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Ned Username</div>
909
+ <div class="pf-v6-u-display-none pf-v6-u-display-block-on-lg">Ned Username</div>
928
910
  </div>
929
911
  </div>
930
912
  </div>