@patternfly/patternfly 6.1.0-prerelease.1 → 6.1.0-prerelease.3

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 (60) hide show
  1. package/README.md +5 -5
  2. package/components/CodeEditor/code-editor.css +15 -0
  3. package/components/CodeEditor/code-editor.scss +16 -1
  4. package/components/Content/content.css +9 -0
  5. package/components/Content/content.scss +7 -0
  6. package/components/Label/label-group.css +12 -0
  7. package/components/Label/label-group.scss +14 -0
  8. package/components/Label/label.css +2 -0
  9. package/components/Label/label.scss +2 -0
  10. package/components/MenuToggle/menu-toggle.css +3 -7
  11. package/components/MenuToggle/menu-toggle.scss +3 -8
  12. package/components/Table/table-grid.css +12 -12
  13. package/components/Table/table-grid.scss +4 -4
  14. package/components/Table/table-tree-view.css +4 -4
  15. package/components/Table/table-tree-view.scss +4 -4
  16. package/components/Table/table.css +1 -0
  17. package/components/Table/table.scss +2 -0
  18. package/components/Title/title.css +4 -0
  19. package/components/Title/title.scss +7 -0
  20. package/components/Wizard/wizard.css +1 -1
  21. package/components/Wizard/wizard.scss +1 -1
  22. package/components/_index.css +63 -24
  23. package/docs/components/CodeEditor/examples/CodeEditor.css +3 -0
  24. package/docs/components/CodeEditor/examples/CodeEditor.md +158 -7
  25. package/docs/components/Content/examples/Content.md +8 -7
  26. package/docs/components/InlineEdit/examples/InlineEdit.md +3 -18
  27. package/docs/components/Label/examples/Label.css +12 -0
  28. package/docs/components/Label/examples/Label.md +127 -0
  29. package/docs/components/MenuToggle/examples/MenuToggle.md +1193 -536
  30. package/docs/components/Table/examples/Table.md +465 -2523
  31. package/docs/components/Title/examples/Title.md +10 -0
  32. package/docs/demos/AboutModal/examples/AboutModal.md +2 -4
  33. package/docs/demos/Alert/examples/Alert.md +6 -12
  34. package/docs/demos/BackToTop/examples/BackToTop.md +2 -4
  35. package/docs/demos/Banner/examples/Banner.md +4 -8
  36. package/docs/demos/Card/examples/Card.css +4 -0
  37. package/docs/demos/Card/examples/Card.md +13 -21
  38. package/docs/demos/CardView/examples/CardView.md +2 -4
  39. package/docs/demos/Dashboard/examples/Dashboard.md +2 -4
  40. package/docs/demos/DataList/examples/DataList.md +13 -46
  41. package/docs/demos/DescriptionList/examples/DescriptionList.md +11 -42
  42. package/docs/demos/Drawer/examples/Drawer.md +6 -12
  43. package/docs/demos/JumpLinks/examples/JumpLinks.md +8 -16
  44. package/docs/demos/Masthead/examples/Masthead.md +18 -36
  45. package/docs/demos/Modal/examples/Modal.md +12 -24
  46. package/docs/demos/Nav/examples/Nav.md +12 -24
  47. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +10 -20
  48. package/docs/demos/Page/examples/Page.md +24 -48
  49. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +14 -28
  50. package/docs/demos/Skeleton/examples/Skeleton.md +2 -4
  51. package/docs/demos/Table/examples/Table.md +191 -984
  52. package/docs/demos/Tabs/examples/Tabs.md +18 -60
  53. package/docs/demos/Toolbar/examples/Toolbar.md +16 -80
  54. package/docs/demos/Wizard/examples/Wizard.md +18 -36
  55. package/package.json +3 -3
  56. package/patternfly-no-globals.css +63 -24
  57. package/patternfly.css +63 -24
  58. package/patternfly.min.css +1 -1
  59. package/patternfly.min.css.map +1 -1
  60. package/sass-utilities/functions.scss +6 -0
package/docs/demos/Masthead/examples/Masthead.md CHANGED
@@ -217,10 +217,8 @@ wrapperTag: div
217
217
  </section>
218
218
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
219
219
  <div class="pf-v6-c-page__main-body">
220
- <div class="pf-v6-c-content">
221
- <h1>Main title</h1>
222
- <p>This is a full page demo.</p>
223
- </div>
220
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
221
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
224
222
  </div>
225
223
  </section>
226
224
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -510,10 +508,8 @@ wrapperTag: div
510
508
  </section>
511
509
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
512
510
  <div class="pf-v6-c-page__main-body">
513
- <div class="pf-v6-c-content">
514
- <h1>Main title</h1>
515
- <p>This is a full page demo.</p>
516
- </div>
511
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
512
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
517
513
  </div>
518
514
  </section>
519
515
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -840,10 +836,8 @@ wrapperTag: div
840
836
  </section>
841
837
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
842
838
  <div class="pf-v6-c-page__main-body">
843
- <div class="pf-v6-c-content">
844
- <h1>Main title</h1>
845
- <p>This is a full page demo.</p>
846
- </div>
839
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
840
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
847
841
  </div>
848
842
  </section>
849
843
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1170,10 +1164,8 @@ wrapperTag: div
1170
1164
  </section>
1171
1165
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1172
1166
  <div class="pf-v6-c-page__main-body">
1173
- <div class="pf-v6-c-content">
1174
- <h1>Main title</h1>
1175
- <p>This is a full page demo.</p>
1176
- </div>
1167
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1168
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1177
1169
  </div>
1178
1170
  </section>
1179
1171
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1437,10 +1429,8 @@ wrapperTag: div
1437
1429
  </section>
1438
1430
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1439
1431
  <div class="pf-v6-c-page__main-body">
1440
- <div class="pf-v6-c-content">
1441
- <h1>Main title</h1>
1442
- <p>This is a full page demo.</p>
1443
- </div>
1432
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1433
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1444
1434
  </div>
1445
1435
  </section>
1446
1436
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1722,10 +1712,8 @@ wrapperTag: div
1722
1712
  </section>
1723
1713
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1724
1714
  <div class="pf-v6-c-page__main-body">
1725
- <div class="pf-v6-c-content">
1726
- <h1>Main title</h1>
1727
- <p>This is a full page demo.</p>
1728
- </div>
1715
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1716
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1729
1717
  </div>
1730
1718
  </section>
1731
1719
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2029,10 +2017,8 @@ wrapperTag: div
2029
2017
  </section>
2030
2018
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2031
2019
  <div class="pf-v6-c-page__main-body">
2032
- <div class="pf-v6-c-content">
2033
- <h1>Main title</h1>
2034
- <p>This is a full page demo.</p>
2035
- </div>
2020
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2021
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2036
2022
  </div>
2037
2023
  </section>
2038
2024
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2346,10 +2332,8 @@ wrapperTag: div
2346
2332
  </section>
2347
2333
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2348
2334
  <div class="pf-v6-c-page__main-body">
2349
- <div class="pf-v6-c-content">
2350
- <h1>Main title</h1>
2351
- <p>This is a full page demo.</p>
2352
- </div>
2335
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2336
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2353
2337
  </div>
2354
2338
  </section>
2355
2339
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2681,10 +2665,8 @@ wrapperTag: div
2681
2665
  </section>
2682
2666
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2683
2667
  <div class="pf-v6-c-page__main-body">
2684
- <div class="pf-v6-c-content">
2685
- <h1>Main title</h1>
2686
- <p>This is a full page demo.</p>
2687
- </div>
2668
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2669
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2688
2670
  </div>
2689
2671
  </section>
2690
2672
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -259,10 +259,8 @@ section: components
259
259
  </section>
260
260
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
261
261
  <div class="pf-v6-c-page__main-body">
262
- <div class="pf-v6-c-content">
263
- <h1>Main title</h1>
264
- <p>This is a full page demo.</p>
265
- </div>
262
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
263
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
266
264
  </div>
267
265
  </section>
268
266
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -612,10 +610,8 @@ section: components
612
610
  </section>
613
611
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
614
612
  <div class="pf-v6-c-page__main-body">
615
- <div class="pf-v6-c-content">
616
- <h1>Main title</h1>
617
- <p>This is a full page demo.</p>
618
- </div>
613
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
614
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
619
615
  </div>
620
616
  </section>
621
617
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -971,10 +967,8 @@ section: components
971
967
  </section>
972
968
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
973
969
  <div class="pf-v6-c-page__main-body">
974
- <div class="pf-v6-c-content">
975
- <h1>Main title</h1>
976
- <p>This is a full page demo.</p>
977
- </div>
970
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
971
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
978
972
  </div>
979
973
  </section>
980
974
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1320,10 +1314,8 @@ section: components
1320
1314
  </section>
1321
1315
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1322
1316
  <div class="pf-v6-c-page__main-body">
1323
- <div class="pf-v6-c-content">
1324
- <h1>Main title</h1>
1325
- <p>This is a full page demo.</p>
1326
- </div>
1317
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1318
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1327
1319
  </div>
1328
1320
  </section>
1329
1321
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1669,10 +1661,8 @@ section: components
1669
1661
  </section>
1670
1662
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1671
1663
  <div class="pf-v6-c-page__main-body">
1672
- <div class="pf-v6-c-content">
1673
- <h1>Main title</h1>
1674
- <p>This is a full page demo.</p>
1675
- </div>
1664
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1665
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1676
1666
  </div>
1677
1667
  </section>
1678
1668
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2018,10 +2008,8 @@ section: components
2018
2008
  </section>
2019
2009
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2020
2010
  <div class="pf-v6-c-page__main-body">
2021
- <div class="pf-v6-c-content">
2022
- <h1>Main title</h1>
2023
- <p>This is a full page demo.</p>
2024
- </div>
2011
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2012
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2025
2013
  </div>
2026
2014
  </section>
2027
2015
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -259,10 +259,8 @@ section: components
259
259
  </section>
260
260
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
261
261
  <div class="pf-v6-c-page__main-body">
262
- <div class="pf-v6-c-content">
263
- <h1>Main title</h1>
264
- <p>This is a full page demo.</p>
265
- </div>
262
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
263
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
266
264
  </div>
267
265
  </section>
268
266
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -595,10 +593,8 @@ section: components
595
593
  </section>
596
594
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
597
595
  <div class="pf-v6-c-page__main-body">
598
- <div class="pf-v6-c-content">
599
- <h1>Main title</h1>
600
- <p>This is a full page demo.</p>
601
- </div>
596
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
597
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
602
598
  </div>
603
599
  </section>
604
600
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -989,10 +985,8 @@ section: components
989
985
  </section>
990
986
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
991
987
  <div class="pf-v6-c-page__main-body">
992
- <div class="pf-v6-c-content">
993
- <h1>Main title</h1>
994
- <p>This is a full page demo.</p>
995
- </div>
988
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
989
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
996
990
  </div>
997
991
  </section>
998
992
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1306,10 +1300,8 @@ section: components
1306
1300
  </section>
1307
1301
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1308
1302
  <div class="pf-v6-c-page__main-body">
1309
- <div class="pf-v6-c-content">
1310
- <h1>Main title</h1>
1311
- <p>This is a full page demo.</p>
1312
- </div>
1303
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1304
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1313
1305
  </div>
1314
1306
  </section>
1315
1307
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1635,10 +1627,8 @@ section: components
1635
1627
  </section>
1636
1628
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1637
1629
  <div class="pf-v6-c-page__main-body">
1638
- <div class="pf-v6-c-content">
1639
- <h1>Main title</h1>
1640
- <p>This is a full page demo.</p>
1641
- </div>
1630
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1631
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1642
1632
  </div>
1643
1633
  </section>
1644
1634
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1991,10 +1981,8 @@ section: components
1991
1981
  </section>
1992
1982
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1993
1983
  <div class="pf-v6-c-page__main-body">
1994
- <div class="pf-v6-c-content">
1995
- <h1>Main title</h1>
1996
- <p>This is a full page demo.</p>
1997
- </div>
1984
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1985
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1998
1986
  </div>
1999
1987
  </section>
2000
1988
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -270,10 +270,8 @@ section: components
270
270
  </section>
271
271
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
272
272
  <div class="pf-v6-c-page__main-body">
273
- <div class="pf-v6-c-content">
274
- <h1>Main title</h1>
275
- <p>This is a full page demo.</p>
276
- </div>
273
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
274
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
277
275
  </div>
278
276
  </section>
279
277
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -912,10 +910,8 @@ section: components
912
910
  </section>
913
911
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
914
912
  <div class="pf-v6-c-page__main-body">
915
- <div class="pf-v6-c-content">
916
- <h1>Main title</h1>
917
- <p>This is a full page demo.</p>
918
- </div>
913
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
914
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
919
915
  </div>
920
916
  </section>
921
917
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1554,10 +1550,8 @@ section: components
1554
1550
  </section>
1555
1551
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1556
1552
  <div class="pf-v6-c-page__main-body">
1557
- <div class="pf-v6-c-content">
1558
- <h1>Main title</h1>
1559
- <p>This is a full page demo.</p>
1560
- </div>
1553
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1554
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1561
1555
  </div>
1562
1556
  </section>
1563
1557
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2199,10 +2193,8 @@ section: components
2199
2193
  </section>
2200
2194
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2201
2195
  <div class="pf-v6-c-page__main-body">
2202
- <div class="pf-v6-c-content">
2203
- <h1>Main title</h1>
2204
- <p>This is a full page demo.</p>
2205
- </div>
2196
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2197
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2206
2198
  </div>
2207
2199
  </section>
2208
2200
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2839,10 +2831,8 @@ section: components
2839
2831
  </section>
2840
2832
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2841
2833
  <div class="pf-v6-c-page__main-body">
2842
- <div class="pf-v6-c-content">
2843
- <h1>Main title</h1>
2844
- <p>This is a full page demo.</p>
2845
- </div>
2834
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2835
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2846
2836
  </div>
2847
2837
  </section>
2848
2838
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
package/docs/demos/Page/examples/Page.md CHANGED
@@ -259,10 +259,8 @@ wrapperTag: div
259
259
  </section>
260
260
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
261
261
  <div class="pf-v6-c-page__main-body">
262
- <div class="pf-v6-c-content">
263
- <h1>Main title</h1>
264
- <p>This is a full page demo.</p>
265
- </div>
262
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
263
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
266
264
  </div>
267
265
  </section>
268
266
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -581,10 +579,8 @@ wrapperTag: div
581
579
  </section>
582
580
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
583
581
  <div class="pf-v6-c-page__main-body">
584
- <div class="pf-v6-c-content">
585
- <h1>Main title</h1>
586
- <p>This is a full page demo.</p>
587
- </div>
582
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
583
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
588
584
  </div>
589
585
  </section>
590
586
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -915,10 +911,8 @@ wrapperTag: div
915
911
  </section>
916
912
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
917
913
  <div class="pf-v6-c-page__main-body">
918
- <div class="pf-v6-c-content">
919
- <h1>Main title</h1>
920
- <p>This is a full page demo.</p>
921
- </div>
914
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
915
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
922
916
  </div>
923
917
  </section>
924
918
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1344,10 +1338,8 @@ wrapperTag: div
1344
1338
  </section>
1345
1339
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1346
1340
  <div class="pf-v6-c-page__main-body">
1347
- <div class="pf-v6-c-content">
1348
- <h1>Main title</h1>
1349
- <p>This is a full page demo.</p>
1350
- </div>
1341
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1342
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1351
1343
  </div>
1352
1344
  </section>
1353
1345
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -1773,10 +1765,8 @@ wrapperTag: div
1773
1765
  </section>
1774
1766
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1775
1767
  <div class="pf-v6-c-page__main-body">
1776
- <div class="pf-v6-c-content">
1777
- <h1>Main title</h1>
1778
- <p>This is a full page demo.</p>
1779
- </div>
1768
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1769
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1780
1770
  </div>
1781
1771
  </section>
1782
1772
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -2201,10 +2191,8 @@ wrapperTag: div
2201
2191
  </section>
2202
2192
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2203
2193
  <div class="pf-v6-c-page__main-body">
2204
- <div class="pf-v6-c-content">
2205
- <h1>Main title</h1>
2206
- <p>This is a full page demo.</p>
2207
- </div>
2194
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2195
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2208
2196
  </div>
2209
2197
  </section>
2210
2198
  </div>
@@ -2629,10 +2617,8 @@ wrapperTag: div
2629
2617
  </section>
2630
2618
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2631
2619
  <div class="pf-v6-c-page__main-body">
2632
- <div class="pf-v6-c-content">
2633
- <h1>Main title</h1>
2634
- <p>This is a full page demo.</p>
2635
- </div>
2620
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2621
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2636
2622
  </div>
2637
2623
  </section>
2638
2624
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -3062,10 +3048,8 @@ wrapperTag: div
3062
3048
  class="pf-v6-c-page__main-section pf-m-limit-width pf-m-shadow-bottom"
3063
3049
  >
3064
3050
  <div class="pf-v6-c-page__main-body">
3065
- <div class="pf-v6-c-content">
3066
- <h1>Main title</h1>
3067
- <p>This is a full page demo.</p>
3068
- </div>
3051
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3052
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3069
3053
  </div>
3070
3054
  </section>
3071
3055
  <section
@@ -3805,10 +3789,8 @@ wrapperTag: div
3805
3789
  </section>
3806
3790
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
3807
3791
  <div class="pf-v6-c-page__main-body">
3808
- <div class="pf-v6-c-content">
3809
- <h1>Main title</h1>
3810
- <p>This is a full page demo.</p>
3811
- </div>
3792
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3793
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3812
3794
  </div>
3813
3795
  </section>
3814
3796
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -4162,10 +4144,8 @@ wrapperTag: div
4162
4144
  </section>
4163
4145
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
4164
4146
  <div class="pf-v6-c-page__main-body">
4165
- <div class="pf-v6-c-content">
4166
- <h1>Main title</h1>
4167
- <p>This is a full page demo.</p>
4168
- </div>
4147
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4148
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
4169
4149
  </div>
4170
4150
  </section>
4171
4151
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -4466,10 +4446,8 @@ wrapperTag: div
4466
4446
  </section>
4467
4447
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
4468
4448
  <div class="pf-v6-c-page__main-body">
4469
- <div class="pf-v6-c-content">
4470
- <h1>Main title</h1>
4471
- <p>This is a full page demo.</p>
4472
- </div>
4449
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4450
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
4473
4451
  </div>
4474
4452
  </section>
4475
4453
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
@@ -4770,10 +4748,8 @@ wrapperTag: div
4770
4748
  </section>
4771
4749
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
4772
4750
  <div class="pf-v6-c-page__main-body">
4773
- <div class="pf-v6-c-content">
4774
- <h1>Main title</h1>
4775
- <p>This is a full page demo.</p>
4776
- </div>
4751
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4752
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
4777
4753
  </div>
4778
4754
  </section>
4779
4755
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md CHANGED
@@ -263,10 +263,8 @@ wrapperTag: div
263
263
  </section>
264
264
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
265
265
  <div class="pf-v6-c-page__main-body">
266
- <div class="pf-v6-c-content">
267
- <h1>Main title</h1>
268
- <p>This is a full page demo.</p>
269
- </div>
266
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
267
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
270
268
  </div>
271
269
  </section>
272
270
  <section class="pf-v6-c-page__main-section">
@@ -1396,10 +1394,8 @@ wrapperTag: div
1396
1394
  </section>
1397
1395
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
1398
1396
  <div class="pf-v6-c-page__main-body">
1399
- <div class="pf-v6-c-content">
1400
- <h1>Main title</h1>
1401
- <p>This is a full page demo.</p>
1402
- </div>
1397
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
1398
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
1403
1399
  </div>
1404
1400
  </section>
1405
1401
  <div class="pf-v6-c-divider" role="separator"></div>
@@ -2449,10 +2445,8 @@ wrapperTag: div
2449
2445
  </section>
2450
2446
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
2451
2447
  <div class="pf-v6-c-page__main-body">
2452
- <div class="pf-v6-c-content">
2453
- <h1>Main title</h1>
2454
- <p>This is a full page demo.</p>
2455
- </div>
2448
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
2449
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
2456
2450
  </div>
2457
2451
  </section>
2458
2452
  <div class="pf-v6-c-divider" role="separator"></div>
@@ -3446,10 +3440,8 @@ wrapperTag: div
3446
3440
  </section>
3447
3441
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
3448
3442
  <div class="pf-v6-c-page__main-body">
3449
- <div class="pf-v6-c-content">
3450
- <h1>Main title</h1>
3451
- <p>This is a full page demo.</p>
3452
- </div>
3443
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
3444
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
3453
3445
  </div>
3454
3446
  </section>
3455
3447
  <section class="pf-v6-c-page__main-section pf-m-no-padding">
@@ -4561,10 +4553,8 @@ wrapperTag: div
4561
4553
  </section>
4562
4554
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
4563
4555
  <div class="pf-v6-c-page__main-body">
4564
- <div class="pf-v6-c-content">
4565
- <h1>Main title</h1>
4566
- <p>This is a full page demo.</p>
4567
- </div>
4556
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
4557
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
4568
4558
  </div>
4569
4559
  </section>
4570
4560
  <div class="pf-v6-c-divider" role="separator"></div>
@@ -5023,10 +5013,8 @@ wrapperTag: div
5023
5013
  </section>
5024
5014
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
5025
5015
  <div class="pf-v6-c-page__main-body">
5026
- <div class="pf-v6-c-content">
5027
- <h1>Main title</h1>
5028
- <p>This is a full page demo.</p>
5029
- </div>
5016
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5017
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
5030
5018
  </div>
5031
5019
  </section>
5032
5020
  <div class="pf-v6-c-divider" role="separator"></div>
@@ -5646,10 +5634,8 @@ wrapperTag: div
5646
5634
  </section>
5647
5635
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
5648
5636
  <div class="pf-v6-c-page__main-body">
5649
- <div class="pf-v6-c-content">
5650
- <h1>Main title</h1>
5651
- <p>This is a full page demo.</p>
5652
- </div>
5637
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
5638
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
5653
5639
  </div>
5654
5640
  </section>
5655
5641
  <div class="pf-v6-c-divider" role="separator"></div>
package/docs/demos/Skeleton/examples/Skeleton.md CHANGED
@@ -259,10 +259,8 @@ section: components
259
259
  </section>
260
260
  <section class="pf-v6-c-page__main-section pf-m-limit-width">
261
261
  <div class="pf-v6-c-page__main-body">
262
- <div class="pf-v6-c-content">
263
- <h1>Main title</h1>
264
- <p>This is a full page demo.</p>
265
- </div>
262
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
263
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
266
264
  </div>
267
265
  </section>
268
266
  <section class="pf-v6-c-page__main-section">