@patternfly/patternfly 6.0.0-prerelease.9 → 6.1.0-prerelease.1

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 (196) hide show
  1. package/README.md +1 -1
  2. package/base/normalize.scss +16 -0
  3. package/base/patternfly-variables.css +84 -62
  4. package/base/tokens/tokens-charts-dark.scss +1 -1
  5. package/base/tokens/tokens-charts.scss +1 -1
  6. package/base/tokens/tokens-dark.scss +12 -4
  7. package/base/tokens/tokens-default.scss +44 -27
  8. package/base/tokens/tokens-local.scss +30 -35
  9. package/base/tokens/tokens-palette.scss +1 -1
  10. package/components/AboutModalBox/about-modal-box.css +0 -7
  11. package/components/Accordion/accordion.css +0 -1
  12. package/components/ActionList/action-list.css +1 -2
  13. package/components/ActionList/action-list.scss +1 -1
  14. package/components/Alert/alert-group.css +0 -1
  15. package/components/Alert/alert.css +2 -7
  16. package/components/Alert/alert.scss +2 -7
  17. package/components/Avatar/avatar.css +0 -1
  18. package/components/BackToTop/back-to-top.css +0 -2
  19. package/components/Backdrop/backdrop.css +0 -1
  20. package/components/BackgroundImage/background-image.css +0 -1
  21. package/components/Badge/badge.css +0 -1
  22. package/components/Banner/banner.css +0 -2
  23. package/components/Brand/brand.css +0 -1
  24. package/components/Breadcrumb/breadcrumb.css +0 -1
  25. package/components/Button/button.css +8 -1
  26. package/components/Button/button.scss +8 -0
  27. package/components/CalendarMonth/calendar-month.css +0 -1
  28. package/components/Card/card.css +0 -1
  29. package/components/Check/check.css +0 -1
  30. package/components/ClipboardCopy/clipboard-copy.css +0 -1
  31. package/components/CodeBlock/code-block.css +0 -1
  32. package/components/CodeEditor/code-editor.css +0 -1
  33. package/components/Content/content.css +2 -3
  34. package/components/Content/content.scss +2 -2
  35. package/components/DataList/data-list.css +4 -16
  36. package/components/DataList/data-list.scss +4 -14
  37. package/components/DatePicker/date-picker.css +0 -1
  38. package/components/DescriptionList/description-list.css +2 -9
  39. package/components/DescriptionList/description-list.scss +2 -2
  40. package/components/Divider/divider.css +0 -1
  41. package/components/DragDrop/drag-drop.css +0 -2
  42. package/components/Drawer/drawer.css +0 -7
  43. package/components/Drawer/drawer.scss +0 -5
  44. package/components/DualListSelector/dual-list-selector.css +0 -1
  45. package/components/EmptyState/empty-state.css +1 -2
  46. package/components/EmptyState/empty-state.scss +1 -1
  47. package/components/ExpandableSection/expandable-section.css +0 -1
  48. package/components/FileUpload/file-upload.css +0 -1
  49. package/components/Form/form.css +1 -2
  50. package/components/Form/form.scss +1 -1
  51. package/components/FormControl/form-control.css +22 -4
  52. package/components/FormControl/form-control.scss +27 -4
  53. package/components/HelperText/helper-text.css +0 -1
  54. package/components/Hint/hint.css +0 -1
  55. package/components/Icon/icon.css +0 -1
  56. package/components/InlineEdit/inline-edit.css +0 -1
  57. package/components/InputGroup/input-group.css +0 -1
  58. package/components/JumpLinks/jump-links.css +0 -1
  59. package/components/Label/label-group.css +0 -1
  60. package/components/Label/label.css +0 -1
  61. package/components/List/list.css +0 -1
  62. package/components/Login/login.css +0 -9
  63. package/components/Masthead/masthead.css +0 -1
  64. package/components/Menu/menu.css +0 -1
  65. package/components/MenuToggle/menu-toggle.css +66 -56
  66. package/components/MenuToggle/menu-toggle.scss +76 -65
  67. package/components/ModalBox/modal-box.css +0 -2
  68. package/components/MultipleFileUpload/multiple-file-upload.css +0 -1
  69. package/components/Nav/nav.css +0 -1
  70. package/components/NotificationDrawer/notification-drawer.css +0 -1
  71. package/components/NumberInput/number-input.css +0 -1
  72. package/components/OverflowMenu/overflow-menu.css +0 -1
  73. package/components/Page/page.css +15 -10
  74. package/components/Page/page.scss +17 -8
  75. package/components/Pagination/pagination.css +31 -20
  76. package/components/Pagination/pagination.scss +35 -23
  77. package/components/Panel/panel.css +0 -1
  78. package/components/Popover/popover.css +0 -1
  79. package/components/Progress/progress.css +0 -1
  80. package/components/ProgressStepper/progress-stepper.css +0 -2
  81. package/components/Radio/radio.css +0 -1
  82. package/components/Sidebar/sidebar.css +0 -1
  83. package/components/SimpleList/simple-list.css +0 -1
  84. package/components/Skeleton/skeleton.css +0 -1
  85. package/components/SkipToContent/skip-to-content.css +0 -1
  86. package/components/Slider/slider.css +0 -1
  87. package/components/Spinner/spinner.css +0 -1
  88. package/components/Switch/switch.css +0 -1
  89. package/components/TabContent/tab-content.css +0 -1
  90. package/components/Table/table-grid.css +9 -5
  91. package/components/Table/table-grid.scss +5 -4
  92. package/components/Table/table-scrollable.css +0 -1
  93. package/components/Table/table-tree-view.css +0 -1
  94. package/components/Table/table.css +6 -6
  95. package/components/Table/table.scss +6 -5
  96. package/components/Tabs/tabs.css +0 -1
  97. package/components/TextInputGroup/text-input-group.css +2 -3
  98. package/components/TextInputGroup/text-input-group.scss +2 -2
  99. package/components/Tile/tile.css +0 -1
  100. package/components/Timestamp/timestamp.css +0 -1
  101. package/components/Title/title.css +0 -1
  102. package/components/ToggleGroup/toggle-group.css +0 -1
  103. package/components/Toolbar/toolbar.css +0 -1
  104. package/components/Tooltip/tooltip.css +0 -1
  105. package/components/TreeView/tree-view.css +0 -1
  106. package/components/Truncate/truncate.css +0 -1
  107. package/components/Wizard/wizard.css +0 -2
  108. package/components/_index.css +172 -239
  109. package/docs/components/Brand/examples/Brand.md +2 -2
  110. package/docs/components/Breadcrumb/examples/Breadcrumb.md +1 -1
  111. package/docs/components/CalendarMonth/examples/CalendarMonth.md +4 -4
  112. package/docs/components/Content/examples/Content.md +188 -204
  113. package/docs/components/DataList/examples/DataList.md +187 -221
  114. package/docs/components/DragDrop/examples/DragDrop.md +0 -1
  115. package/docs/components/FileUpload/examples/FileUpload.md +11 -7
  116. package/docs/components/Form/examples/Form.md +4 -2
  117. package/docs/components/FormControl/examples/FormControl.md +10 -10
  118. package/docs/components/InputGroup/examples/InputGroup.md +4 -4
  119. package/docs/components/Login/examples/Login.md +6 -6
  120. package/docs/components/MenuToggle/examples/MenuToggle.md +140 -139
  121. package/docs/components/Pagination/examples/Pagination.md +12 -12
  122. package/docs/components/Table/examples/Table.md +1 -1
  123. package/docs/components/Tile/{examples → deprecated}/Tile.md +1 -0
  124. package/docs/components/Toolbar/examples/Toolbar.md +37 -37
  125. package/docs/demos/Card/examples/Card.md +4 -4
  126. package/docs/demos/CardView/examples/CardView.md +10 -4
  127. package/docs/demos/Dashboard/examples/Dashboard.md +8 -2
  128. package/docs/demos/DataList/examples/DataList.md +37 -13
  129. package/docs/demos/Masthead/examples/Masthead.md +5 -5
  130. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +425 -435
  131. package/docs/demos/Page/examples/Page.md +2 -2
  132. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +30 -18
  133. package/docs/demos/Table/examples/Table.md +235 -91
  134. package/docs/demos/Tabs/examples/Tabs.md +1 -1
  135. package/docs/demos/Toolbar/examples/Toolbar.md +42 -30
  136. package/docs/utilities/BoxShadow/examples/box-shadow.css +6 -17
  137. package/layouts/Bullseye/bullseye.css +0 -1
  138. package/layouts/Flex/flex.css +0 -1
  139. package/layouts/Gallery/gallery.css +0 -1
  140. package/layouts/Grid/grid.css +0 -1
  141. package/layouts/Level/level.css +0 -1
  142. package/layouts/Split/split.css +0 -1
  143. package/layouts/Stack/stack.css +0 -1
  144. package/layouts/_index.css +0 -7
  145. package/package.json +5 -5
  146. package/patternfly-base-no-globals.css +84 -62
  147. package/patternfly-base.css +99 -62
  148. package/patternfly-charts.css +2 -2
  149. package/patternfly-charts.scss +2 -2
  150. package/patternfly-no-globals.css +256 -308
  151. package/patternfly.css +271 -308
  152. package/patternfly.min.css +1 -1
  153. package/patternfly.min.css.map +1 -1
  154. package/sass-utilities/mixins.scss +3 -3
  155. package/assets/images/PF-Masthead-Logo.svg +0 -1
  156. package/assets/images/background-filter.svg +0 -17
  157. package/assets/images/g_sizing.png +0 -0
  158. package/assets/images/img_avatar-dark.svg +0 -22
  159. package/assets/images/img_avatar.svg +0 -21
  160. package/assets/images/l_pf-reverse-164x11.png +0 -0
  161. package/assets/images/l_pf-reverse.svg +0 -1
  162. package/assets/images/logo-dropbox-old.svg +0 -1
  163. package/assets/images/logo-dropbox.svg +0 -6
  164. package/assets/images/logo-facebook.svg +0 -4
  165. package/assets/images/logo-github.svg +0 -4
  166. package/assets/images/logo-gitlab.svg +0 -4
  167. package/assets/images/logo-google.svg +0 -4
  168. package/assets/images/logo-google2.svg +0 -10
  169. package/assets/images/logo__pf--reverse--base.png +0 -0
  170. package/assets/images/logo__pf--reverse--base.svg +0 -40
  171. package/assets/images/logo__pf--reverse-on-md.svg +0 -40
  172. package/assets/images/pf-c-brand__logo-base.jpg +0 -0
  173. package/assets/images/pf-c-brand__logo-on-lg-white.svg +0 -32
  174. package/assets/images/pf-c-brand__logo-on-lg.svg +0 -32
  175. package/assets/images/pf-c-brand__logo-on-md-white.svg +0 -42
  176. package/assets/images/pf-c-brand__logo-on-md.svg +0 -42
  177. package/assets/images/pf-c-brand__logo-on-sm-white.svg +0 -17
  178. package/assets/images/pf-c-brand__logo-on-sm.svg +0 -17
  179. package/assets/images/pf-c-brand__logo-on-xl-white.svg +0 -39
  180. package/assets/images/pf-c-brand__logo-on-xl.svg +0 -39
  181. package/assets/images/pf-c-brand__logo.svg +0 -10
  182. package/assets/images/pf-logo.svg +0 -28
  183. package/assets/images/pf_logo.svg +0 -37
  184. package/assets/images/pf_logo_color.svg +0 -22
  185. package/assets/images/pf_logo_white.svg +0 -37
  186. package/assets/images/pf_mini_logo_white.svg +0 -1
  187. package/assets/images/pfbg_1200.jpg +0 -0
  188. package/assets/images/pfbg_2000.jpg +0 -0
  189. package/assets/images/pfbg_576.jpg +0 -0
  190. package/assets/images/pfbg_576@2x.jpg +0 -0
  191. package/assets/images/pfbg_768.jpg +0 -0
  192. package/assets/images/pfbg_768@2x.jpg +0 -0
  193. package/assets/images/pfbg_992.jpg +0 -0
  194. package/assets/images/pfbg_992@2x.jpg +0 -0
  195. package/assets/images/status-icon-sprite.svg +0 -38
  196. /package/docs/components/Tile/{examples → deprecated}/Tile.css +0 -0
package/docs/components/Brand/examples/Brand.md CHANGED
@@ -40,7 +40,7 @@ section: components
40
40
  />
41
41
  <source srcset="/assets/images/PF-IconLogo-color.svg" />
42
42
  <img
43
- src="/assets/images/pf_logo.svg"
43
+ src="/assets/images/PF-HorizontalLogo-Color.svg"
44
44
  alt="Fallback patternFly default logo"
45
45
  />
46
46
  </picture>
@@ -57,7 +57,7 @@ section: components
57
57
  />
58
58
  <source srcset="/assets/images/PF-IconLogo-Reverse.svg" />
59
59
  <img
60
- src="/assets/images/pf_logo.svg"
60
+ src="/assets/images/PF-HorizontalLogo-Color.svg"
61
61
  alt="Fallback patternFly default logo"
62
62
  />
63
63
  </picture>
package/docs/components/Breadcrumb/examples/Breadcrumb.md CHANGED
@@ -174,7 +174,7 @@ cssPrefix: pf-v6-c-breadcrumb
174
174
  </span>
175
175
  <span class="pf-v6-c-menu-toggle__controls">
176
176
  <span class="pf-v6-c-menu-toggle__toggle-icon">
177
- <i class="fas fa-caret-down" aria-hidden="true"></i>
177
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
178
178
  </span>
179
179
  </span>
180
180
  </button>
package/docs/components/CalendarMonth/examples/CalendarMonth.md CHANGED
@@ -33,7 +33,7 @@ cssPrefix: pf-v6-c-calendar-month
33
33
  <span class="pf-v6-c-menu-toggle__text">October</span>
34
34
  <span class="pf-v6-c-menu-toggle__controls">
35
35
  <span class="pf-v6-c-menu-toggle__toggle-icon">
36
- <i class="fas fa-caret-down" aria-hidden="true"></i>
36
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
37
37
  </span>
38
38
  </span>
39
39
  </button>
@@ -387,7 +387,7 @@ cssPrefix: pf-v6-c-calendar-month
387
387
  <span class="pf-v6-c-menu-toggle__text">October</span>
388
388
  <span class="pf-v6-c-menu-toggle__controls">
389
389
  <span class="pf-v6-c-menu-toggle__toggle-icon">
390
- <i class="fas fa-caret-down" aria-hidden="true"></i>
390
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
391
391
  </span>
392
392
  </span>
393
393
  </button>
@@ -766,7 +766,7 @@ cssPrefix: pf-v6-c-calendar-month
766
766
  <span class="pf-v6-c-menu-toggle__text">October</span>
767
767
  <span class="pf-v6-c-menu-toggle__controls">
768
768
  <span class="pf-v6-c-menu-toggle__toggle-icon">
769
- <i class="fas fa-caret-down" aria-hidden="true"></i>
769
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
770
770
  </span>
771
771
  </span>
772
772
  </button>
@@ -1145,7 +1145,7 @@ cssPrefix: pf-v6-c-calendar-month
1145
1145
  <span class="pf-v6-c-menu-toggle__text">October</span>
1146
1146
  <span class="pf-v6-c-menu-toggle__controls">
1147
1147
  <span class="pf-v6-c-menu-toggle__toggle-icon">
1148
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1148
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1149
1149
  </span>
1150
1150
  </span>
1151
1151
  </button>
package/docs/components/Content/examples/Content.md CHANGED
@@ -189,68 +189,52 @@ cssPrefix: pf-v6-c-content
189
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
190
  </p>
191
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">
192
+ <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
193
+ <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
194
+ <li>
199
195
  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">
196
+ <ul>
197
+ <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
198
+ <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
199
+ <li>
208
200
  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>
201
+ <ol>
202
+ <li>Donec blandit a lorem id convallis.</li>
203
+ <li>Cras gravida arcu at diam gravida gravida.</li>
204
+ <li>Integer in volutpat libero.</li>
215
205
  </ol>
216
206
  </li>
217
207
  </ul>
218
208
  </li>
219
- <li class="pf-v6-c-content--li">Ut non enim metus.</li>
209
+ <li>Ut non enim metus.</li>
220
210
  </ul>
221
211
  <h3>Third level</h3>
222
212
  <p>
223
213
  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.
214
+ <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
225
215
  </p>
226
216
  <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">
217
+ <li>Donec blandit a lorem id convallis.</li>
218
+ <li>Cras gravida arcu at diam gravida gravida.</li>
219
+ <li>Integer in volutpat libero.</li>
220
+ <li>Donec a diam tellus.</li>
221
+ <li>
232
222
  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">
223
+ <ul>
224
+ <li>Donec blandit a lorem id convallis.</li>
225
+ <li>Cras gravida arcu at diam gravida gravida.</li>
226
+ <li>
239
227
  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>
228
+ <ol>
229
+ <li>Donec blandit a lorem id convallis.</li>
230
+ <li>Cras gravida arcu at diam gravida gravida.</li>
245
231
  </ol>
246
232
  </li>
247
233
  </ul>
248
234
  </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>
235
+ <li>Aenean nec tortor orci.</li>
236
+ <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
237
+ <li>Vivamus maximus ultricies pulvinar.</li>
254
238
  </ol>
255
239
  <blockquote
256
240
  class
@@ -262,40 +246,34 @@ cssPrefix: pf-v6-c-content
262
246
  <hr />
263
247
  <h3>Plain list example</h3>
264
248
  <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">
249
+ <li>Donec blandit a lorem id convallis.</li>
250
+ <li>Cras gravida arcu at diam gravida gravida.</li>
251
+ <li>Integer in volutpat libero.</li>
252
+ <li>Donec a diam tellus.</li>
253
+ <li>
270
254
  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">
255
+ <ul>
256
+ <li>Regular list</li>
257
+ <li>Donec blandit a lorem id convallis.</li>
258
+ <li>Cras gravida arcu at diam gravida gravida.</li>
259
+ <li>
278
260
  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>
261
+ <ol class="pf-m-plain">
262
+ <li>Nested plain list</li>
263
+ <li>Donec blandit a lorem id convallis.</li>
264
+ <li>Cras gravida arcu at diam gravida gravida.</li>
285
265
  </ol>
286
266
  </li>
287
267
  </ul>
288
268
  </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>
269
+ <li>Aenean nec tortor orci.</li>
270
+ <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
271
+ <li>Vivamus maximus ultricies pulvinar.</li>
294
272
  </ol>
295
273
  <hr />
296
274
  <h3>Visited link example</h3>
297
275
  <p>
298
- <a class="pf-v6-c-content--a pf-m-plain" href>Visited link</a>
276
+ <a class="pf-m-plain" href>Visited link</a>
299
277
  </p>
300
278
  <hr />
301
279
  <p>
@@ -303,14 +281,12 @@ cssPrefix: pf-v6-c-content
303
281
  commodo.
304
282
  </p>
305
283
  <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>
284
+ <dt>Web</dt>
285
+ <dd>The part of the internet that contains websites and web pages</dd>
286
+ <dt>HTML</dt>
287
+ <dd>A markup language for creating web pages</dd>
288
+ <dt>CSS</dt>
289
+ <dd>A technology to make HTML look better</dd>
314
290
  </dl>
315
291
  <p>
316
292
  Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla.
@@ -364,65 +340,81 @@ cssPrefix: pf-v6-c-content
364
340
  </p>
365
341
  <ul class="pf-v6-c-content--ul pf-m-editorial">
366
342
  <li
367
- class="pf-v6-c-content--li"
343
+ class="pf-v6-c-content--li pf-m-editorial"
368
344
  >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
369
345
  <li
370
- class="pf-v6-c-content--li"
346
+ class="pf-v6-c-content--li pf-m-editorial"
371
347
  >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
372
- <li class="pf-v6-c-content--li">
348
+ <li class="pf-v6-c-content--li pf-m-editorial">
373
349
  Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
374
- <ul class="pf-v6-c-content--ul">
350
+ <ul class="pf-v6-c-content--ul pf-m-editorial">
375
351
  <li
376
- class="pf-v6-c-content--li"
352
+ class="pf-v6-c-content--li pf-m-editorial"
377
353
  >In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
378
354
  <li
379
- class="pf-v6-c-content--li"
355
+ class="pf-v6-c-content--li pf-m-editorial"
380
356
  >Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
381
- <li class="pf-v6-c-content--li">
357
+ <li class="pf-v6-c-content--li pf-m-editorial">
382
358
  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>
359
+ <ol class="pf-v6-c-content--ol pf-m-editorial">
385
360
  <li
386
- class="pf-v6-c-content--li"
361
+ class="pf-v6-c-content--li pf-m-editorial"
362
+ >Donec blandit a lorem id convallis.</li>
363
+ <li
364
+ class="pf-v6-c-content--li pf-m-editorial"
387
365
  >Cras gravida arcu at diam gravida gravida.</li>
388
- <li class="pf-v6-c-content--li">Integer in volutpat libero.</li>
366
+ <li
367
+ class="pf-v6-c-content--li pf-m-editorial"
368
+ >Integer in volutpat libero.</li>
389
369
  </ol>
390
370
  </li>
391
371
  </ul>
392
372
  </li>
393
- <li class="pf-v6-c-content--li">Ut non enim metus.</li>
373
+ <li class="pf-v6-c-content--li pf-m-editorial">Ut non enim metus.</li>
394
374
  </ul>
395
375
  <h3 class="pf-v6-c-content--h3 pf-m-editorial">Third level</h3>
396
376
  <p class="pf-v6-c-content--p pf-m-editorial">
397
377
  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.
378
+ <a class="pf-v6-c-content--a pf-m-editorial" href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
399
379
  </p>
400
380
  <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">
381
+ <li
382
+ class="pf-v6-c-content--li pf-m-editorial"
383
+ >Donec blandit a lorem id convallis.</li>
384
+ <li
385
+ class="pf-v6-c-content--li pf-m-editorial"
386
+ >Cras gravida arcu at diam gravida gravida.</li>
387
+ <li class="pf-v6-c-content--li pf-m-editorial">Integer in volutpat libero.</li>
388
+ <li class="pf-v6-c-content--li pf-m-editorial">Donec a diam tellus.</li>
389
+ <li class="pf-v6-c-content--li pf-m-editorial">
406
390
  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">
391
+ <ul class="pf-v6-c-content--ul pf-m-editorial">
392
+ <li
393
+ class="pf-v6-c-content--li pf-m-editorial"
394
+ >Donec blandit a lorem id convallis.</li>
395
+ <li
396
+ class="pf-v6-c-content--li pf-m-editorial"
397
+ >Cras gravida arcu at diam gravida gravida.</li>
398
+ <li class="pf-v6-c-content--li pf-m-editorial">
411
399
  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>
400
+ <ol class="pf-v6-c-content--ol pf-m-editorial">
414
401
  <li
415
- class="pf-v6-c-content--li"
402
+ class="pf-v6-c-content--li pf-m-editorial"
403
+ >Donec blandit a lorem id convallis.</li>
404
+ <li
405
+ class="pf-v6-c-content--li pf-m-editorial"
416
406
  >Cras gravida arcu at diam gravida gravida.</li>
417
407
  </ol>
418
408
  </li>
419
409
  </ul>
420
410
  </li>
421
- <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
411
+ <li class="pf-v6-c-content--li pf-m-editorial">Aenean nec tortor orci.</li>
422
412
  <li
423
- class="pf-v6-c-content--li"
413
+ class="pf-v6-c-content--li pf-m-editorial"
424
414
  >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
425
- <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
415
+ <li
416
+ class="pf-v6-c-content--li pf-m-editorial"
417
+ >Vivamus maximus ultricies pulvinar.</li>
426
418
  </ol>
427
419
  <blockquote
428
420
  class="pf-v6-c-content--blockquote pf-m-editorial"
@@ -434,38 +426,50 @@ cssPrefix: pf-v6-c-content
434
426
  <hr class="pf-v6-c-content--hr pf-m-editorial" />
435
427
  <h3 class="pf-v6-c-content--h3 pf-m-editorial">Plain list example</h3>
436
428
  <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">
429
+ <li
430
+ class="pf-v6-c-content--li pf-m-editorial"
431
+ >Donec blandit a lorem id convallis.</li>
432
+ <li
433
+ class="pf-v6-c-content--li pf-m-editorial"
434
+ >Cras gravida arcu at diam gravida gravida.</li>
435
+ <li class="pf-v6-c-content--li pf-m-editorial">Integer in volutpat libero.</li>
436
+ <li class="pf-v6-c-content--li pf-m-editorial">Donec a diam tellus.</li>
437
+ <li class="pf-v6-c-content--li pf-m-editorial">
442
438
  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">
439
+ <ul class="pf-v6-c-content--ul pf-m-editorial">
440
+ <li class="pf-v6-c-content--li pf-m-editorial">Regular list</li>
441
+ <li
442
+ class="pf-v6-c-content--li pf-m-editorial"
443
+ >Donec blandit a lorem id convallis.</li>
444
+ <li
445
+ class="pf-v6-c-content--li pf-m-editorial"
446
+ >Cras gravida arcu at diam gravida gravida.</li>
447
+ <li class="pf-v6-c-content--li pf-m-editorial">
448
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>
449
+ <ol class="pf-v6-c-content--ol pf-m-editorial pf-m-plain">
450
+ <li class="pf-v6-c-content--li pf-m-editorial">Nested plain list</li>
452
451
  <li
453
- class="pf-v6-c-content--li"
452
+ class="pf-v6-c-content--li pf-m-editorial"
453
+ >Donec blandit a lorem id convallis.</li>
454
+ <li
455
+ class="pf-v6-c-content--li pf-m-editorial"
454
456
  >Cras gravida arcu at diam gravida gravida.</li>
455
457
  </ol>
456
458
  </li>
457
459
  </ul>
458
460
  </li>
459
- <li class="pf-v6-c-content--li">Aenean nec tortor orci.</li>
461
+ <li class="pf-v6-c-content--li pf-m-editorial">Aenean nec tortor orci.</li>
460
462
  <li
461
- class="pf-v6-c-content--li"
463
+ class="pf-v6-c-content--li pf-m-editorial"
462
464
  >Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
463
- <li class="pf-v6-c-content--li">Vivamus maximus ultricies pulvinar.</li>
465
+ <li
466
+ class="pf-v6-c-content--li pf-m-editorial"
467
+ >Vivamus maximus ultricies pulvinar.</li>
464
468
  </ol>
465
469
  <hr class="pf-v6-c-content--hr pf-m-editorial" />
466
470
  <h3 class="pf-v6-c-content--h3 pf-m-editorial">Visited link example</h3>
467
471
  <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>
472
+ <a class="pf-v6-c-content--a pf-m-editorial pf-m-plain" href>Visited link</a>
469
473
  </p>
470
474
  <hr class="pf-v6-c-content--hr pf-m-editorial" />
471
475
  <p class="pf-v6-c-content--p pf-m-editorial">
@@ -473,14 +477,18 @@ cssPrefix: pf-v6-c-content
473
477
  commodo.
474
478
  </p>
475
479
  <dl class="pf-v6-c-content--dl pf-m-editorial">
476
- <dt class="pf-v6-c-content--dt">Web</dt>
480
+ <dt class="pf-v6-c-content--dt pf-m-editorial">Web</dt>
477
481
  <dd
478
- class="pf-v6-c-content--dd"
482
+ class="pf-v6-c-content--dd pf-m-editorial"
479
483
  >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
+ <dt class="pf-v6-c-content--dt pf-m-editorial">HTML</dt>
485
+ <dd
486
+ class="pf-v6-c-content--dd pf-m-editorial"
487
+ >A markup language for creating web pages</dd>
488
+ <dt class="pf-v6-c-content--dt pf-m-editorial">CSS</dt>
489
+ <dd
490
+ class="pf-v6-c-content--dd pf-m-editorial"
491
+ >A technology to make HTML look better</dd>
484
492
  </dl>
485
493
  <p class="pf-v6-c-content--p pf-m-editorial">
486
494
  Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla.
@@ -535,68 +543,52 @@ cssPrefix: pf-v6-c-content
535
543
  <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.
536
544
  </p>
537
545
  <ul>
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">
546
+ <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
547
+ <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
548
+ <li>
545
549
  Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
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">
550
+ <ul>
551
+ <li>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</li>
552
+ <li>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</li>
553
+ <li>
554
554
  Ut venenatis, nisl scelerisque.
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>
555
+ <ol>
556
+ <li>Donec blandit a lorem id convallis.</li>
557
+ <li>Cras gravida arcu at diam gravida gravida.</li>
558
+ <li>Integer in volutpat libero.</li>
561
559
  </ol>
562
560
  </li>
563
561
  </ul>
564
562
  </li>
565
- <li class="pf-v6-c-content--li">Ut non enim metus.</li>
563
+ <li>Ut non enim metus.</li>
566
564
  </ul>
567
565
  <h3>Third level</h3>
568
566
  <p>
569
567
  Quisque ante lacus, malesuada ac auctor vitae, congue
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.
568
+ <a href="#">non ante</a>. Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
571
569
  </p>
572
570
  <ol>
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">
571
+ <li>Donec blandit a lorem id convallis.</li>
572
+ <li>Cras gravida arcu at diam gravida gravida.</li>
573
+ <li>Integer in volutpat libero.</li>
574
+ <li>Donec a diam tellus.</li>
575
+ <li>
578
576
  Etiam auctor nisl et.
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">
577
+ <ul>
578
+ <li>Donec blandit a lorem id convallis.</li>
579
+ <li>Cras gravida arcu at diam gravida gravida.</li>
580
+ <li>
585
581
  Integer in volutpat libero.
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>
582
+ <ol>
583
+ <li>Donec blandit a lorem id convallis.</li>
584
+ <li>Cras gravida arcu at diam gravida gravida.</li>
591
585
  </ol>
592
586
  </li>
593
587
  </ul>
594
588
  </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>
589
+ <li>Aenean nec tortor orci.</li>
590
+ <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
591
+ <li>Vivamus maximus ultricies pulvinar.</li>
600
592
  </ol>
601
593
  <blockquote
602
594
  class
@@ -608,40 +600,34 @@ cssPrefix: pf-v6-c-content
608
600
  <hr />
609
601
  <h3>Plain list example</h3>
610
602
  <ol class="pf-m-plain">
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">
603
+ <li>Donec blandit a lorem id convallis.</li>
604
+ <li>Cras gravida arcu at diam gravida gravida.</li>
605
+ <li>Integer in volutpat libero.</li>
606
+ <li>Donec a diam tellus.</li>
607
+ <li>
616
608
  Etiam auctor nisl et.
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">
609
+ <ul>
610
+ <li>Regular list</li>
611
+ <li>Donec blandit a lorem id convallis.</li>
612
+ <li>Cras gravida arcu at diam gravida gravida.</li>
613
+ <li>
624
614
  Integer in volutpat libero.
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>
615
+ <ol class="pf-m-plain">
616
+ <li>Nested plain list</li>
617
+ <li>Donec blandit a lorem id convallis.</li>
618
+ <li>Cras gravida arcu at diam gravida gravida.</li>
631
619
  </ol>
632
620
  </li>
633
621
  </ul>
634
622
  </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>
623
+ <li>Aenean nec tortor orci.</li>
624
+ <li>Quisque aliquam cursus urna, non bibendum massa viverra eget.</li>
625
+ <li>Vivamus maximus ultricies pulvinar.</li>
640
626
  </ol>
641
627
  <hr />
642
628
  <h3>Visited link example</h3>
643
629
  <p>
644
- <a class="pf-v6-c-content--a pf-m-plain" href>Visited link</a>
630
+ <a class="pf-m-plain" href>Visited link</a>
645
631
  </p>
646
632
  <hr />
647
633
  <p>
@@ -649,14 +635,12 @@ cssPrefix: pf-v6-c-content
649
635
  commodo.
650
636
  </p>
651
637
  <dl>
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>
638
+ <dt>Web</dt>
639
+ <dd>The part of the internet that contains websites and web pages</dd>
640
+ <dt>HTML</dt>
641
+ <dd>A markup language for creating web pages</dd>
642
+ <dt>CSS</dt>
643
+ <dd>A technology to make HTML look better</dd>
660
644
  </dl>
661
645
  <p>
662
646
  Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis malesuada nulla.