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

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/_fixed-width.scss +3 -1
  5. package/assets/fontawesome/_icons.scss +1333 -1330
  6. package/assets/fontawesome/_index.scss +11 -0
  7. package/assets/fontawesome/_larger.scss +4 -2
  8. package/assets/fontawesome/_list.scss +4 -2
  9. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  10. package/assets/fontawesome/_screen-reader.scss +1 -0
  11. package/assets/fontawesome/_stacked.scss +3 -1
  12. package/assets/fontawesome/_variables.scss +4 -4
  13. package/assets/fontawesome/fontawesome.scss +12 -12
  14. package/assets/icons/iconUnicodes.json +6 -0
  15. package/assets/images/img_avatar-dark.svg +22 -16
  16. package/assets/images/img_avatar-light.svg +25 -18
  17. package/assets/images/pf-background.svg +21 -21
  18. package/assets/images/pf_logo.svg +11 -11
  19. package/assets/images/pf_logo_white.svg +16 -17
  20. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  21. package/assets/pficon/pficon.scss +310 -271
  22. package/base/_index.scss +10 -0
  23. package/base/{_globals.scss → normalize.scss} +15 -48
  24. package/base/patternfly-common.css +14 -0
  25. package/base/patternfly-common.scss +69 -2
  26. package/base/patternfly-fa-icons.css +2787 -1420
  27. package/base/patternfly-fa-icons.scss +53 -2
  28. package/base/patternfly-fonts.css +10 -80
  29. package/base/patternfly-fonts.scss +49 -2
  30. package/base/patternfly-pf-icons.css +158 -134
  31. package/base/patternfly-pf-icons.scss +1 -2
  32. package/base/patternfly-svg-icons.css +5 -0
  33. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  34. package/base/patternfly-variables.css +1094 -1206
  35. package/base/patternfly-variables.scss +20 -2
  36. package/base/reset.scss +33 -0
  37. package/base/tokens/_index.scss +6 -0
  38. package/base/tokens/tokens-charts-dark.scss +173 -0
  39. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  40. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +310 -294
  41. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +580 -447
  42. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +16 -34
  43. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  44. package/components/AboutModalBox/about-modal-box.css +86 -81
  45. package/components/AboutModalBox/about-modal-box.scss +80 -82
  46. package/components/Accordion/accordion.css +46 -45
  47. package/components/Accordion/accordion.scss +56 -55
  48. package/components/ActionList/action-list.css +6 -5
  49. package/components/ActionList/action-list.scss +7 -5
  50. package/components/Alert/alert-group.css +72 -19
  51. package/components/Alert/alert-group.scss +105 -18
  52. package/components/Alert/alert.css +52 -59
  53. package/components/Alert/alert.scss +56 -65
  54. package/components/Avatar/avatar.css +42 -41
  55. package/components/Avatar/avatar.scss +8 -7
  56. package/components/BackToTop/back-to-top.css +19 -17
  57. package/components/BackToTop/back-to-top.scss +17 -17
  58. package/components/Backdrop/backdrop.css +1 -1
  59. package/components/Backdrop/backdrop.scss +3 -4
  60. package/components/BackgroundImage/background-image.scss +3 -4
  61. package/components/Badge/badge.css +29 -7
  62. package/components/Badge/badge.scss +33 -9
  63. package/components/Banner/banner.css +30 -37
  64. package/components/Banner/banner.scss +30 -43
  65. package/components/Brand/brand.css +14 -10
  66. package/components/Brand/brand.scss +8 -5
  67. package/components/Breadcrumb/breadcrumb.css +23 -24
  68. package/components/Breadcrumb/breadcrumb.scss +25 -28
  69. package/components/Button/button.css +152 -130
  70. package/components/Button/button.scss +157 -133
  71. package/components/CalendarMonth/calendar-month.css +47 -47
  72. package/components/CalendarMonth/calendar-month.scss +50 -51
  73. package/components/Card/card.css +111 -94
  74. package/components/Card/card.scss +119 -93
  75. package/components/Check/check.css +6 -6
  76. package/components/Check/check.scss +8 -9
  77. package/components/ClipboardCopy/clipboard-copy.css +34 -45
  78. package/components/ClipboardCopy/clipboard-copy.scss +36 -49
  79. package/components/CodeBlock/code-block.css +21 -20
  80. package/components/CodeBlock/code-block.scss +21 -21
  81. package/components/CodeEditor/code-editor.css +36 -35
  82. package/components/CodeEditor/code-editor.scss +36 -36
  83. package/components/Content/content.css +167 -153
  84. package/components/Content/content.scss +204 -145
  85. package/components/DataList/data-list-grid.css +117 -117
  86. package/components/DataList/data-list-grid.scss +22 -20
  87. package/components/DataList/data-list.css +308 -312
  88. package/components/DataList/data-list.scss +145 -152
  89. package/components/DatePicker/date-picker.css +17 -17
  90. package/components/DatePicker/date-picker.scss +17 -18
  91. package/components/DescriptionList/description-list-order.css +5 -5
  92. package/components/DescriptionList/description-list-order.scss +3 -1
  93. package/components/DescriptionList/description-list.css +52 -50
  94. package/components/DescriptionList/description-list.scss +32 -37
  95. package/components/Divider/divider.css +104 -107
  96. package/components/Divider/divider.scss +19 -19
  97. package/components/DragDrop/drag-drop.css +4 -2
  98. package/components/DragDrop/drag-drop.scss +3 -3
  99. package/components/Drawer/drawer.css +119 -114
  100. package/components/Drawer/drawer.scss +139 -134
  101. package/components/DualListSelector/dual-list-selector.css +65 -62
  102. package/components/DualListSelector/dual-list-selector.scss +55 -52
  103. package/components/EmptyState/empty-state.css +38 -37
  104. package/components/EmptyState/empty-state.scss +39 -39
  105. package/components/ExpandableSection/expandable-section.css +27 -86
  106. package/components/ExpandableSection/expandable-section.scss +32 -101
  107. package/components/FileUpload/file-upload.css +3 -3
  108. package/components/FileUpload/file-upload.scss +3 -4
  109. package/components/Form/form.css +177 -125
  110. package/components/Form/form.scss +121 -115
  111. package/components/FormControl/form-control.css +68 -64
  112. package/components/FormControl/form-control.scss +80 -74
  113. package/components/HelperText/helper-text.css +5 -4
  114. package/components/HelperText/helper-text.scss +8 -6
  115. package/components/Hint/hint.css +25 -25
  116. package/components/Hint/hint.scss +25 -27
  117. package/components/Icon/icon.css +10 -10
  118. package/components/Icon/icon.scss +11 -12
  119. package/components/InlineEdit/inline-edit.css +12 -12
  120. package/components/InlineEdit/inline-edit.scss +12 -13
  121. package/components/InputGroup/input-group.css +17 -17
  122. package/components/InputGroup/input-group.scss +19 -20
  123. package/components/JumpLinks/jump-links.css +80 -96
  124. package/components/JumpLinks/jump-links.scss +80 -100
  125. package/components/Label/label-group.css +28 -28
  126. package/components/Label/label-group.scss +29 -30
  127. package/components/Label/label.css +103 -88
  128. package/components/Label/label.scss +114 -95
  129. package/components/List/list.css +44 -47
  130. package/components/List/list.scss +51 -58
  131. package/components/Login/login.css +122 -118
  132. package/components/Login/login.scss +105 -112
  133. package/components/Masthead/masthead.css +273 -175
  134. package/components/Masthead/masthead.scss +102 -68
  135. package/components/Menu/menu.css +151 -95
  136. package/components/Menu/menu.scss +59 -40
  137. package/components/MenuToggle/menu-toggle.css +131 -110
  138. package/components/MenuToggle/menu-toggle.scss +152 -130
  139. package/components/ModalBox/modal-box.css +53 -45
  140. package/components/ModalBox/modal-box.scss +52 -46
  141. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  142. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  143. package/components/Nav/nav.css +33 -9
  144. package/components/Nav/nav.scss +46 -13
  145. package/components/NotificationDrawer/notification-drawer.css +50 -51
  146. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  147. package/components/NumberInput/number-input.css +7 -11
  148. package/components/NumberInput/number-input.scss +5 -7
  149. package/components/OverflowMenu/overflow-menu.css +2 -1
  150. package/components/OverflowMenu/overflow-menu.scss +3 -1
  151. package/components/Page/page.css +177 -517
  152. package/components/Page/page.scss +157 -384
  153. package/components/Pagination/pagination.css +82 -79
  154. package/components/Pagination/pagination.scss +43 -40
  155. package/components/Panel/panel.css +33 -30
  156. package/components/Panel/panel.scss +35 -33
  157. package/components/Popover/popover.css +54 -52
  158. package/components/Popover/popover.scss +55 -54
  159. package/components/Progress/progress.css +8 -4
  160. package/components/Progress/progress.scss +14 -11
  161. package/components/ProgressStepper/progress-stepper.css +246 -245
  162. package/components/ProgressStepper/progress-stepper.scss +118 -118
  163. package/components/Radio/radio.css +9 -9
  164. package/components/Radio/radio.scss +11 -12
  165. package/components/Sidebar/sidebar.css +139 -139
  166. package/components/Sidebar/sidebar.scss +61 -61
  167. package/components/SimpleList/simple-list.css +21 -20
  168. package/components/SimpleList/simple-list.scss +22 -23
  169. package/components/Skeleton/skeleton.css +4 -4
  170. package/components/Skeleton/skeleton.scss +7 -8
  171. package/components/SkipToContent/skip-to-content.css +7 -6
  172. package/components/SkipToContent/skip-to-content.scss +7 -7
  173. package/components/Slider/slider.css +31 -31
  174. package/components/Slider/slider.scss +54 -55
  175. package/components/Spinner/spinner.scss +4 -5
  176. package/components/Switch/switch.css +4 -10
  177. package/components/Switch/switch.scss +8 -17
  178. package/components/TabContent/tab-content.css +25 -25
  179. package/components/TabContent/tab-content.scss +28 -28
  180. package/components/Table/table-grid.css +434 -508
  181. package/components/Table/table-grid.scss +131 -150
  182. package/components/Table/table-scrollable.css +31 -34
  183. package/components/Table/table-scrollable.scss +44 -41
  184. package/components/Table/table-tree-view.css +287 -279
  185. package/components/Table/table-tree-view.scss +84 -84
  186. package/components/Table/table.css +316 -279
  187. package/components/Table/table.scss +346 -301
  188. package/components/Tabs/tabs.css +215 -240
  189. package/components/Tabs/tabs.scss +130 -162
  190. package/components/TextInputGroup/text-input-group.css +122 -64
  191. package/components/TextInputGroup/text-input-group.scss +144 -87
  192. package/components/Tile/tile.css +15 -15
  193. package/components/Tile/tile.scss +16 -17
  194. package/components/Timestamp/timestamp.css +13 -19
  195. package/components/Timestamp/timestamp.scss +16 -22
  196. package/components/Title/title.css +14 -13
  197. package/components/Title/title.scss +15 -15
  198. package/components/ToggleGroup/toggle-group.css +37 -37
  199. package/components/ToggleGroup/toggle-group.scss +38 -41
  200. package/components/Toolbar/toolbar.css +547 -1431
  201. package/components/Toolbar/toolbar.scss +159 -123
  202. package/components/Tooltip/tooltip.css +28 -27
  203. package/components/Tooltip/tooltip.scss +31 -30
  204. package/components/TreeView/tree-view.css +184 -184
  205. package/components/TreeView/tree-view.scss +133 -133
  206. package/components/Truncate/truncate.css +2 -2
  207. package/components/Truncate/truncate.scss +7 -8
  208. package/components/Wizard/wizard.css +190 -154
  209. package/components/Wizard/wizard.scss +211 -165
  210. package/components/_index.css +22381 -0
  211. package/components/_index.scss +82 -0
  212. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  213. package/docs/components/Accordion/examples/Accordion.md +1 -1
  214. package/docs/components/ActionList/examples/ActionList.md +64 -24
  215. package/docs/components/Alert/examples/Alert.md +116 -74
  216. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  217. package/docs/components/Badge/examples/Badge.md +6 -16
  218. package/docs/components/Banner/examples/Banner.md +16 -10
  219. package/docs/components/Brand/examples/Brand.md +2 -2
  220. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  221. package/docs/components/Button/examples/Button.md +537 -368
  222. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  223. package/docs/components/Card/examples/Card.md +372 -658
  224. package/docs/components/Check/examples/Check.md +10 -15
  225. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  226. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  227. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  228. package/docs/components/Content/examples/Content.md +600 -60
  229. package/docs/components/DataList/examples/DataList.md +291 -1028
  230. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  231. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  232. package/docs/components/Drawer/examples/Drawer.md +60 -21
  233. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  234. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  235. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  236. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  237. package/docs/components/Form/examples/Form.md +100 -26
  238. package/docs/components/Hint/examples/Hint.md +54 -164
  239. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  240. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  241. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  242. package/docs/components/Label/examples/Label.md +2577 -406
  243. package/docs/components/Login/examples/Login.md +372 -334
  244. package/docs/components/Masthead/examples/masthead.md +515 -484
  245. package/docs/components/Menu/examples/Menu.md +77 -138
  246. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  247. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  248. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  249. package/docs/components/Nav/examples/Navigation.css +2 -7
  250. package/docs/components/Nav/examples/Navigation.md +337 -270
  251. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  252. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  253. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  254. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  255. package/docs/components/Page/examples/Page.css +5 -9
  256. package/docs/components/Page/examples/Page.md +254 -181
  257. package/docs/components/Pagination/examples/Pagination.md +336 -756
  258. package/docs/components/Panel/examples/Panel.md +3 -2
  259. package/docs/components/Popover/examples/Popover.md +60 -15
  260. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  261. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  262. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  263. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  264. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  265. package/docs/components/Slider/examples/Slider.md +53 -45
  266. package/docs/components/Spinner/examples/Spinner.md +1 -1
  267. package/docs/components/Switch/examples/Switch.md +33 -148
  268. package/docs/components/Table/examples/Table.css +11 -6
  269. package/docs/components/Table/examples/Table.md +5302 -2464
  270. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  271. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  273. package/docs/components/Tile/examples/Tile.css +5 -5
  274. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  275. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  276. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  277. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  278. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  279. package/docs/components/TreeView/examples/TreeView.md +627 -49
  280. package/docs/components/Truncate/examples/Truncate.css +1 -2
  281. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  282. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  283. package/docs/demos/Alert/examples/Alert.md +924 -909
  284. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  285. package/docs/demos/Banner/examples/Banner.md +641 -659
  286. package/docs/demos/Button/examples/Button.md +8 -8
  287. package/docs/demos/Card/examples/Card.css +6 -6
  288. package/docs/demos/Card/examples/Card.md +419 -606
  289. package/docs/demos/CardView/examples/CardView.md +822 -1435
  290. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  291. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  292. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  293. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  294. package/docs/demos/Form/examples/BasicForms.md +153 -88
  295. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  296. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  297. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  298. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  299. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  300. package/docs/demos/Page/examples/Page.css +11 -0
  301. package/docs/demos/Page/examples/Page.md +3753 -2540
  302. package/docs/demos/Panel/Panel.md +88 -0
  303. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  304. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  305. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  306. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  307. package/docs/demos/Table/examples/Table.md +14272 -15154
  308. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  309. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  310. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  311. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  312. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  313. package/docs/layouts/Flex/examples/Flex.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.md +50 -50
  315. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  316. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  317. package/docs/layouts/Grid/examples/Grid.css +3 -3
  318. package/docs/layouts/Grid/examples/Grid.md +33 -33
  319. package/docs/layouts/Level/examples/Level.css +5 -5
  320. package/docs/layouts/Split/examples/Split.css +4 -4
  321. package/docs/layouts/Stack/examples/Stack.css +5 -5
  322. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  323. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  324. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  325. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  326. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  327. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  328. package/docs/utilities/Display/examples/Display.css +3 -10
  329. package/docs/utilities/Display/examples/Display.md +21 -12
  330. package/docs/utilities/Flex/examples/Flex.css +7 -7
  331. package/docs/utilities/Flex/examples/Flex.md +82 -40
  332. package/docs/utilities/Float/examples/Float.css +5 -5
  333. package/docs/utilities/Float/examples/Float.md +6 -6
  334. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  336. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  337. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  338. package/docs/utilities/Text/examples/Text.md +78 -77
  339. package/icons/pficons.mjs +6 -0
  340. package/layouts/Bullseye/bullseye.css +4 -0
  341. package/layouts/Bullseye/bullseye.scss +5 -1
  342. package/layouts/Flex/flex.css +241 -237
  343. package/layouts/Flex/flex.scss +48 -44
  344. package/layouts/Gallery/gallery.css +15 -11
  345. package/layouts/Gallery/gallery.scss +9 -5
  346. package/layouts/Grid/grid.css +20 -16
  347. package/layouts/Grid/grid.scss +12 -8
  348. package/layouts/Level/level.css +5 -1
  349. package/layouts/Level/level.scss +6 -2
  350. package/layouts/Split/split.css +5 -1
  351. package/layouts/Split/split.scss +6 -2
  352. package/layouts/Stack/stack.css +5 -1
  353. package/layouts/Stack/stack.scss +6 -2
  354. package/layouts/_index.css +3461 -0
  355. package/layouts/_index.scss +8 -0
  356. package/package.json +39 -39
  357. package/patternfly-addons.css +2071 -2648
  358. package/patternfly-addons.scss +2 -12
  359. package/patternfly-base-no-globals.css +4227 -3064
  360. package/patternfly-base-no-globals.scss +5 -3
  361. package/patternfly-base.css +4307 -3140
  362. package/patternfly-base.scss +2 -6
  363. package/patternfly-charts.css +579 -240
  364. package/patternfly-charts.scss +352 -337
  365. package/patternfly-no-globals.css +21105 -23238
  366. package/patternfly-no-globals.scss +5 -4
  367. package/patternfly.css +21209 -23338
  368. package/patternfly.min.css +1 -1
  369. package/patternfly.min.css.map +1 -1
  370. package/patternfly.scss +6 -4
  371. package/sass-utilities/_index.scss +6 -0
  372. package/sass-utilities/functions.scss +25 -25
  373. package/sass-utilities/{_init.scss → init.scss} +6 -6
  374. package/sass-utilities/mixins.scss +108 -72
  375. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  376. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  377. package/sass-utilities/scss-variables.scss +48 -261
  378. package/utilities/Accessibility/accessibility.css +15 -15
  379. package/utilities/Accessibility/accessibility.scss +8 -6
  380. package/utilities/Alignment/alignment.css +29 -29
  381. package/utilities/Alignment/alignment.scss +6 -4
  382. package/utilities/BackgroundColor/background-color.css +67 -0
  383. package/utilities/BackgroundColor/background-color.scss +16 -0
  384. package/utilities/BoxShadow/box-shadow.css +15 -39
  385. package/utilities/BoxShadow/box-shadow.scss +19 -28
  386. package/utilities/Display/display.css +43 -5
  387. package/utilities/Display/display.scss +7 -4
  388. package/utilities/Flex/flex.css +50 -50
  389. package/utilities/Flex/flex.scss +21 -20
  390. package/utilities/Float/float.css +29 -29
  391. package/utilities/Float/float.scss +6 -6
  392. package/utilities/Sizing/sizing.css +58 -58
  393. package/utilities/Sizing/sizing.scss +23 -21
  394. package/utilities/Spacing/spacing.css +1372 -1372
  395. package/utilities/Spacing/spacing.scss +6 -6
  396. package/utilities/Text/text.css +419 -662
  397. package/utilities/Text/text.scss +81 -107
  398. package/utilities/_index.css +7815 -0
  399. package/utilities/_index.scss +10 -0
  400. package/assets/fontawesome/_core.scss +0 -20
  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. |