@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/Modal/examples/Modal.md CHANGED
@@ -11,91 +11,99 @@ section: components
11
11
  <a
12
12
  class="pf-v6-c-button pf-m-primary"
13
13
  href="#main-content-modal-basic-example"
14
- >Skip to content</a>
14
+ >
15
+ <span class="pf-v6-c-button__text">Skip to content</span>
16
+ </a>
15
17
  </div>
16
18
  <header class="pf-v6-c-masthead" id="modal-basic-example-masthead">
17
- <span class="pf-v6-c-masthead__toggle">
18
- <button
19
- class="pf-v6-c-button pf-m-plain"
20
- type="button"
21
- aria-label="Global navigation"
22
- >
23
- <i class="fas fa-bars" aria-hidden="true"></i>
24
- </button>
25
- </span>
26
19
  <div class="pf-v6-c-masthead__main">
27
- <a class="pf-v6-c-masthead__brand" href="#">
28
- <svg height="40px" viewBox="0 0 679 158">
29
- <title>PF-HorizontalLogo-Color</title>
30
- <defs>
31
- <linearGradient
32
- x1="68%"
33
- y1="2.25860997e-13%"
34
- x2="32%"
35
- y2="100%"
36
- id="linearGradient-modal-basic-example-masthead"
37
- >
38
- <stop stop-color="#2B9AF3" offset="0%" />
39
- <stop
40
- stop-color="#73BCF7"
41
- stop-opacity="0.502212631"
42
- offset="100%"
43
- />
44
- </linearGradient>
45
- </defs>
46
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
47
- <g
48
- transform="translate(206.000000, 45.750000)"
49
- fill="var(--pf-t--global--text--color--regular)"
50
- fill-rule="nonzero"
51
- >
52
- <path
53
- 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"
54
- />
55
- <path
56
- 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"
57
- />
58
- <path
59
- 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"
60
- />
61
- <path
62
- 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"
63
- />
64
- <path
65
- 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"
66
- />
67
- <path
68
- 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"
69
- />
70
- <path
71
- 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"
72
- />
73
- <polygon
74
- 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"
75
- />
76
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
77
- <path
78
- 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"
79
- />
80
- </g>
81
- <g transform="translate(0.000000, 0.000000)">
82
- <path
83
- 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"
84
- fill="#0066CC"
85
- />
86
- <path
87
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
88
- fill="url(#linearGradient-modal-basic-example-masthead)"
89
- />
90
- <path
91
- 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"
92
- fill="url(#linearGradient-modal-basic-example-masthead)"
93
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
94
- />
20
+ <span class="pf-v6-c-masthead__toggle">
21
+ <button
22
+ class="pf-v6-c-button pf-m-plain"
23
+ type="button"
24
+ aria-label="Global navigation"
25
+ >
26
+ <span class="pf-v6-c-button__icon">
27
+ <i class="fas fa-bars" aria-hidden="true"></i>
28
+ </span>
29
+ </button>
30
+ </span>
31
+ <div class="pf-v6-c-masthead__brand">
32
+ <a class="pf-v6-c-masthead__logo" href="#">
33
+ <svg height="37px" viewBox="0 0 679 158">
34
+ <title>PF-HorizontalLogo-Color</title>
35
+ <defs>
36
+ <linearGradient
37
+ x1="68%"
38
+ y1="2.25860997e-13%"
39
+ x2="32%"
40
+ y2="100%"
41
+ id="linearGradient-modal-basic-example-masthead"
42
+ >
43
+ <stop stop-color="#2B9AF3" offset="0%" />
44
+ <stop
45
+ stop-color="#73BCF7"
46
+ stop-opacity="0.502212631"
47
+ offset="100%"
48
+ />
49
+ </linearGradient>
50
+ </defs>
51
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
52
+ <g
53
+ transform="translate(206.000000, 45.750000)"
54
+ fill="var(--pf-t--global--text--color--regular)"
55
+ fill-rule="nonzero"
56
+ >
57
+ <path
58
+ 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"
59
+ />
60
+ <path
61
+ 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"
62
+ />
63
+ <path
64
+ 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"
65
+ />
66
+ <path
67
+ 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"
68
+ />
69
+ <path
70
+ 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"
71
+ />
72
+ <path
73
+ 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"
74
+ />
75
+ <path
76
+ 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"
77
+ />
78
+ <polygon
79
+ 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"
80
+ />
81
+ <polygon
82
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
83
+ />
84
+ <path
85
+ 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"
86
+ />
87
+ </g>
88
+ <g transform="translate(0.000000, 0.000000)">
89
+ <path
90
+ 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"
91
+ fill="#0066CC"
92
+ />
93
+ <path
94
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
95
+ fill="url(#linearGradient-modal-basic-example-masthead)"
96
+ />
97
+ <path
98
+ 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"
99
+ fill="url(#linearGradient-modal-basic-example-masthead)"
100
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
101
+ />
102
+ </g>
95
103
  </g>
96
- </g>
97
- </svg>
98
- </a>
104
+ </svg>
105
+ </a>
106
+ </div>
99
107
  </div>
100
108
  <div class="pf-v6-c-masthead__content">
101
109
  <div
@@ -104,41 +112,11 @@ section: components
104
112
  >
105
113
  <div class="pf-v6-c-toolbar__content">
106
114
  <div class="pf-v6-c-toolbar__content-section">
107
- <div class="pf-v6-c-toolbar__item">
108
- <button
109
- class="pf-v6-c-menu-toggle"
110
- type="button"
111
- aria-expanded="false"
112
- >
113
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
114
- <span class="pf-v6-c-menu-toggle__controls">
115
- <span class="pf-v6-c-menu-toggle__toggle-icon">
116
- <i class="fas fa-caret-down" aria-hidden="true"></i>
117
- </span>
118
- </span>
119
- </button>
120
- </div>
121
-
122
- <div class="pf-v6-c-toolbar__item">
123
- <button
124
- class="pf-v6-c-menu-toggle"
125
- type="button"
126
- aria-expanded="false"
127
- >
128
- <span class="pf-v6-c-menu-toggle__text">Services</span>
129
- <span class="pf-v6-c-menu-toggle__controls">
130
- <span class="pf-v6-c-menu-toggle__toggle-icon">
131
- <i class="fas fa-caret-down" aria-hidden="true"></i>
132
- </span>
133
- </span>
134
- </button>
135
- </div>
136
-
137
115
  <div
138
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
116
+ 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"
139
117
  >
140
118
  <div
141
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
119
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
142
120
  >
143
121
  <div class="pf-v6-c-toolbar__item">
144
122
  <button
@@ -177,6 +155,7 @@ section: components
177
155
  </button>
178
156
  </div>
179
157
  </div>
158
+
180
159
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
181
160
  <button
182
161
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -204,114 +183,126 @@ section: components
204
183
  >
205
184
  <ul class="pf-v6-c-nav__list" role="list">
206
185
  <li class="pf-v6-c-nav__item">
207
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
186
+ <a href="#" class="pf-v6-c-nav__link">
187
+ <span class="pf-v6-c-nav__link-text">System panel</span>
188
+ </a>
208
189
  </li>
209
190
  <li class="pf-v6-c-nav__item">
210
191
  <a
211
192
  href="#"
212
193
  class="pf-v6-c-nav__link pf-m-current"
213
194
  aria-current="page"
214
- >Policy</a>
195
+ >
196
+ <span class="pf-v6-c-nav__link-text">Policy</span>
197
+ </a>
215
198
  </li>
216
199
  <li class="pf-v6-c-nav__item">
217
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
200
+ <a href="#" class="pf-v6-c-nav__link">
201
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
202
+ </a>
218
203
  </li>
219
204
  <li class="pf-v6-c-nav__item">
220
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
205
+ <a href="#" class="pf-v6-c-nav__link">
206
+ <span class="pf-v6-c-nav__link-text">Network services</span>
207
+ </a>
221
208
  </li>
222
209
  <li class="pf-v6-c-nav__item">
223
- <a href="#" class="pf-v6-c-nav__link">Server</a>
210
+ <a href="#" class="pf-v6-c-nav__link">
211
+ <span class="pf-v6-c-nav__link-text">Server</span>
212
+ </a>
224
213
  </li>
225
214
  </ul>
226
215
  </nav>
227
216
  </div>
228
217
  </div>
229
- <main
230
- class="pf-v6-c-page__main"
231
- tabindex="-1"
232
- id="main-content-modal-basic-example"
233
- >
234
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v6-c-page__main-body">
236
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v6-c-breadcrumb__list" role="list">
238
- <li class="pf-v6-c-breadcrumb__item">
239
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
- </li>
241
- <li class="pf-v6-c-breadcrumb__item">
242
- <span class="pf-v6-c-breadcrumb__item-divider">
243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
244
- </span>
218
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
219
+ <main
220
+ class="pf-v6-c-page__main"
221
+ tabindex="-1"
222
+ id="main-content-modal-basic-example"
223
+ >
224
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
225
+ <div class="pf-v6-c-page__main-body">
226
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
227
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
228
+ <li class="pf-v6-c-breadcrumb__item">
229
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
230
+ </li>
231
+ <li class="pf-v6-c-breadcrumb__item">
232
+ <span class="pf-v6-c-breadcrumb__item-divider">
233
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
234
+ </span>
245
235
 
246
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
- </li>
248
- <li class="pf-v6-c-breadcrumb__item">
249
- <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
251
- </span>
236
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
237
+ </li>
238
+ <li class="pf-v6-c-breadcrumb__item">
239
+ <span class="pf-v6-c-breadcrumb__item-divider">
240
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
241
+ </span>
252
242
 
253
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
- </li>
255
- <li class="pf-v6-c-breadcrumb__item">
256
- <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
258
- </span>
243
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
244
+ </li>
245
+ <li class="pf-v6-c-breadcrumb__item">
246
+ <span class="pf-v6-c-breadcrumb__item-divider">
247
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
248
+ </span>
259
249
 
260
- <a
261
- href="#"
262
- class="pf-v6-c-breadcrumb__link pf-m-current"
263
- aria-current="page"
264
- >Section landing</a>
265
- </li>
266
- </ol>
267
- </nav>
268
- </div>
269
- </section>
270
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v6-c-page__main-body">
272
- <div class="pf-v6-c-content">
273
- <h1>Main title</h1>
274
- <p>This is a full page demo.</p>
250
+ <a
251
+ href="#"
252
+ class="pf-v6-c-breadcrumb__link pf-m-current"
253
+ aria-current="page"
254
+ >Section landing</a>
255
+ </li>
256
+ </ol>
257
+ </nav>
275
258
  </div>
276
- </div>
277
- </section>
278
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
279
- <div class="pf-v6-c-page__main-body">
280
- <div class="pf-v6-l-gallery pf-m-gutter">
281
- <div class="pf-v6-c-card">
282
- <div class="pf-v6-c-card__body">This is a card</div>
283
- </div>
284
- <div class="pf-v6-c-card">
285
- <div class="pf-v6-c-card__body">This is a card</div>
286
- </div>
287
- <div class="pf-v6-c-card">
288
- <div class="pf-v6-c-card__body">This is a card</div>
289
- </div>
290
- <div class="pf-v6-c-card">
291
- <div class="pf-v6-c-card__body">This is a card</div>
292
- </div>
293
- <div class="pf-v6-c-card">
294
- <div class="pf-v6-c-card__body">This is a card</div>
295
- </div>
296
- <div class="pf-v6-c-card">
297
- <div class="pf-v6-c-card__body">This is a card</div>
298
- </div>
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>
259
+ </section>
260
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
261
+ <div class="pf-v6-c-page__main-body">
262
+ <div class="pf-v6-c-content">
263
+ <h1>Main title</h1>
264
+ <p>This is a full page demo.</p>
304
265
  </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>
266
+ </div>
267
+ </section>
268
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
269
+ <div class="pf-v6-c-page__main-body">
270
+ <div class="pf-v6-l-gallery pf-m-gutter">
271
+ <div class="pf-v6-c-card">
272
+ <div class="pf-v6-c-card__body">This is a card</div>
273
+ </div>
274
+ <div class="pf-v6-c-card">
275
+ <div class="pf-v6-c-card__body">This is a card</div>
276
+ </div>
277
+ <div class="pf-v6-c-card">
278
+ <div class="pf-v6-c-card__body">This is a card</div>
279
+ </div>
280
+ <div class="pf-v6-c-card">
281
+ <div class="pf-v6-c-card__body">This is a card</div>
282
+ </div>
283
+ <div class="pf-v6-c-card">
284
+ <div class="pf-v6-c-card__body">This is a card</div>
285
+ </div>
286
+ <div class="pf-v6-c-card">
287
+ <div class="pf-v6-c-card__body">This is a card</div>
288
+ </div>
289
+ <div class="pf-v6-c-card">
290
+ <div class="pf-v6-c-card__body">This is a card</div>
291
+ </div>
292
+ <div class="pf-v6-c-card">
293
+ <div class="pf-v6-c-card__body">This is a card</div>
294
+ </div>
295
+ <div class="pf-v6-c-card">
296
+ <div class="pf-v6-c-card__body">This is a card</div>
297
+ </div>
298
+ <div class="pf-v6-c-card">
299
+ <div class="pf-v6-c-card__body">This is a card</div>
300
+ </div>
310
301
  </div>
311
302
  </div>
312
- </div>
313
- </section>
314
- </main>
303
+ </section>
304
+ </main>
305
+ </div>
315
306
  </div>
316
307
  <div class="pf-v6-c-backdrop">
317
308
  <div class="pf-v6-l-bullseye">
@@ -328,14 +319,18 @@ section: components
328
319
  type="button"
329
320
  aria-label="Close"
330
321
  >
331
- <i class="fas fa-times" aria-hidden="true"></i>
322
+ <span class="pf-v6-c-button__icon">
323
+ <i class="fas fa-times" aria-hidden="true"></i>
324
+ </span>
332
325
  </button>
333
326
  </div>
334
327
  <header class="pf-v6-c-modal-box__header">
335
- <h1
336
- class="pf-v6-c-modal-box__title"
337
- id="modal-title-modal-basic-example-modal"
338
- >Overwrite existing file?</h1>
328
+ <div class="pf-v6-c-modal-box__header-main">
329
+ <h1
330
+ class="pf-v6-c-modal-box__title"
331
+ id="modal-title-modal-basic-example-modal"
332
+ >Overwrite existing file?</h1>
333
+ </div>
339
334
  </header>
340
335
  <div
341
336
  class="pf-v6-c-modal-box__body"
@@ -345,8 +340,12 @@ section: components
345
340
  <p>A file with this name already exists, would you like to overwrite the existing file or save a new copy?</p>
346
341
  </div>
347
342
  <footer class="pf-v6-c-modal-box__footer">
348
- <button class="pf-v6-c-button pf-m-primary" type="button">Overwrite</button>
349
- <button class="pf-v6-c-button pf-m-link" type="button">Save a copy</button>
343
+ <button class="pf-v6-c-button pf-m-primary" type="button">
344
+ <span class="pf-v6-c-button__text">Overwrite</span>
345
+ </button>
346
+ <button class="pf-v6-c-button pf-m-link" type="button">
347
+ <span class="pf-v6-c-button__text">Save a copy</span>
348
+ </button>
350
349
  </footer>
351
350
  </div>
352
351
  </div>
@@ -362,94 +361,102 @@ section: components
362
361
  <a
363
362
  class="pf-v6-c-button pf-m-primary"
364
363
  href="#main-content-modal-scrollable-content-example"
365
- >Skip to content</a>
364
+ >
365
+ <span class="pf-v6-c-button__text">Skip to content</span>
366
+ </a>
366
367
  </div>
367
368
  <header
368
369
  class="pf-v6-c-masthead"
369
370
  id="modal-scrollable-content-example-masthead"
370
371
  >
371
- <span class="pf-v6-c-masthead__toggle">
372
- <button
373
- class="pf-v6-c-button pf-m-plain"
374
- type="button"
375
- aria-label="Global navigation"
376
- >
377
- <i class="fas fa-bars" aria-hidden="true"></i>
378
- </button>
379
- </span>
380
372
  <div class="pf-v6-c-masthead__main">
381
- <a class="pf-v6-c-masthead__brand" href="#">
382
- <svg height="40px" viewBox="0 0 679 158">
383
- <title>PF-HorizontalLogo-Color</title>
384
- <defs>
385
- <linearGradient
386
- x1="68%"
387
- y1="2.25860997e-13%"
388
- x2="32%"
389
- y2="100%"
390
- id="linearGradient-modal-scrollable-content-example-masthead"
391
- >
392
- <stop stop-color="#2B9AF3" offset="0%" />
393
- <stop
394
- stop-color="#73BCF7"
395
- stop-opacity="0.502212631"
396
- offset="100%"
397
- />
398
- </linearGradient>
399
- </defs>
400
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
401
- <g
402
- transform="translate(206.000000, 45.750000)"
403
- fill="var(--pf-t--global--text--color--regular)"
404
- fill-rule="nonzero"
405
- >
406
- <path
407
- 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"
408
- />
409
- <path
410
- 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"
411
- />
412
- <path
413
- 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"
414
- />
415
- <path
416
- 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"
417
- />
418
- <path
419
- 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"
420
- />
421
- <path
422
- 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"
423
- />
424
- <path
425
- 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"
426
- />
427
- <polygon
428
- 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"
429
- />
430
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
431
- <path
432
- 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"
433
- />
434
- </g>
435
- <g transform="translate(0.000000, 0.000000)">
436
- <path
437
- 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"
438
- fill="#0066CC"
439
- />
440
- <path
441
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
442
- fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
443
- />
444
- <path
445
- 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"
446
- fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
447
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
448
- />
373
+ <span class="pf-v6-c-masthead__toggle">
374
+ <button
375
+ class="pf-v6-c-button pf-m-plain"
376
+ type="button"
377
+ aria-label="Global navigation"
378
+ >
379
+ <span class="pf-v6-c-button__icon">
380
+ <i class="fas fa-bars" aria-hidden="true"></i>
381
+ </span>
382
+ </button>
383
+ </span>
384
+ <div class="pf-v6-c-masthead__brand">
385
+ <a class="pf-v6-c-masthead__logo" href="#">
386
+ <svg height="37px" viewBox="0 0 679 158">
387
+ <title>PF-HorizontalLogo-Color</title>
388
+ <defs>
389
+ <linearGradient
390
+ x1="68%"
391
+ y1="2.25860997e-13%"
392
+ x2="32%"
393
+ y2="100%"
394
+ id="linearGradient-modal-scrollable-content-example-masthead"
395
+ >
396
+ <stop stop-color="#2B9AF3" offset="0%" />
397
+ <stop
398
+ stop-color="#73BCF7"
399
+ stop-opacity="0.502212631"
400
+ offset="100%"
401
+ />
402
+ </linearGradient>
403
+ </defs>
404
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
405
+ <g
406
+ transform="translate(206.000000, 45.750000)"
407
+ fill="var(--pf-t--global--text--color--regular)"
408
+ fill-rule="nonzero"
409
+ >
410
+ <path
411
+ 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"
412
+ />
413
+ <path
414
+ 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"
415
+ />
416
+ <path
417
+ 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"
418
+ />
419
+ <path
420
+ 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"
421
+ />
422
+ <path
423
+ 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"
424
+ />
425
+ <path
426
+ 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"
427
+ />
428
+ <path
429
+ 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"
430
+ />
431
+ <polygon
432
+ 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"
433
+ />
434
+ <polygon
435
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
436
+ />
437
+ <path
438
+ 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"
439
+ />
440
+ </g>
441
+ <g transform="translate(0.000000, 0.000000)">
442
+ <path
443
+ 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"
444
+ fill="#0066CC"
445
+ />
446
+ <path
447
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
448
+ fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
449
+ />
450
+ <path
451
+ 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"
452
+ fill="url(#linearGradient-modal-scrollable-content-example-masthead)"
453
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
454
+ />
455
+ </g>
449
456
  </g>
450
- </g>
451
- </svg>
452
- </a>
457
+ </svg>
458
+ </a>
459
+ </div>
453
460
  </div>
454
461
  <div class="pf-v6-c-masthead__content">
455
462
  <div
@@ -458,41 +465,11 @@ section: components
458
465
  >
459
466
  <div class="pf-v6-c-toolbar__content">
460
467
  <div class="pf-v6-c-toolbar__content-section">
461
- <div class="pf-v6-c-toolbar__item">
462
- <button
463
- class="pf-v6-c-menu-toggle"
464
- type="button"
465
- aria-expanded="false"
466
- >
467
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
468
- <span class="pf-v6-c-menu-toggle__controls">
469
- <span class="pf-v6-c-menu-toggle__toggle-icon">
470
- <i class="fas fa-caret-down" aria-hidden="true"></i>
471
- </span>
472
- </span>
473
- </button>
474
- </div>
475
-
476
- <div class="pf-v6-c-toolbar__item">
477
- <button
478
- class="pf-v6-c-menu-toggle"
479
- type="button"
480
- aria-expanded="false"
481
- >
482
- <span class="pf-v6-c-menu-toggle__text">Services</span>
483
- <span class="pf-v6-c-menu-toggle__controls">
484
- <span class="pf-v6-c-menu-toggle__toggle-icon">
485
- <i class="fas fa-caret-down" aria-hidden="true"></i>
486
- </span>
487
- </span>
488
- </button>
489
- </div>
490
-
491
468
  <div
492
- 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"
469
+ 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"
493
470
  >
494
471
  <div
495
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
472
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
496
473
  >
497
474
  <div class="pf-v6-c-toolbar__item">
498
475
  <button
@@ -531,6 +508,7 @@ section: components
531
508
  </button>
532
509
  </div>
533
510
  </div>
511
+
534
512
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
535
513
  <button
536
514
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -558,114 +536,126 @@ section: components
558
536
  >
559
537
  <ul class="pf-v6-c-nav__list" role="list">
560
538
  <li class="pf-v6-c-nav__item">
561
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
539
+ <a href="#" class="pf-v6-c-nav__link">
540
+ <span class="pf-v6-c-nav__link-text">System panel</span>
541
+ </a>
562
542
  </li>
563
543
  <li class="pf-v6-c-nav__item">
564
544
  <a
565
545
  href="#"
566
546
  class="pf-v6-c-nav__link pf-m-current"
567
547
  aria-current="page"
568
- >Policy</a>
548
+ >
549
+ <span class="pf-v6-c-nav__link-text">Policy</span>
550
+ </a>
569
551
  </li>
570
552
  <li class="pf-v6-c-nav__item">
571
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
553
+ <a href="#" class="pf-v6-c-nav__link">
554
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
555
+ </a>
572
556
  </li>
573
557
  <li class="pf-v6-c-nav__item">
574
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
558
+ <a href="#" class="pf-v6-c-nav__link">
559
+ <span class="pf-v6-c-nav__link-text">Network services</span>
560
+ </a>
575
561
  </li>
576
562
  <li class="pf-v6-c-nav__item">
577
- <a href="#" class="pf-v6-c-nav__link">Server</a>
563
+ <a href="#" class="pf-v6-c-nav__link">
564
+ <span class="pf-v6-c-nav__link-text">Server</span>
565
+ </a>
578
566
  </li>
579
567
  </ul>
580
568
  </nav>
581
569
  </div>
582
570
  </div>
583
- <main
584
- class="pf-v6-c-page__main"
585
- tabindex="-1"
586
- id="main-content-modal-scrollable-content-example"
587
- >
588
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
589
- <div class="pf-v6-c-page__main-body">
590
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
591
- <ol class="pf-v6-c-breadcrumb__list" role="list">
592
- <li class="pf-v6-c-breadcrumb__item">
593
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
594
- </li>
595
- <li class="pf-v6-c-breadcrumb__item">
596
- <span class="pf-v6-c-breadcrumb__item-divider">
597
- <i class="fas fa-angle-right" aria-hidden="true"></i>
598
- </span>
571
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
572
+ <main
573
+ class="pf-v6-c-page__main"
574
+ tabindex="-1"
575
+ id="main-content-modal-scrollable-content-example"
576
+ >
577
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
578
+ <div class="pf-v6-c-page__main-body">
579
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
580
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
581
+ <li class="pf-v6-c-breadcrumb__item">
582
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
583
+ </li>
584
+ <li class="pf-v6-c-breadcrumb__item">
585
+ <span class="pf-v6-c-breadcrumb__item-divider">
586
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
587
+ </span>
599
588
 
600
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
601
- </li>
602
- <li class="pf-v6-c-breadcrumb__item">
603
- <span class="pf-v6-c-breadcrumb__item-divider">
604
- <i class="fas fa-angle-right" aria-hidden="true"></i>
605
- </span>
589
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
590
+ </li>
591
+ <li class="pf-v6-c-breadcrumb__item">
592
+ <span class="pf-v6-c-breadcrumb__item-divider">
593
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
594
+ </span>
606
595
 
607
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
608
- </li>
609
- <li class="pf-v6-c-breadcrumb__item">
610
- <span class="pf-v6-c-breadcrumb__item-divider">
611
- <i class="fas fa-angle-right" aria-hidden="true"></i>
612
- </span>
596
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
597
+ </li>
598
+ <li class="pf-v6-c-breadcrumb__item">
599
+ <span class="pf-v6-c-breadcrumb__item-divider">
600
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
601
+ </span>
613
602
 
614
- <a
615
- href="#"
616
- class="pf-v6-c-breadcrumb__link pf-m-current"
617
- aria-current="page"
618
- >Section landing</a>
619
- </li>
620
- </ol>
621
- </nav>
622
- </div>
623
- </section>
624
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
625
- <div class="pf-v6-c-page__main-body">
626
- <div class="pf-v6-c-content">
627
- <h1>Main title</h1>
628
- <p>This is a full page demo.</p>
603
+ <a
604
+ href="#"
605
+ class="pf-v6-c-breadcrumb__link pf-m-current"
606
+ aria-current="page"
607
+ >Section landing</a>
608
+ </li>
609
+ </ol>
610
+ </nav>
629
611
  </div>
630
- </div>
631
- </section>
632
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
633
- <div class="pf-v6-c-page__main-body">
634
- <div class="pf-v6-l-gallery pf-m-gutter">
635
- <div class="pf-v6-c-card">
636
- <div class="pf-v6-c-card__body">This is a card</div>
637
- </div>
638
- <div class="pf-v6-c-card">
639
- <div class="pf-v6-c-card__body">This is a card</div>
640
- </div>
641
- <div class="pf-v6-c-card">
642
- <div class="pf-v6-c-card__body">This is a card</div>
643
- </div>
644
- <div class="pf-v6-c-card">
645
- <div class="pf-v6-c-card__body">This is a card</div>
612
+ </section>
613
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
614
+ <div class="pf-v6-c-page__main-body">
615
+ <div class="pf-v6-c-content">
616
+ <h1>Main title</h1>
617
+ <p>This is a full page demo.</p>
646
618
  </div>
647
- <div class="pf-v6-c-card">
648
- <div class="pf-v6-c-card__body">This is a card</div>
649
- </div>
650
- <div class="pf-v6-c-card">
651
- <div class="pf-v6-c-card__body">This is a card</div>
652
- </div>
653
- <div class="pf-v6-c-card">
654
- <div class="pf-v6-c-card__body">This is a card</div>
655
- </div>
656
- <div class="pf-v6-c-card">
657
- <div class="pf-v6-c-card__body">This is a card</div>
658
- </div>
659
- <div class="pf-v6-c-card">
660
- <div class="pf-v6-c-card__body">This is a card</div>
661
- </div>
662
- <div class="pf-v6-c-card">
663
- <div class="pf-v6-c-card__body">This is a card</div>
619
+ </div>
620
+ </section>
621
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
622
+ <div class="pf-v6-c-page__main-body">
623
+ <div class="pf-v6-l-gallery pf-m-gutter">
624
+ <div class="pf-v6-c-card">
625
+ <div class="pf-v6-c-card__body">This is a card</div>
626
+ </div>
627
+ <div class="pf-v6-c-card">
628
+ <div class="pf-v6-c-card__body">This is a card</div>
629
+ </div>
630
+ <div class="pf-v6-c-card">
631
+ <div class="pf-v6-c-card__body">This is a card</div>
632
+ </div>
633
+ <div class="pf-v6-c-card">
634
+ <div class="pf-v6-c-card__body">This is a card</div>
635
+ </div>
636
+ <div class="pf-v6-c-card">
637
+ <div class="pf-v6-c-card__body">This is a card</div>
638
+ </div>
639
+ <div class="pf-v6-c-card">
640
+ <div class="pf-v6-c-card__body">This is a card</div>
641
+ </div>
642
+ <div class="pf-v6-c-card">
643
+ <div class="pf-v6-c-card__body">This is a card</div>
644
+ </div>
645
+ <div class="pf-v6-c-card">
646
+ <div class="pf-v6-c-card__body">This is a card</div>
647
+ </div>
648
+ <div class="pf-v6-c-card">
649
+ <div class="pf-v6-c-card__body">This is a card</div>
650
+ </div>
651
+ <div class="pf-v6-c-card">
652
+ <div class="pf-v6-c-card__body">This is a card</div>
653
+ </div>
664
654
  </div>
665
655
  </div>
666
- </div>
667
- </section>
668
- </main>
656
+ </section>
657
+ </main>
658
+ </div>
669
659
  </div>
670
660
  <div class="pf-v6-c-backdrop">
671
661
  <div class="pf-v6-l-bullseye">
@@ -682,18 +672,22 @@ section: components
682
672
  type="button"
683
673
  aria-label="Close"
684
674
  >
685
- <i class="fas fa-times" aria-hidden="true"></i>
675
+ <span class="pf-v6-c-button__icon">
676
+ <i class="fas fa-times" aria-hidden="true"></i>
677
+ </span>
686
678
  </button>
687
679
  </div>
688
680
  <header class="pf-v6-c-modal-box__header">
689
- <h1
690
- class="pf-v6-c-modal-box__title"
691
- id="modal-scroll-title"
692
- >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
693
- <div
694
- class="pf-v6-c-modal-box__description"
695
- id="modal-scroll-description"
696
- >This is a modal description. The description will not scroll with the body contents.</div>
681
+ <div class="pf-v6-c-modal-box__header-main">
682
+ <h1
683
+ class="pf-v6-c-modal-box__title"
684
+ id="modal-scroll-title"
685
+ >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
686
+ <div
687
+ class="pf-v6-c-modal-box__description"
688
+ id="modal-scroll-description"
689
+ >This is a modal description. The description will not scroll with the body contents.</div>
690
+ </div>
697
691
  </header>
698
692
  <div class="pf-v6-c-modal-box__body" tabindex="0">
699
693
  <p>general_modal_final_finalfinal_v9_actualfinal.sketch</p>
@@ -708,8 +702,12 @@ section: components
708
702
  <p>Etiam sit amet orci eget eros faucibus tincidunt. Aliquam eu nunc. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Nunc nec neque.</p>
709
703
  </div>
710
704
  <footer class="pf-v6-c-modal-box__footer">
711
- <button class="pf-v6-c-button pf-m-primary" type="button">Overwrite</button>
712
- <button class="pf-v6-c-button pf-m-link" type="button">Save a copy</button>
705
+ <button class="pf-v6-c-button pf-m-primary" type="button">
706
+ <span class="pf-v6-c-button__text">Overwrite</span>
707
+ </button>
708
+ <button class="pf-v6-c-button pf-m-link" type="button">
709
+ <span class="pf-v6-c-button__text">Save a copy</span>
710
+ </button>
713
711
  </footer>
714
712
  </div>
715
713
  </div>
@@ -725,91 +723,99 @@ section: components
725
723
  <a
726
724
  class="pf-v6-c-button pf-m-primary"
727
725
  href="#main-content-modal-medium-example"
728
- >Skip to content</a>
726
+ >
727
+ <span class="pf-v6-c-button__text">Skip to content</span>
728
+ </a>
729
729
  </div>
730
730
  <header class="pf-v6-c-masthead" id="modal-medium-example-masthead">
731
- <span class="pf-v6-c-masthead__toggle">
732
- <button
733
- class="pf-v6-c-button pf-m-plain"
734
- type="button"
735
- aria-label="Global navigation"
736
- >
737
- <i class="fas fa-bars" aria-hidden="true"></i>
738
- </button>
739
- </span>
740
731
  <div class="pf-v6-c-masthead__main">
741
- <a class="pf-v6-c-masthead__brand" href="#">
742
- <svg height="40px" viewBox="0 0 679 158">
743
- <title>PF-HorizontalLogo-Color</title>
744
- <defs>
745
- <linearGradient
746
- x1="68%"
747
- y1="2.25860997e-13%"
748
- x2="32%"
749
- y2="100%"
750
- id="linearGradient-modal-medium-example-masthead"
751
- >
752
- <stop stop-color="#2B9AF3" offset="0%" />
753
- <stop
754
- stop-color="#73BCF7"
755
- stop-opacity="0.502212631"
756
- offset="100%"
757
- />
758
- </linearGradient>
759
- </defs>
760
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
761
- <g
762
- transform="translate(206.000000, 45.750000)"
763
- fill="var(--pf-t--global--text--color--regular)"
764
- fill-rule="nonzero"
765
- >
766
- <path
767
- 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"
768
- />
769
- <path
770
- 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"
771
- />
772
- <path
773
- 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"
774
- />
775
- <path
776
- 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"
777
- />
778
- <path
779
- 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"
780
- />
781
- <path
782
- 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"
783
- />
784
- <path
785
- 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"
786
- />
787
- <polygon
788
- 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"
789
- />
790
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
791
- <path
792
- 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"
793
- />
794
- </g>
795
- <g transform="translate(0.000000, 0.000000)">
796
- <path
797
- 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"
798
- fill="#0066CC"
799
- />
800
- <path
801
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
802
- fill="url(#linearGradient-modal-medium-example-masthead)"
803
- />
804
- <path
805
- 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"
806
- fill="url(#linearGradient-modal-medium-example-masthead)"
807
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
808
- />
732
+ <span class="pf-v6-c-masthead__toggle">
733
+ <button
734
+ class="pf-v6-c-button pf-m-plain"
735
+ type="button"
736
+ aria-label="Global navigation"
737
+ >
738
+ <span class="pf-v6-c-button__icon">
739
+ <i class="fas fa-bars" aria-hidden="true"></i>
740
+ </span>
741
+ </button>
742
+ </span>
743
+ <div class="pf-v6-c-masthead__brand">
744
+ <a class="pf-v6-c-masthead__logo" href="#">
745
+ <svg height="37px" viewBox="0 0 679 158">
746
+ <title>PF-HorizontalLogo-Color</title>
747
+ <defs>
748
+ <linearGradient
749
+ x1="68%"
750
+ y1="2.25860997e-13%"
751
+ x2="32%"
752
+ y2="100%"
753
+ id="linearGradient-modal-medium-example-masthead"
754
+ >
755
+ <stop stop-color="#2B9AF3" offset="0%" />
756
+ <stop
757
+ stop-color="#73BCF7"
758
+ stop-opacity="0.502212631"
759
+ offset="100%"
760
+ />
761
+ </linearGradient>
762
+ </defs>
763
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
764
+ <g
765
+ transform="translate(206.000000, 45.750000)"
766
+ fill="var(--pf-t--global--text--color--regular)"
767
+ fill-rule="nonzero"
768
+ >
769
+ <path
770
+ 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"
771
+ />
772
+ <path
773
+ 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"
774
+ />
775
+ <path
776
+ 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"
777
+ />
778
+ <path
779
+ 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"
780
+ />
781
+ <path
782
+ 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"
783
+ />
784
+ <path
785
+ 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"
786
+ />
787
+ <path
788
+ 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"
789
+ />
790
+ <polygon
791
+ 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"
792
+ />
793
+ <polygon
794
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
795
+ />
796
+ <path
797
+ 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"
798
+ />
799
+ </g>
800
+ <g transform="translate(0.000000, 0.000000)">
801
+ <path
802
+ 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"
803
+ fill="#0066CC"
804
+ />
805
+ <path
806
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
807
+ fill="url(#linearGradient-modal-medium-example-masthead)"
808
+ />
809
+ <path
810
+ 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"
811
+ fill="url(#linearGradient-modal-medium-example-masthead)"
812
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
813
+ />
814
+ </g>
809
815
  </g>
810
- </g>
811
- </svg>
812
- </a>
816
+ </svg>
817
+ </a>
818
+ </div>
813
819
  </div>
814
820
  <div class="pf-v6-c-masthead__content">
815
821
  <div
@@ -818,41 +824,11 @@ section: components
818
824
  >
819
825
  <div class="pf-v6-c-toolbar__content">
820
826
  <div class="pf-v6-c-toolbar__content-section">
821
- <div class="pf-v6-c-toolbar__item">
822
- <button
823
- class="pf-v6-c-menu-toggle"
824
- type="button"
825
- aria-expanded="false"
826
- >
827
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
828
- <span class="pf-v6-c-menu-toggle__controls">
829
- <span class="pf-v6-c-menu-toggle__toggle-icon">
830
- <i class="fas fa-caret-down" aria-hidden="true"></i>
831
- </span>
832
- </span>
833
- </button>
834
- </div>
835
-
836
- <div class="pf-v6-c-toolbar__item">
837
- <button
838
- class="pf-v6-c-menu-toggle"
839
- type="button"
840
- aria-expanded="false"
841
- >
842
- <span class="pf-v6-c-menu-toggle__text">Services</span>
843
- <span class="pf-v6-c-menu-toggle__controls">
844
- <span class="pf-v6-c-menu-toggle__toggle-icon">
845
- <i class="fas fa-caret-down" aria-hidden="true"></i>
846
- </span>
847
- </span>
848
- </button>
849
- </div>
850
-
851
827
  <div
852
- 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"
828
+ 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"
853
829
  >
854
830
  <div
855
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
831
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
856
832
  >
857
833
  <div class="pf-v6-c-toolbar__item">
858
834
  <button
@@ -891,6 +867,7 @@ section: components
891
867
  </button>
892
868
  </div>
893
869
  </div>
870
+
894
871
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
895
872
  <button
896
873
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -918,114 +895,126 @@ section: components
918
895
  >
919
896
  <ul class="pf-v6-c-nav__list" role="list">
920
897
  <li class="pf-v6-c-nav__item">
921
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
898
+ <a href="#" class="pf-v6-c-nav__link">
899
+ <span class="pf-v6-c-nav__link-text">System panel</span>
900
+ </a>
922
901
  </li>
923
902
  <li class="pf-v6-c-nav__item">
924
903
  <a
925
904
  href="#"
926
905
  class="pf-v6-c-nav__link pf-m-current"
927
906
  aria-current="page"
928
- >Policy</a>
907
+ >
908
+ <span class="pf-v6-c-nav__link-text">Policy</span>
909
+ </a>
929
910
  </li>
930
911
  <li class="pf-v6-c-nav__item">
931
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
912
+ <a href="#" class="pf-v6-c-nav__link">
913
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
914
+ </a>
932
915
  </li>
933
916
  <li class="pf-v6-c-nav__item">
934
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
917
+ <a href="#" class="pf-v6-c-nav__link">
918
+ <span class="pf-v6-c-nav__link-text">Network services</span>
919
+ </a>
935
920
  </li>
936
921
  <li class="pf-v6-c-nav__item">
937
- <a href="#" class="pf-v6-c-nav__link">Server</a>
922
+ <a href="#" class="pf-v6-c-nav__link">
923
+ <span class="pf-v6-c-nav__link-text">Server</span>
924
+ </a>
938
925
  </li>
939
926
  </ul>
940
927
  </nav>
941
928
  </div>
942
929
  </div>
943
- <main
944
- class="pf-v6-c-page__main"
945
- tabindex="-1"
946
- id="main-content-modal-medium-example"
947
- >
948
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
949
- <div class="pf-v6-c-page__main-body">
950
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
951
- <ol class="pf-v6-c-breadcrumb__list" role="list">
952
- <li class="pf-v6-c-breadcrumb__item">
953
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
954
- </li>
955
- <li class="pf-v6-c-breadcrumb__item">
956
- <span class="pf-v6-c-breadcrumb__item-divider">
957
- <i class="fas fa-angle-right" aria-hidden="true"></i>
958
- </span>
930
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
931
+ <main
932
+ class="pf-v6-c-page__main"
933
+ tabindex="-1"
934
+ id="main-content-modal-medium-example"
935
+ >
936
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
937
+ <div class="pf-v6-c-page__main-body">
938
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
939
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
940
+ <li class="pf-v6-c-breadcrumb__item">
941
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
942
+ </li>
943
+ <li class="pf-v6-c-breadcrumb__item">
944
+ <span class="pf-v6-c-breadcrumb__item-divider">
945
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
946
+ </span>
959
947
 
960
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
961
- </li>
962
- <li class="pf-v6-c-breadcrumb__item">
963
- <span class="pf-v6-c-breadcrumb__item-divider">
964
- <i class="fas fa-angle-right" aria-hidden="true"></i>
965
- </span>
948
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
949
+ </li>
950
+ <li class="pf-v6-c-breadcrumb__item">
951
+ <span class="pf-v6-c-breadcrumb__item-divider">
952
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
953
+ </span>
966
954
 
967
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
968
- </li>
969
- <li class="pf-v6-c-breadcrumb__item">
970
- <span class="pf-v6-c-breadcrumb__item-divider">
971
- <i class="fas fa-angle-right" aria-hidden="true"></i>
972
- </span>
955
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
956
+ </li>
957
+ <li class="pf-v6-c-breadcrumb__item">
958
+ <span class="pf-v6-c-breadcrumb__item-divider">
959
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
960
+ </span>
973
961
 
974
- <a
975
- href="#"
976
- class="pf-v6-c-breadcrumb__link pf-m-current"
977
- aria-current="page"
978
- >Section landing</a>
979
- </li>
980
- </ol>
981
- </nav>
982
- </div>
983
- </section>
984
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
985
- <div class="pf-v6-c-page__main-body">
986
- <div class="pf-v6-c-content">
987
- <h1>Main title</h1>
988
- <p>This is a full page demo.</p>
962
+ <a
963
+ href="#"
964
+ class="pf-v6-c-breadcrumb__link pf-m-current"
965
+ aria-current="page"
966
+ >Section landing</a>
967
+ </li>
968
+ </ol>
969
+ </nav>
989
970
  </div>
990
- </div>
991
- </section>
992
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
993
- <div class="pf-v6-c-page__main-body">
994
- <div class="pf-v6-l-gallery pf-m-gutter">
995
- <div class="pf-v6-c-card">
996
- <div class="pf-v6-c-card__body">This is a card</div>
971
+ </section>
972
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
973
+ <div class="pf-v6-c-page__main-body">
974
+ <div class="pf-v6-c-content">
975
+ <h1>Main title</h1>
976
+ <p>This is a full page demo.</p>
997
977
  </div>
998
- <div class="pf-v6-c-card">
999
- <div class="pf-v6-c-card__body">This is a card</div>
1000
- </div>
1001
- <div class="pf-v6-c-card">
1002
- <div class="pf-v6-c-card__body">This is a card</div>
1003
- </div>
1004
- <div class="pf-v6-c-card">
1005
- <div class="pf-v6-c-card__body">This is a card</div>
1006
- </div>
1007
- <div class="pf-v6-c-card">
1008
- <div class="pf-v6-c-card__body">This is a card</div>
1009
- </div>
1010
- <div class="pf-v6-c-card">
1011
- <div class="pf-v6-c-card__body">This is a card</div>
1012
- </div>
1013
- <div class="pf-v6-c-card">
1014
- <div class="pf-v6-c-card__body">This is a card</div>
1015
- </div>
1016
- <div class="pf-v6-c-card">
1017
- <div class="pf-v6-c-card__body">This is a card</div>
1018
- </div>
1019
- <div class="pf-v6-c-card">
1020
- <div class="pf-v6-c-card__body">This is a card</div>
1021
- </div>
1022
- <div class="pf-v6-c-card">
1023
- <div class="pf-v6-c-card__body">This is a card</div>
978
+ </div>
979
+ </section>
980
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
981
+ <div class="pf-v6-c-page__main-body">
982
+ <div class="pf-v6-l-gallery pf-m-gutter">
983
+ <div class="pf-v6-c-card">
984
+ <div class="pf-v6-c-card__body">This is a card</div>
985
+ </div>
986
+ <div class="pf-v6-c-card">
987
+ <div class="pf-v6-c-card__body">This is a card</div>
988
+ </div>
989
+ <div class="pf-v6-c-card">
990
+ <div class="pf-v6-c-card__body">This is a card</div>
991
+ </div>
992
+ <div class="pf-v6-c-card">
993
+ <div class="pf-v6-c-card__body">This is a card</div>
994
+ </div>
995
+ <div class="pf-v6-c-card">
996
+ <div class="pf-v6-c-card__body">This is a card</div>
997
+ </div>
998
+ <div class="pf-v6-c-card">
999
+ <div class="pf-v6-c-card__body">This is a card</div>
1000
+ </div>
1001
+ <div class="pf-v6-c-card">
1002
+ <div class="pf-v6-c-card__body">This is a card</div>
1003
+ </div>
1004
+ <div class="pf-v6-c-card">
1005
+ <div class="pf-v6-c-card__body">This is a card</div>
1006
+ </div>
1007
+ <div class="pf-v6-c-card">
1008
+ <div class="pf-v6-c-card__body">This is a card</div>
1009
+ </div>
1010
+ <div class="pf-v6-c-card">
1011
+ <div class="pf-v6-c-card__body">This is a card</div>
1012
+ </div>
1024
1013
  </div>
1025
1014
  </div>
1026
- </div>
1027
- </section>
1028
- </main>
1015
+ </section>
1016
+ </main>
1017
+ </div>
1029
1018
  </div>
1030
1019
  <div class="pf-v6-c-backdrop">
1031
1020
  <div class="pf-v6-l-bullseye">
@@ -1042,24 +1031,32 @@ section: components
1042
1031
  type="button"
1043
1032
  aria-label="Close"
1044
1033
  >
1045
- <i class="fas fa-times" aria-hidden="true"></i>
1034
+ <span class="pf-v6-c-button__icon">
1035
+ <i class="fas fa-times" aria-hidden="true"></i>
1036
+ </span>
1046
1037
  </button>
1047
1038
  </div>
1048
1039
  <header class="pf-v6-c-modal-box__header">
1049
- <h1
1050
- class="pf-v6-c-modal-box__title"
1051
- id="modal-md-title"
1052
- >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
1040
+ <div class="pf-v6-c-modal-box__header-main">
1041
+ <h1
1042
+ class="pf-v6-c-modal-box__title"
1043
+ id="modal-md-title"
1044
+ >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
1045
+ </div>
1053
1046
  </header>
1054
1047
  <div class="pf-v6-c-modal-box__body">
1055
1048
  <p
1056
1049
  id="modal-md-description"
1057
- >The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-v5-c-modal-box__body"</p>
1050
+ >The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-v6-c-modal-box__body"</p>
1058
1051
  <p>Form here</p>
1059
1052
  </div>
1060
1053
  <footer class="pf-v6-c-modal-box__footer">
1061
- <button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
1062
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1054
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1055
+ <span class="pf-v6-c-button__text">Save</span>
1056
+ </button>
1057
+ <button class="pf-v6-c-button pf-m-link" type="button">
1058
+ <span class="pf-v6-c-button__text">Cancel</span>
1059
+ </button>
1063
1060
  </footer>
1064
1061
  </div>
1065
1062
  </div>
@@ -1075,91 +1072,99 @@ section: components
1075
1072
  <a
1076
1073
  class="pf-v6-c-button pf-m-primary"
1077
1074
  href="#main-content-modal-large-example"
1078
- >Skip to content</a>
1075
+ >
1076
+ <span class="pf-v6-c-button__text">Skip to content</span>
1077
+ </a>
1079
1078
  </div>
1080
1079
  <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1081
- <span class="pf-v6-c-masthead__toggle">
1082
- <button
1083
- class="pf-v6-c-button pf-m-plain"
1084
- type="button"
1085
- aria-label="Global navigation"
1086
- >
1087
- <i class="fas fa-bars" aria-hidden="true"></i>
1088
- </button>
1089
- </span>
1090
1080
  <div class="pf-v6-c-masthead__main">
1091
- <a class="pf-v6-c-masthead__brand" href="#">
1092
- <svg height="40px" viewBox="0 0 679 158">
1093
- <title>PF-HorizontalLogo-Color</title>
1094
- <defs>
1095
- <linearGradient
1096
- x1="68%"
1097
- y1="2.25860997e-13%"
1098
- x2="32%"
1099
- y2="100%"
1100
- id="linearGradient-modal-large-example-masthead"
1101
- >
1102
- <stop stop-color="#2B9AF3" offset="0%" />
1103
- <stop
1104
- stop-color="#73BCF7"
1105
- stop-opacity="0.502212631"
1106
- offset="100%"
1107
- />
1108
- </linearGradient>
1109
- </defs>
1110
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1111
- <g
1112
- transform="translate(206.000000, 45.750000)"
1113
- fill="var(--pf-t--global--text--color--regular)"
1114
- fill-rule="nonzero"
1115
- >
1116
- <path
1117
- 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"
1118
- />
1119
- <path
1120
- 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"
1121
- />
1122
- <path
1123
- 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"
1124
- />
1125
- <path
1126
- 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"
1127
- />
1128
- <path
1129
- 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"
1130
- />
1131
- <path
1132
- 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"
1133
- />
1134
- <path
1135
- 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"
1136
- />
1137
- <polygon
1138
- 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"
1139
- />
1140
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1141
- <path
1142
- 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"
1143
- />
1144
- </g>
1145
- <g transform="translate(0.000000, 0.000000)">
1146
- <path
1147
- 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"
1148
- fill="#0066CC"
1149
- />
1150
- <path
1151
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1152
- fill="url(#linearGradient-modal-large-example-masthead)"
1153
- />
1154
- <path
1155
- 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"
1156
- fill="url(#linearGradient-modal-large-example-masthead)"
1157
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1158
- />
1081
+ <span class="pf-v6-c-masthead__toggle">
1082
+ <button
1083
+ class="pf-v6-c-button pf-m-plain"
1084
+ type="button"
1085
+ aria-label="Global navigation"
1086
+ >
1087
+ <span class="pf-v6-c-button__icon">
1088
+ <i class="fas fa-bars" aria-hidden="true"></i>
1089
+ </span>
1090
+ </button>
1091
+ </span>
1092
+ <div class="pf-v6-c-masthead__brand">
1093
+ <a class="pf-v6-c-masthead__logo" href="#">
1094
+ <svg height="37px" viewBox="0 0 679 158">
1095
+ <title>PF-HorizontalLogo-Color</title>
1096
+ <defs>
1097
+ <linearGradient
1098
+ x1="68%"
1099
+ y1="2.25860997e-13%"
1100
+ x2="32%"
1101
+ y2="100%"
1102
+ id="linearGradient-modal-large-example-masthead"
1103
+ >
1104
+ <stop stop-color="#2B9AF3" offset="0%" />
1105
+ <stop
1106
+ stop-color="#73BCF7"
1107
+ stop-opacity="0.502212631"
1108
+ offset="100%"
1109
+ />
1110
+ </linearGradient>
1111
+ </defs>
1112
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1113
+ <g
1114
+ transform="translate(206.000000, 45.750000)"
1115
+ fill="var(--pf-t--global--text--color--regular)"
1116
+ fill-rule="nonzero"
1117
+ >
1118
+ <path
1119
+ 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"
1120
+ />
1121
+ <path
1122
+ 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"
1123
+ />
1124
+ <path
1125
+ 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"
1126
+ />
1127
+ <path
1128
+ 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"
1129
+ />
1130
+ <path
1131
+ 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"
1132
+ />
1133
+ <path
1134
+ 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"
1135
+ />
1136
+ <path
1137
+ 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"
1138
+ />
1139
+ <polygon
1140
+ 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"
1141
+ />
1142
+ <polygon
1143
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1144
+ />
1145
+ <path
1146
+ 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"
1147
+ />
1148
+ </g>
1149
+ <g transform="translate(0.000000, 0.000000)">
1150
+ <path
1151
+ 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"
1152
+ fill="#0066CC"
1153
+ />
1154
+ <path
1155
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1156
+ fill="url(#linearGradient-modal-large-example-masthead)"
1157
+ />
1158
+ <path
1159
+ 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"
1160
+ fill="url(#linearGradient-modal-large-example-masthead)"
1161
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1162
+ />
1163
+ </g>
1159
1164
  </g>
1160
- </g>
1161
- </svg>
1162
- </a>
1165
+ </svg>
1166
+ </a>
1167
+ </div>
1163
1168
  </div>
1164
1169
  <div class="pf-v6-c-masthead__content">
1165
1170
  <div
@@ -1168,41 +1173,11 @@ section: components
1168
1173
  >
1169
1174
  <div class="pf-v6-c-toolbar__content">
1170
1175
  <div class="pf-v6-c-toolbar__content-section">
1171
- <div class="pf-v6-c-toolbar__item">
1172
- <button
1173
- class="pf-v6-c-menu-toggle"
1174
- type="button"
1175
- aria-expanded="false"
1176
- >
1177
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1178
- <span class="pf-v6-c-menu-toggle__controls">
1179
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1180
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1181
- </span>
1182
- </span>
1183
- </button>
1184
- </div>
1185
-
1186
- <div class="pf-v6-c-toolbar__item">
1187
- <button
1188
- class="pf-v6-c-menu-toggle"
1189
- type="button"
1190
- aria-expanded="false"
1191
- >
1192
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1193
- <span class="pf-v6-c-menu-toggle__controls">
1194
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1195
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1196
- </span>
1197
- </span>
1198
- </button>
1199
- </div>
1200
-
1201
1176
  <div
1202
- 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"
1177
+ 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"
1203
1178
  >
1204
1179
  <div
1205
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1180
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1206
1181
  >
1207
1182
  <div class="pf-v6-c-toolbar__item">
1208
1183
  <button
@@ -1241,6 +1216,7 @@ section: components
1241
1216
  </button>
1242
1217
  </div>
1243
1218
  </div>
1219
+
1244
1220
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1245
1221
  <button
1246
1222
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1268,114 +1244,126 @@ section: components
1268
1244
  >
1269
1245
  <ul class="pf-v6-c-nav__list" role="list">
1270
1246
  <li class="pf-v6-c-nav__item">
1271
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1247
+ <a href="#" class="pf-v6-c-nav__link">
1248
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1249
+ </a>
1272
1250
  </li>
1273
1251
  <li class="pf-v6-c-nav__item">
1274
1252
  <a
1275
1253
  href="#"
1276
1254
  class="pf-v6-c-nav__link pf-m-current"
1277
1255
  aria-current="page"
1278
- >Policy</a>
1256
+ >
1257
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1258
+ </a>
1279
1259
  </li>
1280
1260
  <li class="pf-v6-c-nav__item">
1281
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1261
+ <a href="#" class="pf-v6-c-nav__link">
1262
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1263
+ </a>
1282
1264
  </li>
1283
1265
  <li class="pf-v6-c-nav__item">
1284
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1266
+ <a href="#" class="pf-v6-c-nav__link">
1267
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1268
+ </a>
1285
1269
  </li>
1286
1270
  <li class="pf-v6-c-nav__item">
1287
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1271
+ <a href="#" class="pf-v6-c-nav__link">
1272
+ <span class="pf-v6-c-nav__link-text">Server</span>
1273
+ </a>
1288
1274
  </li>
1289
1275
  </ul>
1290
1276
  </nav>
1291
1277
  </div>
1292
1278
  </div>
1293
- <main
1294
- class="pf-v6-c-page__main"
1295
- tabindex="-1"
1296
- id="main-content-modal-large-example"
1297
- >
1298
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1299
- <div class="pf-v6-c-page__main-body">
1300
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1301
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1302
- <li class="pf-v6-c-breadcrumb__item">
1303
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1304
- </li>
1305
- <li class="pf-v6-c-breadcrumb__item">
1306
- <span class="pf-v6-c-breadcrumb__item-divider">
1307
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1308
- </span>
1279
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1280
+ <main
1281
+ class="pf-v6-c-page__main"
1282
+ tabindex="-1"
1283
+ id="main-content-modal-large-example"
1284
+ >
1285
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1286
+ <div class="pf-v6-c-page__main-body">
1287
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1288
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1289
+ <li class="pf-v6-c-breadcrumb__item">
1290
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1291
+ </li>
1292
+ <li class="pf-v6-c-breadcrumb__item">
1293
+ <span class="pf-v6-c-breadcrumb__item-divider">
1294
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1295
+ </span>
1309
1296
 
1310
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1311
- </li>
1312
- <li class="pf-v6-c-breadcrumb__item">
1313
- <span class="pf-v6-c-breadcrumb__item-divider">
1314
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1315
- </span>
1297
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1298
+ </li>
1299
+ <li class="pf-v6-c-breadcrumb__item">
1300
+ <span class="pf-v6-c-breadcrumb__item-divider">
1301
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1302
+ </span>
1316
1303
 
1317
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1318
- </li>
1319
- <li class="pf-v6-c-breadcrumb__item">
1320
- <span class="pf-v6-c-breadcrumb__item-divider">
1321
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1322
- </span>
1304
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1305
+ </li>
1306
+ <li class="pf-v6-c-breadcrumb__item">
1307
+ <span class="pf-v6-c-breadcrumb__item-divider">
1308
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1309
+ </span>
1323
1310
 
1324
- <a
1325
- href="#"
1326
- class="pf-v6-c-breadcrumb__link pf-m-current"
1327
- aria-current="page"
1328
- >Section landing</a>
1329
- </li>
1330
- </ol>
1331
- </nav>
1332
- </div>
1333
- </section>
1334
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1335
- <div class="pf-v6-c-page__main-body">
1336
- <div class="pf-v6-c-content">
1337
- <h1>Main title</h1>
1338
- <p>This is a full page demo.</p>
1311
+ <a
1312
+ href="#"
1313
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1314
+ aria-current="page"
1315
+ >Section landing</a>
1316
+ </li>
1317
+ </ol>
1318
+ </nav>
1339
1319
  </div>
1340
- </div>
1341
- </section>
1342
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1343
- <div class="pf-v6-c-page__main-body">
1344
- <div class="pf-v6-l-gallery pf-m-gutter">
1345
- <div class="pf-v6-c-card">
1346
- <div class="pf-v6-c-card__body">This is a card</div>
1347
- </div>
1348
- <div class="pf-v6-c-card">
1349
- <div class="pf-v6-c-card__body">This is a card</div>
1350
- </div>
1351
- <div class="pf-v6-c-card">
1352
- <div class="pf-v6-c-card__body">This is a card</div>
1353
- </div>
1354
- <div class="pf-v6-c-card">
1355
- <div class="pf-v6-c-card__body">This is a card</div>
1320
+ </section>
1321
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1322
+ <div class="pf-v6-c-page__main-body">
1323
+ <div class="pf-v6-c-content">
1324
+ <h1>Main title</h1>
1325
+ <p>This is a full page demo.</p>
1356
1326
  </div>
1357
- <div class="pf-v6-c-card">
1358
- <div class="pf-v6-c-card__body">This is a card</div>
1359
- </div>
1360
- <div class="pf-v6-c-card">
1361
- <div class="pf-v6-c-card__body">This is a card</div>
1362
- </div>
1363
- <div class="pf-v6-c-card">
1364
- <div class="pf-v6-c-card__body">This is a card</div>
1365
- </div>
1366
- <div class="pf-v6-c-card">
1367
- <div class="pf-v6-c-card__body">This is a card</div>
1368
- </div>
1369
- <div class="pf-v6-c-card">
1370
- <div class="pf-v6-c-card__body">This is a card</div>
1371
- </div>
1372
- <div class="pf-v6-c-card">
1373
- <div class="pf-v6-c-card__body">This is a card</div>
1327
+ </div>
1328
+ </section>
1329
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1330
+ <div class="pf-v6-c-page__main-body">
1331
+ <div class="pf-v6-l-gallery pf-m-gutter">
1332
+ <div class="pf-v6-c-card">
1333
+ <div class="pf-v6-c-card__body">This is a card</div>
1334
+ </div>
1335
+ <div class="pf-v6-c-card">
1336
+ <div class="pf-v6-c-card__body">This is a card</div>
1337
+ </div>
1338
+ <div class="pf-v6-c-card">
1339
+ <div class="pf-v6-c-card__body">This is a card</div>
1340
+ </div>
1341
+ <div class="pf-v6-c-card">
1342
+ <div class="pf-v6-c-card__body">This is a card</div>
1343
+ </div>
1344
+ <div class="pf-v6-c-card">
1345
+ <div class="pf-v6-c-card__body">This is a card</div>
1346
+ </div>
1347
+ <div class="pf-v6-c-card">
1348
+ <div class="pf-v6-c-card__body">This is a card</div>
1349
+ </div>
1350
+ <div class="pf-v6-c-card">
1351
+ <div class="pf-v6-c-card__body">This is a card</div>
1352
+ </div>
1353
+ <div class="pf-v6-c-card">
1354
+ <div class="pf-v6-c-card__body">This is a card</div>
1355
+ </div>
1356
+ <div class="pf-v6-c-card">
1357
+ <div class="pf-v6-c-card__body">This is a card</div>
1358
+ </div>
1359
+ <div class="pf-v6-c-card">
1360
+ <div class="pf-v6-c-card__body">This is a card</div>
1361
+ </div>
1374
1362
  </div>
1375
1363
  </div>
1376
- </div>
1377
- </section>
1378
- </main>
1364
+ </section>
1365
+ </main>
1366
+ </div>
1379
1367
  </div>
1380
1368
  <div class="pf-v6-c-backdrop">
1381
1369
  <div class="pf-v6-l-bullseye">
@@ -1392,24 +1380,32 @@ section: components
1392
1380
  type="button"
1393
1381
  aria-label="Close"
1394
1382
  >
1395
- <i class="fas fa-times" aria-hidden="true"></i>
1383
+ <span class="pf-v6-c-button__icon">
1384
+ <i class="fas fa-times" aria-hidden="true"></i>
1385
+ </span>
1396
1386
  </button>
1397
1387
  </div>
1398
1388
  <header class="pf-v6-c-modal-box__header">
1399
- <h1
1400
- class="pf-v6-c-modal-box__title"
1401
- id="modal-lg-title"
1402
- >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
1389
+ <div class="pf-v6-c-modal-box__header-main">
1390
+ <h1
1391
+ class="pf-v6-c-modal-box__title"
1392
+ id="modal-lg-title"
1393
+ >This is a long header title that will truncate because modal titles should be very short. Use the modal body to provide more info.</h1>
1394
+ </div>
1403
1395
  </header>
1404
1396
  <div class="pf-v6-c-modal-box__body">
1405
1397
  <p
1406
1398
  id="modal-lg-description"
1407
- >The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-v5-c-modal-box__body"</p>
1399
+ >The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-v6-c-modal-box__body"</p>
1408
1400
  <p>Form here</p>
1409
1401
  </div>
1410
1402
  <footer class="pf-v6-c-modal-box__footer">
1411
- <button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
1412
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1403
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1404
+ <span class="pf-v6-c-button__text">Save</span>
1405
+ </button>
1406
+ <button class="pf-v6-c-button pf-m-link" type="button">
1407
+ <span class="pf-v6-c-button__text">Cancel</span>
1408
+ </button>
1413
1409
  </footer>
1414
1410
  </div>
1415
1411
  </div>
@@ -1425,91 +1421,99 @@ section: components
1425
1421
  <a
1426
1422
  class="pf-v6-c-button pf-m-primary"
1427
1423
  href="#main-content-modal-large-example"
1428
- >Skip to content</a>
1424
+ >
1425
+ <span class="pf-v6-c-button__text">Skip to content</span>
1426
+ </a>
1429
1427
  </div>
1430
1428
  <header class="pf-v6-c-masthead" id="modal-large-example-masthead">
1431
- <span class="pf-v6-c-masthead__toggle">
1432
- <button
1433
- class="pf-v6-c-button pf-m-plain"
1434
- type="button"
1435
- aria-label="Global navigation"
1436
- >
1437
- <i class="fas fa-bars" aria-hidden="true"></i>
1438
- </button>
1439
- </span>
1440
1429
  <div class="pf-v6-c-masthead__main">
1441
- <a class="pf-v6-c-masthead__brand" href="#">
1442
- <svg height="40px" viewBox="0 0 679 158">
1443
- <title>PF-HorizontalLogo-Color</title>
1444
- <defs>
1445
- <linearGradient
1446
- x1="68%"
1447
- y1="2.25860997e-13%"
1448
- x2="32%"
1449
- y2="100%"
1450
- id="linearGradient-modal-large-example-masthead"
1451
- >
1452
- <stop stop-color="#2B9AF3" offset="0%" />
1453
- <stop
1454
- stop-color="#73BCF7"
1455
- stop-opacity="0.502212631"
1456
- offset="100%"
1457
- />
1458
- </linearGradient>
1459
- </defs>
1460
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1461
- <g
1462
- transform="translate(206.000000, 45.750000)"
1463
- fill="var(--pf-t--global--text--color--regular)"
1464
- fill-rule="nonzero"
1465
- >
1466
- <path
1467
- 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"
1468
- />
1469
- <path
1470
- 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"
1471
- />
1472
- <path
1473
- 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"
1474
- />
1475
- <path
1476
- 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"
1477
- />
1478
- <path
1479
- 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"
1480
- />
1481
- <path
1482
- 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"
1483
- />
1484
- <path
1485
- 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"
1486
- />
1487
- <polygon
1488
- 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"
1489
- />
1490
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1491
- <path
1492
- 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"
1493
- />
1494
- </g>
1495
- <g transform="translate(0.000000, 0.000000)">
1496
- <path
1497
- 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"
1498
- fill="#0066CC"
1499
- />
1500
- <path
1501
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1502
- fill="url(#linearGradient-modal-large-example-masthead)"
1503
- />
1504
- <path
1505
- 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"
1506
- fill="url(#linearGradient-modal-large-example-masthead)"
1507
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1508
- />
1430
+ <span class="pf-v6-c-masthead__toggle">
1431
+ <button
1432
+ class="pf-v6-c-button pf-m-plain"
1433
+ type="button"
1434
+ aria-label="Global navigation"
1435
+ >
1436
+ <span class="pf-v6-c-button__icon">
1437
+ <i class="fas fa-bars" aria-hidden="true"></i>
1438
+ </span>
1439
+ </button>
1440
+ </span>
1441
+ <div class="pf-v6-c-masthead__brand">
1442
+ <a class="pf-v6-c-masthead__logo" href="#">
1443
+ <svg height="37px" viewBox="0 0 679 158">
1444
+ <title>PF-HorizontalLogo-Color</title>
1445
+ <defs>
1446
+ <linearGradient
1447
+ x1="68%"
1448
+ y1="2.25860997e-13%"
1449
+ x2="32%"
1450
+ y2="100%"
1451
+ id="linearGradient-modal-large-example-masthead"
1452
+ >
1453
+ <stop stop-color="#2B9AF3" offset="0%" />
1454
+ <stop
1455
+ stop-color="#73BCF7"
1456
+ stop-opacity="0.502212631"
1457
+ offset="100%"
1458
+ />
1459
+ </linearGradient>
1460
+ </defs>
1461
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1462
+ <g
1463
+ transform="translate(206.000000, 45.750000)"
1464
+ fill="var(--pf-t--global--text--color--regular)"
1465
+ fill-rule="nonzero"
1466
+ >
1467
+ <path
1468
+ 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"
1469
+ />
1470
+ <path
1471
+ 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"
1472
+ />
1473
+ <path
1474
+ 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"
1475
+ />
1476
+ <path
1477
+ 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"
1478
+ />
1479
+ <path
1480
+ 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"
1481
+ />
1482
+ <path
1483
+ 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"
1484
+ />
1485
+ <path
1486
+ 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"
1487
+ />
1488
+ <polygon
1489
+ 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"
1490
+ />
1491
+ <polygon
1492
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1493
+ />
1494
+ <path
1495
+ 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"
1496
+ />
1497
+ </g>
1498
+ <g transform="translate(0.000000, 0.000000)">
1499
+ <path
1500
+ 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"
1501
+ fill="#0066CC"
1502
+ />
1503
+ <path
1504
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1505
+ fill="url(#linearGradient-modal-large-example-masthead)"
1506
+ />
1507
+ <path
1508
+ 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"
1509
+ fill="url(#linearGradient-modal-large-example-masthead)"
1510
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1511
+ />
1512
+ </g>
1509
1513
  </g>
1510
- </g>
1511
- </svg>
1512
- </a>
1514
+ </svg>
1515
+ </a>
1516
+ </div>
1513
1517
  </div>
1514
1518
  <div class="pf-v6-c-masthead__content">
1515
1519
  <div
@@ -1518,41 +1522,11 @@ section: components
1518
1522
  >
1519
1523
  <div class="pf-v6-c-toolbar__content">
1520
1524
  <div class="pf-v6-c-toolbar__content-section">
1521
- <div class="pf-v6-c-toolbar__item">
1522
- <button
1523
- class="pf-v6-c-menu-toggle"
1524
- type="button"
1525
- aria-expanded="false"
1526
- >
1527
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1528
- <span class="pf-v6-c-menu-toggle__controls">
1529
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1530
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1531
- </span>
1532
- </span>
1533
- </button>
1534
- </div>
1535
-
1536
- <div class="pf-v6-c-toolbar__item">
1537
- <button
1538
- class="pf-v6-c-menu-toggle"
1539
- type="button"
1540
- aria-expanded="false"
1541
- >
1542
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1543
- <span class="pf-v6-c-menu-toggle__controls">
1544
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1545
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1546
- </span>
1547
- </span>
1548
- </button>
1549
- </div>
1550
-
1551
1525
  <div
1552
- 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"
1526
+ 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"
1553
1527
  >
1554
1528
  <div
1555
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1529
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1556
1530
  >
1557
1531
  <div class="pf-v6-c-toolbar__item">
1558
1532
  <button
@@ -1591,6 +1565,7 @@ section: components
1591
1565
  </button>
1592
1566
  </div>
1593
1567
  </div>
1568
+
1594
1569
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1595
1570
  <button
1596
1571
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1618,114 +1593,126 @@ section: components
1618
1593
  >
1619
1594
  <ul class="pf-v6-c-nav__list" role="list">
1620
1595
  <li class="pf-v6-c-nav__item">
1621
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1596
+ <a href="#" class="pf-v6-c-nav__link">
1597
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1598
+ </a>
1622
1599
  </li>
1623
1600
  <li class="pf-v6-c-nav__item">
1624
1601
  <a
1625
1602
  href="#"
1626
1603
  class="pf-v6-c-nav__link pf-m-current"
1627
1604
  aria-current="page"
1628
- >Policy</a>
1605
+ >
1606
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1607
+ </a>
1629
1608
  </li>
1630
1609
  <li class="pf-v6-c-nav__item">
1631
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1610
+ <a href="#" class="pf-v6-c-nav__link">
1611
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1612
+ </a>
1632
1613
  </li>
1633
1614
  <li class="pf-v6-c-nav__item">
1634
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1615
+ <a href="#" class="pf-v6-c-nav__link">
1616
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1617
+ </a>
1635
1618
  </li>
1636
1619
  <li class="pf-v6-c-nav__item">
1637
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1620
+ <a href="#" class="pf-v6-c-nav__link">
1621
+ <span class="pf-v6-c-nav__link-text">Server</span>
1622
+ </a>
1638
1623
  </li>
1639
1624
  </ul>
1640
1625
  </nav>
1641
1626
  </div>
1642
1627
  </div>
1643
- <main
1644
- class="pf-v6-c-page__main"
1645
- tabindex="-1"
1646
- id="main-content-modal-large-example"
1647
- >
1648
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1649
- <div class="pf-v6-c-page__main-body">
1650
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1651
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1652
- <li class="pf-v6-c-breadcrumb__item">
1653
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1654
- </li>
1655
- <li class="pf-v6-c-breadcrumb__item">
1656
- <span class="pf-v6-c-breadcrumb__item-divider">
1657
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1658
- </span>
1628
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1629
+ <main
1630
+ class="pf-v6-c-page__main"
1631
+ tabindex="-1"
1632
+ id="main-content-modal-large-example"
1633
+ >
1634
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1635
+ <div class="pf-v6-c-page__main-body">
1636
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1637
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1638
+ <li class="pf-v6-c-breadcrumb__item">
1639
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1640
+ </li>
1641
+ <li class="pf-v6-c-breadcrumb__item">
1642
+ <span class="pf-v6-c-breadcrumb__item-divider">
1643
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1644
+ </span>
1659
1645
 
1660
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1661
- </li>
1662
- <li class="pf-v6-c-breadcrumb__item">
1663
- <span class="pf-v6-c-breadcrumb__item-divider">
1664
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1665
- </span>
1646
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1647
+ </li>
1648
+ <li class="pf-v6-c-breadcrumb__item">
1649
+ <span class="pf-v6-c-breadcrumb__item-divider">
1650
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1651
+ </span>
1666
1652
 
1667
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1668
- </li>
1669
- <li class="pf-v6-c-breadcrumb__item">
1670
- <span class="pf-v6-c-breadcrumb__item-divider">
1671
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1672
- </span>
1653
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1654
+ </li>
1655
+ <li class="pf-v6-c-breadcrumb__item">
1656
+ <span class="pf-v6-c-breadcrumb__item-divider">
1657
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1658
+ </span>
1673
1659
 
1674
- <a
1675
- href="#"
1676
- class="pf-v6-c-breadcrumb__link pf-m-current"
1677
- aria-current="page"
1678
- >Section landing</a>
1679
- </li>
1680
- </ol>
1681
- </nav>
1682
- </div>
1683
- </section>
1684
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1685
- <div class="pf-v6-c-page__main-body">
1686
- <div class="pf-v6-c-content">
1687
- <h1>Main title</h1>
1688
- <p>This is a full page demo.</p>
1660
+ <a
1661
+ href="#"
1662
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1663
+ aria-current="page"
1664
+ >Section landing</a>
1665
+ </li>
1666
+ </ol>
1667
+ </nav>
1689
1668
  </div>
1690
- </div>
1691
- </section>
1692
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1693
- <div class="pf-v6-c-page__main-body">
1694
- <div class="pf-v6-l-gallery pf-m-gutter">
1695
- <div class="pf-v6-c-card">
1696
- <div class="pf-v6-c-card__body">This is a card</div>
1697
- </div>
1698
- <div class="pf-v6-c-card">
1699
- <div class="pf-v6-c-card__body">This is a card</div>
1700
- </div>
1701
- <div class="pf-v6-c-card">
1702
- <div class="pf-v6-c-card__body">This is a card</div>
1703
- </div>
1704
- <div class="pf-v6-c-card">
1705
- <div class="pf-v6-c-card__body">This is a card</div>
1706
- </div>
1707
- <div class="pf-v6-c-card">
1708
- <div class="pf-v6-c-card__body">This is a card</div>
1709
- </div>
1710
- <div class="pf-v6-c-card">
1711
- <div class="pf-v6-c-card__body">This is a card</div>
1712
- </div>
1713
- <div class="pf-v6-c-card">
1714
- <div class="pf-v6-c-card__body">This is a card</div>
1669
+ </section>
1670
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1671
+ <div class="pf-v6-c-page__main-body">
1672
+ <div class="pf-v6-c-content">
1673
+ <h1>Main title</h1>
1674
+ <p>This is a full page demo.</p>
1715
1675
  </div>
1716
- <div class="pf-v6-c-card">
1717
- <div class="pf-v6-c-card__body">This is a card</div>
1718
- </div>
1719
- <div class="pf-v6-c-card">
1720
- <div class="pf-v6-c-card__body">This is a card</div>
1721
- </div>
1722
- <div class="pf-v6-c-card">
1723
- <div class="pf-v6-c-card__body">This is a card</div>
1676
+ </div>
1677
+ </section>
1678
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1679
+ <div class="pf-v6-c-page__main-body">
1680
+ <div class="pf-v6-l-gallery pf-m-gutter">
1681
+ <div class="pf-v6-c-card">
1682
+ <div class="pf-v6-c-card__body">This is a card</div>
1683
+ </div>
1684
+ <div class="pf-v6-c-card">
1685
+ <div class="pf-v6-c-card__body">This is a card</div>
1686
+ </div>
1687
+ <div class="pf-v6-c-card">
1688
+ <div class="pf-v6-c-card__body">This is a card</div>
1689
+ </div>
1690
+ <div class="pf-v6-c-card">
1691
+ <div class="pf-v6-c-card__body">This is a card</div>
1692
+ </div>
1693
+ <div class="pf-v6-c-card">
1694
+ <div class="pf-v6-c-card__body">This is a card</div>
1695
+ </div>
1696
+ <div class="pf-v6-c-card">
1697
+ <div class="pf-v6-c-card__body">This is a card</div>
1698
+ </div>
1699
+ <div class="pf-v6-c-card">
1700
+ <div class="pf-v6-c-card__body">This is a card</div>
1701
+ </div>
1702
+ <div class="pf-v6-c-card">
1703
+ <div class="pf-v6-c-card__body">This is a card</div>
1704
+ </div>
1705
+ <div class="pf-v6-c-card">
1706
+ <div class="pf-v6-c-card__body">This is a card</div>
1707
+ </div>
1708
+ <div class="pf-v6-c-card">
1709
+ <div class="pf-v6-c-card__body">This is a card</div>
1710
+ </div>
1724
1711
  </div>
1725
1712
  </div>
1726
- </div>
1727
- </section>
1728
- </main>
1713
+ </section>
1714
+ </main>
1715
+ </div>
1729
1716
  </div>
1730
1717
  <div class="pf-v6-c-backdrop">
1731
1718
  <div class="pf-v6-l-bullseye">
@@ -1742,24 +1729,32 @@ section: components
1742
1729
  type="button"
1743
1730
  aria-label="Close"
1744
1731
  >
1745
- <i class="fas fa-times" aria-hidden="true"></i>
1732
+ <span class="pf-v6-c-button__icon">
1733
+ <i class="fas fa-times" aria-hidden="true"></i>
1734
+ </span>
1746
1735
  </button>
1747
1736
  </div>
1748
1737
  <header class="pf-v6-c-modal-box__header">
1749
- <h1
1750
- class="pf-v6-c-modal-box__title"
1751
- id="modal-top-aligned-title"
1752
- >Modal header</h1>
1738
+ <div class="pf-v6-c-modal-box__header-main">
1739
+ <h1
1740
+ class="pf-v6-c-modal-box__title"
1741
+ id="modal-top-aligned-title"
1742
+ >Modal header</h1>
1743
+ </div>
1753
1744
  </header>
1754
1745
  <div class="pf-v6-c-modal-box__body">
1755
1746
  <p
1756
1747
  id="modal-top-aligned-description"
1757
- >The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-v5-c-modal-box__body"</p>
1748
+ >The "aria-describedby" attribute can be applied to any text that adequately describes the modal's purpose. It does not have to be assigned to ".pf-v6-c-modal-box__body"</p>
1758
1749
  <p>Form here</p>
1759
1750
  </div>
1760
1751
  <footer class="pf-v6-c-modal-box__footer">
1761
- <button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
1762
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
1752
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1753
+ <span class="pf-v6-c-button__text">Save</span>
1754
+ </button>
1755
+ <button class="pf-v6-c-button pf-m-link" type="button">
1756
+ <span class="pf-v6-c-button__text">Cancel</span>
1757
+ </button>
1763
1758
  </footer>
1764
1759
  </div>
1765
1760
  </div>
@@ -1775,91 +1770,99 @@ section: components
1775
1770
  <a
1776
1771
  class="pf-v6-c-button pf-m-primary"
1777
1772
  href="#main-content-modal-with-form-example"
1778
- >Skip to content</a>
1773
+ >
1774
+ <span class="pf-v6-c-button__text">Skip to content</span>
1775
+ </a>
1779
1776
  </div>
1780
1777
  <header class="pf-v6-c-masthead" id="modal-with-form-example-masthead">
1781
- <span class="pf-v6-c-masthead__toggle">
1782
- <button
1783
- class="pf-v6-c-button pf-m-plain"
1784
- type="button"
1785
- aria-label="Global navigation"
1786
- >
1787
- <i class="fas fa-bars" aria-hidden="true"></i>
1788
- </button>
1789
- </span>
1790
1778
  <div class="pf-v6-c-masthead__main">
1791
- <a class="pf-v6-c-masthead__brand" href="#">
1792
- <svg height="40px" viewBox="0 0 679 158">
1793
- <title>PF-HorizontalLogo-Color</title>
1794
- <defs>
1795
- <linearGradient
1796
- x1="68%"
1797
- y1="2.25860997e-13%"
1798
- x2="32%"
1799
- y2="100%"
1800
- id="linearGradient-modal-with-form-example-masthead"
1801
- >
1802
- <stop stop-color="#2B9AF3" offset="0%" />
1803
- <stop
1804
- stop-color="#73BCF7"
1805
- stop-opacity="0.502212631"
1806
- offset="100%"
1807
- />
1808
- </linearGradient>
1809
- </defs>
1810
- <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1811
- <g
1812
- transform="translate(206.000000, 45.750000)"
1813
- fill="var(--pf-t--global--text--color--regular)"
1814
- fill-rule="nonzero"
1815
- >
1816
- <path
1817
- 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"
1818
- />
1819
- <path
1820
- 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"
1821
- />
1822
- <path
1823
- 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"
1824
- />
1825
- <path
1826
- 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"
1827
- />
1828
- <path
1829
- 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"
1830
- />
1831
- <path
1832
- 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"
1833
- />
1834
- <path
1835
- 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"
1836
- />
1837
- <polygon
1838
- 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"
1839
- />
1840
- <polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25" />
1841
- <path
1842
- 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"
1843
- />
1844
- </g>
1845
- <g transform="translate(0.000000, 0.000000)">
1846
- <path
1847
- 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"
1848
- fill="#0066CC"
1849
- />
1850
- <path
1851
- d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1852
- fill="url(#linearGradient-modal-with-form-example-masthead)"
1853
- />
1854
- <path
1855
- 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"
1856
- fill="url(#linearGradient-modal-with-form-example-masthead)"
1857
- transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1858
- />
1779
+ <span class="pf-v6-c-masthead__toggle">
1780
+ <button
1781
+ class="pf-v6-c-button pf-m-plain"
1782
+ type="button"
1783
+ aria-label="Global navigation"
1784
+ >
1785
+ <span class="pf-v6-c-button__icon">
1786
+ <i class="fas fa-bars" aria-hidden="true"></i>
1787
+ </span>
1788
+ </button>
1789
+ </span>
1790
+ <div class="pf-v6-c-masthead__brand">
1791
+ <a class="pf-v6-c-masthead__logo" href="#">
1792
+ <svg height="37px" viewBox="0 0 679 158">
1793
+ <title>PF-HorizontalLogo-Color</title>
1794
+ <defs>
1795
+ <linearGradient
1796
+ x1="68%"
1797
+ y1="2.25860997e-13%"
1798
+ x2="32%"
1799
+ y2="100%"
1800
+ id="linearGradient-modal-with-form-example-masthead"
1801
+ >
1802
+ <stop stop-color="#2B9AF3" offset="0%" />
1803
+ <stop
1804
+ stop-color="#73BCF7"
1805
+ stop-opacity="0.502212631"
1806
+ offset="100%"
1807
+ />
1808
+ </linearGradient>
1809
+ </defs>
1810
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
1811
+ <g
1812
+ transform="translate(206.000000, 45.750000)"
1813
+ fill="var(--pf-t--global--text--color--regular)"
1814
+ fill-rule="nonzero"
1815
+ >
1816
+ <path
1817
+ 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"
1818
+ />
1819
+ <path
1820
+ 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"
1821
+ />
1822
+ <path
1823
+ 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"
1824
+ />
1825
+ <path
1826
+ 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"
1827
+ />
1828
+ <path
1829
+ 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"
1830
+ />
1831
+ <path
1832
+ 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"
1833
+ />
1834
+ <path
1835
+ 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"
1836
+ />
1837
+ <polygon
1838
+ 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"
1839
+ />
1840
+ <polygon
1841
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
1842
+ />
1843
+ <path
1844
+ 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"
1845
+ />
1846
+ </g>
1847
+ <g transform="translate(0.000000, 0.000000)">
1848
+ <path
1849
+ 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"
1850
+ fill="#0066CC"
1851
+ />
1852
+ <path
1853
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
1854
+ fill="url(#linearGradient-modal-with-form-example-masthead)"
1855
+ />
1856
+ <path
1857
+ 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"
1858
+ fill="url(#linearGradient-modal-with-form-example-masthead)"
1859
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
1860
+ />
1861
+ </g>
1859
1862
  </g>
1860
- </g>
1861
- </svg>
1862
- </a>
1863
+ </svg>
1864
+ </a>
1865
+ </div>
1863
1866
  </div>
1864
1867
  <div class="pf-v6-c-masthead__content">
1865
1868
  <div
@@ -1868,41 +1871,11 @@ section: components
1868
1871
  >
1869
1872
  <div class="pf-v6-c-toolbar__content">
1870
1873
  <div class="pf-v6-c-toolbar__content-section">
1871
- <div class="pf-v6-c-toolbar__item">
1872
- <button
1873
- class="pf-v6-c-menu-toggle"
1874
- type="button"
1875
- aria-expanded="false"
1876
- >
1877
- <span class="pf-v6-c-menu-toggle__text">Overview</span>
1878
- <span class="pf-v6-c-menu-toggle__controls">
1879
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1880
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1881
- </span>
1882
- </span>
1883
- </button>
1884
- </div>
1885
-
1886
- <div class="pf-v6-c-toolbar__item">
1887
- <button
1888
- class="pf-v6-c-menu-toggle"
1889
- type="button"
1890
- aria-expanded="false"
1891
- >
1892
- <span class="pf-v6-c-menu-toggle__text">Services</span>
1893
- <span class="pf-v6-c-menu-toggle__controls">
1894
- <span class="pf-v6-c-menu-toggle__toggle-icon">
1895
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1896
- </span>
1897
- </span>
1898
- </button>
1899
- </div>
1900
-
1901
1874
  <div
1902
- 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"
1875
+ 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"
1903
1876
  >
1904
1877
  <div
1905
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
1878
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
1906
1879
  >
1907
1880
  <div class="pf-v6-c-toolbar__item">
1908
1881
  <button
@@ -1941,6 +1914,7 @@ section: components
1941
1914
  </button>
1942
1915
  </div>
1943
1916
  </div>
1917
+
1944
1918
  <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
1945
1919
  <button
1946
1920
  class="pf-v6-c-menu-toggle pf-m-plain"
@@ -1968,114 +1942,126 @@ section: components
1968
1942
  >
1969
1943
  <ul class="pf-v6-c-nav__list" role="list">
1970
1944
  <li class="pf-v6-c-nav__item">
1971
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
1945
+ <a href="#" class="pf-v6-c-nav__link">
1946
+ <span class="pf-v6-c-nav__link-text">System panel</span>
1947
+ </a>
1972
1948
  </li>
1973
1949
  <li class="pf-v6-c-nav__item">
1974
1950
  <a
1975
1951
  href="#"
1976
1952
  class="pf-v6-c-nav__link pf-m-current"
1977
1953
  aria-current="page"
1978
- >Policy</a>
1954
+ >
1955
+ <span class="pf-v6-c-nav__link-text">Policy</span>
1956
+ </a>
1979
1957
  </li>
1980
1958
  <li class="pf-v6-c-nav__item">
1981
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
1959
+ <a href="#" class="pf-v6-c-nav__link">
1960
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
1961
+ </a>
1982
1962
  </li>
1983
1963
  <li class="pf-v6-c-nav__item">
1984
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
1964
+ <a href="#" class="pf-v6-c-nav__link">
1965
+ <span class="pf-v6-c-nav__link-text">Network services</span>
1966
+ </a>
1985
1967
  </li>
1986
1968
  <li class="pf-v6-c-nav__item">
1987
- <a href="#" class="pf-v6-c-nav__link">Server</a>
1969
+ <a href="#" class="pf-v6-c-nav__link">
1970
+ <span class="pf-v6-c-nav__link-text">Server</span>
1971
+ </a>
1988
1972
  </li>
1989
1973
  </ul>
1990
1974
  </nav>
1991
1975
  </div>
1992
1976
  </div>
1993
- <main
1994
- class="pf-v6-c-page__main"
1995
- tabindex="-1"
1996
- id="main-content-modal-with-form-example"
1997
- >
1998
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1999
- <div class="pf-v6-c-page__main-body">
2000
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2001
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2002
- <li class="pf-v6-c-breadcrumb__item">
2003
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2004
- </li>
2005
- <li class="pf-v6-c-breadcrumb__item">
2006
- <span class="pf-v6-c-breadcrumb__item-divider">
2007
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2008
- </span>
1977
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1978
+ <main
1979
+ class="pf-v6-c-page__main"
1980
+ tabindex="-1"
1981
+ id="main-content-modal-with-form-example"
1982
+ >
1983
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1984
+ <div class="pf-v6-c-page__main-body">
1985
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1986
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1987
+ <li class="pf-v6-c-breadcrumb__item">
1988
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1989
+ </li>
1990
+ <li class="pf-v6-c-breadcrumb__item">
1991
+ <span class="pf-v6-c-breadcrumb__item-divider">
1992
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1993
+ </span>
2009
1994
 
2010
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2011
- </li>
2012
- <li class="pf-v6-c-breadcrumb__item">
2013
- <span class="pf-v6-c-breadcrumb__item-divider">
2014
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2015
- </span>
1995
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1996
+ </li>
1997
+ <li class="pf-v6-c-breadcrumb__item">
1998
+ <span class="pf-v6-c-breadcrumb__item-divider">
1999
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2000
+ </span>
2016
2001
 
2017
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2018
- </li>
2019
- <li class="pf-v6-c-breadcrumb__item">
2020
- <span class="pf-v6-c-breadcrumb__item-divider">
2021
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2022
- </span>
2002
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2003
+ </li>
2004
+ <li class="pf-v6-c-breadcrumb__item">
2005
+ <span class="pf-v6-c-breadcrumb__item-divider">
2006
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2007
+ </span>
2023
2008
 
2024
- <a
2025
- href="#"
2026
- class="pf-v6-c-breadcrumb__link pf-m-current"
2027
- aria-current="page"
2028
- >Section landing</a>
2029
- </li>
2030
- </ol>
2031
- </nav>
2032
- </div>
2033
- </section>
2034
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2035
- <div class="pf-v6-c-page__main-body">
2036
- <div class="pf-v6-c-content">
2037
- <h1>Main title</h1>
2038
- <p>This is a full page demo.</p>
2009
+ <a
2010
+ href="#"
2011
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2012
+ aria-current="page"
2013
+ >Section landing</a>
2014
+ </li>
2015
+ </ol>
2016
+ </nav>
2039
2017
  </div>
2040
- </div>
2041
- </section>
2042
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2043
- <div class="pf-v6-c-page__main-body">
2044
- <div class="pf-v6-l-gallery pf-m-gutter">
2045
- <div class="pf-v6-c-card">
2046
- <div class="pf-v6-c-card__body">This is a card</div>
2047
- </div>
2048
- <div class="pf-v6-c-card">
2049
- <div class="pf-v6-c-card__body">This is a card</div>
2050
- </div>
2051
- <div class="pf-v6-c-card">
2052
- <div class="pf-v6-c-card__body">This is a card</div>
2018
+ </section>
2019
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2020
+ <div class="pf-v6-c-page__main-body">
2021
+ <div class="pf-v6-c-content">
2022
+ <h1>Main title</h1>
2023
+ <p>This is a full page demo.</p>
2053
2024
  </div>
2054
- <div class="pf-v6-c-card">
2055
- <div class="pf-v6-c-card__body">This is a card</div>
2056
- </div>
2057
- <div class="pf-v6-c-card">
2058
- <div class="pf-v6-c-card__body">This is a card</div>
2059
- </div>
2060
- <div class="pf-v6-c-card">
2061
- <div class="pf-v6-c-card__body">This is a card</div>
2062
- </div>
2063
- <div class="pf-v6-c-card">
2064
- <div class="pf-v6-c-card__body">This is a card</div>
2065
- </div>
2066
- <div class="pf-v6-c-card">
2067
- <div class="pf-v6-c-card__body">This is a card</div>
2068
- </div>
2069
- <div class="pf-v6-c-card">
2070
- <div class="pf-v6-c-card__body">This is a card</div>
2071
- </div>
2072
- <div class="pf-v6-c-card">
2073
- <div class="pf-v6-c-card__body">This is a card</div>
2025
+ </div>
2026
+ </section>
2027
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2028
+ <div class="pf-v6-c-page__main-body">
2029
+ <div class="pf-v6-l-gallery pf-m-gutter">
2030
+ <div class="pf-v6-c-card">
2031
+ <div class="pf-v6-c-card__body">This is a card</div>
2032
+ </div>
2033
+ <div class="pf-v6-c-card">
2034
+ <div class="pf-v6-c-card__body">This is a card</div>
2035
+ </div>
2036
+ <div class="pf-v6-c-card">
2037
+ <div class="pf-v6-c-card__body">This is a card</div>
2038
+ </div>
2039
+ <div class="pf-v6-c-card">
2040
+ <div class="pf-v6-c-card__body">This is a card</div>
2041
+ </div>
2042
+ <div class="pf-v6-c-card">
2043
+ <div class="pf-v6-c-card__body">This is a card</div>
2044
+ </div>
2045
+ <div class="pf-v6-c-card">
2046
+ <div class="pf-v6-c-card__body">This is a card</div>
2047
+ </div>
2048
+ <div class="pf-v6-c-card">
2049
+ <div class="pf-v6-c-card__body">This is a card</div>
2050
+ </div>
2051
+ <div class="pf-v6-c-card">
2052
+ <div class="pf-v6-c-card__body">This is a card</div>
2053
+ </div>
2054
+ <div class="pf-v6-c-card">
2055
+ <div class="pf-v6-c-card__body">This is a card</div>
2056
+ </div>
2057
+ <div class="pf-v6-c-card">
2058
+ <div class="pf-v6-c-card__body">This is a card</div>
2059
+ </div>
2074
2060
  </div>
2075
2061
  </div>
2076
- </div>
2077
- </section>
2078
- </main>
2062
+ </section>
2063
+ </main>
2064
+ </div>
2079
2065
  </div>
2080
2066
  <div class="pf-v6-c-backdrop">
2081
2067
  <div class="pf-v6-l-bullseye">
@@ -2092,11 +2078,15 @@ section: components
2092
2078
  type="button"
2093
2079
  aria-label="Close"
2094
2080
  >
2095
- <i class="fas fa-times" aria-hidden="true"></i>
2081
+ <span class="pf-v6-c-button__icon">
2082
+ <i class="fas fa-times" aria-hidden="true"></i>
2083
+ </span>
2096
2084
  </button>
2097
2085
  </div>
2098
2086
  <header class="pf-v6-c-modal-box__header">
2099
- <h1 class="pf-v6-c-modal-box__title" id="modal-title-">Create account</h1>
2087
+ <div class="pf-v6-c-modal-box__header-main">
2088
+ <h1 class="pf-v6-c-modal-box__title" id="modal-title-">Create account</h1>
2089
+ </div>
2100
2090
  </header>
2101
2091
  <div class="pf-v6-c-modal-box__body" id="modal-description-">
2102
2092
  <p>Enter your personal information below to create an account.</p>
@@ -2117,7 +2107,9 @@ section: components
2117
2107
  aria-label="More information for name field"
2118
2108
  aria-describedby="-form-name"
2119
2109
  >
2120
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2110
+ <span class="pf-v6-c-button__icon">
2111
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2112
+ </span>
2121
2113
  </span></span>
2122
2114
  </div>
2123
2115
  <div class="pf-v6-c-form__group-control">
@@ -2140,7 +2132,9 @@ section: components
2140
2132
  aria-label="More information for email field"
2141
2133
  aria-describedby="-form-email"
2142
2134
  >
2143
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2135
+ <span class="pf-v6-c-button__icon">
2136
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2137
+ </span>
2144
2138
  </span></span>
2145
2139
  </div>
2146
2140
  <div class="pf-v6-c-form__group-control">
@@ -2163,7 +2157,9 @@ section: components
2163
2157
  aria-label="More information for address field"
2164
2158
  aria-describedby="-form-address"
2165
2159
  >
2166
- <i class="fas fa-question-circle" aria-hidden="true"></i>
2160
+ <span class="pf-v6-c-button__icon">
2161
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
2162
+ </span>
2167
2163
  </span></span>
2168
2164
  </div>
2169
2165
  <div class="pf-v6-c-form__group-control">
@@ -2180,12 +2176,12 @@ section: components
2180
2176
  </form>
2181
2177
  </div>
2182
2178
  <footer class="pf-v6-c-modal-box__footer">
2183
- <button
2184
- class="pf-v6-c-button pf-m-primary"
2185
- type="button"
2186
- form="-form"
2187
- >Create</button>
2188
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
2179
+ <button class="pf-v6-c-button pf-m-primary" type="button" form="-form">
2180
+ <span class="pf-v6-c-button__text">Create</span>
2181
+ </button>
2182
+ <button class="pf-v6-c-button pf-m-link" type="button">
2183
+ <span class="pf-v6-c-button__text">Cancel</span>
2184
+ </button>
2189
2185
  </footer>
2190
2186
  </div>
2191
2187
  </div>