@patternfly/patternfly 6.0.0-alpha.102 → 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 (40) hide show
  1. package/components/Check/check.css +2 -2
  2. package/components/Check/check.scss +2 -2
  3. package/components/Drawer/drawer.css +5 -4
  4. package/components/Drawer/drawer.scss +7 -6
  5. package/components/Page/page.css +24 -23
  6. package/components/Page/page.scss +24 -23
  7. package/components/Table/table.css +0 -37
  8. package/components/Table/table.scss +0 -49
  9. package/docs/components/Drawer/examples/Drawer.md +2 -1
  10. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  11. package/docs/components/Page/examples/Page.md +114 -100
  12. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  13. package/docs/demos/Alert/examples/Alert.md +551 -524
  14. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  15. package/docs/demos/Banner/examples/Banner.md +420 -412
  16. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  17. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  18. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  19. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  20. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  21. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  22. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  23. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  24. package/docs/demos/Modal/examples/Modal.md +486 -474
  25. package/docs/demos/Nav/examples/Nav.md +528 -510
  26. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  27. package/docs/demos/Page/examples/Page.md +1656 -1633
  28. package/docs/demos/Page/examples/Penta.md +632 -577
  29. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  30. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  31. package/docs/demos/Table/examples/Table.md +14137 -13972
  32. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  33. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  34. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  35. package/package.json +1 -1
  36. package/patternfly-no-globals.css +31 -66
  37. package/patternfly-theme-dark-unversioned.css +31 -66
  38. package/patternfly.css +31 -66
  39. package/patternfly.min.css +1 -1
  40. package/patternfly.min.css.map +1 -1
package/docs/demos/Page/examples/Page.md CHANGED
@@ -227,92 +227,94 @@ wrapperTag: div
227
227
  </nav>
228
228
  </div>
229
229
  </div>
230
- <main
231
- class="pf-v6-c-page__main"
232
- tabindex="-1"
233
- id="main-content-page-demo-basic"
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>
246
-
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>
253
-
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>
260
-
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>
269
- </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>
230
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
231
+ <main
232
+ class="pf-v6-c-page__main"
233
+ tabindex="-1"
234
+ id="main-content-page-demo-basic"
235
+ >
236
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
237
+ <div class="pf-v6-c-page__main-body">
238
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
239
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
240
+ <li class="pf-v6-c-breadcrumb__item">
241
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
242
+ </li>
243
+ <li class="pf-v6-c-breadcrumb__item">
244
+ <span class="pf-v6-c-breadcrumb__item-divider">
245
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
246
+ </span>
247
+
248
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
249
+ </li>
250
+ <li class="pf-v6-c-breadcrumb__item">
251
+ <span class="pf-v6-c-breadcrumb__item-divider">
252
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
253
+ </span>
254
+
255
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
+ </li>
257
+ <li class="pf-v6-c-breadcrumb__item">
258
+ <span class="pf-v6-c-breadcrumb__item-divider">
259
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
260
+ </span>
261
+
262
+ <a
263
+ href="#"
264
+ class="pf-v6-c-breadcrumb__link pf-m-current"
265
+ aria-current="page"
266
+ >Section landing</a>
267
+ </li>
268
+ </ol>
269
+ </nav>
276
270
  </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>
271
+ </section>
272
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
273
+ <div class="pf-v6-c-page__main-body">
274
+ <div class="pf-v6-c-content">
275
+ <h1>Main title</h1>
276
+ <p>This is a full page demo.</p>
308
277
  </div>
309
- <div class="pf-v6-c-card">
310
- <div class="pf-v6-c-card__body">This is a card</div>
278
+ </div>
279
+ </section>
280
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
281
+ <div class="pf-v6-c-page__main-body">
282
+ <div class="pf-v6-l-gallery pf-m-gutter">
283
+ <div class="pf-v6-c-card">
284
+ <div class="pf-v6-c-card__body">This is a card</div>
285
+ </div>
286
+ <div class="pf-v6-c-card">
287
+ <div class="pf-v6-c-card__body">This is a card</div>
288
+ </div>
289
+ <div class="pf-v6-c-card">
290
+ <div class="pf-v6-c-card__body">This is a card</div>
291
+ </div>
292
+ <div class="pf-v6-c-card">
293
+ <div class="pf-v6-c-card__body">This is a card</div>
294
+ </div>
295
+ <div class="pf-v6-c-card">
296
+ <div class="pf-v6-c-card__body">This is a card</div>
297
+ </div>
298
+ <div class="pf-v6-c-card">
299
+ <div class="pf-v6-c-card__body">This is a card</div>
300
+ </div>
301
+ <div class="pf-v6-c-card">
302
+ <div class="pf-v6-c-card__body">This is a card</div>
303
+ </div>
304
+ <div class="pf-v6-c-card">
305
+ <div class="pf-v6-c-card__body">This is a card</div>
306
+ </div>
307
+ <div class="pf-v6-c-card">
308
+ <div class="pf-v6-c-card__body">This is a card</div>
309
+ </div>
310
+ <div class="pf-v6-c-card">
311
+ <div class="pf-v6-c-card__body">This is a card</div>
312
+ </div>
311
313
  </div>
312
314
  </div>
313
- </div>
314
- </section>
315
- </main>
315
+ </section>
316
+ </main>
317
+ </div>
316
318
  </div>
317
319
 
318
320
  ```
@@ -558,92 +560,94 @@ wrapperTag: div
558
560
  </div>
559
561
  </div>
560
562
  </div>
561
- <main
562
- class="pf-v6-c-page__main"
563
- tabindex="-1"
564
- id="main-content-multiple-sidebar-body-elements-demo"
565
- >
566
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
567
- <div class="pf-v6-c-page__main-body">
568
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
569
- <ol class="pf-v6-c-breadcrumb__list" role="list">
570
- <li class="pf-v6-c-breadcrumb__item">
571
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
572
- </li>
573
- <li class="pf-v6-c-breadcrumb__item">
574
- <span class="pf-v6-c-breadcrumb__item-divider">
575
- <i class="fas fa-angle-right" aria-hidden="true"></i>
576
- </span>
577
-
578
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
579
- </li>
580
- <li class="pf-v6-c-breadcrumb__item">
581
- <span class="pf-v6-c-breadcrumb__item-divider">
582
- <i class="fas fa-angle-right" aria-hidden="true"></i>
583
- </span>
584
-
585
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
586
- </li>
587
- <li class="pf-v6-c-breadcrumb__item">
588
- <span class="pf-v6-c-breadcrumb__item-divider">
589
- <i class="fas fa-angle-right" aria-hidden="true"></i>
590
- </span>
591
-
592
- <a
593
- href="#"
594
- class="pf-v6-c-breadcrumb__link pf-m-current"
595
- aria-current="page"
596
- >Section landing</a>
597
- </li>
598
- </ol>
599
- </nav>
600
- </div>
601
- </section>
602
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
603
- <div class="pf-v6-c-page__main-body">
604
- <div class="pf-v6-c-content">
605
- <h1>Main title</h1>
606
- <p>This is a full page demo.</p>
563
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
564
+ <main
565
+ class="pf-v6-c-page__main"
566
+ tabindex="-1"
567
+ id="main-content-multiple-sidebar-body-elements-demo"
568
+ >
569
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
570
+ <div class="pf-v6-c-page__main-body">
571
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
572
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
573
+ <li class="pf-v6-c-breadcrumb__item">
574
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
575
+ </li>
576
+ <li class="pf-v6-c-breadcrumb__item">
577
+ <span class="pf-v6-c-breadcrumb__item-divider">
578
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
579
+ </span>
580
+
581
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
582
+ </li>
583
+ <li class="pf-v6-c-breadcrumb__item">
584
+ <span class="pf-v6-c-breadcrumb__item-divider">
585
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
586
+ </span>
587
+
588
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
589
+ </li>
590
+ <li class="pf-v6-c-breadcrumb__item">
591
+ <span class="pf-v6-c-breadcrumb__item-divider">
592
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
593
+ </span>
594
+
595
+ <a
596
+ href="#"
597
+ class="pf-v6-c-breadcrumb__link pf-m-current"
598
+ aria-current="page"
599
+ >Section landing</a>
600
+ </li>
601
+ </ol>
602
+ </nav>
607
603
  </div>
608
- </div>
609
- </section>
610
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
611
- <div class="pf-v6-c-page__main-body">
612
- <div class="pf-v6-l-gallery pf-m-gutter">
613
- <div class="pf-v6-c-card">
614
- <div class="pf-v6-c-card__body">This is a card</div>
615
- </div>
616
- <div class="pf-v6-c-card">
617
- <div class="pf-v6-c-card__body">This is a card</div>
618
- </div>
619
- <div class="pf-v6-c-card">
620
- <div class="pf-v6-c-card__body">This is a card</div>
621
- </div>
622
- <div class="pf-v6-c-card">
623
- <div class="pf-v6-c-card__body">This is a card</div>
624
- </div>
625
- <div class="pf-v6-c-card">
626
- <div class="pf-v6-c-card__body">This is a card</div>
627
- </div>
628
- <div class="pf-v6-c-card">
629
- <div class="pf-v6-c-card__body">This is a card</div>
630
- </div>
631
- <div class="pf-v6-c-card">
632
- <div class="pf-v6-c-card__body">This is a card</div>
633
- </div>
634
- <div class="pf-v6-c-card">
635
- <div class="pf-v6-c-card__body">This is a card</div>
636
- </div>
637
- <div class="pf-v6-c-card">
638
- <div class="pf-v6-c-card__body">This is a card</div>
604
+ </section>
605
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
606
+ <div class="pf-v6-c-page__main-body">
607
+ <div class="pf-v6-c-content">
608
+ <h1>Main title</h1>
609
+ <p>This is a full page demo.</p>
639
610
  </div>
640
- <div class="pf-v6-c-card">
641
- <div class="pf-v6-c-card__body">This is a card</div>
611
+ </div>
612
+ </section>
613
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
614
+ <div class="pf-v6-c-page__main-body">
615
+ <div class="pf-v6-l-gallery pf-m-gutter">
616
+ <div class="pf-v6-c-card">
617
+ <div class="pf-v6-c-card__body">This is a card</div>
618
+ </div>
619
+ <div class="pf-v6-c-card">
620
+ <div class="pf-v6-c-card__body">This is a card</div>
621
+ </div>
622
+ <div class="pf-v6-c-card">
623
+ <div class="pf-v6-c-card__body">This is a card</div>
624
+ </div>
625
+ <div class="pf-v6-c-card">
626
+ <div class="pf-v6-c-card__body">This is a card</div>
627
+ </div>
628
+ <div class="pf-v6-c-card">
629
+ <div class="pf-v6-c-card__body">This is a card</div>
630
+ </div>
631
+ <div class="pf-v6-c-card">
632
+ <div class="pf-v6-c-card__body">This is a card</div>
633
+ </div>
634
+ <div class="pf-v6-c-card">
635
+ <div class="pf-v6-c-card__body">This is a card</div>
636
+ </div>
637
+ <div class="pf-v6-c-card">
638
+ <div class="pf-v6-c-card__body">This is a card</div>
639
+ </div>
640
+ <div class="pf-v6-c-card">
641
+ <div class="pf-v6-c-card__body">This is a card</div>
642
+ </div>
643
+ <div class="pf-v6-c-card">
644
+ <div class="pf-v6-c-card__body">This is a card</div>
645
+ </div>
642
646
  </div>
643
647
  </div>
644
- </div>
645
- </section>
646
- </main>
648
+ </section>
649
+ </main>
650
+ </div>
647
651
  </div>
648
652
 
649
653
  ```
@@ -874,230 +878,237 @@ wrapperTag: div
874
878
  </nav>
875
879
  </div>
876
880
  </div>
877
- <main
878
- class="pf-v6-c-page__main"
879
- tabindex="-1"
880
- id="main-content-page-demo-sticky-top-horizontal-subnav"
881
- >
882
- <section class="pf-v6-c-page__main-subnav pf-m-limit-width pf-m-sticky-top">
883
- <div class="pf-v6-c-page__main-body">
884
- <nav class="pf-v6-c-nav pf-m-horizontal pf-m-subnav" aria-label="Local">
885
- <ul class="pf-v6-c-nav__list" role="list">
886
- <li class="pf-v6-c-nav__item">
887
- <a
888
- href="#"
889
- class="pf-v6-c-nav__link pf-m-current"
890
- aria-current="page"
891
- >Horizontal subnav item 1</a>
892
- </li>
893
- <li class="pf-v6-c-nav__item">
894
- <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
895
- </li>
896
- </ul>
897
- </nav>
898
- </div>
899
- </section>
900
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
901
- <div class="pf-v6-c-page__main-body">
902
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
903
- <ol class="pf-v6-c-breadcrumb__list" role="list">
904
- <li class="pf-v6-c-breadcrumb__item">
905
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
906
- </li>
907
- <li class="pf-v6-c-breadcrumb__item">
908
- <span class="pf-v6-c-breadcrumb__item-divider">
909
- <i class="fas fa-angle-right" aria-hidden="true"></i>
910
- </span>
911
-
912
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
913
- </li>
914
- <li class="pf-v6-c-breadcrumb__item">
915
- <span class="pf-v6-c-breadcrumb__item-divider">
916
- <i class="fas fa-angle-right" aria-hidden="true"></i>
917
- </span>
918
-
919
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
920
- </li>
921
- <li class="pf-v6-c-breadcrumb__item">
922
- <span class="pf-v6-c-breadcrumb__item-divider">
923
- <i class="fas fa-angle-right" aria-hidden="true"></i>
924
- </span>
925
-
926
- <a
927
- href="#"
928
- class="pf-v6-c-breadcrumb__link pf-m-current"
929
- aria-current="page"
930
- >Section landing</a>
931
- </li>
932
- </ol>
933
- </nav>
934
- </div>
935
- </section>
936
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
937
- <div class="pf-v6-c-page__main-body">
938
- <div class="pf-v6-c-content">
939
- <h1>Main title</h1>
940
- <p>This is a full page demo.</p>
881
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
882
+ <main
883
+ class="pf-v6-c-page__main"
884
+ tabindex="-1"
885
+ id="main-content-page-demo-sticky-top-horizontal-subnav"
886
+ >
887
+ <section
888
+ class="pf-v6-c-page__main-subnav pf-m-limit-width pf-m-sticky-top"
889
+ >
890
+ <div class="pf-v6-c-page__main-body">
891
+ <nav
892
+ class="pf-v6-c-nav pf-m-horizontal pf-m-subnav"
893
+ aria-label="Local"
894
+ >
895
+ <ul class="pf-v6-c-nav__list" role="list">
896
+ <li class="pf-v6-c-nav__item">
897
+ <a
898
+ href="#"
899
+ class="pf-v6-c-nav__link pf-m-current"
900
+ aria-current="page"
901
+ >Horizontal subnav item 1</a>
902
+ </li>
903
+ <li class="pf-v6-c-nav__item">
904
+ <a href="#" class="pf-v6-c-nav__link">Horizontal subnav item 2</a>
905
+ </li>
906
+ </ul>
907
+ </nav>
941
908
  </div>
942
- </div>
943
- </section>
944
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
945
- <div class="pf-v6-c-page__main-body">
946
- <div class="pf-v6-l-gallery pf-m-gutter">
947
- <div class="pf-v6-c-card">
948
- <div class="pf-v6-c-card__body">This is a card</div>
949
- </div>
950
- <div class="pf-v6-c-card">
951
- <div class="pf-v6-c-card__body">This is a card</div>
952
- </div>
953
- <div class="pf-v6-c-card">
954
- <div class="pf-v6-c-card__body">This is a card</div>
955
- </div>
956
- <div class="pf-v6-c-card">
957
- <div class="pf-v6-c-card__body">This is a card</div>
958
- </div>
959
- <div class="pf-v6-c-card">
960
- <div class="pf-v6-c-card__body">This is a card</div>
961
- </div>
962
- <div class="pf-v6-c-card">
963
- <div class="pf-v6-c-card__body">This is a card</div>
964
- </div>
965
- <div class="pf-v6-c-card">
966
- <div class="pf-v6-c-card__body">This is a card</div>
967
- </div>
968
- <div class="pf-v6-c-card">
969
- <div class="pf-v6-c-card__body">This is a card</div>
970
- </div>
971
- <div class="pf-v6-c-card">
972
- <div class="pf-v6-c-card__body">This is a card</div>
973
- </div>
974
- <div class="pf-v6-c-card">
975
- <div class="pf-v6-c-card__body">This is a card</div>
976
- </div>
977
- <div class="pf-v6-c-card">
978
- <div class="pf-v6-c-card__body">This is a card</div>
979
- </div>
980
- <div class="pf-v6-c-card">
981
- <div class="pf-v6-c-card__body">This is a card</div>
982
- </div>
983
- <div class="pf-v6-c-card">
984
- <div class="pf-v6-c-card__body">This is a card</div>
985
- </div>
986
- <div class="pf-v6-c-card">
987
- <div class="pf-v6-c-card__body">This is a card</div>
988
- </div>
989
- <div class="pf-v6-c-card">
990
- <div class="pf-v6-c-card__body">This is a card</div>
991
- </div>
992
- <div class="pf-v6-c-card">
993
- <div class="pf-v6-c-card__body">This is a card</div>
994
- </div>
995
- <div class="pf-v6-c-card">
996
- <div class="pf-v6-c-card__body">This is a card</div>
997
- </div>
998
- <div class="pf-v6-c-card">
999
- <div class="pf-v6-c-card__body">This is a card</div>
1000
- </div>
1001
- <div class="pf-v6-c-card">
1002
- <div class="pf-v6-c-card__body">This is a card</div>
1003
- </div>
1004
- <div class="pf-v6-c-card">
1005
- <div class="pf-v6-c-card__body">This is a card</div>
1006
- </div>
1007
- <div class="pf-v6-c-card">
1008
- <div class="pf-v6-c-card__body">This is a card</div>
1009
- </div>
1010
- <div class="pf-v6-c-card">
1011
- <div class="pf-v6-c-card__body">This is a card</div>
1012
- </div>
1013
- <div class="pf-v6-c-card">
1014
- <div class="pf-v6-c-card__body">This is a card</div>
909
+ </section>
910
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
911
+ <div class="pf-v6-c-page__main-body">
912
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
913
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
914
+ <li class="pf-v6-c-breadcrumb__item">
915
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
916
+ </li>
917
+ <li class="pf-v6-c-breadcrumb__item">
918
+ <span class="pf-v6-c-breadcrumb__item-divider">
919
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
920
+ </span>
921
+
922
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
923
+ </li>
924
+ <li class="pf-v6-c-breadcrumb__item">
925
+ <span class="pf-v6-c-breadcrumb__item-divider">
926
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
927
+ </span>
928
+
929
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
930
+ </li>
931
+ <li class="pf-v6-c-breadcrumb__item">
932
+ <span class="pf-v6-c-breadcrumb__item-divider">
933
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
934
+ </span>
935
+
936
+ <a
937
+ href="#"
938
+ class="pf-v6-c-breadcrumb__link pf-m-current"
939
+ aria-current="page"
940
+ >Section landing</a>
941
+ </li>
942
+ </ol>
943
+ </nav>
944
+ </div>
945
+ </section>
946
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
947
+ <div class="pf-v6-c-page__main-body">
948
+ <div class="pf-v6-c-content">
949
+ <h1>Main title</h1>
950
+ <p>This is a full page demo.</p>
1015
951
  </div>
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>
1046
- <div class="pf-v6-c-card">
1047
- <div class="pf-v6-c-card__body">This is a card</div>
1048
- </div>
1049
- <div class="pf-v6-c-card">
1050
- <div class="pf-v6-c-card__body">This is a card</div>
1051
- </div>
1052
- <div class="pf-v6-c-card">
1053
- <div class="pf-v6-c-card__body">This is a card</div>
1054
- </div>
1055
- <div class="pf-v6-c-card">
1056
- <div class="pf-v6-c-card__body">This is a card</div>
1057
- </div>
1058
- <div class="pf-v6-c-card">
1059
- <div class="pf-v6-c-card__body">This is a card</div>
1060
- </div>
1061
- <div class="pf-v6-c-card">
1062
- <div class="pf-v6-c-card__body">This is a card</div>
1063
- </div>
1064
- <div class="pf-v6-c-card">
1065
- <div class="pf-v6-c-card__body">This is a card</div>
1066
- </div>
1067
- <div class="pf-v6-c-card">
1068
- <div class="pf-v6-c-card__body">This is a card</div>
1069
- </div>
1070
- <div class="pf-v6-c-card">
1071
- <div class="pf-v6-c-card__body">This is a card</div>
1072
- </div>
1073
- <div class="pf-v6-c-card">
1074
- <div class="pf-v6-c-card__body">This is a card</div>
1075
- </div>
1076
- <div class="pf-v6-c-card">
1077
- <div class="pf-v6-c-card__body">This is a card</div>
1078
- </div>
1079
- <div class="pf-v6-c-card">
1080
- <div class="pf-v6-c-card__body">This is a card</div>
1081
- </div>
1082
- <div class="pf-v6-c-card">
1083
- <div class="pf-v6-c-card__body">This is a card</div>
1084
- </div>
1085
- <div class="pf-v6-c-card">
1086
- <div class="pf-v6-c-card__body">This is a card</div>
1087
- </div>
1088
- <div class="pf-v6-c-card">
1089
- <div class="pf-v6-c-card__body">This is a card</div>
1090
- </div>
1091
- <div class="pf-v6-c-card">
1092
- <div class="pf-v6-c-card__body">This is a card</div>
1093
- </div>
1094
- <div class="pf-v6-c-card">
1095
- <div class="pf-v6-c-card__body">This is a card</div>
952
+ </div>
953
+ </section>
954
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
955
+ <div class="pf-v6-c-page__main-body">
956
+ <div class="pf-v6-l-gallery pf-m-gutter">
957
+ <div class="pf-v6-c-card">
958
+ <div class="pf-v6-c-card__body">This is a card</div>
959
+ </div>
960
+ <div class="pf-v6-c-card">
961
+ <div class="pf-v6-c-card__body">This is a card</div>
962
+ </div>
963
+ <div class="pf-v6-c-card">
964
+ <div class="pf-v6-c-card__body">This is a card</div>
965
+ </div>
966
+ <div class="pf-v6-c-card">
967
+ <div class="pf-v6-c-card__body">This is a card</div>
968
+ </div>
969
+ <div class="pf-v6-c-card">
970
+ <div class="pf-v6-c-card__body">This is a card</div>
971
+ </div>
972
+ <div class="pf-v6-c-card">
973
+ <div class="pf-v6-c-card__body">This is a card</div>
974
+ </div>
975
+ <div class="pf-v6-c-card">
976
+ <div class="pf-v6-c-card__body">This is a card</div>
977
+ </div>
978
+ <div class="pf-v6-c-card">
979
+ <div class="pf-v6-c-card__body">This is a card</div>
980
+ </div>
981
+ <div class="pf-v6-c-card">
982
+ <div class="pf-v6-c-card__body">This is a card</div>
983
+ </div>
984
+ <div class="pf-v6-c-card">
985
+ <div class="pf-v6-c-card__body">This is a card</div>
986
+ </div>
987
+ <div class="pf-v6-c-card">
988
+ <div class="pf-v6-c-card__body">This is a card</div>
989
+ </div>
990
+ <div class="pf-v6-c-card">
991
+ <div class="pf-v6-c-card__body">This is a card</div>
992
+ </div>
993
+ <div class="pf-v6-c-card">
994
+ <div class="pf-v6-c-card__body">This is a card</div>
995
+ </div>
996
+ <div class="pf-v6-c-card">
997
+ <div class="pf-v6-c-card__body">This is a card</div>
998
+ </div>
999
+ <div class="pf-v6-c-card">
1000
+ <div class="pf-v6-c-card__body">This is a card</div>
1001
+ </div>
1002
+ <div class="pf-v6-c-card">
1003
+ <div class="pf-v6-c-card__body">This is a card</div>
1004
+ </div>
1005
+ <div class="pf-v6-c-card">
1006
+ <div class="pf-v6-c-card__body">This is a card</div>
1007
+ </div>
1008
+ <div class="pf-v6-c-card">
1009
+ <div class="pf-v6-c-card__body">This is a card</div>
1010
+ </div>
1011
+ <div class="pf-v6-c-card">
1012
+ <div class="pf-v6-c-card__body">This is a card</div>
1013
+ </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>
1040
+ </div>
1041
+ <div class="pf-v6-c-card">
1042
+ <div class="pf-v6-c-card__body">This is a card</div>
1043
+ </div>
1044
+ <div class="pf-v6-c-card">
1045
+ <div class="pf-v6-c-card__body">This is a card</div>
1046
+ </div>
1047
+ <div class="pf-v6-c-card">
1048
+ <div class="pf-v6-c-card__body">This is a card</div>
1049
+ </div>
1050
+ <div class="pf-v6-c-card">
1051
+ <div class="pf-v6-c-card__body">This is a card</div>
1052
+ </div>
1053
+ <div class="pf-v6-c-card">
1054
+ <div class="pf-v6-c-card__body">This is a card</div>
1055
+ </div>
1056
+ <div class="pf-v6-c-card">
1057
+ <div class="pf-v6-c-card__body">This is a card</div>
1058
+ </div>
1059
+ <div class="pf-v6-c-card">
1060
+ <div class="pf-v6-c-card__body">This is a card</div>
1061
+ </div>
1062
+ <div class="pf-v6-c-card">
1063
+ <div class="pf-v6-c-card__body">This is a card</div>
1064
+ </div>
1065
+ <div class="pf-v6-c-card">
1066
+ <div class="pf-v6-c-card__body">This is a card</div>
1067
+ </div>
1068
+ <div class="pf-v6-c-card">
1069
+ <div class="pf-v6-c-card__body">This is a card</div>
1070
+ </div>
1071
+ <div class="pf-v6-c-card">
1072
+ <div class="pf-v6-c-card__body">This is a card</div>
1073
+ </div>
1074
+ <div class="pf-v6-c-card">
1075
+ <div class="pf-v6-c-card__body">This is a card</div>
1076
+ </div>
1077
+ <div class="pf-v6-c-card">
1078
+ <div class="pf-v6-c-card__body">This is a card</div>
1079
+ </div>
1080
+ <div class="pf-v6-c-card">
1081
+ <div class="pf-v6-c-card__body">This is a card</div>
1082
+ </div>
1083
+ <div class="pf-v6-c-card">
1084
+ <div class="pf-v6-c-card__body">This is a card</div>
1085
+ </div>
1086
+ <div class="pf-v6-c-card">
1087
+ <div class="pf-v6-c-card__body">This is a card</div>
1088
+ </div>
1089
+ <div class="pf-v6-c-card">
1090
+ <div class="pf-v6-c-card__body">This is a card</div>
1091
+ </div>
1092
+ <div class="pf-v6-c-card">
1093
+ <div class="pf-v6-c-card__body">This is a card</div>
1094
+ </div>
1095
+ <div class="pf-v6-c-card">
1096
+ <div class="pf-v6-c-card__body">This is a card</div>
1097
+ </div>
1098
+ <div class="pf-v6-c-card">
1099
+ <div class="pf-v6-c-card__body">This is a card</div>
1100
+ </div>
1101
+ <div class="pf-v6-c-card">
1102
+ <div class="pf-v6-c-card__body">This is a card</div>
1103
+ </div>
1104
+ <div class="pf-v6-c-card">
1105
+ <div class="pf-v6-c-card__body">This is a card</div>
1106
+ </div>
1096
1107
  </div>
1097
1108
  </div>
1098
- </div>
1099
- </section>
1100
- </main>
1109
+ </section>
1110
+ </main>
1111
+ </div>
1101
1112
  </div>
1102
1113
 
1103
1114
  ```
@@ -1328,235 +1339,237 @@ wrapperTag: div
1328
1339
  </nav>
1329
1340
  </div>
1330
1341
  </div>
1331
- <main
1332
- class="pf-v6-c-page__main"
1333
- tabindex="-1"
1334
- id="main-content-page-demo-sticky-top-breadcrumb"
1335
- >
1336
- <section
1337
- class="pf-v6-c-page__main-breadcrumb pf-m-limit-width pf-m-sticky-top"
1342
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1343
+ <main
1344
+ class="pf-v6-c-page__main"
1345
+ tabindex="-1"
1346
+ id="main-content-page-demo-sticky-top-breadcrumb"
1338
1347
  >
1339
- <div class="pf-v6-c-page__main-body">
1340
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1341
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1342
- <li class="pf-v6-c-breadcrumb__item">
1343
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1344
- </li>
1345
- <li class="pf-v6-c-breadcrumb__item">
1346
- <span class="pf-v6-c-breadcrumb__item-divider">
1347
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1348
- </span>
1349
-
1350
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1351
- </li>
1352
- <li class="pf-v6-c-breadcrumb__item">
1353
- <span class="pf-v6-c-breadcrumb__item-divider">
1354
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1355
- </span>
1356
-
1357
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1358
- </li>
1359
- <li class="pf-v6-c-breadcrumb__item">
1360
- <span class="pf-v6-c-breadcrumb__item-divider">
1361
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1362
- </span>
1363
-
1364
- <a
1365
- href="#"
1366
- class="pf-v6-c-breadcrumb__link pf-m-current"
1367
- aria-current="page"
1368
- >Section landing</a>
1369
- </li>
1370
- </ol>
1371
- </nav>
1372
- </div>
1373
- </section>
1374
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1375
- <div class="pf-v6-c-page__main-body">
1376
- <div class="pf-v6-c-content">
1377
- <h1>Main title</h1>
1378
- <p>This is a full page demo.</p>
1379
- </div>
1380
- </div>
1381
- </section>
1382
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1383
- <div class="pf-v6-c-page__main-body">
1384
- <div class="pf-v6-l-gallery pf-m-gutter">
1385
- <div class="pf-v6-c-card">
1386
- <div class="pf-v6-c-card__body">This is a card</div>
1387
- </div>
1388
- <div class="pf-v6-c-card">
1389
- <div class="pf-v6-c-card__body">This is a card</div>
1390
- </div>
1391
- <div class="pf-v6-c-card">
1392
- <div class="pf-v6-c-card__body">This is a card</div>
1393
- </div>
1394
- <div class="pf-v6-c-card">
1395
- <div class="pf-v6-c-card__body">This is a card</div>
1396
- </div>
1397
- <div class="pf-v6-c-card">
1398
- <div class="pf-v6-c-card__body">This is a card</div>
1399
- </div>
1400
- <div class="pf-v6-c-card">
1401
- <div class="pf-v6-c-card__body">This is a card</div>
1402
- </div>
1403
- <div class="pf-v6-c-card">
1404
- <div class="pf-v6-c-card__body">This is a card</div>
1405
- </div>
1406
- <div class="pf-v6-c-card">
1407
- <div class="pf-v6-c-card__body">This is a card</div>
1408
- </div>
1409
- <div class="pf-v6-c-card">
1410
- <div class="pf-v6-c-card__body">This is a card</div>
1411
- </div>
1412
- <div class="pf-v6-c-card">
1413
- <div class="pf-v6-c-card__body">This is a card</div>
1414
- </div>
1415
- <div class="pf-v6-c-card">
1416
- <div class="pf-v6-c-card__body">This is a card</div>
1417
- </div>
1418
- <div class="pf-v6-c-card">
1419
- <div class="pf-v6-c-card__body">This is a card</div>
1420
- </div>
1421
- <div class="pf-v6-c-card">
1422
- <div class="pf-v6-c-card__body">This is a card</div>
1423
- </div>
1424
- <div class="pf-v6-c-card">
1425
- <div class="pf-v6-c-card__body">This is a card</div>
1426
- </div>
1427
- <div class="pf-v6-c-card">
1428
- <div class="pf-v6-c-card__body">This is a card</div>
1429
- </div>
1430
- <div class="pf-v6-c-card">
1431
- <div class="pf-v6-c-card__body">This is a card</div>
1432
- </div>
1433
- <div class="pf-v6-c-card">
1434
- <div class="pf-v6-c-card__body">This is a card</div>
1435
- </div>
1436
- <div class="pf-v6-c-card">
1437
- <div class="pf-v6-c-card__body">This is a card</div>
1438
- </div>
1439
- <div class="pf-v6-c-card">
1440
- <div class="pf-v6-c-card__body">This is a card</div>
1441
- </div>
1442
- <div class="pf-v6-c-card">
1443
- <div class="pf-v6-c-card__body">This is a card</div>
1444
- </div>
1445
- <div class="pf-v6-c-card">
1446
- <div class="pf-v6-c-card__body">This is a card</div>
1447
- </div>
1448
- <div class="pf-v6-c-card">
1449
- <div class="pf-v6-c-card__body">This is a card</div>
1450
- </div>
1451
- <div class="pf-v6-c-card">
1452
- <div class="pf-v6-c-card__body">This is a card</div>
1453
- </div>
1454
- <div class="pf-v6-c-card">
1455
- <div class="pf-v6-c-card__body">This is a card</div>
1456
- </div>
1457
- <div class="pf-v6-c-card">
1458
- <div class="pf-v6-c-card__body">This is a card</div>
1459
- </div>
1460
- <div class="pf-v6-c-card">
1461
- <div class="pf-v6-c-card__body">This is a card</div>
1462
- </div>
1463
- <div class="pf-v6-c-card">
1464
- <div class="pf-v6-c-card__body">This is a card</div>
1465
- </div>
1466
- <div class="pf-v6-c-card">
1467
- <div class="pf-v6-c-card__body">This is a card</div>
1468
- </div>
1469
- <div class="pf-v6-c-card">
1470
- <div class="pf-v6-c-card__body">This is a card</div>
1471
- </div>
1472
- <div class="pf-v6-c-card">
1473
- <div class="pf-v6-c-card__body">This is a card</div>
1474
- </div>
1475
- <div class="pf-v6-c-card">
1476
- <div class="pf-v6-c-card__body">This is a card</div>
1477
- </div>
1478
- <div class="pf-v6-c-card">
1479
- <div class="pf-v6-c-card__body">This is a card</div>
1480
- </div>
1481
- <div class="pf-v6-c-card">
1482
- <div class="pf-v6-c-card__body">This is a card</div>
1483
- </div>
1484
- <div class="pf-v6-c-card">
1485
- <div class="pf-v6-c-card__body">This is a card</div>
1486
- </div>
1487
- <div class="pf-v6-c-card">
1488
- <div class="pf-v6-c-card__body">This is a card</div>
1489
- </div>
1490
- <div class="pf-v6-c-card">
1491
- <div class="pf-v6-c-card__body">This is a card</div>
1492
- </div>
1493
- <div class="pf-v6-c-card">
1494
- <div class="pf-v6-c-card__body">This is a card</div>
1495
- </div>
1496
- <div class="pf-v6-c-card">
1497
- <div class="pf-v6-c-card__body">This is a card</div>
1498
- </div>
1499
- <div class="pf-v6-c-card">
1500
- <div class="pf-v6-c-card__body">This is a card</div>
1501
- </div>
1502
- <div class="pf-v6-c-card">
1503
- <div class="pf-v6-c-card__body">This is a card</div>
1504
- </div>
1505
- <div class="pf-v6-c-card">
1506
- <div class="pf-v6-c-card__body">This is a card</div>
1507
- </div>
1508
- <div class="pf-v6-c-card">
1509
- <div class="pf-v6-c-card__body">This is a card</div>
1510
- </div>
1511
- <div class="pf-v6-c-card">
1512
- <div class="pf-v6-c-card__body">This is a card</div>
1513
- </div>
1514
- <div class="pf-v6-c-card">
1515
- <div class="pf-v6-c-card__body">This is a card</div>
1516
- </div>
1517
- <div class="pf-v6-c-card">
1518
- <div class="pf-v6-c-card__body">This is a card</div>
1519
- </div>
1520
- <div class="pf-v6-c-card">
1521
- <div class="pf-v6-c-card__body">This is a card</div>
1522
- </div>
1523
- <div class="pf-v6-c-card">
1524
- <div class="pf-v6-c-card__body">This is a card</div>
1525
- </div>
1526
- <div class="pf-v6-c-card">
1527
- <div class="pf-v6-c-card__body">This is a card</div>
1528
- </div>
1529
- <div class="pf-v6-c-card">
1530
- <div class="pf-v6-c-card__body">This is a card</div>
1531
- </div>
1532
- <div class="pf-v6-c-card">
1533
- <div class="pf-v6-c-card__body">This is a card</div>
1534
- </div>
1535
- </div>
1536
- </div>
1537
- </section>
1538
- </main>
1539
- </div>
1348
+ <section
1349
+ class="pf-v6-c-page__main-breadcrumb pf-m-limit-width pf-m-sticky-top"
1350
+ >
1351
+ <div class="pf-v6-c-page__main-body">
1352
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1353
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1354
+ <li class="pf-v6-c-breadcrumb__item">
1355
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1356
+ </li>
1357
+ <li class="pf-v6-c-breadcrumb__item">
1358
+ <span class="pf-v6-c-breadcrumb__item-divider">
1359
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1360
+ </span>
1540
1361
 
1541
- ```
1362
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1363
+ </li>
1364
+ <li class="pf-v6-c-breadcrumb__item">
1365
+ <span class="pf-v6-c-breadcrumb__item-divider">
1366
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1367
+ </span>
1542
1368
 
1543
- ### Sticky breadcrumb on medium
1369
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1370
+ </li>
1371
+ <li class="pf-v6-c-breadcrumb__item">
1372
+ <span class="pf-v6-c-breadcrumb__item-divider">
1373
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1374
+ </span>
1544
1375
 
1545
- ```html isFullscreen
1546
- <div class="pf-v6-c-page" id="page-demo-sticky-top-breadcrumb">
1547
- <div class="pf-v6-c-skip-to-content">
1548
- <a
1549
- class="pf-v6-c-button pf-m-primary"
1550
- href="#main-content-page-demo-sticky-top-breadcrumb"
1551
- >Skip to content</a>
1552
- </div>
1553
- <header
1554
- class="pf-v6-c-masthead"
1555
- id="page-demo-sticky-top-breadcrumb-masthead"
1556
- >
1557
- <span class="pf-v6-c-masthead__toggle">
1558
- <button
1559
- class="pf-v6-c-button pf-m-plain"
1376
+ <a
1377
+ href="#"
1378
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1379
+ aria-current="page"
1380
+ >Section landing</a>
1381
+ </li>
1382
+ </ol>
1383
+ </nav>
1384
+ </div>
1385
+ </section>
1386
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1387
+ <div class="pf-v6-c-page__main-body">
1388
+ <div class="pf-v6-c-content">
1389
+ <h1>Main title</h1>
1390
+ <p>This is a full page demo.</p>
1391
+ </div>
1392
+ </div>
1393
+ </section>
1394
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1395
+ <div class="pf-v6-c-page__main-body">
1396
+ <div class="pf-v6-l-gallery pf-m-gutter">
1397
+ <div class="pf-v6-c-card">
1398
+ <div class="pf-v6-c-card__body">This is a card</div>
1399
+ </div>
1400
+ <div class="pf-v6-c-card">
1401
+ <div class="pf-v6-c-card__body">This is a card</div>
1402
+ </div>
1403
+ <div class="pf-v6-c-card">
1404
+ <div class="pf-v6-c-card__body">This is a card</div>
1405
+ </div>
1406
+ <div class="pf-v6-c-card">
1407
+ <div class="pf-v6-c-card__body">This is a card</div>
1408
+ </div>
1409
+ <div class="pf-v6-c-card">
1410
+ <div class="pf-v6-c-card__body">This is a card</div>
1411
+ </div>
1412
+ <div class="pf-v6-c-card">
1413
+ <div class="pf-v6-c-card__body">This is a card</div>
1414
+ </div>
1415
+ <div class="pf-v6-c-card">
1416
+ <div class="pf-v6-c-card__body">This is a card</div>
1417
+ </div>
1418
+ <div class="pf-v6-c-card">
1419
+ <div class="pf-v6-c-card__body">This is a card</div>
1420
+ </div>
1421
+ <div class="pf-v6-c-card">
1422
+ <div class="pf-v6-c-card__body">This is a card</div>
1423
+ </div>
1424
+ <div class="pf-v6-c-card">
1425
+ <div class="pf-v6-c-card__body">This is a card</div>
1426
+ </div>
1427
+ <div class="pf-v6-c-card">
1428
+ <div class="pf-v6-c-card__body">This is a card</div>
1429
+ </div>
1430
+ <div class="pf-v6-c-card">
1431
+ <div class="pf-v6-c-card__body">This is a card</div>
1432
+ </div>
1433
+ <div class="pf-v6-c-card">
1434
+ <div class="pf-v6-c-card__body">This is a card</div>
1435
+ </div>
1436
+ <div class="pf-v6-c-card">
1437
+ <div class="pf-v6-c-card__body">This is a card</div>
1438
+ </div>
1439
+ <div class="pf-v6-c-card">
1440
+ <div class="pf-v6-c-card__body">This is a card</div>
1441
+ </div>
1442
+ <div class="pf-v6-c-card">
1443
+ <div class="pf-v6-c-card__body">This is a card</div>
1444
+ </div>
1445
+ <div class="pf-v6-c-card">
1446
+ <div class="pf-v6-c-card__body">This is a card</div>
1447
+ </div>
1448
+ <div class="pf-v6-c-card">
1449
+ <div class="pf-v6-c-card__body">This is a card</div>
1450
+ </div>
1451
+ <div class="pf-v6-c-card">
1452
+ <div class="pf-v6-c-card__body">This is a card</div>
1453
+ </div>
1454
+ <div class="pf-v6-c-card">
1455
+ <div class="pf-v6-c-card__body">This is a card</div>
1456
+ </div>
1457
+ <div class="pf-v6-c-card">
1458
+ <div class="pf-v6-c-card__body">This is a card</div>
1459
+ </div>
1460
+ <div class="pf-v6-c-card">
1461
+ <div class="pf-v6-c-card__body">This is a card</div>
1462
+ </div>
1463
+ <div class="pf-v6-c-card">
1464
+ <div class="pf-v6-c-card__body">This is a card</div>
1465
+ </div>
1466
+ <div class="pf-v6-c-card">
1467
+ <div class="pf-v6-c-card__body">This is a card</div>
1468
+ </div>
1469
+ <div class="pf-v6-c-card">
1470
+ <div class="pf-v6-c-card__body">This is a card</div>
1471
+ </div>
1472
+ <div class="pf-v6-c-card">
1473
+ <div class="pf-v6-c-card__body">This is a card</div>
1474
+ </div>
1475
+ <div class="pf-v6-c-card">
1476
+ <div class="pf-v6-c-card__body">This is a card</div>
1477
+ </div>
1478
+ <div class="pf-v6-c-card">
1479
+ <div class="pf-v6-c-card__body">This is a card</div>
1480
+ </div>
1481
+ <div class="pf-v6-c-card">
1482
+ <div class="pf-v6-c-card__body">This is a card</div>
1483
+ </div>
1484
+ <div class="pf-v6-c-card">
1485
+ <div class="pf-v6-c-card__body">This is a card</div>
1486
+ </div>
1487
+ <div class="pf-v6-c-card">
1488
+ <div class="pf-v6-c-card__body">This is a card</div>
1489
+ </div>
1490
+ <div class="pf-v6-c-card">
1491
+ <div class="pf-v6-c-card__body">This is a card</div>
1492
+ </div>
1493
+ <div class="pf-v6-c-card">
1494
+ <div class="pf-v6-c-card__body">This is a card</div>
1495
+ </div>
1496
+ <div class="pf-v6-c-card">
1497
+ <div class="pf-v6-c-card__body">This is a card</div>
1498
+ </div>
1499
+ <div class="pf-v6-c-card">
1500
+ <div class="pf-v6-c-card__body">This is a card</div>
1501
+ </div>
1502
+ <div class="pf-v6-c-card">
1503
+ <div class="pf-v6-c-card__body">This is a card</div>
1504
+ </div>
1505
+ <div class="pf-v6-c-card">
1506
+ <div class="pf-v6-c-card__body">This is a card</div>
1507
+ </div>
1508
+ <div class="pf-v6-c-card">
1509
+ <div class="pf-v6-c-card__body">This is a card</div>
1510
+ </div>
1511
+ <div class="pf-v6-c-card">
1512
+ <div class="pf-v6-c-card__body">This is a card</div>
1513
+ </div>
1514
+ <div class="pf-v6-c-card">
1515
+ <div class="pf-v6-c-card__body">This is a card</div>
1516
+ </div>
1517
+ <div class="pf-v6-c-card">
1518
+ <div class="pf-v6-c-card__body">This is a card</div>
1519
+ </div>
1520
+ <div class="pf-v6-c-card">
1521
+ <div class="pf-v6-c-card__body">This is a card</div>
1522
+ </div>
1523
+ <div class="pf-v6-c-card">
1524
+ <div class="pf-v6-c-card__body">This is a card</div>
1525
+ </div>
1526
+ <div class="pf-v6-c-card">
1527
+ <div class="pf-v6-c-card__body">This is a card</div>
1528
+ </div>
1529
+ <div class="pf-v6-c-card">
1530
+ <div class="pf-v6-c-card__body">This is a card</div>
1531
+ </div>
1532
+ <div class="pf-v6-c-card">
1533
+ <div class="pf-v6-c-card__body">This is a card</div>
1534
+ </div>
1535
+ <div class="pf-v6-c-card">
1536
+ <div class="pf-v6-c-card__body">This is a card</div>
1537
+ </div>
1538
+ <div class="pf-v6-c-card">
1539
+ <div class="pf-v6-c-card__body">This is a card</div>
1540
+ </div>
1541
+ <div class="pf-v6-c-card">
1542
+ <div class="pf-v6-c-card__body">This is a card</div>
1543
+ </div>
1544
+ <div class="pf-v6-c-card">
1545
+ <div class="pf-v6-c-card__body">This is a card</div>
1546
+ </div>
1547
+ </div>
1548
+ </div>
1549
+ </section>
1550
+ </main>
1551
+ </div>
1552
+ </div>
1553
+
1554
+ ```
1555
+
1556
+ ### Sticky breadcrumb on medium
1557
+
1558
+ ```html isFullscreen
1559
+ <div class="pf-v6-c-page" id="page-demo-sticky-top-breadcrumb">
1560
+ <div class="pf-v6-c-skip-to-content">
1561
+ <a
1562
+ class="pf-v6-c-button pf-m-primary"
1563
+ href="#main-content-page-demo-sticky-top-breadcrumb"
1564
+ >Skip to content</a>
1565
+ </div>
1566
+ <header
1567
+ class="pf-v6-c-masthead"
1568
+ id="page-demo-sticky-top-breadcrumb-masthead"
1569
+ >
1570
+ <span class="pf-v6-c-masthead__toggle">
1571
+ <button
1572
+ class="pf-v6-c-button pf-m-plain"
1560
1573
  type="button"
1561
1574
  aria-label="Global navigation"
1562
1575
  >
@@ -1766,250 +1779,252 @@ wrapperTag: div
1766
1779
  </nav>
1767
1780
  </div>
1768
1781
  </div>
1769
- <main
1770
- class="pf-v6-c-page__main"
1771
- tabindex="-1"
1772
- id="main-content-page-demo-sticky-top-breadcrumb"
1773
- >
1774
- <section
1775
- class="pf-v6-c-page__main-breadcrumb pf-m-limit-width pf-m-sticky-top-on-md-height"
1782
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1783
+ <main
1784
+ class="pf-v6-c-page__main"
1785
+ tabindex="-1"
1786
+ id="main-content-page-demo-sticky-top-breadcrumb"
1776
1787
  >
1777
- <div class="pf-v6-c-page__main-body">
1778
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1779
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1780
- <li class="pf-v6-c-breadcrumb__item">
1781
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1782
- </li>
1783
- <li class="pf-v6-c-breadcrumb__item">
1784
- <span class="pf-v6-c-breadcrumb__item-divider">
1785
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1786
- </span>
1787
-
1788
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1789
- </li>
1790
- <li class="pf-v6-c-breadcrumb__item">
1791
- <span class="pf-v6-c-breadcrumb__item-divider">
1792
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1793
- </span>
1794
-
1795
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1796
- </li>
1797
- <li class="pf-v6-c-breadcrumb__item">
1798
- <span class="pf-v6-c-breadcrumb__item-divider">
1799
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1800
- </span>
1801
-
1802
- <a
1803
- href="#"
1804
- class="pf-v6-c-breadcrumb__link pf-m-current"
1805
- aria-current="page"
1806
- >Section landing</a>
1807
- </li>
1808
- </ol>
1809
- </nav>
1810
- </div>
1811
- </section>
1812
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1813
- <div class="pf-v6-c-page__main-body">
1814
- <div class="pf-v6-c-content">
1815
- <h1>Main title</h1>
1816
- <p>This is a full page demo.</p>
1817
- </div>
1818
- </div>
1819
- </section>
1820
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1821
- <div class="pf-v6-c-page__main-body">
1822
- <div class="pf-v6-l-gallery pf-m-gutter">
1823
- <div class="pf-v6-c-card">
1824
- <div class="pf-v6-c-card__body">This is a card</div>
1825
- </div>
1826
- <div class="pf-v6-c-card">
1827
- <div class="pf-v6-c-card__body">This is a card</div>
1828
- </div>
1829
- <div class="pf-v6-c-card">
1830
- <div class="pf-v6-c-card__body">This is a card</div>
1831
- </div>
1832
- <div class="pf-v6-c-card">
1833
- <div class="pf-v6-c-card__body">This is a card</div>
1834
- </div>
1835
- <div class="pf-v6-c-card">
1836
- <div class="pf-v6-c-card__body">This is a card</div>
1837
- </div>
1838
- <div class="pf-v6-c-card">
1839
- <div class="pf-v6-c-card__body">This is a card</div>
1840
- </div>
1841
- <div class="pf-v6-c-card">
1842
- <div class="pf-v6-c-card__body">This is a card</div>
1843
- </div>
1844
- <div class="pf-v6-c-card">
1845
- <div class="pf-v6-c-card__body">This is a card</div>
1846
- </div>
1847
- <div class="pf-v6-c-card">
1848
- <div class="pf-v6-c-card__body">This is a card</div>
1849
- </div>
1850
- <div class="pf-v6-c-card">
1851
- <div class="pf-v6-c-card__body">This is a card</div>
1852
- </div>
1853
- <div class="pf-v6-c-card">
1854
- <div class="pf-v6-c-card__body">This is a card</div>
1855
- </div>
1856
- <div class="pf-v6-c-card">
1857
- <div class="pf-v6-c-card__body">This is a card</div>
1858
- </div>
1859
- <div class="pf-v6-c-card">
1860
- <div class="pf-v6-c-card__body">This is a card</div>
1861
- </div>
1862
- <div class="pf-v6-c-card">
1863
- <div class="pf-v6-c-card__body">This is a card</div>
1864
- </div>
1865
- <div class="pf-v6-c-card">
1866
- <div class="pf-v6-c-card__body">This is a card</div>
1867
- </div>
1868
- <div class="pf-v6-c-card">
1869
- <div class="pf-v6-c-card__body">This is a card</div>
1870
- </div>
1871
- <div class="pf-v6-c-card">
1872
- <div class="pf-v6-c-card__body">This is a card</div>
1873
- </div>
1874
- <div class="pf-v6-c-card">
1875
- <div class="pf-v6-c-card__body">This is a card</div>
1876
- </div>
1877
- <div class="pf-v6-c-card">
1878
- <div class="pf-v6-c-card__body">This is a card</div>
1879
- </div>
1880
- <div class="pf-v6-c-card">
1881
- <div class="pf-v6-c-card__body">This is a card</div>
1882
- </div>
1883
- <div class="pf-v6-c-card">
1884
- <div class="pf-v6-c-card__body">This is a card</div>
1885
- </div>
1886
- <div class="pf-v6-c-card">
1887
- <div class="pf-v6-c-card__body">This is a card</div>
1888
- </div>
1889
- <div class="pf-v6-c-card">
1890
- <div class="pf-v6-c-card__body">This is a card</div>
1891
- </div>
1892
- <div class="pf-v6-c-card">
1893
- <div class="pf-v6-c-card__body">This is a card</div>
1894
- </div>
1895
- <div class="pf-v6-c-card">
1896
- <div class="pf-v6-c-card__body">This is a card</div>
1897
- </div>
1898
- <div class="pf-v6-c-card">
1899
- <div class="pf-v6-c-card__body">This is a card</div>
1900
- </div>
1901
- <div class="pf-v6-c-card">
1902
- <div class="pf-v6-c-card__body">This is a card</div>
1903
- </div>
1904
- <div class="pf-v6-c-card">
1905
- <div class="pf-v6-c-card__body">This is a card</div>
1906
- </div>
1907
- <div class="pf-v6-c-card">
1908
- <div class="pf-v6-c-card__body">This is a card</div>
1909
- </div>
1910
- <div class="pf-v6-c-card">
1911
- <div class="pf-v6-c-card__body">This is a card</div>
1912
- </div>
1913
- <div class="pf-v6-c-card">
1914
- <div class="pf-v6-c-card__body">This is a card</div>
1915
- </div>
1916
- <div class="pf-v6-c-card">
1917
- <div class="pf-v6-c-card__body">This is a card</div>
1918
- </div>
1919
- <div class="pf-v6-c-card">
1920
- <div class="pf-v6-c-card__body">This is a card</div>
1921
- </div>
1922
- <div class="pf-v6-c-card">
1923
- <div class="pf-v6-c-card__body">This is a card</div>
1924
- </div>
1925
- <div class="pf-v6-c-card">
1926
- <div class="pf-v6-c-card__body">This is a card</div>
1927
- </div>
1928
- <div class="pf-v6-c-card">
1929
- <div class="pf-v6-c-card__body">This is a card</div>
1930
- </div>
1931
- <div class="pf-v6-c-card">
1932
- <div class="pf-v6-c-card__body">This is a card</div>
1933
- </div>
1934
- <div class="pf-v6-c-card">
1935
- <div class="pf-v6-c-card__body">This is a card</div>
1936
- </div>
1937
- <div class="pf-v6-c-card">
1938
- <div class="pf-v6-c-card__body">This is a card</div>
1939
- </div>
1940
- <div class="pf-v6-c-card">
1941
- <div class="pf-v6-c-card__body">This is a card</div>
1942
- </div>
1943
- <div class="pf-v6-c-card">
1944
- <div class="pf-v6-c-card__body">This is a card</div>
1945
- </div>
1946
- <div class="pf-v6-c-card">
1947
- <div class="pf-v6-c-card__body">This is a card</div>
1948
- </div>
1949
- <div class="pf-v6-c-card">
1950
- <div class="pf-v6-c-card__body">This is a card</div>
1951
- </div>
1952
- <div class="pf-v6-c-card">
1953
- <div class="pf-v6-c-card__body">This is a card</div>
1954
- </div>
1955
- <div class="pf-v6-c-card">
1956
- <div class="pf-v6-c-card__body">This is a card</div>
1957
- </div>
1958
- <div class="pf-v6-c-card">
1959
- <div class="pf-v6-c-card__body">This is a card</div>
1960
- </div>
1961
- <div class="pf-v6-c-card">
1962
- <div class="pf-v6-c-card__body">This is a card</div>
1963
- </div>
1964
- <div class="pf-v6-c-card">
1965
- <div class="pf-v6-c-card__body">This is a card</div>
1966
- </div>
1967
- <div class="pf-v6-c-card">
1968
- <div class="pf-v6-c-card__body">This is a card</div>
1969
- </div>
1970
- <div class="pf-v6-c-card">
1971
- <div class="pf-v6-c-card__body">This is a card</div>
1972
- </div>
1973
- </div>
1974
- </div>
1975
- </section>
1976
- </main>
1977
- </div>
1788
+ <section
1789
+ class="pf-v6-c-page__main-breadcrumb pf-m-limit-width pf-m-sticky-top-on-md-height"
1790
+ >
1791
+ <div class="pf-v6-c-page__main-body">
1792
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1793
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1794
+ <li class="pf-v6-c-breadcrumb__item">
1795
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1796
+ </li>
1797
+ <li class="pf-v6-c-breadcrumb__item">
1798
+ <span class="pf-v6-c-breadcrumb__item-divider">
1799
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1800
+ </span>
1978
1801
 
1979
- ```
1802
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1803
+ </li>
1804
+ <li class="pf-v6-c-breadcrumb__item">
1805
+ <span class="pf-v6-c-breadcrumb__item-divider">
1806
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1807
+ </span>
1980
1808
 
1981
- ### Sticky section group
1809
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1810
+ </li>
1811
+ <li class="pf-v6-c-breadcrumb__item">
1812
+ <span class="pf-v6-c-breadcrumb__item-divider">
1813
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1814
+ </span>
1982
1815
 
1983
- ```html isFullscreen
1984
- <div class="pf-v6-c-page" id="page-demo-sticky-top-section-group">
1985
- <div class="pf-v6-c-skip-to-content">
1986
- <a
1987
- class="pf-v6-c-button pf-m-primary"
1988
- href="#main-content-page-demo-sticky-top-section-group"
1989
- >Skip to content</a>
1990
- </div>
1991
- <header
1992
- class="pf-v6-c-masthead"
1993
- id="page-demo-sticky-top-section-group-masthead"
1994
- >
1995
- <span class="pf-v6-c-masthead__toggle">
1996
- <button
1997
- class="pf-v6-c-button pf-m-plain"
1998
- type="button"
1999
- aria-label="Global navigation"
2000
- >
2001
- <i class="fas fa-bars" aria-hidden="true"></i>
2002
- </button>
2003
- </span>
2004
- <div class="pf-v6-c-masthead__main">
2005
- <a class="pf-v6-c-masthead__brand" href="#">
2006
- <svg height="40px" viewBox="0 0 679 158">
2007
- <title>PF-HorizontalLogo-Color</title>
2008
- <defs>
2009
- <linearGradient
2010
- x1="68%"
2011
- y1="2.25860997e-13%"
2012
- x2="32%"
1816
+ <a
1817
+ href="#"
1818
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1819
+ aria-current="page"
1820
+ >Section landing</a>
1821
+ </li>
1822
+ </ol>
1823
+ </nav>
1824
+ </div>
1825
+ </section>
1826
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1827
+ <div class="pf-v6-c-page__main-body">
1828
+ <div class="pf-v6-c-content">
1829
+ <h1>Main title</h1>
1830
+ <p>This is a full page demo.</p>
1831
+ </div>
1832
+ </div>
1833
+ </section>
1834
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1835
+ <div class="pf-v6-c-page__main-body">
1836
+ <div class="pf-v6-l-gallery pf-m-gutter">
1837
+ <div class="pf-v6-c-card">
1838
+ <div class="pf-v6-c-card__body">This is a card</div>
1839
+ </div>
1840
+ <div class="pf-v6-c-card">
1841
+ <div class="pf-v6-c-card__body">This is a card</div>
1842
+ </div>
1843
+ <div class="pf-v6-c-card">
1844
+ <div class="pf-v6-c-card__body">This is a card</div>
1845
+ </div>
1846
+ <div class="pf-v6-c-card">
1847
+ <div class="pf-v6-c-card__body">This is a card</div>
1848
+ </div>
1849
+ <div class="pf-v6-c-card">
1850
+ <div class="pf-v6-c-card__body">This is a card</div>
1851
+ </div>
1852
+ <div class="pf-v6-c-card">
1853
+ <div class="pf-v6-c-card__body">This is a card</div>
1854
+ </div>
1855
+ <div class="pf-v6-c-card">
1856
+ <div class="pf-v6-c-card__body">This is a card</div>
1857
+ </div>
1858
+ <div class="pf-v6-c-card">
1859
+ <div class="pf-v6-c-card__body">This is a card</div>
1860
+ </div>
1861
+ <div class="pf-v6-c-card">
1862
+ <div class="pf-v6-c-card__body">This is a card</div>
1863
+ </div>
1864
+ <div class="pf-v6-c-card">
1865
+ <div class="pf-v6-c-card__body">This is a card</div>
1866
+ </div>
1867
+ <div class="pf-v6-c-card">
1868
+ <div class="pf-v6-c-card__body">This is a card</div>
1869
+ </div>
1870
+ <div class="pf-v6-c-card">
1871
+ <div class="pf-v6-c-card__body">This is a card</div>
1872
+ </div>
1873
+ <div class="pf-v6-c-card">
1874
+ <div class="pf-v6-c-card__body">This is a card</div>
1875
+ </div>
1876
+ <div class="pf-v6-c-card">
1877
+ <div class="pf-v6-c-card__body">This is a card</div>
1878
+ </div>
1879
+ <div class="pf-v6-c-card">
1880
+ <div class="pf-v6-c-card__body">This is a card</div>
1881
+ </div>
1882
+ <div class="pf-v6-c-card">
1883
+ <div class="pf-v6-c-card__body">This is a card</div>
1884
+ </div>
1885
+ <div class="pf-v6-c-card">
1886
+ <div class="pf-v6-c-card__body">This is a card</div>
1887
+ </div>
1888
+ <div class="pf-v6-c-card">
1889
+ <div class="pf-v6-c-card__body">This is a card</div>
1890
+ </div>
1891
+ <div class="pf-v6-c-card">
1892
+ <div class="pf-v6-c-card__body">This is a card</div>
1893
+ </div>
1894
+ <div class="pf-v6-c-card">
1895
+ <div class="pf-v6-c-card__body">This is a card</div>
1896
+ </div>
1897
+ <div class="pf-v6-c-card">
1898
+ <div class="pf-v6-c-card__body">This is a card</div>
1899
+ </div>
1900
+ <div class="pf-v6-c-card">
1901
+ <div class="pf-v6-c-card__body">This is a card</div>
1902
+ </div>
1903
+ <div class="pf-v6-c-card">
1904
+ <div class="pf-v6-c-card__body">This is a card</div>
1905
+ </div>
1906
+ <div class="pf-v6-c-card">
1907
+ <div class="pf-v6-c-card__body">This is a card</div>
1908
+ </div>
1909
+ <div class="pf-v6-c-card">
1910
+ <div class="pf-v6-c-card__body">This is a card</div>
1911
+ </div>
1912
+ <div class="pf-v6-c-card">
1913
+ <div class="pf-v6-c-card__body">This is a card</div>
1914
+ </div>
1915
+ <div class="pf-v6-c-card">
1916
+ <div class="pf-v6-c-card__body">This is a card</div>
1917
+ </div>
1918
+ <div class="pf-v6-c-card">
1919
+ <div class="pf-v6-c-card__body">This is a card</div>
1920
+ </div>
1921
+ <div class="pf-v6-c-card">
1922
+ <div class="pf-v6-c-card__body">This is a card</div>
1923
+ </div>
1924
+ <div class="pf-v6-c-card">
1925
+ <div class="pf-v6-c-card__body">This is a card</div>
1926
+ </div>
1927
+ <div class="pf-v6-c-card">
1928
+ <div class="pf-v6-c-card__body">This is a card</div>
1929
+ </div>
1930
+ <div class="pf-v6-c-card">
1931
+ <div class="pf-v6-c-card__body">This is a card</div>
1932
+ </div>
1933
+ <div class="pf-v6-c-card">
1934
+ <div class="pf-v6-c-card__body">This is a card</div>
1935
+ </div>
1936
+ <div class="pf-v6-c-card">
1937
+ <div class="pf-v6-c-card__body">This is a card</div>
1938
+ </div>
1939
+ <div class="pf-v6-c-card">
1940
+ <div class="pf-v6-c-card__body">This is a card</div>
1941
+ </div>
1942
+ <div class="pf-v6-c-card">
1943
+ <div class="pf-v6-c-card__body">This is a card</div>
1944
+ </div>
1945
+ <div class="pf-v6-c-card">
1946
+ <div class="pf-v6-c-card__body">This is a card</div>
1947
+ </div>
1948
+ <div class="pf-v6-c-card">
1949
+ <div class="pf-v6-c-card__body">This is a card</div>
1950
+ </div>
1951
+ <div class="pf-v6-c-card">
1952
+ <div class="pf-v6-c-card__body">This is a card</div>
1953
+ </div>
1954
+ <div class="pf-v6-c-card">
1955
+ <div class="pf-v6-c-card__body">This is a card</div>
1956
+ </div>
1957
+ <div class="pf-v6-c-card">
1958
+ <div class="pf-v6-c-card__body">This is a card</div>
1959
+ </div>
1960
+ <div class="pf-v6-c-card">
1961
+ <div class="pf-v6-c-card__body">This is a card</div>
1962
+ </div>
1963
+ <div class="pf-v6-c-card">
1964
+ <div class="pf-v6-c-card__body">This is a card</div>
1965
+ </div>
1966
+ <div class="pf-v6-c-card">
1967
+ <div class="pf-v6-c-card__body">This is a card</div>
1968
+ </div>
1969
+ <div class="pf-v6-c-card">
1970
+ <div class="pf-v6-c-card__body">This is a card</div>
1971
+ </div>
1972
+ <div class="pf-v6-c-card">
1973
+ <div class="pf-v6-c-card__body">This is a card</div>
1974
+ </div>
1975
+ <div class="pf-v6-c-card">
1976
+ <div class="pf-v6-c-card__body">This is a card</div>
1977
+ </div>
1978
+ <div class="pf-v6-c-card">
1979
+ <div class="pf-v6-c-card__body">This is a card</div>
1980
+ </div>
1981
+ <div class="pf-v6-c-card">
1982
+ <div class="pf-v6-c-card__body">This is a card</div>
1983
+ </div>
1984
+ <div class="pf-v6-c-card">
1985
+ <div class="pf-v6-c-card__body">This is a card</div>
1986
+ </div>
1987
+ </div>
1988
+ </div>
1989
+ </section>
1990
+ </main>
1991
+ </div>
1992
+ </div>
1993
+
1994
+ ```
1995
+
1996
+ ### Sticky section group
1997
+
1998
+ ```html isFullscreen
1999
+ <div class="pf-v6-c-page" id="page-demo-sticky-top-section-group">
2000
+ <div class="pf-v6-c-skip-to-content">
2001
+ <a
2002
+ class="pf-v6-c-button pf-m-primary"
2003
+ href="#main-content-page-demo-sticky-top-section-group"
2004
+ >Skip to content</a>
2005
+ </div>
2006
+ <header
2007
+ class="pf-v6-c-masthead"
2008
+ id="page-demo-sticky-top-section-group-masthead"
2009
+ >
2010
+ <span class="pf-v6-c-masthead__toggle">
2011
+ <button
2012
+ class="pf-v6-c-button pf-m-plain"
2013
+ type="button"
2014
+ aria-label="Global navigation"
2015
+ >
2016
+ <i class="fas fa-bars" aria-hidden="true"></i>
2017
+ </button>
2018
+ </span>
2019
+ <div class="pf-v6-c-masthead__main">
2020
+ <a class="pf-v6-c-masthead__brand" href="#">
2021
+ <svg height="40px" viewBox="0 0 679 158">
2022
+ <title>PF-HorizontalLogo-Color</title>
2023
+ <defs>
2024
+ <linearGradient
2025
+ x1="68%"
2026
+ y1="2.25860997e-13%"
2027
+ x2="32%"
2013
2028
  y2="100%"
2014
2029
  id="linearGradient-page-demo-sticky-top-section-group-masthead"
2015
2030
  >
@@ -2204,214 +2219,216 @@ wrapperTag: div
2204
2219
  </nav>
2205
2220
  </div>
2206
2221
  </div>
2207
- <main
2208
- class="pf-v6-c-page__main"
2209
- tabindex="-1"
2210
- id="main-content-page-demo-sticky-top-section-group"
2211
- >
2212
- <div class="pf-v6-c-page__main-group pf-m-sticky-top">
2213
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2214
- <div class="pf-v6-c-page__main-body">
2215
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2216
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2217
- <li class="pf-v6-c-breadcrumb__item">
2218
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2219
- </li>
2220
- <li class="pf-v6-c-breadcrumb__item">
2221
- <span class="pf-v6-c-breadcrumb__item-divider">
2222
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2223
- </span>
2222
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2223
+ <main
2224
+ class="pf-v6-c-page__main"
2225
+ tabindex="-1"
2226
+ id="main-content-page-demo-sticky-top-section-group"
2227
+ >
2228
+ <div class="pf-v6-c-page__main-group pf-m-sticky-top">
2229
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2230
+ <div class="pf-v6-c-page__main-body">
2231
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2232
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2233
+ <li class="pf-v6-c-breadcrumb__item">
2234
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2235
+ </li>
2236
+ <li class="pf-v6-c-breadcrumb__item">
2237
+ <span class="pf-v6-c-breadcrumb__item-divider">
2238
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2239
+ </span>
2224
2240
 
2225
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2226
- </li>
2227
- <li class="pf-v6-c-breadcrumb__item">
2228
- <span class="pf-v6-c-breadcrumb__item-divider">
2229
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2230
- </span>
2241
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2242
+ </li>
2243
+ <li class="pf-v6-c-breadcrumb__item">
2244
+ <span class="pf-v6-c-breadcrumb__item-divider">
2245
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2246
+ </span>
2231
2247
 
2232
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2233
- </li>
2234
- <li class="pf-v6-c-breadcrumb__item">
2235
- <span class="pf-v6-c-breadcrumb__item-divider">
2236
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2237
- </span>
2248
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2249
+ </li>
2250
+ <li class="pf-v6-c-breadcrumb__item">
2251
+ <span class="pf-v6-c-breadcrumb__item-divider">
2252
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2253
+ </span>
2238
2254
 
2239
- <a
2240
- href="#"
2241
- class="pf-v6-c-breadcrumb__link pf-m-current"
2242
- aria-current="page"
2243
- >Section landing</a>
2244
- </li>
2245
- </ol>
2246
- </nav>
2247
- </div>
2248
- </section>
2249
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2255
+ <a
2256
+ href="#"
2257
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2258
+ aria-current="page"
2259
+ >Section landing</a>
2260
+ </li>
2261
+ </ol>
2262
+ </nav>
2263
+ </div>
2264
+ </section>
2265
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2266
+ <div class="pf-v6-c-page__main-body">
2267
+ <div class="pf-v6-c-content">
2268
+ <h1>Main title</h1>
2269
+ <p>This is a full page demo.</p>
2270
+ </div>
2271
+ </div>
2272
+ </section>
2273
+ </div>
2274
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2250
2275
  <div class="pf-v6-c-page__main-body">
2251
- <div class="pf-v6-c-content">
2252
- <h1>Main title</h1>
2253
- <p>This is a full page demo.</p>
2276
+ <div class="pf-v6-l-gallery pf-m-gutter">
2277
+ <div class="pf-v6-c-card">
2278
+ <div class="pf-v6-c-card__body">This is a card</div>
2279
+ </div>
2280
+ <div class="pf-v6-c-card">
2281
+ <div class="pf-v6-c-card__body">This is a card</div>
2282
+ </div>
2283
+ <div class="pf-v6-c-card">
2284
+ <div class="pf-v6-c-card__body">This is a card</div>
2285
+ </div>
2286
+ <div class="pf-v6-c-card">
2287
+ <div class="pf-v6-c-card__body">This is a card</div>
2288
+ </div>
2289
+ <div class="pf-v6-c-card">
2290
+ <div class="pf-v6-c-card__body">This is a card</div>
2291
+ </div>
2292
+ <div class="pf-v6-c-card">
2293
+ <div class="pf-v6-c-card__body">This is a card</div>
2294
+ </div>
2295
+ <div class="pf-v6-c-card">
2296
+ <div class="pf-v6-c-card__body">This is a card</div>
2297
+ </div>
2298
+ <div class="pf-v6-c-card">
2299
+ <div class="pf-v6-c-card__body">This is a card</div>
2300
+ </div>
2301
+ <div class="pf-v6-c-card">
2302
+ <div class="pf-v6-c-card__body">This is a card</div>
2303
+ </div>
2304
+ <div class="pf-v6-c-card">
2305
+ <div class="pf-v6-c-card__body">This is a card</div>
2306
+ </div>
2307
+ <div class="pf-v6-c-card">
2308
+ <div class="pf-v6-c-card__body">This is a card</div>
2309
+ </div>
2310
+ <div class="pf-v6-c-card">
2311
+ <div class="pf-v6-c-card__body">This is a card</div>
2312
+ </div>
2313
+ <div class="pf-v6-c-card">
2314
+ <div class="pf-v6-c-card__body">This is a card</div>
2315
+ </div>
2316
+ <div class="pf-v6-c-card">
2317
+ <div class="pf-v6-c-card__body">This is a card</div>
2318
+ </div>
2319
+ <div class="pf-v6-c-card">
2320
+ <div class="pf-v6-c-card__body">This is a card</div>
2321
+ </div>
2322
+ <div class="pf-v6-c-card">
2323
+ <div class="pf-v6-c-card__body">This is a card</div>
2324
+ </div>
2325
+ <div class="pf-v6-c-card">
2326
+ <div class="pf-v6-c-card__body">This is a card</div>
2327
+ </div>
2328
+ <div class="pf-v6-c-card">
2329
+ <div class="pf-v6-c-card__body">This is a card</div>
2330
+ </div>
2331
+ <div class="pf-v6-c-card">
2332
+ <div class="pf-v6-c-card__body">This is a card</div>
2333
+ </div>
2334
+ <div class="pf-v6-c-card">
2335
+ <div class="pf-v6-c-card__body">This is a card</div>
2336
+ </div>
2337
+ <div class="pf-v6-c-card">
2338
+ <div class="pf-v6-c-card__body">This is a card</div>
2339
+ </div>
2340
+ <div class="pf-v6-c-card">
2341
+ <div class="pf-v6-c-card__body">This is a card</div>
2342
+ </div>
2343
+ <div class="pf-v6-c-card">
2344
+ <div class="pf-v6-c-card__body">This is a card</div>
2345
+ </div>
2346
+ <div class="pf-v6-c-card">
2347
+ <div class="pf-v6-c-card__body">This is a card</div>
2348
+ </div>
2349
+ <div class="pf-v6-c-card">
2350
+ <div class="pf-v6-c-card__body">This is a card</div>
2351
+ </div>
2352
+ <div class="pf-v6-c-card">
2353
+ <div class="pf-v6-c-card__body">This is a card</div>
2354
+ </div>
2355
+ <div class="pf-v6-c-card">
2356
+ <div class="pf-v6-c-card__body">This is a card</div>
2357
+ </div>
2358
+ <div class="pf-v6-c-card">
2359
+ <div class="pf-v6-c-card__body">This is a card</div>
2360
+ </div>
2361
+ <div class="pf-v6-c-card">
2362
+ <div class="pf-v6-c-card__body">This is a card</div>
2363
+ </div>
2364
+ <div class="pf-v6-c-card">
2365
+ <div class="pf-v6-c-card__body">This is a card</div>
2366
+ </div>
2367
+ <div class="pf-v6-c-card">
2368
+ <div class="pf-v6-c-card__body">This is a card</div>
2369
+ </div>
2370
+ <div class="pf-v6-c-card">
2371
+ <div class="pf-v6-c-card__body">This is a card</div>
2372
+ </div>
2373
+ <div class="pf-v6-c-card">
2374
+ <div class="pf-v6-c-card__body">This is a card</div>
2375
+ </div>
2376
+ <div class="pf-v6-c-card">
2377
+ <div class="pf-v6-c-card__body">This is a card</div>
2378
+ </div>
2379
+ <div class="pf-v6-c-card">
2380
+ <div class="pf-v6-c-card__body">This is a card</div>
2381
+ </div>
2382
+ <div class="pf-v6-c-card">
2383
+ <div class="pf-v6-c-card__body">This is a card</div>
2384
+ </div>
2385
+ <div class="pf-v6-c-card">
2386
+ <div class="pf-v6-c-card__body">This is a card</div>
2387
+ </div>
2388
+ <div class="pf-v6-c-card">
2389
+ <div class="pf-v6-c-card__body">This is a card</div>
2390
+ </div>
2391
+ <div class="pf-v6-c-card">
2392
+ <div class="pf-v6-c-card__body">This is a card</div>
2393
+ </div>
2394
+ <div class="pf-v6-c-card">
2395
+ <div class="pf-v6-c-card__body">This is a card</div>
2396
+ </div>
2397
+ <div class="pf-v6-c-card">
2398
+ <div class="pf-v6-c-card__body">This is a card</div>
2399
+ </div>
2400
+ <div class="pf-v6-c-card">
2401
+ <div class="pf-v6-c-card__body">This is a card</div>
2402
+ </div>
2403
+ <div class="pf-v6-c-card">
2404
+ <div class="pf-v6-c-card__body">This is a card</div>
2405
+ </div>
2406
+ <div class="pf-v6-c-card">
2407
+ <div class="pf-v6-c-card__body">This is a card</div>
2408
+ </div>
2409
+ <div class="pf-v6-c-card">
2410
+ <div class="pf-v6-c-card__body">This is a card</div>
2411
+ </div>
2412
+ <div class="pf-v6-c-card">
2413
+ <div class="pf-v6-c-card__body">This is a card</div>
2414
+ </div>
2415
+ <div class="pf-v6-c-card">
2416
+ <div class="pf-v6-c-card__body">This is a card</div>
2417
+ </div>
2418
+ <div class="pf-v6-c-card">
2419
+ <div class="pf-v6-c-card__body">This is a card</div>
2420
+ </div>
2421
+ <div class="pf-v6-c-card">
2422
+ <div class="pf-v6-c-card__body">This is a card</div>
2423
+ </div>
2424
+ <div class="pf-v6-c-card">
2425
+ <div class="pf-v6-c-card__body">This is a card</div>
2426
+ </div>
2254
2427
  </div>
2255
2428
  </div>
2256
2429
  </section>
2257
- </div>
2258
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2259
- <div class="pf-v6-c-page__main-body">
2260
- <div class="pf-v6-l-gallery pf-m-gutter">
2261
- <div class="pf-v6-c-card">
2262
- <div class="pf-v6-c-card__body">This is a card</div>
2263
- </div>
2264
- <div class="pf-v6-c-card">
2265
- <div class="pf-v6-c-card__body">This is a card</div>
2266
- </div>
2267
- <div class="pf-v6-c-card">
2268
- <div class="pf-v6-c-card__body">This is a card</div>
2269
- </div>
2270
- <div class="pf-v6-c-card">
2271
- <div class="pf-v6-c-card__body">This is a card</div>
2272
- </div>
2273
- <div class="pf-v6-c-card">
2274
- <div class="pf-v6-c-card__body">This is a card</div>
2275
- </div>
2276
- <div class="pf-v6-c-card">
2277
- <div class="pf-v6-c-card__body">This is a card</div>
2278
- </div>
2279
- <div class="pf-v6-c-card">
2280
- <div class="pf-v6-c-card__body">This is a card</div>
2281
- </div>
2282
- <div class="pf-v6-c-card">
2283
- <div class="pf-v6-c-card__body">This is a card</div>
2284
- </div>
2285
- <div class="pf-v6-c-card">
2286
- <div class="pf-v6-c-card__body">This is a card</div>
2287
- </div>
2288
- <div class="pf-v6-c-card">
2289
- <div class="pf-v6-c-card__body">This is a card</div>
2290
- </div>
2291
- <div class="pf-v6-c-card">
2292
- <div class="pf-v6-c-card__body">This is a card</div>
2293
- </div>
2294
- <div class="pf-v6-c-card">
2295
- <div class="pf-v6-c-card__body">This is a card</div>
2296
- </div>
2297
- <div class="pf-v6-c-card">
2298
- <div class="pf-v6-c-card__body">This is a card</div>
2299
- </div>
2300
- <div class="pf-v6-c-card">
2301
- <div class="pf-v6-c-card__body">This is a card</div>
2302
- </div>
2303
- <div class="pf-v6-c-card">
2304
- <div class="pf-v6-c-card__body">This is a card</div>
2305
- </div>
2306
- <div class="pf-v6-c-card">
2307
- <div class="pf-v6-c-card__body">This is a card</div>
2308
- </div>
2309
- <div class="pf-v6-c-card">
2310
- <div class="pf-v6-c-card__body">This is a card</div>
2311
- </div>
2312
- <div class="pf-v6-c-card">
2313
- <div class="pf-v6-c-card__body">This is a card</div>
2314
- </div>
2315
- <div class="pf-v6-c-card">
2316
- <div class="pf-v6-c-card__body">This is a card</div>
2317
- </div>
2318
- <div class="pf-v6-c-card">
2319
- <div class="pf-v6-c-card__body">This is a card</div>
2320
- </div>
2321
- <div class="pf-v6-c-card">
2322
- <div class="pf-v6-c-card__body">This is a card</div>
2323
- </div>
2324
- <div class="pf-v6-c-card">
2325
- <div class="pf-v6-c-card__body">This is a card</div>
2326
- </div>
2327
- <div class="pf-v6-c-card">
2328
- <div class="pf-v6-c-card__body">This is a card</div>
2329
- </div>
2330
- <div class="pf-v6-c-card">
2331
- <div class="pf-v6-c-card__body">This is a card</div>
2332
- </div>
2333
- <div class="pf-v6-c-card">
2334
- <div class="pf-v6-c-card__body">This is a card</div>
2335
- </div>
2336
- <div class="pf-v6-c-card">
2337
- <div class="pf-v6-c-card__body">This is a card</div>
2338
- </div>
2339
- <div class="pf-v6-c-card">
2340
- <div class="pf-v6-c-card__body">This is a card</div>
2341
- </div>
2342
- <div class="pf-v6-c-card">
2343
- <div class="pf-v6-c-card__body">This is a card</div>
2344
- </div>
2345
- <div class="pf-v6-c-card">
2346
- <div class="pf-v6-c-card__body">This is a card</div>
2347
- </div>
2348
- <div class="pf-v6-c-card">
2349
- <div class="pf-v6-c-card__body">This is a card</div>
2350
- </div>
2351
- <div class="pf-v6-c-card">
2352
- <div class="pf-v6-c-card__body">This is a card</div>
2353
- </div>
2354
- <div class="pf-v6-c-card">
2355
- <div class="pf-v6-c-card__body">This is a card</div>
2356
- </div>
2357
- <div class="pf-v6-c-card">
2358
- <div class="pf-v6-c-card__body">This is a card</div>
2359
- </div>
2360
- <div class="pf-v6-c-card">
2361
- <div class="pf-v6-c-card__body">This is a card</div>
2362
- </div>
2363
- <div class="pf-v6-c-card">
2364
- <div class="pf-v6-c-card__body">This is a card</div>
2365
- </div>
2366
- <div class="pf-v6-c-card">
2367
- <div class="pf-v6-c-card__body">This is a card</div>
2368
- </div>
2369
- <div class="pf-v6-c-card">
2370
- <div class="pf-v6-c-card__body">This is a card</div>
2371
- </div>
2372
- <div class="pf-v6-c-card">
2373
- <div class="pf-v6-c-card__body">This is a card</div>
2374
- </div>
2375
- <div class="pf-v6-c-card">
2376
- <div class="pf-v6-c-card__body">This is a card</div>
2377
- </div>
2378
- <div class="pf-v6-c-card">
2379
- <div class="pf-v6-c-card__body">This is a card</div>
2380
- </div>
2381
- <div class="pf-v6-c-card">
2382
- <div class="pf-v6-c-card__body">This is a card</div>
2383
- </div>
2384
- <div class="pf-v6-c-card">
2385
- <div class="pf-v6-c-card__body">This is a card</div>
2386
- </div>
2387
- <div class="pf-v6-c-card">
2388
- <div class="pf-v6-c-card__body">This is a card</div>
2389
- </div>
2390
- <div class="pf-v6-c-card">
2391
- <div class="pf-v6-c-card__body">This is a card</div>
2392
- </div>
2393
- <div class="pf-v6-c-card">
2394
- <div class="pf-v6-c-card__body">This is a card</div>
2395
- </div>
2396
- <div class="pf-v6-c-card">
2397
- <div class="pf-v6-c-card__body">This is a card</div>
2398
- </div>
2399
- <div class="pf-v6-c-card">
2400
- <div class="pf-v6-c-card__body">This is a card</div>
2401
- </div>
2402
- <div class="pf-v6-c-card">
2403
- <div class="pf-v6-c-card__body">This is a card</div>
2404
- </div>
2405
- <div class="pf-v6-c-card">
2406
- <div class="pf-v6-c-card__body">This is a card</div>
2407
- </div>
2408
- <div class="pf-v6-c-card">
2409
- <div class="pf-v6-c-card__body">This is a card</div>
2410
- </div>
2411
- </div>
2412
- </div>
2413
- </section>
2414
- </main>
2430
+ </main>
2431
+ </div>
2415
2432
  </div>
2416
2433
 
2417
2434
  ```
@@ -2642,219 +2659,221 @@ wrapperTag: div
2642
2659
  </nav>
2643
2660
  </div>
2644
2661
  </div>
2645
- <main
2646
- class="pf-v6-c-page__main"
2647
- tabindex="-1"
2648
- id="main-content-page-demo-sticky-section-bottom"
2649
- >
2650
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2651
- <div class="pf-v6-c-page__main-body">
2652
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2653
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2654
- <li class="pf-v6-c-breadcrumb__item">
2655
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2656
- </li>
2657
- <li class="pf-v6-c-breadcrumb__item">
2658
- <span class="pf-v6-c-breadcrumb__item-divider">
2659
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2660
- </span>
2661
-
2662
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2663
- </li>
2664
- <li class="pf-v6-c-breadcrumb__item">
2665
- <span class="pf-v6-c-breadcrumb__item-divider">
2666
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2667
- </span>
2668
-
2669
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2670
- </li>
2671
- <li class="pf-v6-c-breadcrumb__item">
2672
- <span class="pf-v6-c-breadcrumb__item-divider">
2673
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2674
- </span>
2675
-
2676
- <a
2677
- href="#"
2678
- class="pf-v6-c-breadcrumb__link pf-m-current"
2679
- aria-current="page"
2680
- >Section landing</a>
2681
- </li>
2682
- </ol>
2683
- </nav>
2684
- </div>
2685
- </section>
2686
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2687
- <div class="pf-v6-c-page__main-body">
2688
- <div class="pf-v6-c-content">
2689
- <h1>Main title</h1>
2690
- <p>This is a full page demo.</p>
2662
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2663
+ <main
2664
+ class="pf-v6-c-page__main"
2665
+ tabindex="-1"
2666
+ id="main-content-page-demo-sticky-section-bottom"
2667
+ >
2668
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2669
+ <div class="pf-v6-c-page__main-body">
2670
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2671
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2672
+ <li class="pf-v6-c-breadcrumb__item">
2673
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2674
+ </li>
2675
+ <li class="pf-v6-c-breadcrumb__item">
2676
+ <span class="pf-v6-c-breadcrumb__item-divider">
2677
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2678
+ </span>
2679
+
2680
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2681
+ </li>
2682
+ <li class="pf-v6-c-breadcrumb__item">
2683
+ <span class="pf-v6-c-breadcrumb__item-divider">
2684
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2685
+ </span>
2686
+
2687
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2688
+ </li>
2689
+ <li class="pf-v6-c-breadcrumb__item">
2690
+ <span class="pf-v6-c-breadcrumb__item-divider">
2691
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2692
+ </span>
2693
+
2694
+ <a
2695
+ href="#"
2696
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2697
+ aria-current="page"
2698
+ >Section landing</a>
2699
+ </li>
2700
+ </ol>
2701
+ </nav>
2691
2702
  </div>
2692
- </div>
2693
- </section>
2694
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2695
- <div class="pf-v6-c-page__main-body">
2696
- <div class="pf-v6-l-gallery pf-m-gutter">
2697
- <div class="pf-v6-c-card">
2698
- <div class="pf-v6-c-card__body">This is a card</div>
2699
- </div>
2700
- <div class="pf-v6-c-card">
2701
- <div class="pf-v6-c-card__body">This is a card</div>
2702
- </div>
2703
- <div class="pf-v6-c-card">
2704
- <div class="pf-v6-c-card__body">This is a card</div>
2705
- </div>
2706
- <div class="pf-v6-c-card">
2707
- <div class="pf-v6-c-card__body">This is a card</div>
2708
- </div>
2709
- <div class="pf-v6-c-card">
2710
- <div class="pf-v6-c-card__body">This is a card</div>
2711
- </div>
2712
- <div class="pf-v6-c-card">
2713
- <div class="pf-v6-c-card__body">This is a card</div>
2714
- </div>
2715
- <div class="pf-v6-c-card">
2716
- <div class="pf-v6-c-card__body">This is a card</div>
2717
- </div>
2718
- <div class="pf-v6-c-card">
2719
- <div class="pf-v6-c-card__body">This is a card</div>
2720
- </div>
2721
- <div class="pf-v6-c-card">
2722
- <div class="pf-v6-c-card__body">This is a card</div>
2723
- </div>
2724
- <div class="pf-v6-c-card">
2725
- <div class="pf-v6-c-card__body">This is a card</div>
2726
- </div>
2727
- <div class="pf-v6-c-card">
2728
- <div class="pf-v6-c-card__body">This is a card</div>
2729
- </div>
2730
- <div class="pf-v6-c-card">
2731
- <div class="pf-v6-c-card__body">This is a card</div>
2732
- </div>
2733
- <div class="pf-v6-c-card">
2734
- <div class="pf-v6-c-card__body">This is a card</div>
2735
- </div>
2736
- <div class="pf-v6-c-card">
2737
- <div class="pf-v6-c-card__body">This is a card</div>
2738
- </div>
2739
- <div class="pf-v6-c-card">
2740
- <div class="pf-v6-c-card__body">This is a card</div>
2741
- </div>
2742
- <div class="pf-v6-c-card">
2743
- <div class="pf-v6-c-card__body">This is a card</div>
2744
- </div>
2745
- <div class="pf-v6-c-card">
2746
- <div class="pf-v6-c-card__body">This is a card</div>
2747
- </div>
2748
- <div class="pf-v6-c-card">
2749
- <div class="pf-v6-c-card__body">This is a card</div>
2750
- </div>
2751
- <div class="pf-v6-c-card">
2752
- <div class="pf-v6-c-card__body">This is a card</div>
2753
- </div>
2754
- <div class="pf-v6-c-card">
2755
- <div class="pf-v6-c-card__body">This is a card</div>
2756
- </div>
2757
- <div class="pf-v6-c-card">
2758
- <div class="pf-v6-c-card__body">This is a card</div>
2759
- </div>
2760
- <div class="pf-v6-c-card">
2761
- <div class="pf-v6-c-card__body">This is a card</div>
2762
- </div>
2763
- <div class="pf-v6-c-card">
2764
- <div class="pf-v6-c-card__body">This is a card</div>
2765
- </div>
2766
- <div class="pf-v6-c-card">
2767
- <div class="pf-v6-c-card__body">This is a card</div>
2768
- </div>
2769
- <div class="pf-v6-c-card">
2770
- <div class="pf-v6-c-card__body">This is a card</div>
2771
- </div>
2772
- <div class="pf-v6-c-card">
2773
- <div class="pf-v6-c-card__body">This is a card</div>
2774
- </div>
2775
- <div class="pf-v6-c-card">
2776
- <div class="pf-v6-c-card__body">This is a card</div>
2777
- </div>
2778
- <div class="pf-v6-c-card">
2779
- <div class="pf-v6-c-card__body">This is a card</div>
2780
- </div>
2781
- <div class="pf-v6-c-card">
2782
- <div class="pf-v6-c-card__body">This is a card</div>
2783
- </div>
2784
- <div class="pf-v6-c-card">
2785
- <div class="pf-v6-c-card__body">This is a card</div>
2786
- </div>
2787
- <div class="pf-v6-c-card">
2788
- <div class="pf-v6-c-card__body">This is a card</div>
2789
- </div>
2790
- <div class="pf-v6-c-card">
2791
- <div class="pf-v6-c-card__body">This is a card</div>
2792
- </div>
2793
- <div class="pf-v6-c-card">
2794
- <div class="pf-v6-c-card__body">This is a card</div>
2795
- </div>
2796
- <div class="pf-v6-c-card">
2797
- <div class="pf-v6-c-card__body">This is a card</div>
2798
- </div>
2799
- <div class="pf-v6-c-card">
2800
- <div class="pf-v6-c-card__body">This is a card</div>
2801
- </div>
2802
- <div class="pf-v6-c-card">
2803
- <div class="pf-v6-c-card__body">This is a card</div>
2804
- </div>
2805
- <div class="pf-v6-c-card">
2806
- <div class="pf-v6-c-card__body">This is a card</div>
2807
- </div>
2808
- <div class="pf-v6-c-card">
2809
- <div class="pf-v6-c-card__body">This is a card</div>
2810
- </div>
2811
- <div class="pf-v6-c-card">
2812
- <div class="pf-v6-c-card__body">This is a card</div>
2813
- </div>
2814
- <div class="pf-v6-c-card">
2815
- <div class="pf-v6-c-card__body">This is a card</div>
2816
- </div>
2817
- <div class="pf-v6-c-card">
2818
- <div class="pf-v6-c-card__body">This is a card</div>
2819
- </div>
2820
- <div class="pf-v6-c-card">
2821
- <div class="pf-v6-c-card__body">This is a card</div>
2822
- </div>
2823
- <div class="pf-v6-c-card">
2824
- <div class="pf-v6-c-card__body">This is a card</div>
2825
- </div>
2826
- <div class="pf-v6-c-card">
2827
- <div class="pf-v6-c-card__body">This is a card</div>
2828
- </div>
2829
- <div class="pf-v6-c-card">
2830
- <div class="pf-v6-c-card__body">This is a card</div>
2831
- </div>
2832
- <div class="pf-v6-c-card">
2833
- <div class="pf-v6-c-card__body">This is a card</div>
2834
- </div>
2835
- <div class="pf-v6-c-card">
2836
- <div class="pf-v6-c-card__body">This is a card</div>
2837
- </div>
2838
- <div class="pf-v6-c-card">
2839
- <div class="pf-v6-c-card__body">This is a card</div>
2840
- </div>
2841
- <div class="pf-v6-c-card">
2842
- <div class="pf-v6-c-card__body">This is a card</div>
2703
+ </section>
2704
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2705
+ <div class="pf-v6-c-page__main-body">
2706
+ <div class="pf-v6-c-content">
2707
+ <h1>Main title</h1>
2708
+ <p>This is a full page demo.</p>
2843
2709
  </div>
2844
- <div class="pf-v6-c-card">
2845
- <div class="pf-v6-c-card__body">This is a card</div>
2710
+ </div>
2711
+ </section>
2712
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2713
+ <div class="pf-v6-c-page__main-body">
2714
+ <div class="pf-v6-l-gallery pf-m-gutter">
2715
+ <div class="pf-v6-c-card">
2716
+ <div class="pf-v6-c-card__body">This is a card</div>
2717
+ </div>
2718
+ <div class="pf-v6-c-card">
2719
+ <div class="pf-v6-c-card__body">This is a card</div>
2720
+ </div>
2721
+ <div class="pf-v6-c-card">
2722
+ <div class="pf-v6-c-card__body">This is a card</div>
2723
+ </div>
2724
+ <div class="pf-v6-c-card">
2725
+ <div class="pf-v6-c-card__body">This is a card</div>
2726
+ </div>
2727
+ <div class="pf-v6-c-card">
2728
+ <div class="pf-v6-c-card__body">This is a card</div>
2729
+ </div>
2730
+ <div class="pf-v6-c-card">
2731
+ <div class="pf-v6-c-card__body">This is a card</div>
2732
+ </div>
2733
+ <div class="pf-v6-c-card">
2734
+ <div class="pf-v6-c-card__body">This is a card</div>
2735
+ </div>
2736
+ <div class="pf-v6-c-card">
2737
+ <div class="pf-v6-c-card__body">This is a card</div>
2738
+ </div>
2739
+ <div class="pf-v6-c-card">
2740
+ <div class="pf-v6-c-card__body">This is a card</div>
2741
+ </div>
2742
+ <div class="pf-v6-c-card">
2743
+ <div class="pf-v6-c-card__body">This is a card</div>
2744
+ </div>
2745
+ <div class="pf-v6-c-card">
2746
+ <div class="pf-v6-c-card__body">This is a card</div>
2747
+ </div>
2748
+ <div class="pf-v6-c-card">
2749
+ <div class="pf-v6-c-card__body">This is a card</div>
2750
+ </div>
2751
+ <div class="pf-v6-c-card">
2752
+ <div class="pf-v6-c-card__body">This is a card</div>
2753
+ </div>
2754
+ <div class="pf-v6-c-card">
2755
+ <div class="pf-v6-c-card__body">This is a card</div>
2756
+ </div>
2757
+ <div class="pf-v6-c-card">
2758
+ <div class="pf-v6-c-card__body">This is a card</div>
2759
+ </div>
2760
+ <div class="pf-v6-c-card">
2761
+ <div class="pf-v6-c-card__body">This is a card</div>
2762
+ </div>
2763
+ <div class="pf-v6-c-card">
2764
+ <div class="pf-v6-c-card__body">This is a card</div>
2765
+ </div>
2766
+ <div class="pf-v6-c-card">
2767
+ <div class="pf-v6-c-card__body">This is a card</div>
2768
+ </div>
2769
+ <div class="pf-v6-c-card">
2770
+ <div class="pf-v6-c-card__body">This is a card</div>
2771
+ </div>
2772
+ <div class="pf-v6-c-card">
2773
+ <div class="pf-v6-c-card__body">This is a card</div>
2774
+ </div>
2775
+ <div class="pf-v6-c-card">
2776
+ <div class="pf-v6-c-card__body">This is a card</div>
2777
+ </div>
2778
+ <div class="pf-v6-c-card">
2779
+ <div class="pf-v6-c-card__body">This is a card</div>
2780
+ </div>
2781
+ <div class="pf-v6-c-card">
2782
+ <div class="pf-v6-c-card__body">This is a card</div>
2783
+ </div>
2784
+ <div class="pf-v6-c-card">
2785
+ <div class="pf-v6-c-card__body">This is a card</div>
2786
+ </div>
2787
+ <div class="pf-v6-c-card">
2788
+ <div class="pf-v6-c-card__body">This is a card</div>
2789
+ </div>
2790
+ <div class="pf-v6-c-card">
2791
+ <div class="pf-v6-c-card__body">This is a card</div>
2792
+ </div>
2793
+ <div class="pf-v6-c-card">
2794
+ <div class="pf-v6-c-card__body">This is a card</div>
2795
+ </div>
2796
+ <div class="pf-v6-c-card">
2797
+ <div class="pf-v6-c-card__body">This is a card</div>
2798
+ </div>
2799
+ <div class="pf-v6-c-card">
2800
+ <div class="pf-v6-c-card__body">This is a card</div>
2801
+ </div>
2802
+ <div class="pf-v6-c-card">
2803
+ <div class="pf-v6-c-card__body">This is a card</div>
2804
+ </div>
2805
+ <div class="pf-v6-c-card">
2806
+ <div class="pf-v6-c-card__body">This is a card</div>
2807
+ </div>
2808
+ <div class="pf-v6-c-card">
2809
+ <div class="pf-v6-c-card__body">This is a card</div>
2810
+ </div>
2811
+ <div class="pf-v6-c-card">
2812
+ <div class="pf-v6-c-card__body">This is a card</div>
2813
+ </div>
2814
+ <div class="pf-v6-c-card">
2815
+ <div class="pf-v6-c-card__body">This is a card</div>
2816
+ </div>
2817
+ <div class="pf-v6-c-card">
2818
+ <div class="pf-v6-c-card__body">This is a card</div>
2819
+ </div>
2820
+ <div class="pf-v6-c-card">
2821
+ <div class="pf-v6-c-card__body">This is a card</div>
2822
+ </div>
2823
+ <div class="pf-v6-c-card">
2824
+ <div class="pf-v6-c-card__body">This is a card</div>
2825
+ </div>
2826
+ <div class="pf-v6-c-card">
2827
+ <div class="pf-v6-c-card__body">This is a card</div>
2828
+ </div>
2829
+ <div class="pf-v6-c-card">
2830
+ <div class="pf-v6-c-card__body">This is a card</div>
2831
+ </div>
2832
+ <div class="pf-v6-c-card">
2833
+ <div class="pf-v6-c-card__body">This is a card</div>
2834
+ </div>
2835
+ <div class="pf-v6-c-card">
2836
+ <div class="pf-v6-c-card__body">This is a card</div>
2837
+ </div>
2838
+ <div class="pf-v6-c-card">
2839
+ <div class="pf-v6-c-card__body">This is a card</div>
2840
+ </div>
2841
+ <div class="pf-v6-c-card">
2842
+ <div class="pf-v6-c-card__body">This is a card</div>
2843
+ </div>
2844
+ <div class="pf-v6-c-card">
2845
+ <div class="pf-v6-c-card__body">This is a card</div>
2846
+ </div>
2847
+ <div class="pf-v6-c-card">
2848
+ <div class="pf-v6-c-card__body">This is a card</div>
2849
+ </div>
2850
+ <div class="pf-v6-c-card">
2851
+ <div class="pf-v6-c-card__body">This is a card</div>
2852
+ </div>
2853
+ <div class="pf-v6-c-card">
2854
+ <div class="pf-v6-c-card__body">This is a card</div>
2855
+ </div>
2856
+ <div class="pf-v6-c-card">
2857
+ <div class="pf-v6-c-card__body">This is a card</div>
2858
+ </div>
2859
+ <div class="pf-v6-c-card">
2860
+ <div class="pf-v6-c-card__body">This is a card</div>
2861
+ </div>
2862
+ <div class="pf-v6-c-card">
2863
+ <div class="pf-v6-c-card__body">This is a card</div>
2864
+ </div>
2846
2865
  </div>
2847
2866
  </div>
2848
- </div>
2849
- </section>
2850
- <section
2851
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-sticky-bottom"
2852
- >
2853
- <div class="pf-v6-c-page__main-body">
2854
- <p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
2855
- </div>
2856
- </section>
2857
- </main>
2867
+ </section>
2868
+ <section
2869
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-sticky-bottom"
2870
+ >
2871
+ <div class="pf-v6-c-page__main-body">
2872
+ <p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
2873
+ </div>
2874
+ </section>
2875
+ </main>
2876
+ </div>
2858
2877
  </div>
2859
2878
 
2860
2879
  ```
@@ -2989,317 +3008,319 @@ wrapperTag: div
2989
3008
  </span>
2990
3009
  </button>
2991
3010
  </div>
2992
-
2993
- <div
2994
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
2995
- >
2996
- <div
2997
- class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
2998
- >
2999
- <div class="pf-v6-c-toolbar__item">
3000
- <button
3001
- class="pf-v6-c-menu-toggle pf-m-plain"
3002
- type="button"
3003
- aria-expanded="false"
3004
- aria-label="Application launcher"
3005
- >
3006
- <span class="pf-v6-c-menu-toggle__icon">
3007
- <i class="fas fa-th" aria-hidden="true"></i>
3008
- </span>
3009
- </button>
3010
- </div>
3011
- <div class="pf-v6-c-toolbar__item">
3012
- <button
3013
- class="pf-v6-c-menu-toggle pf-m-plain"
3014
- type="button"
3015
- aria-expanded="false"
3016
- aria-label="Settings"
3017
- >
3018
- <span class="pf-v6-c-menu-toggle__icon">
3019
- <i class="fas fa-cog" aria-hidden="true"></i>
3020
- </span>
3021
- </button>
3022
- </div>
3023
- <div class="pf-v6-c-toolbar__item">
3024
- <button
3025
- class="pf-v6-c-menu-toggle pf-m-plain"
3026
- type="button"
3027
- aria-expanded="false"
3028
- aria-label="Help"
3029
- >
3030
- <span class="pf-v6-c-menu-toggle__icon">
3031
- <i class="fas fa-question-circle" aria-hidden="true"></i>
3032
- </span>
3033
- </button>
3034
- </div>
3035
- </div>
3036
- <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
3037
- <button
3038
- class="pf-v6-c-menu-toggle pf-m-plain"
3039
- type="button"
3040
- aria-expanded="false"
3041
- aria-label="Actions"
3042
- >
3043
- <span class="pf-v6-c-menu-toggle__icon">
3044
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3045
- </span>
3046
- </button>
3047
- </div>
3011
+
3012
+ <div
3013
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md"
3014
+ >
3015
+ <div
3016
+ class="pf-v6-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
3017
+ >
3018
+ <div class="pf-v6-c-toolbar__item">
3019
+ <button
3020
+ class="pf-v6-c-menu-toggle pf-m-plain"
3021
+ type="button"
3022
+ aria-expanded="false"
3023
+ aria-label="Application launcher"
3024
+ >
3025
+ <span class="pf-v6-c-menu-toggle__icon">
3026
+ <i class="fas fa-th" aria-hidden="true"></i>
3027
+ </span>
3028
+ </button>
3029
+ </div>
3030
+ <div class="pf-v6-c-toolbar__item">
3031
+ <button
3032
+ class="pf-v6-c-menu-toggle pf-m-plain"
3033
+ type="button"
3034
+ aria-expanded="false"
3035
+ aria-label="Settings"
3036
+ >
3037
+ <span class="pf-v6-c-menu-toggle__icon">
3038
+ <i class="fas fa-cog" aria-hidden="true"></i>
3039
+ </span>
3040
+ </button>
3041
+ </div>
3042
+ <div class="pf-v6-c-toolbar__item">
3043
+ <button
3044
+ class="pf-v6-c-menu-toggle pf-m-plain"
3045
+ type="button"
3046
+ aria-expanded="false"
3047
+ aria-label="Help"
3048
+ >
3049
+ <span class="pf-v6-c-menu-toggle__icon">
3050
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
3051
+ </span>
3052
+ </button>
3053
+ </div>
3054
+ </div>
3055
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
3056
+ <button
3057
+ class="pf-v6-c-menu-toggle pf-m-plain"
3058
+ type="button"
3059
+ aria-expanded="false"
3060
+ aria-label="Actions"
3061
+ >
3062
+ <span class="pf-v6-c-menu-toggle__icon">
3063
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3064
+ </span>
3065
+ </button>
3066
+ </div>
3067
+ </div>
3068
+ </div>
3069
+ </div>
3070
+ </div>
3071
+ </div>
3072
+ </header>
3073
+ <div class="pf-v6-c-page__sidebar">
3074
+ <div class="pf-v6-c-page__sidebar-body">
3075
+ <nav
3076
+ class="pf-v6-c-nav"
3077
+ id="page-demo-overflow-scroll-primary-nav"
3078
+ aria-label="Global"
3079
+ >
3080
+ <ul class="pf-v6-c-nav__list" role="list">
3081
+ <li class="pf-v6-c-nav__item">
3082
+ <a href="#" class="pf-v6-c-nav__link">System panel</a>
3083
+ </li>
3084
+ <li class="pf-v6-c-nav__item">
3085
+ <a
3086
+ href="#"
3087
+ class="pf-v6-c-nav__link pf-m-current"
3088
+ aria-current="page"
3089
+ >Policy</a>
3090
+ </li>
3091
+ <li class="pf-v6-c-nav__item">
3092
+ <a href="#" class="pf-v6-c-nav__link">Authentication</a>
3093
+ </li>
3094
+ <li class="pf-v6-c-nav__item">
3095
+ <a href="#" class="pf-v6-c-nav__link">Network services</a>
3096
+ </li>
3097
+ <li class="pf-v6-c-nav__item">
3098
+ <a href="#" class="pf-v6-c-nav__link">Server</a>
3099
+ </li>
3100
+ </ul>
3101
+ </nav>
3102
+ </div>
3103
+ </div>
3104
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3105
+ <main
3106
+ class="pf-v6-c-page__main"
3107
+ tabindex="-1"
3108
+ id="main-content-page-demo-overflow-scroll"
3109
+ >
3110
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3111
+ <div class="pf-v6-c-page__main-body">
3112
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3113
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3114
+ <li class="pf-v6-c-breadcrumb__item">
3115
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3116
+ </li>
3117
+ <li class="pf-v6-c-breadcrumb__item">
3118
+ <span class="pf-v6-c-breadcrumb__item-divider">
3119
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3120
+ </span>
3121
+
3122
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3123
+ </li>
3124
+ <li class="pf-v6-c-breadcrumb__item">
3125
+ <span class="pf-v6-c-breadcrumb__item-divider">
3126
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3127
+ </span>
3128
+
3129
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3130
+ </li>
3131
+ <li class="pf-v6-c-breadcrumb__item">
3132
+ <span class="pf-v6-c-breadcrumb__item-divider">
3133
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3134
+ </span>
3135
+
3136
+ <a
3137
+ href="#"
3138
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3139
+ aria-current="page"
3140
+ >Section landing</a>
3141
+ </li>
3142
+ </ol>
3143
+ </nav>
3144
+ </div>
3145
+ </section>
3146
+ <section
3147
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
3148
+ >
3149
+ <div class="pf-v6-c-page__main-body">
3150
+ <div class="pf-v6-c-content">
3151
+ <h1>Main title</h1>
3152
+ <p>This is a full page demo.</p>
3153
+ </div>
3154
+ </div>
3155
+ </section>
3156
+ <section
3157
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
3158
+ tabindex="0"
3159
+ >
3160
+ <div class="pf-v6-c-page__main-body">
3161
+ <div class="pf-v6-l-gallery pf-m-gutter">
3162
+ <div class="pf-v6-c-card">
3163
+ <div class="pf-v6-c-card__body">This is a card</div>
3164
+ </div>
3165
+ <div class="pf-v6-c-card">
3166
+ <div class="pf-v6-c-card__body">This is a card</div>
3167
+ </div>
3168
+ <div class="pf-v6-c-card">
3169
+ <div class="pf-v6-c-card__body">This is a card</div>
3170
+ </div>
3171
+ <div class="pf-v6-c-card">
3172
+ <div class="pf-v6-c-card__body">This is a card</div>
3173
+ </div>
3174
+ <div class="pf-v6-c-card">
3175
+ <div class="pf-v6-c-card__body">This is a card</div>
3176
+ </div>
3177
+ <div class="pf-v6-c-card">
3178
+ <div class="pf-v6-c-card__body">This is a card</div>
3179
+ </div>
3180
+ <div class="pf-v6-c-card">
3181
+ <div class="pf-v6-c-card__body">This is a card</div>
3182
+ </div>
3183
+ <div class="pf-v6-c-card">
3184
+ <div class="pf-v6-c-card__body">This is a card</div>
3185
+ </div>
3186
+ <div class="pf-v6-c-card">
3187
+ <div class="pf-v6-c-card__body">This is a card</div>
3188
+ </div>
3189
+ <div class="pf-v6-c-card">
3190
+ <div class="pf-v6-c-card__body">This is a card</div>
3191
+ </div>
3192
+ <div class="pf-v6-c-card">
3193
+ <div class="pf-v6-c-card__body">This is a card</div>
3194
+ </div>
3195
+ <div class="pf-v6-c-card">
3196
+ <div class="pf-v6-c-card__body">This is a card</div>
3197
+ </div>
3198
+ <div class="pf-v6-c-card">
3199
+ <div class="pf-v6-c-card__body">This is a card</div>
3200
+ </div>
3201
+ <div class="pf-v6-c-card">
3202
+ <div class="pf-v6-c-card__body">This is a card</div>
3203
+ </div>
3204
+ <div class="pf-v6-c-card">
3205
+ <div class="pf-v6-c-card__body">This is a card</div>
3206
+ </div>
3207
+ <div class="pf-v6-c-card">
3208
+ <div class="pf-v6-c-card__body">This is a card</div>
3209
+ </div>
3210
+ <div class="pf-v6-c-card">
3211
+ <div class="pf-v6-c-card__body">This is a card</div>
3212
+ </div>
3213
+ <div class="pf-v6-c-card">
3214
+ <div class="pf-v6-c-card__body">This is a card</div>
3215
+ </div>
3216
+ <div class="pf-v6-c-card">
3217
+ <div class="pf-v6-c-card__body">This is a card</div>
3218
+ </div>
3219
+ <div class="pf-v6-c-card">
3220
+ <div class="pf-v6-c-card__body">This is a card</div>
3221
+ </div>
3222
+ <div class="pf-v6-c-card">
3223
+ <div class="pf-v6-c-card__body">This is a card</div>
3224
+ </div>
3225
+ <div class="pf-v6-c-card">
3226
+ <div class="pf-v6-c-card__body">This is a card</div>
3227
+ </div>
3228
+ <div class="pf-v6-c-card">
3229
+ <div class="pf-v6-c-card__body">This is a card</div>
3230
+ </div>
3231
+ <div class="pf-v6-c-card">
3232
+ <div class="pf-v6-c-card__body">This is a card</div>
3233
+ </div>
3234
+ <div class="pf-v6-c-card">
3235
+ <div class="pf-v6-c-card__body">This is a card</div>
3236
+ </div>
3237
+ <div class="pf-v6-c-card">
3238
+ <div class="pf-v6-c-card__body">This is a card</div>
3239
+ </div>
3240
+ <div class="pf-v6-c-card">
3241
+ <div class="pf-v6-c-card__body">This is a card</div>
3242
+ </div>
3243
+ <div class="pf-v6-c-card">
3244
+ <div class="pf-v6-c-card__body">This is a card</div>
3245
+ </div>
3246
+ <div class="pf-v6-c-card">
3247
+ <div class="pf-v6-c-card__body">This is a card</div>
3248
+ </div>
3249
+ <div class="pf-v6-c-card">
3250
+ <div class="pf-v6-c-card__body">This is a card</div>
3251
+ </div>
3252
+ <div class="pf-v6-c-card">
3253
+ <div class="pf-v6-c-card__body">This is a card</div>
3254
+ </div>
3255
+ <div class="pf-v6-c-card">
3256
+ <div class="pf-v6-c-card__body">This is a card</div>
3257
+ </div>
3258
+ <div class="pf-v6-c-card">
3259
+ <div class="pf-v6-c-card__body">This is a card</div>
3260
+ </div>
3261
+ <div class="pf-v6-c-card">
3262
+ <div class="pf-v6-c-card__body">This is a card</div>
3263
+ </div>
3264
+ <div class="pf-v6-c-card">
3265
+ <div class="pf-v6-c-card__body">This is a card</div>
3266
+ </div>
3267
+ <div class="pf-v6-c-card">
3268
+ <div class="pf-v6-c-card__body">This is a card</div>
3269
+ </div>
3270
+ <div class="pf-v6-c-card">
3271
+ <div class="pf-v6-c-card__body">This is a card</div>
3272
+ </div>
3273
+ <div class="pf-v6-c-card">
3274
+ <div class="pf-v6-c-card__body">This is a card</div>
3275
+ </div>
3276
+ <div class="pf-v6-c-card">
3277
+ <div class="pf-v6-c-card__body">This is a card</div>
3278
+ </div>
3279
+ <div class="pf-v6-c-card">
3280
+ <div class="pf-v6-c-card__body">This is a card</div>
3281
+ </div>
3282
+ <div class="pf-v6-c-card">
3283
+ <div class="pf-v6-c-card__body">This is a card</div>
3284
+ </div>
3285
+ <div class="pf-v6-c-card">
3286
+ <div class="pf-v6-c-card__body">This is a card</div>
3287
+ </div>
3288
+ <div class="pf-v6-c-card">
3289
+ <div class="pf-v6-c-card__body">This is a card</div>
3290
+ </div>
3291
+ <div class="pf-v6-c-card">
3292
+ <div class="pf-v6-c-card__body">This is a card</div>
3293
+ </div>
3294
+ <div class="pf-v6-c-card">
3295
+ <div class="pf-v6-c-card__body">This is a card</div>
3296
+ </div>
3297
+ <div class="pf-v6-c-card">
3298
+ <div class="pf-v6-c-card__body">This is a card</div>
3299
+ </div>
3300
+ <div class="pf-v6-c-card">
3301
+ <div class="pf-v6-c-card__body">This is a card</div>
3302
+ </div>
3303
+ <div class="pf-v6-c-card">
3304
+ <div class="pf-v6-c-card__body">This is a card</div>
3305
+ </div>
3306
+ <div class="pf-v6-c-card">
3307
+ <div class="pf-v6-c-card__body">This is a card</div>
3308
+ </div>
3309
+ <div class="pf-v6-c-card">
3310
+ <div class="pf-v6-c-card__body">This is a card</div>
3048
3311
  </div>
3049
3312
  </div>
3050
3313
  </div>
3051
- </div>
3052
- </div>
3053
- </header>
3054
- <div class="pf-v6-c-page__sidebar">
3055
- <div class="pf-v6-c-page__sidebar-body">
3056
- <nav
3057
- class="pf-v6-c-nav"
3058
- id="page-demo-overflow-scroll-primary-nav"
3059
- aria-label="Global"
3314
+ </section>
3315
+ <section
3316
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
3060
3317
  >
3061
- <ul class="pf-v6-c-nav__list" role="list">
3062
- <li class="pf-v6-c-nav__item">
3063
- <a href="#" class="pf-v6-c-nav__link">System panel</a>
3064
- </li>
3065
- <li class="pf-v6-c-nav__item">
3066
- <a
3067
- href="#"
3068
- class="pf-v6-c-nav__link pf-m-current"
3069
- aria-current="page"
3070
- >Policy</a>
3071
- </li>
3072
- <li class="pf-v6-c-nav__item">
3073
- <a href="#" class="pf-v6-c-nav__link">Authentication</a>
3074
- </li>
3075
- <li class="pf-v6-c-nav__item">
3076
- <a href="#" class="pf-v6-c-nav__link">Network services</a>
3077
- </li>
3078
- <li class="pf-v6-c-nav__item">
3079
- <a href="#" class="pf-v6-c-nav__link">Server</a>
3080
- </li>
3081
- </ul>
3082
- </nav>
3083
- </div>
3084
- </div>
3085
- <main
3086
- class="pf-v6-c-page__main"
3087
- tabindex="-1"
3088
- id="main-content-page-demo-overflow-scroll"
3089
- >
3090
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3091
- <div class="pf-v6-c-page__main-body">
3092
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3093
- <ol class="pf-v6-c-breadcrumb__list" role="list">
3094
- <li class="pf-v6-c-breadcrumb__item">
3095
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3096
- </li>
3097
- <li class="pf-v6-c-breadcrumb__item">
3098
- <span class="pf-v6-c-breadcrumb__item-divider">
3099
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3100
- </span>
3101
-
3102
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3103
- </li>
3104
- <li class="pf-v6-c-breadcrumb__item">
3105
- <span class="pf-v6-c-breadcrumb__item-divider">
3106
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3107
- </span>
3108
-
3109
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3110
- </li>
3111
- <li class="pf-v6-c-breadcrumb__item">
3112
- <span class="pf-v6-c-breadcrumb__item-divider">
3113
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3114
- </span>
3115
-
3116
- <a
3117
- href="#"
3118
- class="pf-v6-c-breadcrumb__link pf-m-current"
3119
- aria-current="page"
3120
- >Section landing</a>
3121
- </li>
3122
- </ol>
3123
- </nav>
3124
- </div>
3125
- </section>
3126
- <section
3127
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
3128
- >
3129
- <div class="pf-v6-c-page__main-body">
3130
- <div class="pf-v6-c-content">
3131
- <h1>Main title</h1>
3132
- <p>This is a full page demo.</p>
3133
- </div>
3134
- </div>
3135
- </section>
3136
- <section
3137
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
3138
- tabindex="0"
3139
- >
3140
- <div class="pf-v6-c-page__main-body">
3141
- <div class="pf-v6-l-gallery pf-m-gutter">
3142
- <div class="pf-v6-c-card">
3143
- <div class="pf-v6-c-card__body">This is a card</div>
3144
- </div>
3145
- <div class="pf-v6-c-card">
3146
- <div class="pf-v6-c-card__body">This is a card</div>
3147
- </div>
3148
- <div class="pf-v6-c-card">
3149
- <div class="pf-v6-c-card__body">This is a card</div>
3150
- </div>
3151
- <div class="pf-v6-c-card">
3152
- <div class="pf-v6-c-card__body">This is a card</div>
3153
- </div>
3154
- <div class="pf-v6-c-card">
3155
- <div class="pf-v6-c-card__body">This is a card</div>
3156
- </div>
3157
- <div class="pf-v6-c-card">
3158
- <div class="pf-v6-c-card__body">This is a card</div>
3159
- </div>
3160
- <div class="pf-v6-c-card">
3161
- <div class="pf-v6-c-card__body">This is a card</div>
3162
- </div>
3163
- <div class="pf-v6-c-card">
3164
- <div class="pf-v6-c-card__body">This is a card</div>
3165
- </div>
3166
- <div class="pf-v6-c-card">
3167
- <div class="pf-v6-c-card__body">This is a card</div>
3168
- </div>
3169
- <div class="pf-v6-c-card">
3170
- <div class="pf-v6-c-card__body">This is a card</div>
3171
- </div>
3172
- <div class="pf-v6-c-card">
3173
- <div class="pf-v6-c-card__body">This is a card</div>
3174
- </div>
3175
- <div class="pf-v6-c-card">
3176
- <div class="pf-v6-c-card__body">This is a card</div>
3177
- </div>
3178
- <div class="pf-v6-c-card">
3179
- <div class="pf-v6-c-card__body">This is a card</div>
3180
- </div>
3181
- <div class="pf-v6-c-card">
3182
- <div class="pf-v6-c-card__body">This is a card</div>
3183
- </div>
3184
- <div class="pf-v6-c-card">
3185
- <div class="pf-v6-c-card__body">This is a card</div>
3186
- </div>
3187
- <div class="pf-v6-c-card">
3188
- <div class="pf-v6-c-card__body">This is a card</div>
3189
- </div>
3190
- <div class="pf-v6-c-card">
3191
- <div class="pf-v6-c-card__body">This is a card</div>
3192
- </div>
3193
- <div class="pf-v6-c-card">
3194
- <div class="pf-v6-c-card__body">This is a card</div>
3195
- </div>
3196
- <div class="pf-v6-c-card">
3197
- <div class="pf-v6-c-card__body">This is a card</div>
3198
- </div>
3199
- <div class="pf-v6-c-card">
3200
- <div class="pf-v6-c-card__body">This is a card</div>
3201
- </div>
3202
- <div class="pf-v6-c-card">
3203
- <div class="pf-v6-c-card__body">This is a card</div>
3204
- </div>
3205
- <div class="pf-v6-c-card">
3206
- <div class="pf-v6-c-card__body">This is a card</div>
3207
- </div>
3208
- <div class="pf-v6-c-card">
3209
- <div class="pf-v6-c-card__body">This is a card</div>
3210
- </div>
3211
- <div class="pf-v6-c-card">
3212
- <div class="pf-v6-c-card__body">This is a card</div>
3213
- </div>
3214
- <div class="pf-v6-c-card">
3215
- <div class="pf-v6-c-card__body">This is a card</div>
3216
- </div>
3217
- <div class="pf-v6-c-card">
3218
- <div class="pf-v6-c-card__body">This is a card</div>
3219
- </div>
3220
- <div class="pf-v6-c-card">
3221
- <div class="pf-v6-c-card__body">This is a card</div>
3222
- </div>
3223
- <div class="pf-v6-c-card">
3224
- <div class="pf-v6-c-card__body">This is a card</div>
3225
- </div>
3226
- <div class="pf-v6-c-card">
3227
- <div class="pf-v6-c-card__body">This is a card</div>
3228
- </div>
3229
- <div class="pf-v6-c-card">
3230
- <div class="pf-v6-c-card__body">This is a card</div>
3231
- </div>
3232
- <div class="pf-v6-c-card">
3233
- <div class="pf-v6-c-card__body">This is a card</div>
3234
- </div>
3235
- <div class="pf-v6-c-card">
3236
- <div class="pf-v6-c-card__body">This is a card</div>
3237
- </div>
3238
- <div class="pf-v6-c-card">
3239
- <div class="pf-v6-c-card__body">This is a card</div>
3240
- </div>
3241
- <div class="pf-v6-c-card">
3242
- <div class="pf-v6-c-card__body">This is a card</div>
3243
- </div>
3244
- <div class="pf-v6-c-card">
3245
- <div class="pf-v6-c-card__body">This is a card</div>
3246
- </div>
3247
- <div class="pf-v6-c-card">
3248
- <div class="pf-v6-c-card__body">This is a card</div>
3249
- </div>
3250
- <div class="pf-v6-c-card">
3251
- <div class="pf-v6-c-card__body">This is a card</div>
3252
- </div>
3253
- <div class="pf-v6-c-card">
3254
- <div class="pf-v6-c-card__body">This is a card</div>
3255
- </div>
3256
- <div class="pf-v6-c-card">
3257
- <div class="pf-v6-c-card__body">This is a card</div>
3258
- </div>
3259
- <div class="pf-v6-c-card">
3260
- <div class="pf-v6-c-card__body">This is a card</div>
3261
- </div>
3262
- <div class="pf-v6-c-card">
3263
- <div class="pf-v6-c-card__body">This is a card</div>
3264
- </div>
3265
- <div class="pf-v6-c-card">
3266
- <div class="pf-v6-c-card__body">This is a card</div>
3267
- </div>
3268
- <div class="pf-v6-c-card">
3269
- <div class="pf-v6-c-card__body">This is a card</div>
3270
- </div>
3271
- <div class="pf-v6-c-card">
3272
- <div class="pf-v6-c-card__body">This is a card</div>
3273
- </div>
3274
- <div class="pf-v6-c-card">
3275
- <div class="pf-v6-c-card__body">This is a card</div>
3276
- </div>
3277
- <div class="pf-v6-c-card">
3278
- <div class="pf-v6-c-card__body">This is a card</div>
3279
- </div>
3280
- <div class="pf-v6-c-card">
3281
- <div class="pf-v6-c-card__body">This is a card</div>
3282
- </div>
3283
- <div class="pf-v6-c-card">
3284
- <div class="pf-v6-c-card__body">This is a card</div>
3285
- </div>
3286
- <div class="pf-v6-c-card">
3287
- <div class="pf-v6-c-card__body">This is a card</div>
3288
- </div>
3289
- <div class="pf-v6-c-card">
3290
- <div class="pf-v6-c-card__body">This is a card</div>
3291
- </div>
3318
+ <div class="pf-v6-c-page__main-body">
3319
+ <p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
3292
3320
  </div>
3293
- </div>
3294
- </section>
3295
- <section
3296
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
3297
- >
3298
- <div class="pf-v6-c-page__main-body">
3299
- <p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
3300
- </div>
3301
- </section>
3302
- </main>
3321
+ </section>
3322
+ </main>
3323
+ </div>
3303
3324
  </div>
3304
3325
 
3305
3326
  ```
@@ -3527,80 +3548,82 @@ wrapperTag: div
3527
3548
  </nav>
3528
3549
  </div>
3529
3550
  </div>
3530
- <main
3531
- class="pf-v6-c-page__main"
3532
- tabindex="-1"
3533
- id="main-content-page-demo-centered-section"
3534
- >
3535
- <section
3536
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-m-light"
3551
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3552
+ <main
3553
+ class="pf-v6-c-page__main"
3554
+ tabindex="-1"
3555
+ id="main-content-page-demo-centered-section"
3537
3556
  >
3538
- <div class="pf-v6-c-page__main-body">
3539
- <div class="pf-v6-c-content">
3540
- <h1>Centering page sections</h1>
3541
- <p>
3542
- When a width limited page section is wider than the value of
3543
- <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
3544
- </p>
3545
- <p>All of the page sections on this page are centered.</p>
3546
- </div>
3547
- </div>
3548
- </section>
3549
- <hr class="pf-v6-c-divider" />
3550
- <section
3551
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
3552
- >
3553
- <div class="pf-v6-c-page__main-body">
3554
- <div class="pf-v6-l-gallery pf-m-gutter">
3555
- <div class="pf-v6-c-card">
3556
- <div class="pf-v6-c-card__body">This is a card</div>
3557
- </div>
3558
- <div class="pf-v6-c-card">
3559
- <div class="pf-v6-c-card__body">This is a card</div>
3560
- </div>
3561
- <div class="pf-v6-c-card">
3562
- <div class="pf-v6-c-card__body">This is a card</div>
3563
- </div>
3564
- <div class="pf-v6-c-card">
3565
- <div class="pf-v6-c-card__body">This is a card</div>
3566
- </div>
3567
- <div class="pf-v6-c-card">
3568
- <div class="pf-v6-c-card__body">This is a card</div>
3569
- </div>
3570
- <div class="pf-v6-c-card">
3571
- <div class="pf-v6-c-card__body">This is a card</div>
3572
- </div>
3573
- <div class="pf-v6-c-card">
3574
- <div class="pf-v6-c-card__body">This is a card</div>
3575
- </div>
3576
- <div class="pf-v6-c-card">
3577
- <div class="pf-v6-c-card__body">This is a card</div>
3578
- </div>
3579
- <div class="pf-v6-c-card">
3580
- <div class="pf-v6-c-card__body">This is a card</div>
3557
+ <section
3558
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-m-light"
3559
+ >
3560
+ <div class="pf-v6-c-page__main-body">
3561
+ <div class="pf-v6-c-content">
3562
+ <h1>Centering page sections</h1>
3563
+ <p>
3564
+ When a width limited page section is wider than the value of
3565
+ <code>--pf-v6-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main section.
3566
+ </p>
3567
+ <p>All of the page sections on this page are centered.</p>
3581
3568
  </div>
3582
- <div class="pf-v6-c-card">
3583
- <div class="pf-v6-c-card__body">This is a card</div>
3569
+ </div>
3570
+ </section>
3571
+ <hr class="pf-v6-c-divider" />
3572
+ <section
3573
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center"
3574
+ >
3575
+ <div class="pf-v6-c-page__main-body">
3576
+ <div class="pf-v6-l-gallery pf-m-gutter">
3577
+ <div class="pf-v6-c-card">
3578
+ <div class="pf-v6-c-card__body">This is a card</div>
3579
+ </div>
3580
+ <div class="pf-v6-c-card">
3581
+ <div class="pf-v6-c-card__body">This is a card</div>
3582
+ </div>
3583
+ <div class="pf-v6-c-card">
3584
+ <div class="pf-v6-c-card__body">This is a card</div>
3585
+ </div>
3586
+ <div class="pf-v6-c-card">
3587
+ <div class="pf-v6-c-card__body">This is a card</div>
3588
+ </div>
3589
+ <div class="pf-v6-c-card">
3590
+ <div class="pf-v6-c-card__body">This is a card</div>
3591
+ </div>
3592
+ <div class="pf-v6-c-card">
3593
+ <div class="pf-v6-c-card__body">This is a card</div>
3594
+ </div>
3595
+ <div class="pf-v6-c-card">
3596
+ <div class="pf-v6-c-card__body">This is a card</div>
3597
+ </div>
3598
+ <div class="pf-v6-c-card">
3599
+ <div class="pf-v6-c-card__body">This is a card</div>
3600
+ </div>
3601
+ <div class="pf-v6-c-card">
3602
+ <div class="pf-v6-c-card__body">This is a card</div>
3603
+ </div>
3604
+ <div class="pf-v6-c-card">
3605
+ <div class="pf-v6-c-card__body">This is a card</div>
3606
+ </div>
3584
3607
  </div>
3585
3608
  </div>
3586
- </div>
3587
- </section>
3588
- <hr class="pf-v6-c-divider" />
3589
- <section
3590
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-v5-u-text-align-center"
3591
- >
3592
- <div class="pf-v6-c-page__main-body">
3593
- <div class="pf-v6-c-card">
3594
- <div class="pf-v6-c-card__body">
3595
- <p>
3596
- The content in this section is also centered using the
3597
- <code>.pf-v5-u-text-align-center</code> utility class.
3598
- </p>
3609
+ </section>
3610
+ <hr class="pf-v6-c-divider" />
3611
+ <section
3612
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-align-center pf-v5-u-text-align-center"
3613
+ >
3614
+ <div class="pf-v6-c-page__main-body">
3615
+ <div class="pf-v6-c-card">
3616
+ <div class="pf-v6-c-card__body">
3617
+ <p>
3618
+ The content in this section is also centered using the
3619
+ <code>.pf-v5-u-text-align-center</code> utility class.
3620
+ </p>
3621
+ </div>
3599
3622
  </div>
3600
3623
  </div>
3601
- </div>
3602
- </section>
3603
- </main>
3624
+ </section>
3625
+ </main>
3626
+ </div>
3604
3627
  </div>
3605
3628
 
3606
3629
  ```