@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/components/Content/examples/Content.md CHANGED
@@ -1,75 +1,606 @@
1
1
  ---
2
- id: Text
2
+ id: Content
3
3
  section: components
4
4
  cssPrefix: pf-v6-c-content
5
5
  ---## Examples
6
6
 
7
7
  ### Basic
8
8
 
9
+ ```html
10
+ <h1 class="pf-v6-c-content--h1">Hello world</h1>
11
+ <p
12
+ class="pf-v6-c-content--p"
13
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
14
+ <h2 class="pf-v6-c-content--h2">Second level</h2>
15
+ <p class="pf-v6-c-content--p">
16
+ Curabitur accumsan turpis pharetra
17
+ <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
18
+ </p>
19
+ <ul class="pf-v6-c-content--ul">
20
+ <li
21
+ class="pf-v6-c-content--li"
22
+ >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
23
+ <li
24
+ class="pf-v6-c-content--li"
25
+ >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
26
+ <li class="pf-v6-c-content--li">
27
+ Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
28
+ <ul class="pf-v6-c-content--ul">
29
+ <li
30
+ class="pf-v6-c-content--li"
31
+ >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
32
+ <li
33
+ class="pf-v6-c-content--li"
34
+ >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
35
+ <li class="pf-v6-c-content--li">
36
+ Ut venenatis, nisl scelerisque.
37
+ <ol class="pf-v6-c-content--ol">
38
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
39
+ <li
40
+ class="pf-v6-c-content--li"
41
+ >Cras gravida arcu at diam gravida gravida.</li>
42
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
43
+ </ol>
44
+ </li>
45
+ </ul>
46
+ </li>
47
+ <li class="pf-v6-c-content--li">Ut non enim metus.</li>
48
+ </ul>
49
+ <h3 class="pf-v6-c-content--h3">Third level</h3>
50
+ <p class="pf-v6-c-content--p">
51
+ Quisque ante lacus, malesuada ac auctor vitae, congue
52
+ <a class="pf-v6-c-content--a" href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
53
+ </p>
54
+ <ol class="pf-v6-c-content--ol">
55
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
56
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
57
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
58
+ <li class="pf-v6-c-content--li">Donec a diam tellus.</li>
59
+ <li class="pf-v6-c-content--li">
60
+ Etiam auctor nisl et.
61
+ <ul class="pf-v6-c-content--ul">
62
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
63
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
64
+ <li class="pf-v6-c-content--li">
65
+ Integer in volutpat libero.
66
+ <ol class="pf-v6-c-content--ol">
67
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
68
+ <li
69
+ class="pf-v6-c-content--li"
70
+ >Cras gravida arcu at diam gravida gravida.</li>
71
+ </ol>
72
+ </li>
73
+ </ul>
74
+ </li>
75
+ <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
76
+ <li
77
+ class="pf-v6-c-content--li"
78
+ >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
79
+ <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
80
+ </ol>
81
+ <blockquote
82
+ class="pf-v6-c-content--blockquote"
83
+ >Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
84
+ <p class="pf-v6-c-content--p">
85
+ Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
86
+ <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
87
+ </p>
88
+ <hr class="pf-v6-c-content--hr" />
89
+ <h3 class="pf-v6-c-content--h3">Plain list example</h3>
90
+ <ol class="pf-v6-c-content--ol pf-m-plain">
91
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
92
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
93
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
94
+ <li class="pf-v6-c-content--li">Donec a diam tellus.</li>
95
+ <li class="pf-v6-c-content--li">
96
+ Etiam auctor nisl et.
97
+ <ul class="pf-v6-c-content--ul">
98
+ <li class="pf-v6-c-content--li">Regular list</li>
99
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
100
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
101
+ <li class="pf-v6-c-content--li">
102
+ Integer in volutpat libero.
103
+ <ol class="pf-v6-c-content--ol pf-m-plain">
104
+ <li class="pf-v6-c-content--li">Nested plain list</li>
105
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
106
+ <li
107
+ class="pf-v6-c-content--li"
108
+ >Cras gravida arcu at diam gravida gravida.</li>
109
+ </ol>
110
+ </li>
111
+ </ul>
112
+ </li>
113
+ <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
114
+ <li
115
+ class="pf-v6-c-content--li"
116
+ >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
117
+ <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
118
+ </ol>
119
+ <hr class="pf-v6-c-content--hr" />
120
+ <h3 class="pf-v6-c-content--h3">Visited link example</h3>
121
+ <p class="pf-v6-c-content--p">
122
+ <a class="pf-v6-c-content--a pf-m-plain" href>Visited link</a>
123
+ </p>
124
+ <hr class="pf-v6-c-content--hr" />
125
+ <p class="pf-v6-c-content--p">
126
+ Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum
127
+ commodo.
128
+ </p>
129
+ <dl class="pf-v6-c-content--dl">
130
+ <dt class="pf-v6-c-content--dt">Web</dt>
131
+ <dd
132
+ class="pf-v6-c-content--dd"
133
+ >The part of the internet that contains websites and web pages</dd>
134
+ <dt class="pf-v6-c-content--dt">HTML</dt>
135
+ <dd class="pf-v6-c-content--dd">A markup language for creating web pages</dd>
136
+ <dt class="pf-v6-c-content--dt">CSS</dt>
137
+ <dd class="pf-v6-c-content--dd">A technology to make HTML look better</dd>
138
+ </dl>
139
+ <p class="pf-v6-c-content--p">
140
+ Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla.
141
+ Nulla facilisi. Nullam ac erat ante.
142
+ </p>
143
+ <h4 class="pf-v6-c-content--h4">Fourth level</h4>
144
+ <p class="pf-v6-c-content--p">
145
+ Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum
146
+ ex efficitur.
147
+ </p>
148
+ <p class="pf-v6-c-content--p">
149
+ Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris
150
+ eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
151
+ </p>
152
+ <small
153
+ class="pf-v6-c-content--small"
154
+ >Sometimes you need small text to display things like date created</small>
155
+ <p class="pf-v6-c-content--p">
156
+ Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis
157
+ lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus,
158
+ mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex
159
+ sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum.
160
+ Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
161
+ </p>
162
+ <h5 class="pf-v6-c-content--h5">Fifth level</h5>
163
+ <p class="pf-v6-c-content--p">
164
+ Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet
165
+ ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend
166
+ justo. Nam et sollicitudin odio.
167
+ </p>
168
+ <h6 class="pf-v6-c-content--h6">Sixth level</h6>
169
+ <p class="pf-v6-c-content--p">
170
+ Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan.
171
+ Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis.
172
+ Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui,
173
+ sed varius sapien odio vitae est. Etiam at cursus metus.
174
+ </p>
175
+
176
+ ```
177
+
178
+ ### Plain HTML in content wrapper
179
+
9
180
  ```html
10
181
  <div class="pf-v6-c-content">
11
182
  <h1>Hello world</h1>
183
+ <p
184
+ class
185
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
186
+ <h2>Second level</h2>
187
+ <p>
188
+ Curabitur accumsan turpis pharetra
189
+ <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
190
+ </p>
191
+ <ul>
192
+ <li
193
+ class="pf-v6-c-content--li"
194
+ >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
195
+ <li
196
+ class="pf-v6-c-content--li"
197
+ >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
198
+ <li class="pf-v6-c-content--li">
199
+ Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
200
+ <ul class="pf-v6-c-content--ul">
201
+ <li
202
+ class="pf-v6-c-content--li"
203
+ >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
204
+ <li
205
+ class="pf-v6-c-content--li"
206
+ >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
207
+ <li class="pf-v6-c-content--li">
208
+ Ut venenatis, nisl scelerisque.
209
+ <ol class="pf-v6-c-content--ol">
210
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
211
+ <li
212
+ class="pf-v6-c-content--li"
213
+ >Cras gravida arcu at diam gravida gravida.</li>
214
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
215
+ </ol>
216
+ </li>
217
+ </ul>
218
+ </li>
219
+ <li class="pf-v6-c-content--li">Ut non enim metus.</li>
220
+ </ul>
221
+ <h3>Third level</h3>
222
+ <p>
223
+ Quisque ante lacus, malesuada ac auctor vitae, congue
224
+ <a class="pf-v6-c-content--a" href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
225
+ </p>
226
+ <ol>
227
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
228
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
229
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
230
+ <li class="pf-v6-c-content--li">Donec a diam tellus.</li>
231
+ <li class="pf-v6-c-content--li">
232
+ Etiam auctor nisl et.
233
+ <ul class="pf-v6-c-content--ul">
234
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
235
+ <li
236
+ class="pf-v6-c-content--li"
237
+ >Cras gravida arcu at diam gravida gravida.</li>
238
+ <li class="pf-v6-c-content--li">
239
+ Integer in volutpat libero.
240
+ <ol class="pf-v6-c-content--ol">
241
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
242
+ <li
243
+ class="pf-v6-c-content--li"
244
+ >Cras gravida arcu at diam gravida gravida.</li>
245
+ </ol>
246
+ </li>
247
+ </ul>
248
+ </li>
249
+ <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
250
+ <li
251
+ class="pf-v6-c-content--li"
252
+ >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
253
+ <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
254
+ </ol>
255
+ <blockquote
256
+ class
257
+ >Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
258
+ <p>
259
+ Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
260
+ <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
261
+ </p>
262
+ <hr />
263
+ <h3>Plain list example</h3>
264
+ <ol class="pf-m-plain">
265
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
266
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
267
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
268
+ <li class="pf-v6-c-content--li">Donec a diam tellus.</li>
269
+ <li class="pf-v6-c-content--li">
270
+ Etiam auctor nisl et.
271
+ <ul class="pf-v6-c-content--ul">
272
+ <li class="pf-v6-c-content--li">Regular list</li>
273
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
274
+ <li
275
+ class="pf-v6-c-content--li"
276
+ >Cras gravida arcu at diam gravida gravida.</li>
277
+ <li class="pf-v6-c-content--li">
278
+ Integer in volutpat libero.
279
+ <ol class="pf-v6-c-content--ol pf-m-plain">
280
+ <li class="pf-v6-c-content--li">Nested plain list</li>
281
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
282
+ <li
283
+ class="pf-v6-c-content--li"
284
+ >Cras gravida arcu at diam gravida gravida.</li>
285
+ </ol>
286
+ </li>
287
+ </ul>
288
+ </li>
289
+ <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
290
+ <li
291
+ class="pf-v6-c-content--li"
292
+ >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
293
+ <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
294
+ </ol>
295
+ <hr />
296
+ <h3>Visited link example</h3>
297
+ <p>
298
+ <a class="pf-v6-c-content--a pf-m-plain" href>Visited link</a>
299
+ </p>
300
+ <hr />
301
+ <p>
302
+ Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum
303
+ commodo.
304
+ </p>
305
+ <dl>
306
+ <dt class="pf-v6-c-content--dt">Web</dt>
307
+ <dd
308
+ class="pf-v6-c-content--dd"
309
+ >The part of the internet that contains websites and web pages</dd>
310
+ <dt class="pf-v6-c-content--dt">HTML</dt>
311
+ <dd class="pf-v6-c-content--dd">A markup language for creating web pages</dd>
312
+ <dt class="pf-v6-c-content--dt">CSS</dt>
313
+ <dd class="pf-v6-c-content--dd">A technology to make HTML look better</dd>
314
+ </dl>
12
315
  <p>
13
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius
14
- lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum
15
- mattis neque. Sub works as well!
316
+ Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla.
317
+ Nulla facilisi. Nullam ac erat ante.
16
318
  </p>
319
+ <h4>Fourth level</h4>
320
+ <p>
321
+ Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum
322
+ ex efficitur.
323
+ </p>
324
+ <p>
325
+ Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris
326
+ eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
327
+ </p>
328
+ <small>Sometimes you need small text to display things like date created</small>
329
+ <p>
330
+ Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis
331
+ lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus,
332
+ mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex
333
+ sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum.
334
+ Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
335
+ </p>
336
+ <h5>Fifth level</h5>
337
+ <p>
338
+ Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet
339
+ ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend
340
+ justo. Nam et sollicitudin odio.
341
+ </p>
342
+ <h6>Sixth level</h6>
343
+ <p>
344
+ Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan.
345
+ Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis.
346
+ Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui,
347
+ sed varius sapien odio vitae est. Etiam at cursus metus.
348
+ </p>
349
+ </div>
350
+
351
+ ```
352
+
353
+ ### Long-form/editorial content
354
+
355
+ ```html
356
+ <h1 class="pf-v6-c-content--h1 pf-m-editorial">Hello world</h1>
357
+ <p
358
+ class="pf-v6-c-content--p pf-m-editorial"
359
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
360
+ <h2 class="pf-v6-c-content--h2 pf-m-editorial">Second level</h2>
361
+ <p class="pf-v6-c-content--p pf-m-editorial">
362
+ Curabitur accumsan turpis pharetra
363
+ <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
364
+ </p>
365
+ <ul class="pf-v6-c-content--ul pf-m-editorial">
366
+ <li
367
+ class="pf-v6-c-content--li"
368
+ >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
369
+ <li
370
+ class="pf-v6-c-content--li"
371
+ >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
372
+ <li class="pf-v6-c-content--li">
373
+ Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
374
+ <ul class="pf-v6-c-content--ul">
375
+ <li
376
+ class="pf-v6-c-content--li"
377
+ >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
378
+ <li
379
+ class="pf-v6-c-content--li"
380
+ >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
381
+ <li class="pf-v6-c-content--li">
382
+ Ut venenatis, nisl scelerisque.
383
+ <ol class="pf-v6-c-content--ol">
384
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
385
+ <li
386
+ class="pf-v6-c-content--li"
387
+ >Cras gravida arcu at diam gravida gravida.</li>
388
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
389
+ </ol>
390
+ </li>
391
+ </ul>
392
+ </li>
393
+ <li class="pf-v6-c-content--li">Ut non enim metus.</li>
394
+ </ul>
395
+ <h3 class="pf-v6-c-content--h3 pf-m-editorial">Third level</h3>
396
+ <p class="pf-v6-c-content--p pf-m-editorial">
397
+ Quisque ante lacus, malesuada ac auctor vitae, congue
398
+ <a class="pf-v6-c-content--a" href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
399
+ </p>
400
+ <ol class="pf-v6-c-content--ol pf-m-editorial">
401
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
402
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
403
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
404
+ <li class="pf-v6-c-content--li">Donec a diam tellus.</li>
405
+ <li class="pf-v6-c-content--li">
406
+ Etiam auctor nisl et.
407
+ <ul class="pf-v6-c-content--ul">
408
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
409
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
410
+ <li class="pf-v6-c-content--li">
411
+ Integer in volutpat libero.
412
+ <ol class="pf-v6-c-content--ol">
413
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
414
+ <li
415
+ class="pf-v6-c-content--li"
416
+ >Cras gravida arcu at diam gravida gravida.</li>
417
+ </ol>
418
+ </li>
419
+ </ul>
420
+ </li>
421
+ <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
422
+ <li
423
+ class="pf-v6-c-content--li"
424
+ >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
425
+ <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
426
+ </ol>
427
+ <blockquote
428
+ class="pf-v6-c-content--blockquote pf-m-editorial"
429
+ >Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
430
+ <p class="pf-v6-c-content--p pf-m-editorial">
431
+ Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
432
+ <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
433
+ </p>
434
+ <hr class="pf-v6-c-content--hr pf-m-editorial" />
435
+ <h3 class="pf-v6-c-content--h3 pf-m-editorial">Plain list example</h3>
436
+ <ol class="pf-v6-c-content--ol pf-m-editorial pf-m-plain">
437
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
438
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
439
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
440
+ <li class="pf-v6-c-content--li">Donec a diam tellus.</li>
441
+ <li class="pf-v6-c-content--li">
442
+ Etiam auctor nisl et.
443
+ <ul class="pf-v6-c-content--ul">
444
+ <li class="pf-v6-c-content--li">Regular list</li>
445
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
446
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
447
+ <li class="pf-v6-c-content--li">
448
+ Integer in volutpat libero.
449
+ <ol class="pf-v6-c-content--ol pf-m-plain">
450
+ <li class="pf-v6-c-content--li">Nested plain list</li>
451
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
452
+ <li
453
+ class="pf-v6-c-content--li"
454
+ >Cras gravida arcu at diam gravida gravida.</li>
455
+ </ol>
456
+ </li>
457
+ </ul>
458
+ </li>
459
+ <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
460
+ <li
461
+ class="pf-v6-c-content--li"
462
+ >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
463
+ <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
464
+ </ol>
465
+ <hr class="pf-v6-c-content--hr pf-m-editorial" />
466
+ <h3 class="pf-v6-c-content--h3 pf-m-editorial">Visited link example</h3>
467
+ <p class="pf-v6-c-content--p pf-m-editorial">
468
+ <a class="pf-v6-c-content--a pf-m-plain" href>Visited link</a>
469
+ </p>
470
+ <hr class="pf-v6-c-content--hr pf-m-editorial" />
471
+ <p class="pf-v6-c-content--p pf-m-editorial">
472
+ Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas vestibulum interdum
473
+ commodo.
474
+ </p>
475
+ <dl class="pf-v6-c-content--dl pf-m-editorial">
476
+ <dt class="pf-v6-c-content--dt">Web</dt>
477
+ <dd
478
+ class="pf-v6-c-content--dd"
479
+ >The part of the internet that contains websites and web pages</dd>
480
+ <dt class="pf-v6-c-content--dt">HTML</dt>
481
+ <dd class="pf-v6-c-content--dd">A markup language for creating web pages</dd>
482
+ <dt class="pf-v6-c-content--dt">CSS</dt>
483
+ <dd class="pf-v6-c-content--dd">A technology to make HTML look better</dd>
484
+ </dl>
485
+ <p class="pf-v6-c-content--p pf-m-editorial">
486
+ Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla.
487
+ Nulla facilisi. Nullam ac erat ante.
488
+ </p>
489
+ <h4 class="pf-v6-c-content--h4 pf-m-editorial">Fourth level</h4>
490
+ <p class="pf-v6-c-content--p pf-m-editorial">
491
+ Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at elementum
492
+ ex efficitur.
493
+ </p>
494
+ <p class="pf-v6-c-content--p pf-m-editorial">
495
+ Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut vehicula. Mauris
496
+ eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
497
+ </p>
498
+ <small
499
+ class="pf-v6-c-content--small pf-m-editorial"
500
+ >Sometimes you need small text to display things like date created</small>
501
+ <p class="pf-v6-c-content--p pf-m-editorial">
502
+ Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis. Etiam iaculis
503
+ lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam tristique, leo vitae porta faucibus,
504
+ mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est. Nunc ultricies nunc neque, vitae ultricies ex
505
+ sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam nec nisl placerat, pretium metus vel, euismod ipsum.
506
+ Proin tempor cursus nisl vel condimentum. Nam pharetra varius metus non pellentesque.
507
+ </p>
508
+ <h5 class="pf-v6-c-content--h5 pf-m-editorial">Fifth level</h5>
509
+ <p class="pf-v6-c-content--p pf-m-editorial">
510
+ Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent aliquet
511
+ ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue laoreet. Sed nec eleifend
512
+ justo. Nam et sollicitudin odio.
513
+ </p>
514
+ <h6 class="pf-v6-c-content--h6 pf-m-editorial">Sixth level</h6>
515
+ <p class="pf-v6-c-content--p pf-m-editorial">
516
+ Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros accumsan.
517
+ Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae, malesuada ultrices turpis.
518
+ Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum commodo, ipsum tortor maximus dui,
519
+ sed varius sapien odio vitae est. Etiam at cursus metus.
520
+ </p>
521
+
522
+ ```
523
+
524
+ ### Long-form/editorial content in content wrapper
525
+
526
+ ```html
527
+ <div class="pf-v6-c-content pf-m-editorial">
528
+ <h1>Hello world</h1>
529
+ <p
530
+ class
531
+ >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel erat vel, interdum mattis neque. Sub works as well!</p>
17
532
  <h2>Second level</h2>
18
533
  <p>
19
534
  Curabitur accumsan turpis pharetra
20
- <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel
21
- cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et
22
- neque nisl.
535
+ <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
23
536
  </p>
24
537
  <ul>
25
- <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
26
- <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
27
- <li>
538
+ <li
539
+ class="pf-v6-c-content--li"
540
+ >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
541
+ <li
542
+ class="pf-v6-c-content--li"
543
+ >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
544
+ <li class="pf-v6-c-content--li">
28
545
  Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
29
- <ul>
30
- <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
31
- <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
32
- <li>
546
+ <ul class="pf-v6-c-content--ul">
547
+ <li
548
+ class="pf-v6-c-content--li"
549
+ >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
550
+ <li
551
+ class="pf-v6-c-content--li"
552
+ >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
553
+ <li class="pf-v6-c-content--li">
33
554
  Ut venenatis, nisl scelerisque.
34
- <ol>
35
- <li>Donec blandit a lorem id convallis.</li>
36
- <li>Cras gravida arcu at diam gravida gravida.</li>
37
- <li>Integer in volutpat libero.</li>
555
+ <ol class="pf-v6-c-content--ol">
556
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
557
+ <li
558
+ class="pf-v6-c-content--li"
559
+ >Cras gravida arcu at diam gravida gravida.</li>
560
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
38
561
  </ol>
39
562
  </li>
40
563
  </ul>
41
564
  </li>
42
- <li>Ut non enim metus.</li>
565
+ <li class="pf-v6-c-content--li">Ut non enim metus.</li>
43
566
  </ul>
44
567
  <h3>Third level</h3>
45
568
  <p>
46
569
  Quisque ante lacus, malesuada ac auctor vitae, congue
47
- <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
570
+ <a class="pf-v6-c-content--a" href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
48
571
  </p>
49
572
  <ol>
50
- <li>Donec blandit a lorem id convallis.</li>
51
- <li>Cras gravida arcu at diam gravida gravida.</li>
52
- <li>Integer in volutpat libero.</li>
53
- <li>Donec a diam tellus.</li>
54
- <li>
573
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
574
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
575
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
576
+ <li class="pf-v6-c-content--li">Donec a diam tellus.</li>
577
+ <li class="pf-v6-c-content--li">
55
578
  Etiam auctor nisl et.
56
- <ul>
57
- <li>Donec blandit a lorem id convallis.</li>
58
- <li>Cras gravida arcu at diam gravida gravida.</li>
59
- <li>
579
+ <ul class="pf-v6-c-content--ul">
580
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
581
+ <li
582
+ class="pf-v6-c-content--li"
583
+ >Cras gravida arcu at diam gravida gravida.</li>
584
+ <li class="pf-v6-c-content--li">
60
585
  Integer in volutpat libero.
61
- <ol>
62
- <li>Donec blandit a lorem id convallis.</li>
63
- <li>Cras gravida arcu at diam gravida gravida.</li>
586
+ <ol class="pf-v6-c-content--ol">
587
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
588
+ <li
589
+ class="pf-v6-c-content--li"
590
+ >Cras gravida arcu at diam gravida gravida.</li>
64
591
  </ol>
65
592
  </li>
66
593
  </ul>
67
594
  </li>
68
- <li>Aenean nec tortor orci.</li>
69
- <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
70
- <li>Vivamus maximus ultricies pulvinar.</li>
595
+ <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
596
+ <li
597
+ class="pf-v6-c-content--li"
598
+ >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
599
+ <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
71
600
  </ol>
72
- <blockquote>Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
601
+ <blockquote
602
+ class
603
+ >Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit amet turpis.</blockquote>
73
604
  <p>
74
605
  Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et
75
606
  <em>justo sodales</em> elementum. Maecenas ultrices lacus quis neque consectetur, et lobortis nisi molestie.
@@ -77,34 +608,40 @@ cssPrefix: pf-v6-c-content
77
608
  <hr />
78
609
  <h3>Plain list example</h3>
79
610
  <ol class="pf-m-plain">
80
- <li>Donec blandit a lorem id convallis.</li>
81
- <li>Cras gravida arcu at diam gravida gravida.</li>
82
- <li>Integer in volutpat libero.</li>
83
- <li>Donec a diam tellus.</li>
84
- <li>
611
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
612
+ <li class="pf-v6-c-content--li">Cras gravida arcu at diam gravida gravida.</li>
613
+ <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
614
+ <li class="pf-v6-c-content--li">Donec a diam tellus.</li>
615
+ <li class="pf-v6-c-content--li">
85
616
  Etiam auctor nisl et.
86
- <ul>
87
- <li>Regular list</li>
88
- <li>Donec blandit a lorem id convallis.</li>
89
- <li>Cras gravida arcu at diam gravida gravida.</li>
90
- <li>
617
+ <ul class="pf-v6-c-content--ul">
618
+ <li class="pf-v6-c-content--li">Regular list</li>
619
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
620
+ <li
621
+ class="pf-v6-c-content--li"
622
+ >Cras gravida arcu at diam gravida gravida.</li>
623
+ <li class="pf-v6-c-content--li">
91
624
  Integer in volutpat libero.
92
- <ol class="pf-m-plain">
93
- <li>Nested plain list</li>
94
- <li>Donec blandit a lorem id convallis.</li>
95
- <li>Cras gravida arcu at diam gravida gravida.</li>
625
+ <ol class="pf-v6-c-content--ol pf-m-plain">
626
+ <li class="pf-v6-c-content--li">Nested plain list</li>
627
+ <li class="pf-v6-c-content--li">Donec blandit a lorem id convallis.</li>
628
+ <li
629
+ class="pf-v6-c-content--li"
630
+ >Cras gravida arcu at diam gravida gravida.</li>
96
631
  </ol>
97
632
  </li>
98
633
  </ul>
99
634
  </li>
100
- <li>Aenean nec tortor orci.</li>
101
- <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
102
- <li>Vivamus maximus ultricies pulvinar.</li>
635
+ <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
636
+ <li
637
+ class="pf-v6-c-content--li"
638
+ >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
639
+ <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
103
640
  </ol>
104
641
  <hr />
105
642
  <h3>Visited link example</h3>
106
643
  <p>
107
- <a class="pf-m-visited" href>Visited link</a>
644
+ <a class="pf-v6-c-content--a pf-m-plain" href>Visited link</a>
108
645
  </p>
109
646
  <hr />
110
647
  <p>
@@ -112,12 +649,14 @@ cssPrefix: pf-v6-c-content
112
649
  commodo.
113
650
  </p>
114
651
  <dl>
115
- <dt>Web</dt>
116
- <dd>The part of the internet that contains websites and web pages</dd>
117
- <dt>HTML</dt>
118
- <dd>A markup language for creating web pages</dd>
119
- <dt>CSS</dt>
120
- <dd>A technology to make HTML look better</dd>
652
+ <dt class="pf-v6-c-content--dt">Web</dt>
653
+ <dd
654
+ class="pf-v6-c-content--dd"
655
+ >The part of the internet that contains websites and web pages</dd>
656
+ <dt class="pf-v6-c-content--dt">HTML</dt>
657
+ <dd class="pf-v6-c-content--dd">A markup language for creating web pages</dd>
658
+ <dt class="pf-v6-c-content--dt">CSS</dt>
659
+ <dd class="pf-v6-c-content--dd">A technology to make HTML look better</dd>
121
660
  </dl>
122
661
  <p>
123
662
  Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla.
@@ -180,3 +719,4 @@ This component is an exception to the variable system since we style type select
180
719
  | `.pf-v6-c-content` | `<div>`, `<section>`, or `<article>` | Generates vertical rhythm and typographic treatment to html elements. |
181
720
  | `.pf-m-visited` | `.pf-v6-c-content`, `<a>` | Modifies all links in a content block to include visited styles. Can also be applied to a single link in a content block. |
182
721
  | `.pf-m-plain` | `<ul>`, `<ol>` | Removes the list marker and indentation. |
722
+ | `.pf-m-editorial` | `.pf-v6-c-content*` | Applies long-form, editorial content styles to a block of content or individual content elements. |