@patternfly/patternfly 6.0.0-alpha.103 → 6.0.0-alpha.104

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 (36) hide show
  1. package/components/Drawer/drawer.css +5 -4
  2. package/components/Drawer/drawer.scss +7 -6
  3. package/components/Page/page.css +24 -23
  4. package/components/Page/page.scss +24 -23
  5. package/docs/components/Drawer/examples/Drawer.md +2 -1
  6. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  7. package/docs/components/Page/examples/Page.md +114 -100
  8. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  9. package/docs/demos/Alert/examples/Alert.md +551 -524
  10. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  11. package/docs/demos/Banner/examples/Banner.md +420 -412
  12. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  14. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  15. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  17. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  19. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  20. package/docs/demos/Modal/examples/Modal.md +486 -474
  21. package/docs/demos/Nav/examples/Nav.md +528 -510
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  23. package/docs/demos/Page/examples/Page.md +1656 -1633
  24. package/docs/demos/Page/examples/Penta.md +632 -577
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  26. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  27. package/docs/demos/Table/examples/Table.md +14137 -13972
  28. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  29. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  30. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +29 -27
  33. package/patternfly-theme-dark-unversioned.css +29 -27
  34. package/patternfly.css +29 -27
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
package/docs/demos/Nav/examples/Nav.md CHANGED
@@ -226,92 +226,94 @@ section: components
226
226
  </nav>
227
227
  </div>
228
228
  </div>
229
- <main
230
- class="pf-v6-c-page__main"
231
- tabindex="-1"
232
- id="main-content-nav-basic-example"
233
- >
234
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v6-c-page__main-body">
236
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v6-c-breadcrumb__list" role="list">
238
- <li class="pf-v6-c-breadcrumb__item">
239
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
- </li>
241
- <li class="pf-v6-c-breadcrumb__item">
242
- <span class="pf-v6-c-breadcrumb__item-divider">
243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
244
- </span>
229
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
230
+ <main
231
+ class="pf-v6-c-page__main"
232
+ tabindex="-1"
233
+ id="main-content-nav-basic-example"
234
+ >
235
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
236
+ <div class="pf-v6-c-page__main-body">
237
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
238
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
239
+ <li class="pf-v6-c-breadcrumb__item">
240
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
241
+ </li>
242
+ <li class="pf-v6-c-breadcrumb__item">
243
+ <span class="pf-v6-c-breadcrumb__item-divider">
244
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
245
+ </span>
245
246
 
246
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
- </li>
248
- <li class="pf-v6-c-breadcrumb__item">
249
- <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
251
- </span>
247
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
248
+ </li>
249
+ <li class="pf-v6-c-breadcrumb__item">
250
+ <span class="pf-v6-c-breadcrumb__item-divider">
251
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
252
+ </span>
252
253
 
253
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
- </li>
255
- <li class="pf-v6-c-breadcrumb__item">
256
- <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
258
- </span>
254
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
255
+ </li>
256
+ <li class="pf-v6-c-breadcrumb__item">
257
+ <span class="pf-v6-c-breadcrumb__item-divider">
258
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
259
+ </span>
259
260
 
260
- <a
261
- href="#"
262
- class="pf-v6-c-breadcrumb__link pf-m-current"
263
- aria-current="page"
264
- >Section landing</a>
265
- </li>
266
- </ol>
267
- </nav>
268
- </div>
269
- </section>
270
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v6-c-page__main-body">
272
- <div class="pf-v6-c-content">
273
- <h1>Main title</h1>
274
- <p>This is a full page demo.</p>
261
+ <a
262
+ href="#"
263
+ class="pf-v6-c-breadcrumb__link pf-m-current"
264
+ aria-current="page"
265
+ >Section landing</a>
266
+ </li>
267
+ </ol>
268
+ </nav>
275
269
  </div>
276
- </div>
277
- </section>
278
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
279
- <div class="pf-v6-c-page__main-body">
280
- <div class="pf-v6-l-gallery pf-m-gutter">
281
- <div class="pf-v6-c-card">
282
- <div class="pf-v6-c-card__body">This is a card</div>
283
- </div>
284
- <div class="pf-v6-c-card">
285
- <div class="pf-v6-c-card__body">This is a card</div>
286
- </div>
287
- <div class="pf-v6-c-card">
288
- <div class="pf-v6-c-card__body">This is a card</div>
289
- </div>
290
- <div class="pf-v6-c-card">
291
- <div class="pf-v6-c-card__body">This is a card</div>
292
- </div>
293
- <div class="pf-v6-c-card">
294
- <div class="pf-v6-c-card__body">This is a card</div>
295
- </div>
296
- <div class="pf-v6-c-card">
297
- <div class="pf-v6-c-card__body">This is a card</div>
298
- </div>
299
- <div class="pf-v6-c-card">
300
- <div class="pf-v6-c-card__body">This is a card</div>
270
+ </section>
271
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
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>
301
276
  </div>
302
- <div class="pf-v6-c-card">
303
- <div class="pf-v6-c-card__body">This is a card</div>
304
- </div>
305
- <div class="pf-v6-c-card">
306
- <div class="pf-v6-c-card__body">This is a card</div>
307
- </div>
308
- <div class="pf-v6-c-card">
309
- <div class="pf-v6-c-card__body">This is a card</div>
277
+ </div>
278
+ </section>
279
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
280
+ <div class="pf-v6-c-page__main-body">
281
+ <div class="pf-v6-l-gallery pf-m-gutter">
282
+ <div class="pf-v6-c-card">
283
+ <div class="pf-v6-c-card__body">This is a card</div>
284
+ </div>
285
+ <div class="pf-v6-c-card">
286
+ <div class="pf-v6-c-card__body">This is a card</div>
287
+ </div>
288
+ <div class="pf-v6-c-card">
289
+ <div class="pf-v6-c-card__body">This is a card</div>
290
+ </div>
291
+ <div class="pf-v6-c-card">
292
+ <div class="pf-v6-c-card__body">This is a card</div>
293
+ </div>
294
+ <div class="pf-v6-c-card">
295
+ <div class="pf-v6-c-card__body">This is a card</div>
296
+ </div>
297
+ <div class="pf-v6-c-card">
298
+ <div class="pf-v6-c-card__body">This is a card</div>
299
+ </div>
300
+ <div class="pf-v6-c-card">
301
+ <div class="pf-v6-c-card__body">This is a card</div>
302
+ </div>
303
+ <div class="pf-v6-c-card">
304
+ <div class="pf-v6-c-card__body">This is a card</div>
305
+ </div>
306
+ <div class="pf-v6-c-card">
307
+ <div class="pf-v6-c-card__body">This is a card</div>
308
+ </div>
309
+ <div class="pf-v6-c-card">
310
+ <div class="pf-v6-c-card__body">This is a card</div>
311
+ </div>
310
312
  </div>
311
313
  </div>
312
- </div>
313
- </section>
314
- </main>
314
+ </section>
315
+ </main>
316
+ </div>
315
317
  </div>
316
318
 
317
319
  ```
@@ -563,92 +565,94 @@ section: components
563
565
  </nav>
564
566
  </div>
565
567
  </div>
566
- <main
567
- class="pf-v6-c-page__main"
568
- tabindex="-1"
569
- id="main-content-nav-grouped-nav-example"
570
- >
571
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
572
- <div class="pf-v6-c-page__main-body">
573
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
574
- <ol class="pf-v6-c-breadcrumb__list" role="list">
575
- <li class="pf-v6-c-breadcrumb__item">
576
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
577
- </li>
578
- <li class="pf-v6-c-breadcrumb__item">
579
- <span class="pf-v6-c-breadcrumb__item-divider">
580
- <i class="fas fa-angle-right" aria-hidden="true"></i>
581
- </span>
568
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
569
+ <main
570
+ class="pf-v6-c-page__main"
571
+ tabindex="-1"
572
+ id="main-content-nav-grouped-nav-example"
573
+ >
574
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
575
+ <div class="pf-v6-c-page__main-body">
576
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
577
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
578
+ <li class="pf-v6-c-breadcrumb__item">
579
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
580
+ </li>
581
+ <li class="pf-v6-c-breadcrumb__item">
582
+ <span class="pf-v6-c-breadcrumb__item-divider">
583
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
584
+ </span>
582
585
 
583
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
584
- </li>
585
- <li class="pf-v6-c-breadcrumb__item">
586
- <span class="pf-v6-c-breadcrumb__item-divider">
587
- <i class="fas fa-angle-right" aria-hidden="true"></i>
588
- </span>
586
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
587
+ </li>
588
+ <li class="pf-v6-c-breadcrumb__item">
589
+ <span class="pf-v6-c-breadcrumb__item-divider">
590
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
591
+ </span>
589
592
 
590
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
591
- </li>
592
- <li class="pf-v6-c-breadcrumb__item">
593
- <span class="pf-v6-c-breadcrumb__item-divider">
594
- <i class="fas fa-angle-right" aria-hidden="true"></i>
595
- </span>
593
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
594
+ </li>
595
+ <li class="pf-v6-c-breadcrumb__item">
596
+ <span class="pf-v6-c-breadcrumb__item-divider">
597
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
598
+ </span>
596
599
 
597
- <a
598
- href="#"
599
- class="pf-v6-c-breadcrumb__link pf-m-current"
600
- aria-current="page"
601
- >Section landing</a>
602
- </li>
603
- </ol>
604
- </nav>
605
- </div>
606
- </section>
607
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
608
- <div class="pf-v6-c-page__main-body">
609
- <div class="pf-v6-c-content">
610
- <h1>Main title</h1>
611
- <p>This is a full page demo.</p>
600
+ <a
601
+ href="#"
602
+ class="pf-v6-c-breadcrumb__link pf-m-current"
603
+ aria-current="page"
604
+ >Section landing</a>
605
+ </li>
606
+ </ol>
607
+ </nav>
612
608
  </div>
613
- </div>
614
- </section>
615
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
616
- <div class="pf-v6-c-page__main-body">
617
- <div class="pf-v6-l-gallery pf-m-gutter">
618
- <div class="pf-v6-c-card">
619
- <div class="pf-v6-c-card__body">This is a card</div>
620
- </div>
621
- <div class="pf-v6-c-card">
622
- <div class="pf-v6-c-card__body">This is a card</div>
623
- </div>
624
- <div class="pf-v6-c-card">
625
- <div class="pf-v6-c-card__body">This is a card</div>
626
- </div>
627
- <div class="pf-v6-c-card">
628
- <div class="pf-v6-c-card__body">This is a card</div>
629
- </div>
630
- <div class="pf-v6-c-card">
631
- <div class="pf-v6-c-card__body">This is a card</div>
632
- </div>
633
- <div class="pf-v6-c-card">
634
- <div class="pf-v6-c-card__body">This is a card</div>
635
- </div>
636
- <div class="pf-v6-c-card">
637
- <div class="pf-v6-c-card__body">This is a card</div>
638
- </div>
639
- <div class="pf-v6-c-card">
640
- <div class="pf-v6-c-card__body">This is a card</div>
609
+ </section>
610
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
611
+ <div class="pf-v6-c-page__main-body">
612
+ <div class="pf-v6-c-content">
613
+ <h1>Main title</h1>
614
+ <p>This is a full page demo.</p>
641
615
  </div>
642
- <div class="pf-v6-c-card">
643
- <div class="pf-v6-c-card__body">This is a card</div>
644
- </div>
645
- <div class="pf-v6-c-card">
646
- <div class="pf-v6-c-card__body">This is a card</div>
616
+ </div>
617
+ </section>
618
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
619
+ <div class="pf-v6-c-page__main-body">
620
+ <div class="pf-v6-l-gallery pf-m-gutter">
621
+ <div class="pf-v6-c-card">
622
+ <div class="pf-v6-c-card__body">This is a card</div>
623
+ </div>
624
+ <div class="pf-v6-c-card">
625
+ <div class="pf-v6-c-card__body">This is a card</div>
626
+ </div>
627
+ <div class="pf-v6-c-card">
628
+ <div class="pf-v6-c-card__body">This is a card</div>
629
+ </div>
630
+ <div class="pf-v6-c-card">
631
+ <div class="pf-v6-c-card__body">This is a card</div>
632
+ </div>
633
+ <div class="pf-v6-c-card">
634
+ <div class="pf-v6-c-card__body">This is a card</div>
635
+ </div>
636
+ <div class="pf-v6-c-card">
637
+ <div class="pf-v6-c-card__body">This is a card</div>
638
+ </div>
639
+ <div class="pf-v6-c-card">
640
+ <div class="pf-v6-c-card__body">This is a card</div>
641
+ </div>
642
+ <div class="pf-v6-c-card">
643
+ <div class="pf-v6-c-card__body">This is a card</div>
644
+ </div>
645
+ <div class="pf-v6-c-card">
646
+ <div class="pf-v6-c-card__body">This is a card</div>
647
+ </div>
648
+ <div class="pf-v6-c-card">
649
+ <div class="pf-v6-c-card__body">This is a card</div>
650
+ </div>
647
651
  </div>
648
652
  </div>
649
- </div>
650
- </section>
651
- </main>
653
+ </section>
654
+ </main>
655
+ </div>
652
656
  </div>
653
657
 
654
658
  ```
@@ -956,92 +960,94 @@ section: components
956
960
  </nav>
957
961
  </div>
958
962
  </div>
959
- <main
960
- class="pf-v6-c-page__main"
961
- tabindex="-1"
962
- id="main-content-nav-expandable-example"
963
- >
964
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
965
- <div class="pf-v6-c-page__main-body">
966
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
967
- <ol class="pf-v6-c-breadcrumb__list" role="list">
968
- <li class="pf-v6-c-breadcrumb__item">
969
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
970
- </li>
971
- <li class="pf-v6-c-breadcrumb__item">
972
- <span class="pf-v6-c-breadcrumb__item-divider">
973
- <i class="fas fa-angle-right" aria-hidden="true"></i>
974
- </span>
963
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
964
+ <main
965
+ class="pf-v6-c-page__main"
966
+ tabindex="-1"
967
+ id="main-content-nav-expandable-example"
968
+ >
969
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
970
+ <div class="pf-v6-c-page__main-body">
971
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
972
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
973
+ <li class="pf-v6-c-breadcrumb__item">
974
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
975
+ </li>
976
+ <li class="pf-v6-c-breadcrumb__item">
977
+ <span class="pf-v6-c-breadcrumb__item-divider">
978
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
979
+ </span>
975
980
 
976
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
977
- </li>
978
- <li class="pf-v6-c-breadcrumb__item">
979
- <span class="pf-v6-c-breadcrumb__item-divider">
980
- <i class="fas fa-angle-right" aria-hidden="true"></i>
981
- </span>
981
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
982
+ </li>
983
+ <li class="pf-v6-c-breadcrumb__item">
984
+ <span class="pf-v6-c-breadcrumb__item-divider">
985
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
986
+ </span>
982
987
 
983
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
984
- </li>
985
- <li class="pf-v6-c-breadcrumb__item">
986
- <span class="pf-v6-c-breadcrumb__item-divider">
987
- <i class="fas fa-angle-right" aria-hidden="true"></i>
988
- </span>
988
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
989
+ </li>
990
+ <li class="pf-v6-c-breadcrumb__item">
991
+ <span class="pf-v6-c-breadcrumb__item-divider">
992
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
993
+ </span>
989
994
 
990
- <a
991
- href="#"
992
- class="pf-v6-c-breadcrumb__link pf-m-current"
993
- aria-current="page"
994
- >Section landing</a>
995
- </li>
996
- </ol>
997
- </nav>
998
- </div>
999
- </section>
1000
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1001
- <div class="pf-v6-c-page__main-body">
1002
- <div class="pf-v6-c-content">
1003
- <h1>Main title</h1>
1004
- <p>This is a full page demo.</p>
995
+ <a
996
+ href="#"
997
+ class="pf-v6-c-breadcrumb__link pf-m-current"
998
+ aria-current="page"
999
+ >Section landing</a>
1000
+ </li>
1001
+ </ol>
1002
+ </nav>
1005
1003
  </div>
1006
- </div>
1007
- </section>
1008
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1009
- <div class="pf-v6-c-page__main-body">
1010
- <div class="pf-v6-l-gallery pf-m-gutter">
1011
- <div class="pf-v6-c-card">
1012
- <div class="pf-v6-c-card__body">This is a card</div>
1004
+ </section>
1005
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1006
+ <div class="pf-v6-c-page__main-body">
1007
+ <div class="pf-v6-c-content">
1008
+ <h1>Main title</h1>
1009
+ <p>This is a full page demo.</p>
1013
1010
  </div>
1014
- <div class="pf-v6-c-card">
1015
- <div class="pf-v6-c-card__body">This is a card</div>
1016
- </div>
1017
- <div class="pf-v6-c-card">
1018
- <div class="pf-v6-c-card__body">This is a card</div>
1019
- </div>
1020
- <div class="pf-v6-c-card">
1021
- <div class="pf-v6-c-card__body">This is a card</div>
1022
- </div>
1023
- <div class="pf-v6-c-card">
1024
- <div class="pf-v6-c-card__body">This is a card</div>
1025
- </div>
1026
- <div class="pf-v6-c-card">
1027
- <div class="pf-v6-c-card__body">This is a card</div>
1028
- </div>
1029
- <div class="pf-v6-c-card">
1030
- <div class="pf-v6-c-card__body">This is a card</div>
1031
- </div>
1032
- <div class="pf-v6-c-card">
1033
- <div class="pf-v6-c-card__body">This is a card</div>
1034
- </div>
1035
- <div class="pf-v6-c-card">
1036
- <div class="pf-v6-c-card__body">This is a card</div>
1037
- </div>
1038
- <div class="pf-v6-c-card">
1039
- <div class="pf-v6-c-card__body">This is a card</div>
1011
+ </div>
1012
+ </section>
1013
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1014
+ <div class="pf-v6-c-page__main-body">
1015
+ <div class="pf-v6-l-gallery pf-m-gutter">
1016
+ <div class="pf-v6-c-card">
1017
+ <div class="pf-v6-c-card__body">This is a card</div>
1018
+ </div>
1019
+ <div class="pf-v6-c-card">
1020
+ <div class="pf-v6-c-card__body">This is a card</div>
1021
+ </div>
1022
+ <div class="pf-v6-c-card">
1023
+ <div class="pf-v6-c-card__body">This is a card</div>
1024
+ </div>
1025
+ <div class="pf-v6-c-card">
1026
+ <div class="pf-v6-c-card__body">This is a card</div>
1027
+ </div>
1028
+ <div class="pf-v6-c-card">
1029
+ <div class="pf-v6-c-card__body">This is a card</div>
1030
+ </div>
1031
+ <div class="pf-v6-c-card">
1032
+ <div class="pf-v6-c-card__body">This is a card</div>
1033
+ </div>
1034
+ <div class="pf-v6-c-card">
1035
+ <div class="pf-v6-c-card__body">This is a card</div>
1036
+ </div>
1037
+ <div class="pf-v6-c-card">
1038
+ <div class="pf-v6-c-card__body">This is a card</div>
1039
+ </div>
1040
+ <div class="pf-v6-c-card">
1041
+ <div class="pf-v6-c-card__body">This is a card</div>
1042
+ </div>
1043
+ <div class="pf-v6-c-card">
1044
+ <div class="pf-v6-c-card__body">This is a card</div>
1045
+ </div>
1040
1046
  </div>
1041
1047
  </div>
1042
- </div>
1043
- </section>
1044
- </main>
1048
+ </section>
1049
+ </main>
1050
+ </div>
1045
1051
  </div>
1046
1052
 
1047
1053
  ```
@@ -1279,92 +1285,94 @@ section: components
1279
1285
  </div>
1280
1286
  </div>
1281
1287
  </header>
1282
- <main
1283
- class="pf-v6-c-page__main"
1284
- tabindex="-1"
1285
- id="main-content-nav-horizontal-example"
1286
- >
1287
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1288
- <div class="pf-v6-c-page__main-body">
1289
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1290
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1291
- <li class="pf-v6-c-breadcrumb__item">
1292
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1293
- </li>
1294
- <li class="pf-v6-c-breadcrumb__item">
1295
- <span class="pf-v6-c-breadcrumb__item-divider">
1296
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1297
- </span>
1288
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1289
+ <main
1290
+ class="pf-v6-c-page__main"
1291
+ tabindex="-1"
1292
+ id="main-content-nav-horizontal-example"
1293
+ >
1294
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1295
+ <div class="pf-v6-c-page__main-body">
1296
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1297
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1298
+ <li class="pf-v6-c-breadcrumb__item">
1299
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1300
+ </li>
1301
+ <li class="pf-v6-c-breadcrumb__item">
1302
+ <span class="pf-v6-c-breadcrumb__item-divider">
1303
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1304
+ </span>
1298
1305
 
1299
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1300
- </li>
1301
- <li class="pf-v6-c-breadcrumb__item">
1302
- <span class="pf-v6-c-breadcrumb__item-divider">
1303
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1304
- </span>
1306
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1307
+ </li>
1308
+ <li class="pf-v6-c-breadcrumb__item">
1309
+ <span class="pf-v6-c-breadcrumb__item-divider">
1310
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1311
+ </span>
1305
1312
 
1306
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1307
- </li>
1308
- <li class="pf-v6-c-breadcrumb__item">
1309
- <span class="pf-v6-c-breadcrumb__item-divider">
1310
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1311
- </span>
1313
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1314
+ </li>
1315
+ <li class="pf-v6-c-breadcrumb__item">
1316
+ <span class="pf-v6-c-breadcrumb__item-divider">
1317
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1318
+ </span>
1312
1319
 
1313
- <a
1314
- href="#"
1315
- class="pf-v6-c-breadcrumb__link pf-m-current"
1316
- aria-current="page"
1317
- >Section landing</a>
1318
- </li>
1319
- </ol>
1320
- </nav>
1321
- </div>
1322
- </section>
1323
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1324
- <div class="pf-v6-c-page__main-body">
1325
- <div class="pf-v6-c-content">
1326
- <h1>Main title</h1>
1327
- <p>This is a full page demo.</p>
1320
+ <a
1321
+ href="#"
1322
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1323
+ aria-current="page"
1324
+ >Section landing</a>
1325
+ </li>
1326
+ </ol>
1327
+ </nav>
1328
1328
  </div>
1329
- </div>
1330
- </section>
1331
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1332
- <div class="pf-v6-c-page__main-body">
1333
- <div class="pf-v6-l-gallery pf-m-gutter">
1334
- <div class="pf-v6-c-card">
1335
- <div class="pf-v6-c-card__body">This is a card</div>
1336
- </div>
1337
- <div class="pf-v6-c-card">
1338
- <div class="pf-v6-c-card__body">This is a card</div>
1339
- </div>
1340
- <div class="pf-v6-c-card">
1341
- <div class="pf-v6-c-card__body">This is a card</div>
1329
+ </section>
1330
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1331
+ <div class="pf-v6-c-page__main-body">
1332
+ <div class="pf-v6-c-content">
1333
+ <h1>Main title</h1>
1334
+ <p>This is a full page demo.</p>
1342
1335
  </div>
1343
- <div class="pf-v6-c-card">
1344
- <div class="pf-v6-c-card__body">This is a card</div>
1345
- </div>
1346
- <div class="pf-v6-c-card">
1347
- <div class="pf-v6-c-card__body">This is a card</div>
1348
- </div>
1349
- <div class="pf-v6-c-card">
1350
- <div class="pf-v6-c-card__body">This is a card</div>
1351
- </div>
1352
- <div class="pf-v6-c-card">
1353
- <div class="pf-v6-c-card__body">This is a card</div>
1354
- </div>
1355
- <div class="pf-v6-c-card">
1356
- <div class="pf-v6-c-card__body">This is a card</div>
1357
- </div>
1358
- <div class="pf-v6-c-card">
1359
- <div class="pf-v6-c-card__body">This is a card</div>
1360
- </div>
1361
- <div class="pf-v6-c-card">
1362
- <div class="pf-v6-c-card__body">This is a card</div>
1336
+ </div>
1337
+ </section>
1338
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1339
+ <div class="pf-v6-c-page__main-body">
1340
+ <div class="pf-v6-l-gallery pf-m-gutter">
1341
+ <div class="pf-v6-c-card">
1342
+ <div class="pf-v6-c-card__body">This is a card</div>
1343
+ </div>
1344
+ <div class="pf-v6-c-card">
1345
+ <div class="pf-v6-c-card__body">This is a card</div>
1346
+ </div>
1347
+ <div class="pf-v6-c-card">
1348
+ <div class="pf-v6-c-card__body">This is a card</div>
1349
+ </div>
1350
+ <div class="pf-v6-c-card">
1351
+ <div class="pf-v6-c-card__body">This is a card</div>
1352
+ </div>
1353
+ <div class="pf-v6-c-card">
1354
+ <div class="pf-v6-c-card__body">This is a card</div>
1355
+ </div>
1356
+ <div class="pf-v6-c-card">
1357
+ <div class="pf-v6-c-card__body">This is a card</div>
1358
+ </div>
1359
+ <div class="pf-v6-c-card">
1360
+ <div class="pf-v6-c-card__body">This is a card</div>
1361
+ </div>
1362
+ <div class="pf-v6-c-card">
1363
+ <div class="pf-v6-c-card__body">This is a card</div>
1364
+ </div>
1365
+ <div class="pf-v6-c-card">
1366
+ <div class="pf-v6-c-card__body">This is a card</div>
1367
+ </div>
1368
+ <div class="pf-v6-c-card">
1369
+ <div class="pf-v6-c-card__body">This is a card</div>
1370
+ </div>
1363
1371
  </div>
1364
1372
  </div>
1365
- </div>
1366
- </section>
1367
- </main>
1373
+ </section>
1374
+ </main>
1375
+ </div>
1368
1376
  </div>
1369
1377
 
1370
1378
  ```
@@ -1592,110 +1600,115 @@ section: components
1592
1600
  </nav>
1593
1601
  </div>
1594
1602
  </div>
1595
- <main
1596
- class="pf-v6-c-page__main"
1597
- tabindex="-1"
1598
- id="main-content-nav-horizontal-subnav-example"
1599
- >
1600
- <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
1601
- <div class="pf-v6-c-page__main-body">
1602
- <nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
1603
- <ul class="pf-v6-c-nav__list" role="list">
1604
- <li class="pf-v6-c-nav__item">
1605
- <a
1606
- href="#"
1607
- class="pf-v6-c-nav__link pf-m-current"
1608
- aria-current="page"
1609
- >Horizontal subnav item 1</a>
1610
- </li>
1611
- <li class="pf-v6-c-nav__item">
1612
- <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
1613
- </li>
1614
- </ul>
1615
- </nav>
1616
- </div>
1617
- </section>
1618
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1619
- <div class="pf-v6-c-page__main-body">
1620
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1621
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1622
- <li class="pf-v6-c-breadcrumb__item">
1623
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1624
- </li>
1625
- <li class="pf-v6-c-breadcrumb__item">
1626
- <span class="pf-v6-c-breadcrumb__item-divider">
1627
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1628
- </span>
1603
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1604
+ <main
1605
+ class="pf-v6-c-page__main"
1606
+ tabindex="-1"
1607
+ id="main-content-nav-horizontal-subnav-example"
1608
+ >
1609
+ <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
1610
+ <div class="pf-v6-c-page__main-body">
1611
+ <nav
1612
+ class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
1613
+ aria-label="Local"
1614
+ >
1615
+ <ul class="pf-v6-c-nav__list" role="list">
1616
+ <li class="pf-v6-c-nav__item">
1617
+ <a
1618
+ href="#"
1619
+ class="pf-v6-c-nav__link pf-m-current"
1620
+ aria-current="page"
1621
+ >Horizontal subnav item 1</a>
1622
+ </li>
1623
+ <li class="pf-v6-c-nav__item">
1624
+ <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
1625
+ </li>
1626
+ </ul>
1627
+ </nav>
1628
+ </div>
1629
+ </section>
1630
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1631
+ <div class="pf-v6-c-page__main-body">
1632
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1633
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1634
+ <li class="pf-v6-c-breadcrumb__item">
1635
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1636
+ </li>
1637
+ <li class="pf-v6-c-breadcrumb__item">
1638
+ <span class="pf-v6-c-breadcrumb__item-divider">
1639
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1640
+ </span>
1629
1641
 
1630
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1631
- </li>
1632
- <li class="pf-v6-c-breadcrumb__item">
1633
- <span class="pf-v6-c-breadcrumb__item-divider">
1634
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1635
- </span>
1642
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1643
+ </li>
1644
+ <li class="pf-v6-c-breadcrumb__item">
1645
+ <span class="pf-v6-c-breadcrumb__item-divider">
1646
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1647
+ </span>
1636
1648
 
1637
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1638
- </li>
1639
- <li class="pf-v6-c-breadcrumb__item">
1640
- <span class="pf-v6-c-breadcrumb__item-divider">
1641
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1642
- </span>
1649
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1650
+ </li>
1651
+ <li class="pf-v6-c-breadcrumb__item">
1652
+ <span class="pf-v6-c-breadcrumb__item-divider">
1653
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1654
+ </span>
1643
1655
 
1644
- <a
1645
- href="#"
1646
- class="pf-v6-c-breadcrumb__link pf-m-current"
1647
- aria-current="page"
1648
- >Section landing</a>
1649
- </li>
1650
- </ol>
1651
- </nav>
1652
- </div>
1653
- </section>
1654
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1655
- <div class="pf-v6-c-page__main-body">
1656
- <div class="pf-v6-c-content">
1657
- <h1>Main title</h1>
1658
- <p>This is a full page demo.</p>
1656
+ <a
1657
+ href="#"
1658
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1659
+ aria-current="page"
1660
+ >Section landing</a>
1661
+ </li>
1662
+ </ol>
1663
+ </nav>
1659
1664
  </div>
1660
- </div>
1661
- </section>
1662
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1663
- <div class="pf-v6-c-page__main-body">
1664
- <div class="pf-v6-l-gallery pf-m-gutter">
1665
- <div class="pf-v6-c-card">
1666
- <div class="pf-v6-c-card__body">This is a card</div>
1667
- </div>
1668
- <div class="pf-v6-c-card">
1669
- <div class="pf-v6-c-card__body">This is a card</div>
1670
- </div>
1671
- <div class="pf-v6-c-card">
1672
- <div class="pf-v6-c-card__body">This is a card</div>
1673
- </div>
1674
- <div class="pf-v6-c-card">
1675
- <div class="pf-v6-c-card__body">This is a card</div>
1676
- </div>
1677
- <div class="pf-v6-c-card">
1678
- <div class="pf-v6-c-card__body">This is a card</div>
1679
- </div>
1680
- <div class="pf-v6-c-card">
1681
- <div class="pf-v6-c-card__body">This is a card</div>
1682
- </div>
1683
- <div class="pf-v6-c-card">
1684
- <div class="pf-v6-c-card__body">This is a card</div>
1685
- </div>
1686
- <div class="pf-v6-c-card">
1687
- <div class="pf-v6-c-card__body">This is a card</div>
1665
+ </section>
1666
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1667
+ <div class="pf-v6-c-page__main-body">
1668
+ <div class="pf-v6-c-content">
1669
+ <h1>Main title</h1>
1670
+ <p>This is a full page demo.</p>
1688
1671
  </div>
1689
- <div class="pf-v6-c-card">
1690
- <div class="pf-v6-c-card__body">This is a card</div>
1691
- </div>
1692
- <div class="pf-v6-c-card">
1693
- <div class="pf-v6-c-card__body">This is a card</div>
1672
+ </div>
1673
+ </section>
1674
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1675
+ <div class="pf-v6-c-page__main-body">
1676
+ <div class="pf-v6-l-gallery pf-m-gutter">
1677
+ <div class="pf-v6-c-card">
1678
+ <div class="pf-v6-c-card__body">This is a card</div>
1679
+ </div>
1680
+ <div class="pf-v6-c-card">
1681
+ <div class="pf-v6-c-card__body">This is a card</div>
1682
+ </div>
1683
+ <div class="pf-v6-c-card">
1684
+ <div class="pf-v6-c-card__body">This is a card</div>
1685
+ </div>
1686
+ <div class="pf-v6-c-card">
1687
+ <div class="pf-v6-c-card__body">This is a card</div>
1688
+ </div>
1689
+ <div class="pf-v6-c-card">
1690
+ <div class="pf-v6-c-card__body">This is a card</div>
1691
+ </div>
1692
+ <div class="pf-v6-c-card">
1693
+ <div class="pf-v6-c-card__body">This is a card</div>
1694
+ </div>
1695
+ <div class="pf-v6-c-card">
1696
+ <div class="pf-v6-c-card__body">This is a card</div>
1697
+ </div>
1698
+ <div class="pf-v6-c-card">
1699
+ <div class="pf-v6-c-card__body">This is a card</div>
1700
+ </div>
1701
+ <div class="pf-v6-c-card">
1702
+ <div class="pf-v6-c-card__body">This is a card</div>
1703
+ </div>
1704
+ <div class="pf-v6-c-card">
1705
+ <div class="pf-v6-c-card__body">This is a card</div>
1706
+ </div>
1694
1707
  </div>
1695
1708
  </div>
1696
- </div>
1697
- </section>
1698
- </main>
1709
+ </section>
1710
+ </main>
1711
+ </div>
1699
1712
  </div>
1700
1713
 
1701
1714
  ```
@@ -1945,110 +1958,115 @@ section: components
1945
1958
  </div>
1946
1959
  </div>
1947
1960
  </header>
1948
- <main
1949
- class="pf-v6-c-page__main"
1950
- tabindex="-1"
1951
- id="main-content-nav-horizontal-example"
1952
- >
1953
- <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
1954
- <div class="pf-v6-c-page__main-body">
1955
- <nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
1956
- <ul class="pf-v6-c-nav__list" role="list">
1957
- <li class="pf-v6-c-nav__item">
1958
- <a
1959
- href="#"
1960
- class="pf-v6-c-nav__link pf-m-current"
1961
- aria-current="page"
1962
- >Horizontal subnav item 1</a>
1963
- </li>
1964
- <li class="pf-v6-c-nav__item">
1965
- <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
1966
- </li>
1967
- </ul>
1968
- </nav>
1969
- </div>
1970
- </section>
1971
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1972
- <div class="pf-v6-c-page__main-body">
1973
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1974
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1975
- <li class="pf-v6-c-breadcrumb__item">
1976
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1977
- </li>
1978
- <li class="pf-v6-c-breadcrumb__item">
1979
- <span class="pf-v6-c-breadcrumb__item-divider">
1980
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1981
- </span>
1961
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1962
+ <main
1963
+ class="pf-v6-c-page__main"
1964
+ tabindex="-1"
1965
+ id="main-content-nav-horizontal-example"
1966
+ >
1967
+ <section class="pf-v6-c-page__main-subnav pf-m-limit-width">
1968
+ <div class="pf-v6-c-page__main-body">
1969
+ <nav
1970
+ class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
1971
+ aria-label="Local"
1972
+ >
1973
+ <ul class="pf-v6-c-nav__list" role="list">
1974
+ <li class="pf-v6-c-nav__item">
1975
+ <a
1976
+ href="#"
1977
+ class="pf-v6-c-nav__link pf-m-current"
1978
+ aria-current="page"
1979
+ >Horizontal subnav item 1</a>
1980
+ </li>
1981
+ <li class="pf-v6-c-nav__item">
1982
+ <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
1983
+ </li>
1984
+ </ul>
1985
+ </nav>
1986
+ </div>
1987
+ </section>
1988
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1989
+ <div class="pf-v6-c-page__main-body">
1990
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1991
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1992
+ <li class="pf-v6-c-breadcrumb__item">
1993
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1994
+ </li>
1995
+ <li class="pf-v6-c-breadcrumb__item">
1996
+ <span class="pf-v6-c-breadcrumb__item-divider">
1997
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1998
+ </span>
1982
1999
 
1983
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1984
- </li>
1985
- <li class="pf-v6-c-breadcrumb__item">
1986
- <span class="pf-v6-c-breadcrumb__item-divider">
1987
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1988
- </span>
2000
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2001
+ </li>
2002
+ <li class="pf-v6-c-breadcrumb__item">
2003
+ <span class="pf-v6-c-breadcrumb__item-divider">
2004
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2005
+ </span>
1989
2006
 
1990
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1991
- </li>
1992
- <li class="pf-v6-c-breadcrumb__item">
1993
- <span class="pf-v6-c-breadcrumb__item-divider">
1994
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1995
- </span>
2007
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2008
+ </li>
2009
+ <li class="pf-v6-c-breadcrumb__item">
2010
+ <span class="pf-v6-c-breadcrumb__item-divider">
2011
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2012
+ </span>
1996
2013
 
1997
- <a
1998
- href="#"
1999
- class="pf-v6-c-breadcrumb__link pf-m-current"
2000
- aria-current="page"
2001
- >Section landing</a>
2002
- </li>
2003
- </ol>
2004
- </nav>
2005
- </div>
2006
- </section>
2007
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2008
- <div class="pf-v6-c-page__main-body">
2009
- <div class="pf-v6-c-content">
2010
- <h1>Main title</h1>
2011
- <p>This is a full page demo.</p>
2014
+ <a
2015
+ href="#"
2016
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2017
+ aria-current="page"
2018
+ >Section landing</a>
2019
+ </li>
2020
+ </ol>
2021
+ </nav>
2012
2022
  </div>
2013
- </div>
2014
- </section>
2015
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2016
- <div class="pf-v6-c-page__main-body">
2017
- <div class="pf-v6-l-gallery pf-m-gutter">
2018
- <div class="pf-v6-c-card">
2019
- <div class="pf-v6-c-card__body">This is a card</div>
2020
- </div>
2021
- <div class="pf-v6-c-card">
2022
- <div class="pf-v6-c-card__body">This is a card</div>
2023
- </div>
2024
- <div class="pf-v6-c-card">
2025
- <div class="pf-v6-c-card__body">This is a card</div>
2026
- </div>
2027
- <div class="pf-v6-c-card">
2028
- <div class="pf-v6-c-card__body">This is a card</div>
2029
- </div>
2030
- <div class="pf-v6-c-card">
2031
- <div class="pf-v6-c-card__body">This is a card</div>
2032
- </div>
2033
- <div class="pf-v6-c-card">
2034
- <div class="pf-v6-c-card__body">This is a card</div>
2023
+ </section>
2024
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2025
+ <div class="pf-v6-c-page__main-body">
2026
+ <div class="pf-v6-c-content">
2027
+ <h1>Main title</h1>
2028
+ <p>This is a full page demo.</p>
2035
2029
  </div>
2036
- <div class="pf-v6-c-card">
2037
- <div class="pf-v6-c-card__body">This is a card</div>
2038
- </div>
2039
- <div class="pf-v6-c-card">
2040
- <div class="pf-v6-c-card__body">This is a card</div>
2041
- </div>
2042
- <div class="pf-v6-c-card">
2043
- <div class="pf-v6-c-card__body">This is a card</div>
2044
- </div>
2045
- <div class="pf-v6-c-card">
2046
- <div class="pf-v6-c-card__body">This is a card</div>
2030
+ </div>
2031
+ </section>
2032
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2033
+ <div class="pf-v6-c-page__main-body">
2034
+ <div class="pf-v6-l-gallery pf-m-gutter">
2035
+ <div class="pf-v6-c-card">
2036
+ <div class="pf-v6-c-card__body">This is a card</div>
2037
+ </div>
2038
+ <div class="pf-v6-c-card">
2039
+ <div class="pf-v6-c-card__body">This is a card</div>
2040
+ </div>
2041
+ <div class="pf-v6-c-card">
2042
+ <div class="pf-v6-c-card__body">This is a card</div>
2043
+ </div>
2044
+ <div class="pf-v6-c-card">
2045
+ <div class="pf-v6-c-card__body">This is a card</div>
2046
+ </div>
2047
+ <div class="pf-v6-c-card">
2048
+ <div class="pf-v6-c-card__body">This is a card</div>
2049
+ </div>
2050
+ <div class="pf-v6-c-card">
2051
+ <div class="pf-v6-c-card__body">This is a card</div>
2052
+ </div>
2053
+ <div class="pf-v6-c-card">
2054
+ <div class="pf-v6-c-card__body">This is a card</div>
2055
+ </div>
2056
+ <div class="pf-v6-c-card">
2057
+ <div class="pf-v6-c-card__body">This is a card</div>
2058
+ </div>
2059
+ <div class="pf-v6-c-card">
2060
+ <div class="pf-v6-c-card__body">This is a card</div>
2061
+ </div>
2062
+ <div class="pf-v6-c-card">
2063
+ <div class="pf-v6-c-card__body">This is a card</div>
2064
+ </div>
2047
2065
  </div>
2048
2066
  </div>
2049
- </div>
2050
- </section>
2051
- </main>
2067
+ </section>
2068
+ </main>
2069
+ </div>
2052
2070
  </div>
2053
2071
 
2054
2072
  ```