@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/Masthead/examples/Masthead.md CHANGED
@@ -155,92 +155,94 @@ wrapperTag: div
155
155
  </nav>
156
156
  </div>
157
157
  </div>
158
- <main
159
- class="pf-v6-c-page__main"
160
- tabindex="-1"
161
- id="main-content-masthead-basic-example"
162
- >
163
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
164
- <div class="pf-v6-c-page__main-body">
165
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
166
- <ol class="pf-v6-c-breadcrumb__list" role="list">
167
- <li class="pf-v6-c-breadcrumb__item">
168
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
169
- </li>
170
- <li class="pf-v6-c-breadcrumb__item">
171
- <span class="pf-v6-c-breadcrumb__item-divider">
172
- <i class="fas fa-angle-right" aria-hidden="true"></i>
173
- </span>
158
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
159
+ <main
160
+ class="pf-v6-c-page__main"
161
+ tabindex="-1"
162
+ id="main-content-masthead-basic-example"
163
+ >
164
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
165
+ <div class="pf-v6-c-page__main-body">
166
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
167
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
168
+ <li class="pf-v6-c-breadcrumb__item">
169
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
170
+ </li>
171
+ <li class="pf-v6-c-breadcrumb__item">
172
+ <span class="pf-v6-c-breadcrumb__item-divider">
173
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
174
+ </span>
174
175
 
175
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
176
- </li>
177
- <li class="pf-v6-c-breadcrumb__item">
178
- <span class="pf-v6-c-breadcrumb__item-divider">
179
- <i class="fas fa-angle-right" aria-hidden="true"></i>
180
- </span>
176
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
177
+ </li>
178
+ <li class="pf-v6-c-breadcrumb__item">
179
+ <span class="pf-v6-c-breadcrumb__item-divider">
180
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
181
+ </span>
181
182
 
182
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
183
- </li>
184
- <li class="pf-v6-c-breadcrumb__item">
185
- <span class="pf-v6-c-breadcrumb__item-divider">
186
- <i class="fas fa-angle-right" aria-hidden="true"></i>
187
- </span>
183
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
184
+ </li>
185
+ <li class="pf-v6-c-breadcrumb__item">
186
+ <span class="pf-v6-c-breadcrumb__item-divider">
187
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
188
+ </span>
188
189
 
189
- <a
190
- href="#"
191
- class="pf-v6-c-breadcrumb__link pf-m-current"
192
- aria-current="page"
193
- >Section landing</a>
194
- </li>
195
- </ol>
196
- </nav>
197
- </div>
198
- </section>
199
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
200
- <div class="pf-v6-c-page__main-body">
201
- <div class="pf-v6-c-content">
202
- <h1>Main title</h1>
203
- <p>This is a full page demo.</p>
190
+ <a
191
+ href="#"
192
+ class="pf-v6-c-breadcrumb__link pf-m-current"
193
+ aria-current="page"
194
+ >Section landing</a>
195
+ </li>
196
+ </ol>
197
+ </nav>
204
198
  </div>
205
- </div>
206
- </section>
207
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
208
- <div class="pf-v6-c-page__main-body">
209
- <div class="pf-v6-l-gallery pf-m-gutter">
210
- <div class="pf-v6-c-card">
211
- <div class="pf-v6-c-card__body">This is a card</div>
212
- </div>
213
- <div class="pf-v6-c-card">
214
- <div class="pf-v6-c-card__body">This is a card</div>
215
- </div>
216
- <div class="pf-v6-c-card">
217
- <div class="pf-v6-c-card__body">This is a card</div>
199
+ </section>
200
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
201
+ <div class="pf-v6-c-page__main-body">
202
+ <div class="pf-v6-c-content">
203
+ <h1>Main title</h1>
204
+ <p>This is a full page demo.</p>
218
205
  </div>
219
- <div class="pf-v6-c-card">
220
- <div class="pf-v6-c-card__body">This is a card</div>
221
- </div>
222
- <div class="pf-v6-c-card">
223
- <div class="pf-v6-c-card__body">This is a card</div>
224
- </div>
225
- <div class="pf-v6-c-card">
226
- <div class="pf-v6-c-card__body">This is a card</div>
227
- </div>
228
- <div class="pf-v6-c-card">
229
- <div class="pf-v6-c-card__body">This is a card</div>
230
- </div>
231
- <div class="pf-v6-c-card">
232
- <div class="pf-v6-c-card__body">This is a card</div>
233
- </div>
234
- <div class="pf-v6-c-card">
235
- <div class="pf-v6-c-card__body">This is a card</div>
236
- </div>
237
- <div class="pf-v6-c-card">
238
- <div class="pf-v6-c-card__body">This is a card</div>
206
+ </div>
207
+ </section>
208
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
209
+ <div class="pf-v6-c-page__main-body">
210
+ <div class="pf-v6-l-gallery pf-m-gutter">
211
+ <div class="pf-v6-c-card">
212
+ <div class="pf-v6-c-card__body">This is a card</div>
213
+ </div>
214
+ <div class="pf-v6-c-card">
215
+ <div class="pf-v6-c-card__body">This is a card</div>
216
+ </div>
217
+ <div class="pf-v6-c-card">
218
+ <div class="pf-v6-c-card__body">This is a card</div>
219
+ </div>
220
+ <div class="pf-v6-c-card">
221
+ <div class="pf-v6-c-card__body">This is a card</div>
222
+ </div>
223
+ <div class="pf-v6-c-card">
224
+ <div class="pf-v6-c-card__body">This is a card</div>
225
+ </div>
226
+ <div class="pf-v6-c-card">
227
+ <div class="pf-v6-c-card__body">This is a card</div>
228
+ </div>
229
+ <div class="pf-v6-c-card">
230
+ <div class="pf-v6-c-card__body">This is a card</div>
231
+ </div>
232
+ <div class="pf-v6-c-card">
233
+ <div class="pf-v6-c-card__body">This is a card</div>
234
+ </div>
235
+ <div class="pf-v6-c-card">
236
+ <div class="pf-v6-c-card__body">This is a card</div>
237
+ </div>
238
+ <div class="pf-v6-c-card">
239
+ <div class="pf-v6-c-card__body">This is a card</div>
240
+ </div>
239
241
  </div>
240
242
  </div>
241
- </div>
242
- </section>
243
- </main>
243
+ </section>
244
+ </main>
245
+ </div>
244
246
  </div>
245
247
 
246
248
  ```
@@ -427,92 +429,94 @@ wrapperTag: div
427
429
  </nav>
428
430
  </div>
429
431
  </div>
430
- <main
431
- class="pf-v6-c-page__main"
432
- tabindex="-1"
433
- id="main-content-masthead-context-selecton-drilldown-example"
434
- >
435
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
436
- <div class="pf-v6-c-page__main-body">
437
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
438
- <ol class="pf-v6-c-breadcrumb__list" role="list">
439
- <li class="pf-v6-c-breadcrumb__item">
440
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
441
- </li>
442
- <li class="pf-v6-c-breadcrumb__item">
443
- <span class="pf-v6-c-breadcrumb__item-divider">
444
- <i class="fas fa-angle-right" aria-hidden="true"></i>
445
- </span>
432
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
433
+ <main
434
+ class="pf-v6-c-page__main"
435
+ tabindex="-1"
436
+ id="main-content-masthead-context-selecton-drilldown-example"
437
+ >
438
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
439
+ <div class="pf-v6-c-page__main-body">
440
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
441
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
442
+ <li class="pf-v6-c-breadcrumb__item">
443
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
444
+ </li>
445
+ <li class="pf-v6-c-breadcrumb__item">
446
+ <span class="pf-v6-c-breadcrumb__item-divider">
447
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
448
+ </span>
446
449
 
447
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
448
- </li>
449
- <li class="pf-v6-c-breadcrumb__item">
450
- <span class="pf-v6-c-breadcrumb__item-divider">
451
- <i class="fas fa-angle-right" aria-hidden="true"></i>
452
- </span>
450
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
451
+ </li>
452
+ <li class="pf-v6-c-breadcrumb__item">
453
+ <span class="pf-v6-c-breadcrumb__item-divider">
454
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
455
+ </span>
453
456
 
454
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
455
- </li>
456
- <li class="pf-v6-c-breadcrumb__item">
457
- <span class="pf-v6-c-breadcrumb__item-divider">
458
- <i class="fas fa-angle-right" aria-hidden="true"></i>
459
- </span>
457
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
458
+ </li>
459
+ <li class="pf-v6-c-breadcrumb__item">
460
+ <span class="pf-v6-c-breadcrumb__item-divider">
461
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
462
+ </span>
460
463
 
461
- <a
462
- href="#"
463
- class="pf-v6-c-breadcrumb__link pf-m-current"
464
- aria-current="page"
465
- >Section landing</a>
466
- </li>
467
- </ol>
468
- </nav>
469
- </div>
470
- </section>
471
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
472
- <div class="pf-v6-c-page__main-body">
473
- <div class="pf-v6-c-content">
474
- <h1>Main title</h1>
475
- <p>This is a full page demo.</p>
464
+ <a
465
+ href="#"
466
+ class="pf-v6-c-breadcrumb__link pf-m-current"
467
+ aria-current="page"
468
+ >Section landing</a>
469
+ </li>
470
+ </ol>
471
+ </nav>
476
472
  </div>
477
- </div>
478
- </section>
479
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
480
- <div class="pf-v6-c-page__main-body">
481
- <div class="pf-v6-l-gallery pf-m-gutter">
482
- <div class="pf-v6-c-card">
483
- <div class="pf-v6-c-card__body">This is a card</div>
484
- </div>
485
- <div class="pf-v6-c-card">
486
- <div class="pf-v6-c-card__body">This is a card</div>
487
- </div>
488
- <div class="pf-v6-c-card">
489
- <div class="pf-v6-c-card__body">This is a card</div>
490
- </div>
491
- <div class="pf-v6-c-card">
492
- <div class="pf-v6-c-card__body">This is a card</div>
493
- </div>
494
- <div class="pf-v6-c-card">
495
- <div class="pf-v6-c-card__body">This is a card</div>
496
- </div>
497
- <div class="pf-v6-c-card">
498
- <div class="pf-v6-c-card__body">This is a card</div>
499
- </div>
500
- <div class="pf-v6-c-card">
501
- <div class="pf-v6-c-card__body">This is a card</div>
473
+ </section>
474
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
475
+ <div class="pf-v6-c-page__main-body">
476
+ <div class="pf-v6-c-content">
477
+ <h1>Main title</h1>
478
+ <p>This is a full page demo.</p>
502
479
  </div>
503
- <div class="pf-v6-c-card">
504
- <div class="pf-v6-c-card__body">This is a card</div>
505
- </div>
506
- <div class="pf-v6-c-card">
507
- <div class="pf-v6-c-card__body">This is a card</div>
508
- </div>
509
- <div class="pf-v6-c-card">
510
- <div class="pf-v6-c-card__body">This is a card</div>
480
+ </div>
481
+ </section>
482
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
483
+ <div class="pf-v6-c-page__main-body">
484
+ <div class="pf-v6-l-gallery pf-m-gutter">
485
+ <div class="pf-v6-c-card">
486
+ <div class="pf-v6-c-card__body">This is a card</div>
487
+ </div>
488
+ <div class="pf-v6-c-card">
489
+ <div class="pf-v6-c-card__body">This is a card</div>
490
+ </div>
491
+ <div class="pf-v6-c-card">
492
+ <div class="pf-v6-c-card__body">This is a card</div>
493
+ </div>
494
+ <div class="pf-v6-c-card">
495
+ <div class="pf-v6-c-card__body">This is a card</div>
496
+ </div>
497
+ <div class="pf-v6-c-card">
498
+ <div class="pf-v6-c-card__body">This is a card</div>
499
+ </div>
500
+ <div class="pf-v6-c-card">
501
+ <div class="pf-v6-c-card__body">This is a card</div>
502
+ </div>
503
+ <div class="pf-v6-c-card">
504
+ <div class="pf-v6-c-card__body">This is a card</div>
505
+ </div>
506
+ <div class="pf-v6-c-card">
507
+ <div class="pf-v6-c-card__body">This is a card</div>
508
+ </div>
509
+ <div class="pf-v6-c-card">
510
+ <div class="pf-v6-c-card__body">This is a card</div>
511
+ </div>
512
+ <div class="pf-v6-c-card">
513
+ <div class="pf-v6-c-card__body">This is a card</div>
514
+ </div>
511
515
  </div>
512
516
  </div>
513
- </div>
514
- </section>
515
- </main>
517
+ </section>
518
+ </main>
519
+ </div>
516
520
  </div>
517
521
 
518
522
  ```
@@ -735,92 +739,94 @@ wrapperTag: div
735
739
  </nav>
736
740
  </div>
737
741
  </div>
738
- <main
739
- class="pf-v6-c-page__main"
740
- tabindex="-1"
741
- id="main-content-masthead-toolbar-filters-example"
742
- >
743
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
744
- <div class="pf-v6-c-page__main-body">
745
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
746
- <ol class="pf-v6-c-breadcrumb__list" role="list">
747
- <li class="pf-v6-c-breadcrumb__item">
748
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
749
- </li>
750
- <li class="pf-v6-c-breadcrumb__item">
751
- <span class="pf-v6-c-breadcrumb__item-divider">
752
- <i class="fas fa-angle-right" aria-hidden="true"></i>
753
- </span>
742
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
743
+ <main
744
+ class="pf-v6-c-page__main"
745
+ tabindex="-1"
746
+ id="main-content-masthead-toolbar-filters-example"
747
+ >
748
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
749
+ <div class="pf-v6-c-page__main-body">
750
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
751
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
752
+ <li class="pf-v6-c-breadcrumb__item">
753
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
754
+ </li>
755
+ <li class="pf-v6-c-breadcrumb__item">
756
+ <span class="pf-v6-c-breadcrumb__item-divider">
757
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
758
+ </span>
754
759
 
755
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
756
- </li>
757
- <li class="pf-v6-c-breadcrumb__item">
758
- <span class="pf-v6-c-breadcrumb__item-divider">
759
- <i class="fas fa-angle-right" aria-hidden="true"></i>
760
- </span>
760
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
761
+ </li>
762
+ <li class="pf-v6-c-breadcrumb__item">
763
+ <span class="pf-v6-c-breadcrumb__item-divider">
764
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
765
+ </span>
761
766
 
762
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
763
- </li>
764
- <li class="pf-v6-c-breadcrumb__item">
765
- <span class="pf-v6-c-breadcrumb__item-divider">
766
- <i class="fas fa-angle-right" aria-hidden="true"></i>
767
- </span>
767
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
768
+ </li>
769
+ <li class="pf-v6-c-breadcrumb__item">
770
+ <span class="pf-v6-c-breadcrumb__item-divider">
771
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
772
+ </span>
768
773
 
769
- <a
770
- href="#"
771
- class="pf-v6-c-breadcrumb__link pf-m-current"
772
- aria-current="page"
773
- >Section landing</a>
774
- </li>
775
- </ol>
776
- </nav>
777
- </div>
778
- </section>
779
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
780
- <div class="pf-v6-c-page__main-body">
781
- <div class="pf-v6-c-content">
782
- <h1>Main title</h1>
783
- <p>This is a full page demo.</p>
774
+ <a
775
+ href="#"
776
+ class="pf-v6-c-breadcrumb__link pf-m-current"
777
+ aria-current="page"
778
+ >Section landing</a>
779
+ </li>
780
+ </ol>
781
+ </nav>
784
782
  </div>
785
- </div>
786
- </section>
787
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
788
- <div class="pf-v6-c-page__main-body">
789
- <div class="pf-v6-l-gallery pf-m-gutter">
790
- <div class="pf-v6-c-card">
791
- <div class="pf-v6-c-card__body">This is a card</div>
792
- </div>
793
- <div class="pf-v6-c-card">
794
- <div class="pf-v6-c-card__body">This is a card</div>
783
+ </section>
784
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
785
+ <div class="pf-v6-c-page__main-body">
786
+ <div class="pf-v6-c-content">
787
+ <h1>Main title</h1>
788
+ <p>This is a full page demo.</p>
795
789
  </div>
796
- <div class="pf-v6-c-card">
797
- <div class="pf-v6-c-card__body">This is a card</div>
798
- </div>
799
- <div class="pf-v6-c-card">
800
- <div class="pf-v6-c-card__body">This is a card</div>
801
- </div>
802
- <div class="pf-v6-c-card">
803
- <div class="pf-v6-c-card__body">This is a card</div>
804
- </div>
805
- <div class="pf-v6-c-card">
806
- <div class="pf-v6-c-card__body">This is a card</div>
807
- </div>
808
- <div class="pf-v6-c-card">
809
- <div class="pf-v6-c-card__body">This is a card</div>
810
- </div>
811
- <div class="pf-v6-c-card">
812
- <div class="pf-v6-c-card__body">This is a card</div>
813
- </div>
814
- <div class="pf-v6-c-card">
815
- <div class="pf-v6-c-card__body">This is a card</div>
816
- </div>
817
- <div class="pf-v6-c-card">
818
- <div class="pf-v6-c-card__body">This is a card</div>
790
+ </div>
791
+ </section>
792
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
793
+ <div class="pf-v6-c-page__main-body">
794
+ <div class="pf-v6-l-gallery pf-m-gutter">
795
+ <div class="pf-v6-c-card">
796
+ <div class="pf-v6-c-card__body">This is a card</div>
797
+ </div>
798
+ <div class="pf-v6-c-card">
799
+ <div class="pf-v6-c-card__body">This is a card</div>
800
+ </div>
801
+ <div class="pf-v6-c-card">
802
+ <div class="pf-v6-c-card__body">This is a card</div>
803
+ </div>
804
+ <div class="pf-v6-c-card">
805
+ <div class="pf-v6-c-card__body">This is a card</div>
806
+ </div>
807
+ <div class="pf-v6-c-card">
808
+ <div class="pf-v6-c-card__body">This is a card</div>
809
+ </div>
810
+ <div class="pf-v6-c-card">
811
+ <div class="pf-v6-c-card__body">This is a card</div>
812
+ </div>
813
+ <div class="pf-v6-c-card">
814
+ <div class="pf-v6-c-card__body">This is a card</div>
815
+ </div>
816
+ <div class="pf-v6-c-card">
817
+ <div class="pf-v6-c-card__body">This is a card</div>
818
+ </div>
819
+ <div class="pf-v6-c-card">
820
+ <div class="pf-v6-c-card__body">This is a card</div>
821
+ </div>
822
+ <div class="pf-v6-c-card">
823
+ <div class="pf-v6-c-card__body">This is a card</div>
824
+ </div>
819
825
  </div>
820
826
  </div>
821
- </div>
822
- </section>
823
- </main>
827
+ </section>
828
+ </main>
829
+ </div>
824
830
  </div>
825
831
 
826
832
  ```
@@ -1043,92 +1049,94 @@ wrapperTag: div
1043
1049
  </nav>
1044
1050
  </div>
1045
1051
  </div>
1046
- <main
1047
- class="pf-v6-c-page__main"
1048
- tabindex="-1"
1049
- id="main-content-masthead-toggle-group-filters-example"
1050
- >
1051
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1052
- <div class="pf-v6-c-page__main-body">
1053
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1054
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1055
- <li class="pf-v6-c-breadcrumb__item">
1056
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1057
- </li>
1058
- <li class="pf-v6-c-breadcrumb__item">
1059
- <span class="pf-v6-c-breadcrumb__item-divider">
1060
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1061
- </span>
1052
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1053
+ <main
1054
+ class="pf-v6-c-page__main"
1055
+ tabindex="-1"
1056
+ id="main-content-masthead-toggle-group-filters-example"
1057
+ >
1058
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1059
+ <div class="pf-v6-c-page__main-body">
1060
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1061
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1062
+ <li class="pf-v6-c-breadcrumb__item">
1063
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1064
+ </li>
1065
+ <li class="pf-v6-c-breadcrumb__item">
1066
+ <span class="pf-v6-c-breadcrumb__item-divider">
1067
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1068
+ </span>
1062
1069
 
1063
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1064
- </li>
1065
- <li class="pf-v6-c-breadcrumb__item">
1066
- <span class="pf-v6-c-breadcrumb__item-divider">
1067
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1068
- </span>
1070
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1071
+ </li>
1072
+ <li class="pf-v6-c-breadcrumb__item">
1073
+ <span class="pf-v6-c-breadcrumb__item-divider">
1074
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1075
+ </span>
1069
1076
 
1070
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1071
- </li>
1072
- <li class="pf-v6-c-breadcrumb__item">
1073
- <span class="pf-v6-c-breadcrumb__item-divider">
1074
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1075
- </span>
1077
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1078
+ </li>
1079
+ <li class="pf-v6-c-breadcrumb__item">
1080
+ <span class="pf-v6-c-breadcrumb__item-divider">
1081
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1082
+ </span>
1076
1083
 
1077
- <a
1078
- href="#"
1079
- class="pf-v6-c-breadcrumb__link pf-m-current"
1080
- aria-current="page"
1081
- >Section landing</a>
1082
- </li>
1083
- </ol>
1084
- </nav>
1085
- </div>
1086
- </section>
1087
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1088
- <div class="pf-v6-c-page__main-body">
1089
- <div class="pf-v6-c-content">
1090
- <h1>Main title</h1>
1091
- <p>This is a full page demo.</p>
1084
+ <a
1085
+ href="#"
1086
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1087
+ aria-current="page"
1088
+ >Section landing</a>
1089
+ </li>
1090
+ </ol>
1091
+ </nav>
1092
1092
  </div>
1093
- </div>
1094
- </section>
1095
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1096
- <div class="pf-v6-c-page__main-body">
1097
- <div class="pf-v6-l-gallery pf-m-gutter">
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>
1107
- <div class="pf-v6-c-card">
1108
- <div class="pf-v6-c-card__body">This is a card</div>
1109
- </div>
1110
- <div class="pf-v6-c-card">
1111
- <div class="pf-v6-c-card__body">This is a card</div>
1112
- </div>
1113
- <div class="pf-v6-c-card">
1114
- <div class="pf-v6-c-card__body">This is a card</div>
1093
+ </section>
1094
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1095
+ <div class="pf-v6-c-page__main-body">
1096
+ <div class="pf-v6-c-content">
1097
+ <h1>Main title</h1>
1098
+ <p>This is a full page demo.</p>
1115
1099
  </div>
1116
- <div class="pf-v6-c-card">
1117
- <div class="pf-v6-c-card__body">This is a card</div>
1118
- </div>
1119
- <div class="pf-v6-c-card">
1120
- <div class="pf-v6-c-card__body">This is a card</div>
1121
- </div>
1122
- <div class="pf-v6-c-card">
1123
- <div class="pf-v6-c-card__body">This is a card</div>
1124
- </div>
1125
- <div class="pf-v6-c-card">
1126
- <div class="pf-v6-c-card__body">This is a card</div>
1100
+ </div>
1101
+ </section>
1102
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1103
+ <div class="pf-v6-c-page__main-body">
1104
+ <div class="pf-v6-l-gallery pf-m-gutter">
1105
+ <div class="pf-v6-c-card">
1106
+ <div class="pf-v6-c-card__body">This is a card</div>
1107
+ </div>
1108
+ <div class="pf-v6-c-card">
1109
+ <div class="pf-v6-c-card__body">This is a card</div>
1110
+ </div>
1111
+ <div class="pf-v6-c-card">
1112
+ <div class="pf-v6-c-card__body">This is a card</div>
1113
+ </div>
1114
+ <div class="pf-v6-c-card">
1115
+ <div class="pf-v6-c-card__body">This is a card</div>
1116
+ </div>
1117
+ <div class="pf-v6-c-card">
1118
+ <div class="pf-v6-c-card__body">This is a card</div>
1119
+ </div>
1120
+ <div class="pf-v6-c-card">
1121
+ <div class="pf-v6-c-card__body">This is a card</div>
1122
+ </div>
1123
+ <div class="pf-v6-c-card">
1124
+ <div class="pf-v6-c-card__body">This is a card</div>
1125
+ </div>
1126
+ <div class="pf-v6-c-card">
1127
+ <div class="pf-v6-c-card__body">This is a card</div>
1128
+ </div>
1129
+ <div class="pf-v6-c-card">
1130
+ <div class="pf-v6-c-card__body">This is a card</div>
1131
+ </div>
1132
+ <div class="pf-v6-c-card">
1133
+ <div class="pf-v6-c-card__body">This is a card</div>
1134
+ </div>
1127
1135
  </div>
1128
1136
  </div>
1129
- </div>
1130
- </section>
1131
- </main>
1137
+ </section>
1138
+ </main>
1139
+ </div>
1132
1140
  </div>
1133
1141
 
1134
1142
  ```
@@ -1288,92 +1296,94 @@ wrapperTag: div
1288
1296
  </nav>
1289
1297
  </div>
1290
1298
  </div>
1291
- <main
1292
- class="pf-v6-c-page__main"
1293
- tabindex="-1"
1294
- id="main-content-masthead-expandable-search-example"
1295
- >
1296
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1297
- <div class="pf-v6-c-page__main-body">
1298
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1299
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1300
- <li class="pf-v6-c-breadcrumb__item">
1301
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1302
- </li>
1303
- <li class="pf-v6-c-breadcrumb__item">
1304
- <span class="pf-v6-c-breadcrumb__item-divider">
1305
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1306
- </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-masthead-expandable-search-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>
1307
1316
 
1308
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1309
- </li>
1310
- <li class="pf-v6-c-breadcrumb__item">
1311
- <span class="pf-v6-c-breadcrumb__item-divider">
1312
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1313
- </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>
1314
1323
 
1315
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1316
- </li>
1317
- <li class="pf-v6-c-breadcrumb__item">
1318
- <span class="pf-v6-c-breadcrumb__item-divider">
1319
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1320
- </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>
1321
1330
 
1322
- <a
1323
- href="#"
1324
- class="pf-v6-c-breadcrumb__link pf-m-current"
1325
- aria-current="page"
1326
- >Section landing</a>
1327
- </li>
1328
- </ol>
1329
- </nav>
1330
- </div>
1331
- </section>
1332
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1333
- <div class="pf-v6-c-page__main-body">
1334
- <div class="pf-v6-c-content">
1335
- <h1>Main title</h1>
1336
- <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>
1337
1339
  </div>
1338
- </div>
1339
- </section>
1340
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1341
- <div class="pf-v6-c-page__main-body">
1342
- <div class="pf-v6-l-gallery pf-m-gutter">
1343
- <div class="pf-v6-c-card">
1344
- <div class="pf-v6-c-card__body">This is a card</div>
1345
- </div>
1346
- <div class="pf-v6-c-card">
1347
- <div class="pf-v6-c-card__body">This is a card</div>
1348
- </div>
1349
- <div class="pf-v6-c-card">
1350
- <div class="pf-v6-c-card__body">This is a card</div>
1351
- </div>
1352
- <div class="pf-v6-c-card">
1353
- <div class="pf-v6-c-card__body">This is a card</div>
1354
- </div>
1355
- <div class="pf-v6-c-card">
1356
- <div class="pf-v6-c-card__body">This is a card</div>
1357
- </div>
1358
- <div class="pf-v6-c-card">
1359
- <div class="pf-v6-c-card__body">This is a card</div>
1360
- </div>
1361
- <div class="pf-v6-c-card">
1362
- <div class="pf-v6-c-card__body">This is a card</div>
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>
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>
1369
1346
  </div>
1370
- <div class="pf-v6-c-card">
1371
- <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>
1372
1382
  </div>
1373
1383
  </div>
1374
- </div>
1375
- </section>
1376
- </main>
1384
+ </section>
1385
+ </main>
1386
+ </div>
1377
1387
  </div>
1378
1388
 
1379
1389
  ```
@@ -1551,92 +1561,94 @@ wrapperTag: div
1551
1561
  </nav>
1552
1562
  </div>
1553
1563
  </div>
1554
- <main
1555
- class="pf-v6-c-page__main"
1556
- tabindex="-1"
1557
- id="main-content-masthead-expandable-search-expanded-example"
1558
- >
1559
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1560
- <div class="pf-v6-c-page__main-body">
1561
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1562
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1563
- <li class="pf-v6-c-breadcrumb__item">
1564
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1565
- </li>
1566
- <li class="pf-v6-c-breadcrumb__item">
1567
- <span class="pf-v6-c-breadcrumb__item-divider">
1568
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1569
- </span>
1564
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1565
+ <main
1566
+ class="pf-v6-c-page__main"
1567
+ tabindex="-1"
1568
+ id="main-content-masthead-expandable-search-expanded-example"
1569
+ >
1570
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1571
+ <div class="pf-v6-c-page__main-body">
1572
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1573
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1574
+ <li class="pf-v6-c-breadcrumb__item">
1575
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1576
+ </li>
1577
+ <li class="pf-v6-c-breadcrumb__item">
1578
+ <span class="pf-v6-c-breadcrumb__item-divider">
1579
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1580
+ </span>
1570
1581
 
1571
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1572
- </li>
1573
- <li class="pf-v6-c-breadcrumb__item">
1574
- <span class="pf-v6-c-breadcrumb__item-divider">
1575
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1576
- </span>
1582
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1583
+ </li>
1584
+ <li class="pf-v6-c-breadcrumb__item">
1585
+ <span class="pf-v6-c-breadcrumb__item-divider">
1586
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1587
+ </span>
1577
1588
 
1578
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1579
- </li>
1580
- <li class="pf-v6-c-breadcrumb__item">
1581
- <span class="pf-v6-c-breadcrumb__item-divider">
1582
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1583
- </span>
1589
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1590
+ </li>
1591
+ <li class="pf-v6-c-breadcrumb__item">
1592
+ <span class="pf-v6-c-breadcrumb__item-divider">
1593
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1594
+ </span>
1584
1595
 
1585
- <a
1586
- href="#"
1587
- class="pf-v6-c-breadcrumb__link pf-m-current"
1588
- aria-current="page"
1589
- >Section landing</a>
1590
- </li>
1591
- </ol>
1592
- </nav>
1593
- </div>
1594
- </section>
1595
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1596
- <div class="pf-v6-c-page__main-body">
1597
- <div class="pf-v6-c-content">
1598
- <h1>Main title</h1>
1599
- <p>This is a full page demo.</p>
1596
+ <a
1597
+ href="#"
1598
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1599
+ aria-current="page"
1600
+ >Section landing</a>
1601
+ </li>
1602
+ </ol>
1603
+ </nav>
1600
1604
  </div>
1601
- </div>
1602
- </section>
1603
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1604
- <div class="pf-v6-c-page__main-body">
1605
- <div class="pf-v6-l-gallery pf-m-gutter">
1606
- <div class="pf-v6-c-card">
1607
- <div class="pf-v6-c-card__body">This is a card</div>
1608
- </div>
1609
- <div class="pf-v6-c-card">
1610
- <div class="pf-v6-c-card__body">This is a card</div>
1611
- </div>
1612
- <div class="pf-v6-c-card">
1613
- <div class="pf-v6-c-card__body">This is a card</div>
1614
- </div>
1615
- <div class="pf-v6-c-card">
1616
- <div class="pf-v6-c-card__body">This is a card</div>
1617
- </div>
1618
- <div class="pf-v6-c-card">
1619
- <div class="pf-v6-c-card__body">This is a card</div>
1620
- </div>
1621
- <div class="pf-v6-c-card">
1622
- <div class="pf-v6-c-card__body">This is a card</div>
1605
+ </section>
1606
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1607
+ <div class="pf-v6-c-page__main-body">
1608
+ <div class="pf-v6-c-content">
1609
+ <h1>Main title</h1>
1610
+ <p>This is a full page demo.</p>
1623
1611
  </div>
1624
- <div class="pf-v6-c-card">
1625
- <div class="pf-v6-c-card__body">This is a card</div>
1626
- </div>
1627
- <div class="pf-v6-c-card">
1628
- <div class="pf-v6-c-card__body">This is a card</div>
1629
- </div>
1630
- <div class="pf-v6-c-card">
1631
- <div class="pf-v6-c-card__body">This is a card</div>
1632
- </div>
1633
- <div class="pf-v6-c-card">
1634
- <div class="pf-v6-c-card__body">This is a card</div>
1612
+ </div>
1613
+ </section>
1614
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1615
+ <div class="pf-v6-c-page__main-body">
1616
+ <div class="pf-v6-l-gallery pf-m-gutter">
1617
+ <div class="pf-v6-c-card">
1618
+ <div class="pf-v6-c-card__body">This is a card</div>
1619
+ </div>
1620
+ <div class="pf-v6-c-card">
1621
+ <div class="pf-v6-c-card__body">This is a card</div>
1622
+ </div>
1623
+ <div class="pf-v6-c-card">
1624
+ <div class="pf-v6-c-card__body">This is a card</div>
1625
+ </div>
1626
+ <div class="pf-v6-c-card">
1627
+ <div class="pf-v6-c-card__body">This is a card</div>
1628
+ </div>
1629
+ <div class="pf-v6-c-card">
1630
+ <div class="pf-v6-c-card__body">This is a card</div>
1631
+ </div>
1632
+ <div class="pf-v6-c-card">
1633
+ <div class="pf-v6-c-card__body">This is a card</div>
1634
+ </div>
1635
+ <div class="pf-v6-c-card">
1636
+ <div class="pf-v6-c-card__body">This is a card</div>
1637
+ </div>
1638
+ <div class="pf-v6-c-card">
1639
+ <div class="pf-v6-c-card__body">This is a card</div>
1640
+ </div>
1641
+ <div class="pf-v6-c-card">
1642
+ <div class="pf-v6-c-card__body">This is a card</div>
1643
+ </div>
1644
+ <div class="pf-v6-c-card">
1645
+ <div class="pf-v6-c-card__body">This is a card</div>
1646
+ </div>
1635
1647
  </div>
1636
1648
  </div>
1637
- </div>
1638
- </section>
1639
- </main>
1649
+ </section>
1650
+ </main>
1651
+ </div>
1640
1652
  </div>
1641
1653
 
1642
1654
  ```
@@ -1867,92 +1879,94 @@ wrapperTag: div
1867
1879
  </nav>
1868
1880
  </div>
1869
1881
  </div>
1870
- <main
1871
- class="pf-v6-c-page__main"
1872
- tabindex="-1"
1873
- id="main-content-masthead-advanced-with-menu-example"
1874
- >
1875
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1876
- <div class="pf-v6-c-page__main-body">
1877
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1878
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1879
- <li class="pf-v6-c-breadcrumb__item">
1880
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1881
- </li>
1882
- <li class="pf-v6-c-breadcrumb__item">
1883
- <span class="pf-v6-c-breadcrumb__item-divider">
1884
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1885
- </span>
1882
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1883
+ <main
1884
+ class="pf-v6-c-page__main"
1885
+ tabindex="-1"
1886
+ id="main-content-masthead-advanced-with-menu-example"
1887
+ >
1888
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1889
+ <div class="pf-v6-c-page__main-body">
1890
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1891
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1892
+ <li class="pf-v6-c-breadcrumb__item">
1893
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1894
+ </li>
1895
+ <li class="pf-v6-c-breadcrumb__item">
1896
+ <span class="pf-v6-c-breadcrumb__item-divider">
1897
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1898
+ </span>
1886
1899
 
1887
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1888
- </li>
1889
- <li class="pf-v6-c-breadcrumb__item">
1890
- <span class="pf-v6-c-breadcrumb__item-divider">
1891
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1892
- </span>
1900
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1901
+ </li>
1902
+ <li class="pf-v6-c-breadcrumb__item">
1903
+ <span class="pf-v6-c-breadcrumb__item-divider">
1904
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1905
+ </span>
1893
1906
 
1894
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1895
- </li>
1896
- <li class="pf-v6-c-breadcrumb__item">
1897
- <span class="pf-v6-c-breadcrumb__item-divider">
1898
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1899
- </span>
1907
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1908
+ </li>
1909
+ <li class="pf-v6-c-breadcrumb__item">
1910
+ <span class="pf-v6-c-breadcrumb__item-divider">
1911
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1912
+ </span>
1900
1913
 
1901
- <a
1902
- href="#"
1903
- class="pf-v6-c-breadcrumb__link pf-m-current"
1904
- aria-current="page"
1905
- >Section landing</a>
1906
- </li>
1907
- </ol>
1908
- </nav>
1909
- </div>
1910
- </section>
1911
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1912
- <div class="pf-v6-c-page__main-body">
1913
- <div class="pf-v6-c-content">
1914
- <h1>Main title</h1>
1915
- <p>This is a full page demo.</p>
1914
+ <a
1915
+ href="#"
1916
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1917
+ aria-current="page"
1918
+ >Section landing</a>
1919
+ </li>
1920
+ </ol>
1921
+ </nav>
1916
1922
  </div>
1917
- </div>
1918
- </section>
1919
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1920
- <div class="pf-v6-c-page__main-body">
1921
- <div class="pf-v6-l-gallery pf-m-gutter">
1922
- <div class="pf-v6-c-card">
1923
- <div class="pf-v6-c-card__body">This is a card</div>
1923
+ </section>
1924
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1925
+ <div class="pf-v6-c-page__main-body">
1926
+ <div class="pf-v6-c-content">
1927
+ <h1>Main title</h1>
1928
+ <p>This is a full page demo.</p>
1924
1929
  </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>
1930
+ </div>
1931
+ </section>
1932
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1933
+ <div class="pf-v6-c-page__main-body">
1934
+ <div class="pf-v6-l-gallery pf-m-gutter">
1935
+ <div class="pf-v6-c-card">
1936
+ <div class="pf-v6-c-card__body">This is a card</div>
1937
+ </div>
1938
+ <div class="pf-v6-c-card">
1939
+ <div class="pf-v6-c-card__body">This is a card</div>
1940
+ </div>
1941
+ <div class="pf-v6-c-card">
1942
+ <div class="pf-v6-c-card__body">This is a card</div>
1943
+ </div>
1944
+ <div class="pf-v6-c-card">
1945
+ <div class="pf-v6-c-card__body">This is a card</div>
1946
+ </div>
1947
+ <div class="pf-v6-c-card">
1948
+ <div class="pf-v6-c-card__body">This is a card</div>
1949
+ </div>
1950
+ <div class="pf-v6-c-card">
1951
+ <div class="pf-v6-c-card__body">This is a card</div>
1952
+ </div>
1953
+ <div class="pf-v6-c-card">
1954
+ <div class="pf-v6-c-card__body">This is a card</div>
1955
+ </div>
1956
+ <div class="pf-v6-c-card">
1957
+ <div class="pf-v6-c-card__body">This is a card</div>
1958
+ </div>
1959
+ <div class="pf-v6-c-card">
1960
+ <div class="pf-v6-c-card__body">This is a card</div>
1961
+ </div>
1962
+ <div class="pf-v6-c-card">
1963
+ <div class="pf-v6-c-card__body">This is a card</div>
1964
+ </div>
1951
1965
  </div>
1952
1966
  </div>
1953
- </div>
1954
- </section>
1955
- </main>
1967
+ </section>
1968
+ </main>
1969
+ </div>
1956
1970
  </div>
1957
1971
 
1958
1972
  ```
@@ -2190,92 +2204,94 @@ wrapperTag: div
2190
2204
  </div>
2191
2205
  </div>
2192
2206
  </header>
2193
- <main
2194
- class="pf-v6-c-page__main"
2195
- tabindex="-1"
2196
- id="main-content-masthead-horizontal-nav"
2197
- >
2198
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2199
- <div class="pf-v6-c-page__main-body">
2200
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2201
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2202
- <li class="pf-v6-c-breadcrumb__item">
2203
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2204
- </li>
2205
- <li class="pf-v6-c-breadcrumb__item">
2206
- <span class="pf-v6-c-breadcrumb__item-divider">
2207
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2208
- </span>
2207
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2208
+ <main
2209
+ class="pf-v6-c-page__main"
2210
+ tabindex="-1"
2211
+ id="main-content-masthead-horizontal-nav"
2212
+ >
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>
2209
2224
 
2210
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2211
- </li>
2212
- <li class="pf-v6-c-breadcrumb__item">
2213
- <span class="pf-v6-c-breadcrumb__item-divider">
2214
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2215
- </span>
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>
2216
2231
 
2217
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2218
- </li>
2219
- <li class="pf-v6-c-breadcrumb__item">
2220
- <span class="pf-v6-c-breadcrumb__item-divider">
2221
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2222
- </span>
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>
2223
2238
 
2224
- <a
2225
- href="#"
2226
- class="pf-v6-c-breadcrumb__link pf-m-current"
2227
- aria-current="page"
2228
- >Section landing</a>
2229
- </li>
2230
- </ol>
2231
- </nav>
2232
- </div>
2233
- </section>
2234
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2235
- <div class="pf-v6-c-page__main-body">
2236
- <div class="pf-v6-c-content">
2237
- <h1>Main title</h1>
2238
- <p>This is a full page demo.</p>
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>
2239
2247
  </div>
2240
- </div>
2241
- </section>
2242
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2243
- <div class="pf-v6-c-page__main-body">
2244
- <div class="pf-v6-l-gallery pf-m-gutter">
2245
- <div class="pf-v6-c-card">
2246
- <div class="pf-v6-c-card__body">This is a card</div>
2247
- </div>
2248
- <div class="pf-v6-c-card">
2249
- <div class="pf-v6-c-card__body">This is a card</div>
2250
- </div>
2251
- <div class="pf-v6-c-card">
2252
- <div class="pf-v6-c-card__body">This is a card</div>
2253
- </div>
2254
- <div class="pf-v6-c-card">
2255
- <div class="pf-v6-c-card__body">This is a card</div>
2248
+ </section>
2249
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2250
+ <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>
2256
2254
  </div>
2257
- <div class="pf-v6-c-card">
2258
- <div class="pf-v6-c-card__body">This is a card</div>
2259
- </div>
2260
- <div class="pf-v6-c-card">
2261
- <div class="pf-v6-c-card__body">This is a card</div>
2262
- </div>
2263
- <div class="pf-v6-c-card">
2264
- <div class="pf-v6-c-card__body">This is a card</div>
2265
- </div>
2266
- <div class="pf-v6-c-card">
2267
- <div class="pf-v6-c-card__body">This is a card</div>
2268
- </div>
2269
- <div class="pf-v6-c-card">
2270
- <div class="pf-v6-c-card__body">This is a card</div>
2271
- </div>
2272
- <div class="pf-v6-c-card">
2273
- <div class="pf-v6-c-card__body">This is a card</div>
2255
+ </div>
2256
+ </section>
2257
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2258
+ <div class="pf-v6-c-page__main-body">
2259
+ <div class="pf-v6-l-gallery pf-m-gutter">
2260
+ <div class="pf-v6-c-card">
2261
+ <div class="pf-v6-c-card__body">This is a card</div>
2262
+ </div>
2263
+ <div class="pf-v6-c-card">
2264
+ <div class="pf-v6-c-card__body">This is a card</div>
2265
+ </div>
2266
+ <div class="pf-v6-c-card">
2267
+ <div class="pf-v6-c-card__body">This is a card</div>
2268
+ </div>
2269
+ <div class="pf-v6-c-card">
2270
+ <div class="pf-v6-c-card__body">This is a card</div>
2271
+ </div>
2272
+ <div class="pf-v6-c-card">
2273
+ <div class="pf-v6-c-card__body">This is a card</div>
2274
+ </div>
2275
+ <div class="pf-v6-c-card">
2276
+ <div class="pf-v6-c-card__body">This is a card</div>
2277
+ </div>
2278
+ <div class="pf-v6-c-card">
2279
+ <div class="pf-v6-c-card__body">This is a card</div>
2280
+ </div>
2281
+ <div class="pf-v6-c-card">
2282
+ <div class="pf-v6-c-card__body">This is a card</div>
2283
+ </div>
2284
+ <div class="pf-v6-c-card">
2285
+ <div class="pf-v6-c-card__body">This is a card</div>
2286
+ </div>
2287
+ <div class="pf-v6-c-card">
2288
+ <div class="pf-v6-c-card__body">This is a card</div>
2289
+ </div>
2274
2290
  </div>
2275
2291
  </div>
2276
- </div>
2277
- </section>
2278
- </main>
2292
+ </section>
2293
+ </main>
2294
+ </div>
2279
2295
  </div>
2280
2296
 
2281
2297
  ```
@@ -2503,92 +2519,94 @@ wrapperTag: div
2503
2519
  </nav>
2504
2520
  </div>
2505
2521
  </div>
2506
- <main
2507
- class="pf-v6-c-page__main"
2508
- tabindex="-1"
2509
- id="main-content-masthead-toggle-group-filters-expanded-mobile-example"
2510
- >
2511
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2512
- <div class="pf-v6-c-page__main-body">
2513
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2514
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2515
- <li class="pf-v6-c-breadcrumb__item">
2516
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2517
- </li>
2518
- <li class="pf-v6-c-breadcrumb__item">
2519
- <span class="pf-v6-c-breadcrumb__item-divider">
2520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2521
- </span>
2522
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2523
+ <main
2524
+ class="pf-v6-c-page__main"
2525
+ tabindex="-1"
2526
+ id="main-content-masthead-toggle-group-filters-expanded-mobile-example"
2527
+ >
2528
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2529
+ <div class="pf-v6-c-page__main-body">
2530
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2531
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2532
+ <li class="pf-v6-c-breadcrumb__item">
2533
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2534
+ </li>
2535
+ <li class="pf-v6-c-breadcrumb__item">
2536
+ <span class="pf-v6-c-breadcrumb__item-divider">
2537
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2538
+ </span>
2522
2539
 
2523
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2524
- </li>
2525
- <li class="pf-v6-c-breadcrumb__item">
2526
- <span class="pf-v6-c-breadcrumb__item-divider">
2527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2528
- </span>
2540
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2541
+ </li>
2542
+ <li class="pf-v6-c-breadcrumb__item">
2543
+ <span class="pf-v6-c-breadcrumb__item-divider">
2544
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2545
+ </span>
2529
2546
 
2530
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2531
- </li>
2532
- <li class="pf-v6-c-breadcrumb__item">
2533
- <span class="pf-v6-c-breadcrumb__item-divider">
2534
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2535
- </span>
2547
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2548
+ </li>
2549
+ <li class="pf-v6-c-breadcrumb__item">
2550
+ <span class="pf-v6-c-breadcrumb__item-divider">
2551
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2552
+ </span>
2536
2553
 
2537
- <a
2538
- href="#"
2539
- class="pf-v6-c-breadcrumb__link pf-m-current"
2540
- aria-current="page"
2541
- >Section landing</a>
2542
- </li>
2543
- </ol>
2544
- </nav>
2545
- </div>
2546
- </section>
2547
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2548
- <div class="pf-v6-c-page__main-body">
2549
- <div class="pf-v6-c-content">
2550
- <h1>Main title</h1>
2551
- <p>This is a full page demo.</p>
2554
+ <a
2555
+ href="#"
2556
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2557
+ aria-current="page"
2558
+ >Section landing</a>
2559
+ </li>
2560
+ </ol>
2561
+ </nav>
2552
2562
  </div>
2553
- </div>
2554
- </section>
2555
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2556
- <div class="pf-v6-c-page__main-body">
2557
- <div class="pf-v6-l-gallery pf-m-gutter">
2558
- <div class="pf-v6-c-card">
2559
- <div class="pf-v6-c-card__body">This is a card</div>
2560
- </div>
2561
- <div class="pf-v6-c-card">
2562
- <div class="pf-v6-c-card__body">This is a card</div>
2563
- </div>
2564
- <div class="pf-v6-c-card">
2565
- <div class="pf-v6-c-card__body">This is a card</div>
2566
- </div>
2567
- <div class="pf-v6-c-card">
2568
- <div class="pf-v6-c-card__body">This is a card</div>
2569
- </div>
2570
- <div class="pf-v6-c-card">
2571
- <div class="pf-v6-c-card__body">This is a card</div>
2572
- </div>
2573
- <div class="pf-v6-c-card">
2574
- <div class="pf-v6-c-card__body">This is a card</div>
2575
- </div>
2576
- <div class="pf-v6-c-card">
2577
- <div class="pf-v6-c-card__body">This is a card</div>
2563
+ </section>
2564
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2565
+ <div class="pf-v6-c-page__main-body">
2566
+ <div class="pf-v6-c-content">
2567
+ <h1>Main title</h1>
2568
+ <p>This is a full page demo.</p>
2578
2569
  </div>
2579
- <div class="pf-v6-c-card">
2580
- <div class="pf-v6-c-card__body">This is a card</div>
2581
- </div>
2582
- <div class="pf-v6-c-card">
2583
- <div class="pf-v6-c-card__body">This is a card</div>
2584
- </div>
2585
- <div class="pf-v6-c-card">
2586
- <div class="pf-v6-c-card__body">This is a card</div>
2570
+ </div>
2571
+ </section>
2572
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2573
+ <div class="pf-v6-c-page__main-body">
2574
+ <div class="pf-v6-l-gallery pf-m-gutter">
2575
+ <div class="pf-v6-c-card">
2576
+ <div class="pf-v6-c-card__body">This is a card</div>
2577
+ </div>
2578
+ <div class="pf-v6-c-card">
2579
+ <div class="pf-v6-c-card__body">This is a card</div>
2580
+ </div>
2581
+ <div class="pf-v6-c-card">
2582
+ <div class="pf-v6-c-card__body">This is a card</div>
2583
+ </div>
2584
+ <div class="pf-v6-c-card">
2585
+ <div class="pf-v6-c-card__body">This is a card</div>
2586
+ </div>
2587
+ <div class="pf-v6-c-card">
2588
+ <div class="pf-v6-c-card__body">This is a card</div>
2589
+ </div>
2590
+ <div class="pf-v6-c-card">
2591
+ <div class="pf-v6-c-card__body">This is a card</div>
2592
+ </div>
2593
+ <div class="pf-v6-c-card">
2594
+ <div class="pf-v6-c-card__body">This is a card</div>
2595
+ </div>
2596
+ <div class="pf-v6-c-card">
2597
+ <div class="pf-v6-c-card__body">This is a card</div>
2598
+ </div>
2599
+ <div class="pf-v6-c-card">
2600
+ <div class="pf-v6-c-card__body">This is a card</div>
2601
+ </div>
2602
+ <div class="pf-v6-c-card">
2603
+ <div class="pf-v6-c-card__body">This is a card</div>
2604
+ </div>
2587
2605
  </div>
2588
2606
  </div>
2589
- </div>
2590
- </section>
2591
- </main>
2607
+ </section>
2608
+ </main>
2609
+ </div>
2592
2610
  </div>
2593
2611
 
2594
2612
  ```