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

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 (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/docs/demos/Modal/examples/Modal.md CHANGED
@@ -226,92 +226,94 @@ section: components
226
226
  </nav>
227
227
  </div>
228
228
  </div>
229
- <main
230
- class="pf-v6-c-page__main"
231
- tabindex="-1"
232
- id="main-content-modal-basic-example"
233
- >
234
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v6-c-page__main-body">
236
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v6-c-breadcrumb__list" role="list">
238
- <li class="pf-v6-c-breadcrumb__item">
239
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
- </li>
241
- <li class="pf-v6-c-breadcrumb__item">
242
- <span class="pf-v6-c-breadcrumb__item-divider">
243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
244
- </span>
229
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
230
+ <main
231
+ class="pf-v6-c-page__main"
232
+ tabindex="-1"
233
+ id="main-content-modal-basic-example"
234
+ >
235
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
236
+ <div class="pf-v6-c-page__main-body">
237
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
238
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
239
+ <li class="pf-v6-c-breadcrumb__item">
240
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
241
+ </li>
242
+ <li class="pf-v6-c-breadcrumb__item">
243
+ <span class="pf-v6-c-breadcrumb__item-divider">
244
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
245
+ </span>
245
246
 
246
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
- </li>
248
- <li class="pf-v6-c-breadcrumb__item">
249
- <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
251
- </span>
247
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
248
+ </li>
249
+ <li class="pf-v6-c-breadcrumb__item">
250
+ <span class="pf-v6-c-breadcrumb__item-divider">
251
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
252
+ </span>
252
253
 
253
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
- </li>
255
- <li class="pf-v6-c-breadcrumb__item">
256
- <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
258
- </span>
254
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
255
+ </li>
256
+ <li class="pf-v6-c-breadcrumb__item">
257
+ <span class="pf-v6-c-breadcrumb__item-divider">
258
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
259
+ </span>
259
260
 
260
- <a
261
- href="#"
262
- class="pf-v6-c-breadcrumb__link pf-m-current"
263
- aria-current="page"
264
- >Section landing</a>
265
- </li>
266
- </ol>
267
- </nav>
268
- </div>
269
- </section>
270
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v6-c-page__main-body">
272
- <div class="pf-v6-c-content">
273
- <h1>Main title</h1>
274
- <p>This is a full page demo.</p>
261
+ <a
262
+ href="#"
263
+ class="pf-v6-c-breadcrumb__link pf-m-current"
264
+ aria-current="page"
265
+ >Section landing</a>
266
+ </li>
267
+ </ol>
268
+ </nav>
275
269
  </div>
276
- </div>
277
- </section>
278
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
279
- <div class="pf-v6-c-page__main-body">
280
- <div class="pf-v6-l-gallery pf-m-gutter">
281
- <div class="pf-v6-c-card">
282
- <div class="pf-v6-c-card__body">This is a card</div>
283
- </div>
284
- <div class="pf-v6-c-card">
285
- <div class="pf-v6-c-card__body">This is a card</div>
286
- </div>
287
- <div class="pf-v6-c-card">
288
- <div class="pf-v6-c-card__body">This is a card</div>
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>
289
276
  </div>
290
- <div class="pf-v6-c-card">
291
- <div class="pf-v6-c-card__body">This is a card</div>
292
- </div>
293
- <div class="pf-v6-c-card">
294
- <div class="pf-v6-c-card__body">This is a card</div>
295
- </div>
296
- <div class="pf-v6-c-card">
297
- <div class="pf-v6-c-card__body">This is a card</div>
298
- </div>
299
- <div class="pf-v6-c-card">
300
- <div class="pf-v6-c-card__body">This is a card</div>
301
- </div>
302
- <div class="pf-v6-c-card">
303
- <div class="pf-v6-c-card__body">This is a card</div>
304
- </div>
305
- <div class="pf-v6-c-card">
306
- <div class="pf-v6-c-card__body">This is a card</div>
307
- </div>
308
- <div class="pf-v6-c-card">
309
- <div class="pf-v6-c-card__body">This is a card</div>
277
+ </div>
278
+ </section>
279
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
280
+ <div class="pf-v6-c-page__main-body">
281
+ <div class="pf-v6-l-gallery pf-m-gutter">
282
+ <div class="pf-v6-c-card">
283
+ <div class="pf-v6-c-card__body">This is a card</div>
284
+ </div>
285
+ <div class="pf-v6-c-card">
286
+ <div class="pf-v6-c-card__body">This is a card</div>
287
+ </div>
288
+ <div class="pf-v6-c-card">
289
+ <div class="pf-v6-c-card__body">This is a card</div>
290
+ </div>
291
+ <div class="pf-v6-c-card">
292
+ <div class="pf-v6-c-card__body">This is a card</div>
293
+ </div>
294
+ <div class="pf-v6-c-card">
295
+ <div class="pf-v6-c-card__body">This is a card</div>
296
+ </div>
297
+ <div class="pf-v6-c-card">
298
+ <div class="pf-v6-c-card__body">This is a card</div>
299
+ </div>
300
+ <div class="pf-v6-c-card">
301
+ <div class="pf-v6-c-card__body">This is a card</div>
302
+ </div>
303
+ <div class="pf-v6-c-card">
304
+ <div class="pf-v6-c-card__body">This is a card</div>
305
+ </div>
306
+ <div class="pf-v6-c-card">
307
+ <div class="pf-v6-c-card__body">This is a card</div>
308
+ </div>
309
+ <div class="pf-v6-c-card">
310
+ <div class="pf-v6-c-card__body">This is a card</div>
311
+ </div>
310
312
  </div>
311
313
  </div>
312
- </div>
313
- </section>
314
- </main>
314
+ </section>
315
+ </main>
316
+ </div>
315
317
  </div>
316
318
  <div class="pf-v6-c-backdrop">
317
319
  <div class="pf-v6-l-bullseye">
@@ -580,92 +582,94 @@ section: components
580
582
  </nav>
581
583
  </div>
582
584
  </div>
583
- <main
584
- class="pf-v6-c-page__main"
585
- tabindex="-1"
586
- id="main-content-modal-scrollable-content-example"
587
- >
588
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
589
- <div class="pf-v6-c-page__main-body">
590
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
591
- <ol class="pf-v6-c-breadcrumb__list" role="list">
592
- <li class="pf-v6-c-breadcrumb__item">
593
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
594
- </li>
595
- <li class="pf-v6-c-breadcrumb__item">
596
- <span class="pf-v6-c-breadcrumb__item-divider">
597
- <i class="fas fa-angle-right" aria-hidden="true"></i>
598
- </span>
585
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
586
+ <main
587
+ class="pf-v6-c-page__main"
588
+ tabindex="-1"
589
+ id="main-content-modal-scrollable-content-example"
590
+ >
591
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
592
+ <div class="pf-v6-c-page__main-body">
593
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
594
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
595
+ <li class="pf-v6-c-breadcrumb__item">
596
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
597
+ </li>
598
+ <li class="pf-v6-c-breadcrumb__item">
599
+ <span class="pf-v6-c-breadcrumb__item-divider">
600
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
601
+ </span>
599
602
 
600
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
601
- </li>
602
- <li class="pf-v6-c-breadcrumb__item">
603
- <span class="pf-v6-c-breadcrumb__item-divider">
604
- <i class="fas fa-angle-right" aria-hidden="true"></i>
605
- </span>
603
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
604
+ </li>
605
+ <li class="pf-v6-c-breadcrumb__item">
606
+ <span class="pf-v6-c-breadcrumb__item-divider">
607
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
608
+ </span>
606
609
 
607
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
608
- </li>
609
- <li class="pf-v6-c-breadcrumb__item">
610
- <span class="pf-v6-c-breadcrumb__item-divider">
611
- <i class="fas fa-angle-right" aria-hidden="true"></i>
612
- </span>
610
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
611
+ </li>
612
+ <li class="pf-v6-c-breadcrumb__item">
613
+ <span class="pf-v6-c-breadcrumb__item-divider">
614
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
615
+ </span>
613
616
 
614
- <a
615
- href="#"
616
- class="pf-v6-c-breadcrumb__link pf-m-current"
617
- aria-current="page"
618
- >Section landing</a>
619
- </li>
620
- </ol>
621
- </nav>
622
- </div>
623
- </section>
624
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
625
- <div class="pf-v6-c-page__main-body">
626
- <div class="pf-v6-c-content">
627
- <h1>Main title</h1>
628
- <p>This is a full page demo.</p>
617
+ <a
618
+ href="#"
619
+ class="pf-v6-c-breadcrumb__link pf-m-current"
620
+ aria-current="page"
621
+ >Section landing</a>
622
+ </li>
623
+ </ol>
624
+ </nav>
629
625
  </div>
630
- </div>
631
- </section>
632
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
633
- <div class="pf-v6-c-page__main-body">
634
- <div class="pf-v6-l-gallery pf-m-gutter">
635
- <div class="pf-v6-c-card">
636
- <div class="pf-v6-c-card__body">This is a card</div>
637
- </div>
638
- <div class="pf-v6-c-card">
639
- <div class="pf-v6-c-card__body">This is a card</div>
640
- </div>
641
- <div class="pf-v6-c-card">
642
- <div class="pf-v6-c-card__body">This is a card</div>
643
- </div>
644
- <div class="pf-v6-c-card">
645
- <div class="pf-v6-c-card__body">This is a card</div>
646
- </div>
647
- <div class="pf-v6-c-card">
648
- <div class="pf-v6-c-card__body">This is a card</div>
649
- </div>
650
- <div class="pf-v6-c-card">
651
- <div class="pf-v6-c-card__body">This is a card</div>
652
- </div>
653
- <div class="pf-v6-c-card">
654
- <div class="pf-v6-c-card__body">This is a card</div>
626
+ </section>
627
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
628
+ <div class="pf-v6-c-page__main-body">
629
+ <div class="pf-v6-c-content">
630
+ <h1>Main title</h1>
631
+ <p>This is a full page demo.</p>
655
632
  </div>
656
- <div class="pf-v6-c-card">
657
- <div class="pf-v6-c-card__body">This is a card</div>
658
- </div>
659
- <div class="pf-v6-c-card">
660
- <div class="pf-v6-c-card__body">This is a card</div>
661
- </div>
662
- <div class="pf-v6-c-card">
663
- <div class="pf-v6-c-card__body">This is a card</div>
633
+ </div>
634
+ </section>
635
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
636
+ <div class="pf-v6-c-page__main-body">
637
+ <div class="pf-v6-l-gallery pf-m-gutter">
638
+ <div class="pf-v6-c-card">
639
+ <div class="pf-v6-c-card__body">This is a card</div>
640
+ </div>
641
+ <div class="pf-v6-c-card">
642
+ <div class="pf-v6-c-card__body">This is a card</div>
643
+ </div>
644
+ <div class="pf-v6-c-card">
645
+ <div class="pf-v6-c-card__body">This is a card</div>
646
+ </div>
647
+ <div class="pf-v6-c-card">
648
+ <div class="pf-v6-c-card__body">This is a card</div>
649
+ </div>
650
+ <div class="pf-v6-c-card">
651
+ <div class="pf-v6-c-card__body">This is a card</div>
652
+ </div>
653
+ <div class="pf-v6-c-card">
654
+ <div class="pf-v6-c-card__body">This is a card</div>
655
+ </div>
656
+ <div class="pf-v6-c-card">
657
+ <div class="pf-v6-c-card__body">This is a card</div>
658
+ </div>
659
+ <div class="pf-v6-c-card">
660
+ <div class="pf-v6-c-card__body">This is a card</div>
661
+ </div>
662
+ <div class="pf-v6-c-card">
663
+ <div class="pf-v6-c-card__body">This is a card</div>
664
+ </div>
665
+ <div class="pf-v6-c-card">
666
+ <div class="pf-v6-c-card__body">This is a card</div>
667
+ </div>
664
668
  </div>
665
669
  </div>
666
- </div>
667
- </section>
668
- </main>
670
+ </section>
671
+ </main>
672
+ </div>
669
673
  </div>
670
674
  <div class="pf-v6-c-backdrop">
671
675
  <div class="pf-v6-l-bullseye">
@@ -940,92 +944,94 @@ section: components
940
944
  </nav>
941
945
  </div>
942
946
  </div>
943
- <main
944
- class="pf-v6-c-page__main"
945
- tabindex="-1"
946
- id="main-content-modal-medium-example"
947
- >
948
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
949
- <div class="pf-v6-c-page__main-body">
950
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
951
- <ol class="pf-v6-c-breadcrumb__list" role="list">
952
- <li class="pf-v6-c-breadcrumb__item">
953
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
954
- </li>
955
- <li class="pf-v6-c-breadcrumb__item">
956
- <span class="pf-v6-c-breadcrumb__item-divider">
957
- <i class="fas fa-angle-right" aria-hidden="true"></i>
958
- </span>
947
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
948
+ <main
949
+ class="pf-v6-c-page__main"
950
+ tabindex="-1"
951
+ id="main-content-modal-medium-example"
952
+ >
953
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
954
+ <div class="pf-v6-c-page__main-body">
955
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
956
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
957
+ <li class="pf-v6-c-breadcrumb__item">
958
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
959
+ </li>
960
+ <li class="pf-v6-c-breadcrumb__item">
961
+ <span class="pf-v6-c-breadcrumb__item-divider">
962
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
963
+ </span>
959
964
 
960
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
961
- </li>
962
- <li class="pf-v6-c-breadcrumb__item">
963
- <span class="pf-v6-c-breadcrumb__item-divider">
964
- <i class="fas fa-angle-right" aria-hidden="true"></i>
965
- </span>
965
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
966
+ </li>
967
+ <li class="pf-v6-c-breadcrumb__item">
968
+ <span class="pf-v6-c-breadcrumb__item-divider">
969
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
970
+ </span>
966
971
 
967
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
968
- </li>
969
- <li class="pf-v6-c-breadcrumb__item">
970
- <span class="pf-v6-c-breadcrumb__item-divider">
971
- <i class="fas fa-angle-right" aria-hidden="true"></i>
972
- </span>
972
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
973
+ </li>
974
+ <li class="pf-v6-c-breadcrumb__item">
975
+ <span class="pf-v6-c-breadcrumb__item-divider">
976
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
977
+ </span>
973
978
 
974
- <a
975
- href="#"
976
- class="pf-v6-c-breadcrumb__link pf-m-current"
977
- aria-current="page"
978
- >Section landing</a>
979
- </li>
980
- </ol>
981
- </nav>
982
- </div>
983
- </section>
984
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
985
- <div class="pf-v6-c-page__main-body">
986
- <div class="pf-v6-c-content">
987
- <h1>Main title</h1>
988
- <p>This is a full page demo.</p>
979
+ <a
980
+ href="#"
981
+ class="pf-v6-c-breadcrumb__link pf-m-current"
982
+ aria-current="page"
983
+ >Section landing</a>
984
+ </li>
985
+ </ol>
986
+ </nav>
989
987
  </div>
990
- </div>
991
- </section>
992
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
993
- <div class="pf-v6-c-page__main-body">
994
- <div class="pf-v6-l-gallery pf-m-gutter">
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>
988
+ </section>
989
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
990
+ <div class="pf-v6-c-page__main-body">
991
+ <div class="pf-v6-c-content">
992
+ <h1>Main title</h1>
993
+ <p>This is a full page demo.</p>
1009
994
  </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>
1015
- </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>
995
+ </div>
996
+ </section>
997
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
998
+ <div class="pf-v6-c-page__main-body">
999
+ <div class="pf-v6-l-gallery pf-m-gutter">
1000
+ <div class="pf-v6-c-card">
1001
+ <div class="pf-v6-c-card__body">This is a card</div>
1002
+ </div>
1003
+ <div class="pf-v6-c-card">
1004
+ <div class="pf-v6-c-card__body">This is a card</div>
1005
+ </div>
1006
+ <div class="pf-v6-c-card">
1007
+ <div class="pf-v6-c-card__body">This is a card</div>
1008
+ </div>
1009
+ <div class="pf-v6-c-card">
1010
+ <div class="pf-v6-c-card__body">This is a card</div>
1011
+ </div>
1012
+ <div class="pf-v6-c-card">
1013
+ <div class="pf-v6-c-card__body">This is a card</div>
1014
+ </div>
1015
+ <div class="pf-v6-c-card">
1016
+ <div class="pf-v6-c-card__body">This is a card</div>
1017
+ </div>
1018
+ <div class="pf-v6-c-card">
1019
+ <div class="pf-v6-c-card__body">This is a card</div>
1020
+ </div>
1021
+ <div class="pf-v6-c-card">
1022
+ <div class="pf-v6-c-card__body">This is a card</div>
1023
+ </div>
1024
+ <div class="pf-v6-c-card">
1025
+ <div class="pf-v6-c-card__body">This is a card</div>
1026
+ </div>
1027
+ <div class="pf-v6-c-card">
1028
+ <div class="pf-v6-c-card__body">This is a card</div>
1029
+ </div>
1024
1030
  </div>
1025
1031
  </div>
1026
- </div>
1027
- </section>
1028
- </main>
1032
+ </section>
1033
+ </main>
1034
+ </div>
1029
1035
  </div>
1030
1036
  <div class="pf-v6-c-backdrop">
1031
1037
  <div class="pf-v6-l-bullseye">
@@ -1290,92 +1296,94 @@ section: components
1290
1296
  </nav>
1291
1297
  </div>
1292
1298
  </div>
1293
- <main
1294
- class="pf-v6-c-page__main"
1295
- tabindex="-1"
1296
- id="main-content-modal-large-example"
1297
- >
1298
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1299
- <div class="pf-v6-c-page__main-body">
1300
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1301
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1302
- <li class="pf-v6-c-breadcrumb__item">
1303
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1304
- </li>
1305
- <li class="pf-v6-c-breadcrumb__item">
1306
- <span class="pf-v6-c-breadcrumb__item-divider">
1307
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1308
- </span>
1299
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1300
+ <main
1301
+ class="pf-v6-c-page__main"
1302
+ tabindex="-1"
1303
+ id="main-content-modal-large-example"
1304
+ >
1305
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1306
+ <div class="pf-v6-c-page__main-body">
1307
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1308
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1309
+ <li class="pf-v6-c-breadcrumb__item">
1310
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1311
+ </li>
1312
+ <li class="pf-v6-c-breadcrumb__item">
1313
+ <span class="pf-v6-c-breadcrumb__item-divider">
1314
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1315
+ </span>
1309
1316
 
1310
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1311
- </li>
1312
- <li class="pf-v6-c-breadcrumb__item">
1313
- <span class="pf-v6-c-breadcrumb__item-divider">
1314
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1315
- </span>
1317
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1318
+ </li>
1319
+ <li class="pf-v6-c-breadcrumb__item">
1320
+ <span class="pf-v6-c-breadcrumb__item-divider">
1321
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1322
+ </span>
1316
1323
 
1317
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1318
- </li>
1319
- <li class="pf-v6-c-breadcrumb__item">
1320
- <span class="pf-v6-c-breadcrumb__item-divider">
1321
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1322
- </span>
1324
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1325
+ </li>
1326
+ <li class="pf-v6-c-breadcrumb__item">
1327
+ <span class="pf-v6-c-breadcrumb__item-divider">
1328
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1329
+ </span>
1323
1330
 
1324
- <a
1325
- href="#"
1326
- class="pf-v6-c-breadcrumb__link pf-m-current"
1327
- aria-current="page"
1328
- >Section landing</a>
1329
- </li>
1330
- </ol>
1331
- </nav>
1332
- </div>
1333
- </section>
1334
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1335
- <div class="pf-v6-c-page__main-body">
1336
- <div class="pf-v6-c-content">
1337
- <h1>Main title</h1>
1338
- <p>This is a full page demo.</p>
1331
+ <a
1332
+ href="#"
1333
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1334
+ aria-current="page"
1335
+ >Section landing</a>
1336
+ </li>
1337
+ </ol>
1338
+ </nav>
1339
1339
  </div>
1340
- </div>
1341
- </section>
1342
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1343
- <div class="pf-v6-c-page__main-body">
1344
- <div class="pf-v6-l-gallery pf-m-gutter">
1345
- <div class="pf-v6-c-card">
1346
- <div class="pf-v6-c-card__body">This is a card</div>
1347
- </div>
1348
- <div class="pf-v6-c-card">
1349
- <div class="pf-v6-c-card__body">This is a card</div>
1350
- </div>
1351
- <div class="pf-v6-c-card">
1352
- <div class="pf-v6-c-card__body">This is a card</div>
1340
+ </section>
1341
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1342
+ <div class="pf-v6-c-page__main-body">
1343
+ <div class="pf-v6-c-content">
1344
+ <h1>Main title</h1>
1345
+ <p>This is a full page demo.</p>
1353
1346
  </div>
1354
- <div class="pf-v6-c-card">
1355
- <div class="pf-v6-c-card__body">This is a card</div>
1356
- </div>
1357
- <div class="pf-v6-c-card">
1358
- <div class="pf-v6-c-card__body">This is a card</div>
1359
- </div>
1360
- <div class="pf-v6-c-card">
1361
- <div class="pf-v6-c-card__body">This is a card</div>
1362
- </div>
1363
- <div class="pf-v6-c-card">
1364
- <div class="pf-v6-c-card__body">This is a card</div>
1365
- </div>
1366
- <div class="pf-v6-c-card">
1367
- <div class="pf-v6-c-card__body">This is a card</div>
1368
- </div>
1369
- <div class="pf-v6-c-card">
1370
- <div class="pf-v6-c-card__body">This is a card</div>
1371
- </div>
1372
- <div class="pf-v6-c-card">
1373
- <div class="pf-v6-c-card__body">This is a card</div>
1347
+ </div>
1348
+ </section>
1349
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1350
+ <div class="pf-v6-c-page__main-body">
1351
+ <div class="pf-v6-l-gallery pf-m-gutter">
1352
+ <div class="pf-v6-c-card">
1353
+ <div class="pf-v6-c-card__body">This is a card</div>
1354
+ </div>
1355
+ <div class="pf-v6-c-card">
1356
+ <div class="pf-v6-c-card__body">This is a card</div>
1357
+ </div>
1358
+ <div class="pf-v6-c-card">
1359
+ <div class="pf-v6-c-card__body">This is a card</div>
1360
+ </div>
1361
+ <div class="pf-v6-c-card">
1362
+ <div class="pf-v6-c-card__body">This is a card</div>
1363
+ </div>
1364
+ <div class="pf-v6-c-card">
1365
+ <div class="pf-v6-c-card__body">This is a card</div>
1366
+ </div>
1367
+ <div class="pf-v6-c-card">
1368
+ <div class="pf-v6-c-card__body">This is a card</div>
1369
+ </div>
1370
+ <div class="pf-v6-c-card">
1371
+ <div class="pf-v6-c-card__body">This is a card</div>
1372
+ </div>
1373
+ <div class="pf-v6-c-card">
1374
+ <div class="pf-v6-c-card__body">This is a card</div>
1375
+ </div>
1376
+ <div class="pf-v6-c-card">
1377
+ <div class="pf-v6-c-card__body">This is a card</div>
1378
+ </div>
1379
+ <div class="pf-v6-c-card">
1380
+ <div class="pf-v6-c-card__body">This is a card</div>
1381
+ </div>
1374
1382
  </div>
1375
1383
  </div>
1376
- </div>
1377
- </section>
1378
- </main>
1384
+ </section>
1385
+ </main>
1386
+ </div>
1379
1387
  </div>
1380
1388
  <div class="pf-v6-c-backdrop">
1381
1389
  <div class="pf-v6-l-bullseye">
@@ -1640,92 +1648,94 @@ section: components
1640
1648
  </nav>
1641
1649
  </div>
1642
1650
  </div>
1643
- <main
1644
- class="pf-v6-c-page__main"
1645
- tabindex="-1"
1646
- id="main-content-modal-large-example"
1647
- >
1648
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1649
- <div class="pf-v6-c-page__main-body">
1650
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1651
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1652
- <li class="pf-v6-c-breadcrumb__item">
1653
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1654
- </li>
1655
- <li class="pf-v6-c-breadcrumb__item">
1656
- <span class="pf-v6-c-breadcrumb__item-divider">
1657
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1658
- </span>
1651
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1652
+ <main
1653
+ class="pf-v6-c-page__main"
1654
+ tabindex="-1"
1655
+ id="main-content-modal-large-example"
1656
+ >
1657
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1658
+ <div class="pf-v6-c-page__main-body">
1659
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1660
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1661
+ <li class="pf-v6-c-breadcrumb__item">
1662
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1663
+ </li>
1664
+ <li class="pf-v6-c-breadcrumb__item">
1665
+ <span class="pf-v6-c-breadcrumb__item-divider">
1666
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1667
+ </span>
1659
1668
 
1660
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1661
- </li>
1662
- <li class="pf-v6-c-breadcrumb__item">
1663
- <span class="pf-v6-c-breadcrumb__item-divider">
1664
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1665
- </span>
1669
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1670
+ </li>
1671
+ <li class="pf-v6-c-breadcrumb__item">
1672
+ <span class="pf-v6-c-breadcrumb__item-divider">
1673
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1674
+ </span>
1666
1675
 
1667
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1668
- </li>
1669
- <li class="pf-v6-c-breadcrumb__item">
1670
- <span class="pf-v6-c-breadcrumb__item-divider">
1671
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1672
- </span>
1676
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1677
+ </li>
1678
+ <li class="pf-v6-c-breadcrumb__item">
1679
+ <span class="pf-v6-c-breadcrumb__item-divider">
1680
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1681
+ </span>
1673
1682
 
1674
- <a
1675
- href="#"
1676
- class="pf-v6-c-breadcrumb__link pf-m-current"
1677
- aria-current="page"
1678
- >Section landing</a>
1679
- </li>
1680
- </ol>
1681
- </nav>
1682
- </div>
1683
- </section>
1684
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1685
- <div class="pf-v6-c-page__main-body">
1686
- <div class="pf-v6-c-content">
1687
- <h1>Main title</h1>
1688
- <p>This is a full page demo.</p>
1683
+ <a
1684
+ href="#"
1685
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1686
+ aria-current="page"
1687
+ >Section landing</a>
1688
+ </li>
1689
+ </ol>
1690
+ </nav>
1689
1691
  </div>
1690
- </div>
1691
- </section>
1692
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1693
- <div class="pf-v6-c-page__main-body">
1694
- <div class="pf-v6-l-gallery pf-m-gutter">
1695
- <div class="pf-v6-c-card">
1696
- <div class="pf-v6-c-card__body">This is a card</div>
1697
- </div>
1698
- <div class="pf-v6-c-card">
1699
- <div class="pf-v6-c-card__body">This is a card</div>
1700
- </div>
1701
- <div class="pf-v6-c-card">
1702
- <div class="pf-v6-c-card__body">This is a card</div>
1703
- </div>
1704
- <div class="pf-v6-c-card">
1705
- <div class="pf-v6-c-card__body">This is a card</div>
1706
- </div>
1707
- <div class="pf-v6-c-card">
1708
- <div class="pf-v6-c-card__body">This is a card</div>
1709
- </div>
1710
- <div class="pf-v6-c-card">
1711
- <div class="pf-v6-c-card__body">This is a card</div>
1712
- </div>
1713
- <div class="pf-v6-c-card">
1714
- <div class="pf-v6-c-card__body">This is a card</div>
1692
+ </section>
1693
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1694
+ <div class="pf-v6-c-page__main-body">
1695
+ <div class="pf-v6-c-content">
1696
+ <h1>Main title</h1>
1697
+ <p>This is a full page demo.</p>
1715
1698
  </div>
1716
- <div class="pf-v6-c-card">
1717
- <div class="pf-v6-c-card__body">This is a card</div>
1718
- </div>
1719
- <div class="pf-v6-c-card">
1720
- <div class="pf-v6-c-card__body">This is a card</div>
1721
- </div>
1722
- <div class="pf-v6-c-card">
1723
- <div class="pf-v6-c-card__body">This is a card</div>
1699
+ </div>
1700
+ </section>
1701
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1702
+ <div class="pf-v6-c-page__main-body">
1703
+ <div class="pf-v6-l-gallery pf-m-gutter">
1704
+ <div class="pf-v6-c-card">
1705
+ <div class="pf-v6-c-card__body">This is a card</div>
1706
+ </div>
1707
+ <div class="pf-v6-c-card">
1708
+ <div class="pf-v6-c-card__body">This is a card</div>
1709
+ </div>
1710
+ <div class="pf-v6-c-card">
1711
+ <div class="pf-v6-c-card__body">This is a card</div>
1712
+ </div>
1713
+ <div class="pf-v6-c-card">
1714
+ <div class="pf-v6-c-card__body">This is a card</div>
1715
+ </div>
1716
+ <div class="pf-v6-c-card">
1717
+ <div class="pf-v6-c-card__body">This is a card</div>
1718
+ </div>
1719
+ <div class="pf-v6-c-card">
1720
+ <div class="pf-v6-c-card__body">This is a card</div>
1721
+ </div>
1722
+ <div class="pf-v6-c-card">
1723
+ <div class="pf-v6-c-card__body">This is a card</div>
1724
+ </div>
1725
+ <div class="pf-v6-c-card">
1726
+ <div class="pf-v6-c-card__body">This is a card</div>
1727
+ </div>
1728
+ <div class="pf-v6-c-card">
1729
+ <div class="pf-v6-c-card__body">This is a card</div>
1730
+ </div>
1731
+ <div class="pf-v6-c-card">
1732
+ <div class="pf-v6-c-card__body">This is a card</div>
1733
+ </div>
1724
1734
  </div>
1725
1735
  </div>
1726
- </div>
1727
- </section>
1728
- </main>
1736
+ </section>
1737
+ </main>
1738
+ </div>
1729
1739
  </div>
1730
1740
  <div class="pf-v6-c-backdrop">
1731
1741
  <div class="pf-v6-l-bullseye">
@@ -1990,92 +2000,94 @@ section: components
1990
2000
  </nav>
1991
2001
  </div>
1992
2002
  </div>
1993
- <main
1994
- class="pf-v6-c-page__main"
1995
- tabindex="-1"
1996
- id="main-content-modal-with-form-example"
1997
- >
1998
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1999
- <div class="pf-v6-c-page__main-body">
2000
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2001
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2002
- <li class="pf-v6-c-breadcrumb__item">
2003
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2004
- </li>
2005
- <li class="pf-v6-c-breadcrumb__item">
2006
- <span class="pf-v6-c-breadcrumb__item-divider">
2007
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2008
- </span>
2003
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2004
+ <main
2005
+ class="pf-v6-c-page__main"
2006
+ tabindex="-1"
2007
+ id="main-content-modal-with-form-example"
2008
+ >
2009
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2010
+ <div class="pf-v6-c-page__main-body">
2011
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2012
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2013
+ <li class="pf-v6-c-breadcrumb__item">
2014
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2015
+ </li>
2016
+ <li class="pf-v6-c-breadcrumb__item">
2017
+ <span class="pf-v6-c-breadcrumb__item-divider">
2018
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2019
+ </span>
2009
2020
 
2010
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2011
- </li>
2012
- <li class="pf-v6-c-breadcrumb__item">
2013
- <span class="pf-v6-c-breadcrumb__item-divider">
2014
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2015
- </span>
2021
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2022
+ </li>
2023
+ <li class="pf-v6-c-breadcrumb__item">
2024
+ <span class="pf-v6-c-breadcrumb__item-divider">
2025
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2026
+ </span>
2016
2027
 
2017
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2018
- </li>
2019
- <li class="pf-v6-c-breadcrumb__item">
2020
- <span class="pf-v6-c-breadcrumb__item-divider">
2021
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2022
- </span>
2028
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2029
+ </li>
2030
+ <li class="pf-v6-c-breadcrumb__item">
2031
+ <span class="pf-v6-c-breadcrumb__item-divider">
2032
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2033
+ </span>
2023
2034
 
2024
- <a
2025
- href="#"
2026
- class="pf-v6-c-breadcrumb__link pf-m-current"
2027
- aria-current="page"
2028
- >Section landing</a>
2029
- </li>
2030
- </ol>
2031
- </nav>
2032
- </div>
2033
- </section>
2034
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2035
- <div class="pf-v6-c-page__main-body">
2036
- <div class="pf-v6-c-content">
2037
- <h1>Main title</h1>
2038
- <p>This is a full page demo.</p>
2035
+ <a
2036
+ href="#"
2037
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2038
+ aria-current="page"
2039
+ >Section landing</a>
2040
+ </li>
2041
+ </ol>
2042
+ </nav>
2039
2043
  </div>
2040
- </div>
2041
- </section>
2042
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2043
- <div class="pf-v6-c-page__main-body">
2044
- <div class="pf-v6-l-gallery pf-m-gutter">
2045
- <div class="pf-v6-c-card">
2046
- <div class="pf-v6-c-card__body">This is a card</div>
2047
- </div>
2048
- <div class="pf-v6-c-card">
2049
- <div class="pf-v6-c-card__body">This is a card</div>
2050
- </div>
2051
- <div class="pf-v6-c-card">
2052
- <div class="pf-v6-c-card__body">This is a card</div>
2053
- </div>
2054
- <div class="pf-v6-c-card">
2055
- <div class="pf-v6-c-card__body">This is a card</div>
2056
- </div>
2057
- <div class="pf-v6-c-card">
2058
- <div class="pf-v6-c-card__body">This is a card</div>
2044
+ </section>
2045
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2046
+ <div class="pf-v6-c-page__main-body">
2047
+ <div class="pf-v6-c-content">
2048
+ <h1>Main title</h1>
2049
+ <p>This is a full page demo.</p>
2059
2050
  </div>
2060
- <div class="pf-v6-c-card">
2061
- <div class="pf-v6-c-card__body">This is a card</div>
2062
- </div>
2063
- <div class="pf-v6-c-card">
2064
- <div class="pf-v6-c-card__body">This is a card</div>
2065
- </div>
2066
- <div class="pf-v6-c-card">
2067
- <div class="pf-v6-c-card__body">This is a card</div>
2068
- </div>
2069
- <div class="pf-v6-c-card">
2070
- <div class="pf-v6-c-card__body">This is a card</div>
2071
- </div>
2072
- <div class="pf-v6-c-card">
2073
- <div class="pf-v6-c-card__body">This is a card</div>
2051
+ </div>
2052
+ </section>
2053
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2054
+ <div class="pf-v6-c-page__main-body">
2055
+ <div class="pf-v6-l-gallery pf-m-gutter">
2056
+ <div class="pf-v6-c-card">
2057
+ <div class="pf-v6-c-card__body">This is a card</div>
2058
+ </div>
2059
+ <div class="pf-v6-c-card">
2060
+ <div class="pf-v6-c-card__body">This is a card</div>
2061
+ </div>
2062
+ <div class="pf-v6-c-card">
2063
+ <div class="pf-v6-c-card__body">This is a card</div>
2064
+ </div>
2065
+ <div class="pf-v6-c-card">
2066
+ <div class="pf-v6-c-card__body">This is a card</div>
2067
+ </div>
2068
+ <div class="pf-v6-c-card">
2069
+ <div class="pf-v6-c-card__body">This is a card</div>
2070
+ </div>
2071
+ <div class="pf-v6-c-card">
2072
+ <div class="pf-v6-c-card__body">This is a card</div>
2073
+ </div>
2074
+ <div class="pf-v6-c-card">
2075
+ <div class="pf-v6-c-card__body">This is a card</div>
2076
+ </div>
2077
+ <div class="pf-v6-c-card">
2078
+ <div class="pf-v6-c-card__body">This is a card</div>
2079
+ </div>
2080
+ <div class="pf-v6-c-card">
2081
+ <div class="pf-v6-c-card__body">This is a card</div>
2082
+ </div>
2083
+ <div class="pf-v6-c-card">
2084
+ <div class="pf-v6-c-card__body">This is a card</div>
2085
+ </div>
2074
2086
  </div>
2075
2087
  </div>
2076
- </div>
2077
- </section>
2078
- </main>
2088
+ </section>
2089
+ </main>
2090
+ </div>
2079
2091
  </div>
2080
2092
  <div class="pf-v6-c-backdrop">
2081
2093
  <div class="pf-v6-l-bullseye">