@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/ContextSelector/examples/ContextSelector.md CHANGED
@@ -156,92 +156,94 @@ deprecated: true
156
156
  </nav>
157
157
  </div>
158
158
  </div>
159
- <main
160
- class="pf-v6-c-page__main"
161
- tabindex="-1"
162
- id="main-content-context-selector-in-masthead"
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>
159
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
160
+ <main
161
+ class="pf-v6-c-page__main"
162
+ tabindex="-1"
163
+ id="main-content-context-selector-in-masthead"
164
+ >
165
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
166
+ <div class="pf-v6-c-page__main-body">
167
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
168
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
169
+ <li class="pf-v6-c-breadcrumb__item">
170
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
171
+ </li>
172
+ <li class="pf-v6-c-breadcrumb__item">
173
+ <span class="pf-v6-c-breadcrumb__item-divider">
174
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
175
+ </span>
175
176
 
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>
177
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
178
+ </li>
179
+ <li class="pf-v6-c-breadcrumb__item">
180
+ <span class="pf-v6-c-breadcrumb__item-divider">
181
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
182
+ </span>
182
183
 
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>
184
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
185
+ </li>
186
+ <li class="pf-v6-c-breadcrumb__item">
187
+ <span class="pf-v6-c-breadcrumb__item-divider">
188
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
189
+ </span>
189
190
 
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>
198
- </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>
191
+ <a
192
+ href="#"
193
+ class="pf-v6-c-breadcrumb__link pf-m-current"
194
+ aria-current="page"
195
+ >Section landing</a>
196
+ </li>
197
+ </ol>
198
+ </nav>
205
199
  </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>
200
+ </section>
201
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
202
+ <div class="pf-v6-c-page__main-body">
203
+ <div class="pf-v6-c-content">
204
+ <h1>Main title</h1>
205
+ <p>This is a full page demo.</p>
228
206
  </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>
207
+ </div>
208
+ </section>
209
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
210
+ <div class="pf-v6-c-page__main-body">
211
+ <div class="pf-v6-l-gallery pf-m-gutter">
212
+ <div class="pf-v6-c-card">
213
+ <div class="pf-v6-c-card__body">This is a card</div>
214
+ </div>
215
+ <div class="pf-v6-c-card">
216
+ <div class="pf-v6-c-card__body">This is a card</div>
217
+ </div>
218
+ <div class="pf-v6-c-card">
219
+ <div class="pf-v6-c-card__body">This is a card</div>
220
+ </div>
221
+ <div class="pf-v6-c-card">
222
+ <div class="pf-v6-c-card__body">This is a card</div>
223
+ </div>
224
+ <div class="pf-v6-c-card">
225
+ <div class="pf-v6-c-card__body">This is a card</div>
226
+ </div>
227
+ <div class="pf-v6-c-card">
228
+ <div class="pf-v6-c-card__body">This is a card</div>
229
+ </div>
230
+ <div class="pf-v6-c-card">
231
+ <div class="pf-v6-c-card__body">This is a card</div>
232
+ </div>
233
+ <div class="pf-v6-c-card">
234
+ <div class="pf-v6-c-card__body">This is a card</div>
235
+ </div>
236
+ <div class="pf-v6-c-card">
237
+ <div class="pf-v6-c-card__body">This is a card</div>
238
+ </div>
239
+ <div class="pf-v6-c-card">
240
+ <div class="pf-v6-c-card__body">This is a card</div>
241
+ </div>
240
242
  </div>
241
243
  </div>
242
- </div>
243
- </section>
244
- </main>
244
+ </section>
245
+ </main>
246
+ </div>
245
247
  </div>
246
248
 
247
249
  ```
@@ -614,92 +616,94 @@ deprecated: true
614
616
  </nav>
615
617
  </div>
616
618
  </div>
617
- <main
618
- class="pf-v6-c-page__main"
619
- tabindex="-1"
620
- id="main-content-context-selector-in-sidebar-example"
621
- >
622
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
623
- <div class="pf-v6-c-page__main-body">
624
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
625
- <ol class="pf-v6-c-breadcrumb__list" role="list">
626
- <li class="pf-v6-c-breadcrumb__item">
627
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
628
- </li>
629
- <li class="pf-v6-c-breadcrumb__item">
630
- <span class="pf-v6-c-breadcrumb__item-divider">
631
- <i class="fas fa-angle-right" aria-hidden="true"></i>
632
- </span>
619
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
620
+ <main
621
+ class="pf-v6-c-page__main"
622
+ tabindex="-1"
623
+ id="main-content-context-selector-in-sidebar-example"
624
+ >
625
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
626
+ <div class="pf-v6-c-page__main-body">
627
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
628
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
629
+ <li class="pf-v6-c-breadcrumb__item">
630
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
631
+ </li>
632
+ <li class="pf-v6-c-breadcrumb__item">
633
+ <span class="pf-v6-c-breadcrumb__item-divider">
634
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
635
+ </span>
633
636
 
634
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
635
- </li>
636
- <li class="pf-v6-c-breadcrumb__item">
637
- <span class="pf-v6-c-breadcrumb__item-divider">
638
- <i class="fas fa-angle-right" aria-hidden="true"></i>
639
- </span>
637
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
638
+ </li>
639
+ <li class="pf-v6-c-breadcrumb__item">
640
+ <span class="pf-v6-c-breadcrumb__item-divider">
641
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
642
+ </span>
640
643
 
641
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
642
- </li>
643
- <li class="pf-v6-c-breadcrumb__item">
644
- <span class="pf-v6-c-breadcrumb__item-divider">
645
- <i class="fas fa-angle-right" aria-hidden="true"></i>
646
- </span>
644
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
645
+ </li>
646
+ <li class="pf-v6-c-breadcrumb__item">
647
+ <span class="pf-v6-c-breadcrumb__item-divider">
648
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
649
+ </span>
647
650
 
648
- <a
649
- href="#"
650
- class="pf-v6-c-breadcrumb__link pf-m-current"
651
- aria-current="page"
652
- >Section landing</a>
653
- </li>
654
- </ol>
655
- </nav>
656
- </div>
657
- </section>
658
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
659
- <div class="pf-v6-c-page__main-body">
660
- <div class="pf-v6-c-content">
661
- <h1>Main title</h1>
662
- <p>This is a full page demo.</p>
651
+ <a
652
+ href="#"
653
+ class="pf-v6-c-breadcrumb__link pf-m-current"
654
+ aria-current="page"
655
+ >Section landing</a>
656
+ </li>
657
+ </ol>
658
+ </nav>
663
659
  </div>
664
- </div>
665
- </section>
666
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
667
- <div class="pf-v6-c-page__main-body">
668
- <div class="pf-v6-l-gallery pf-m-gutter">
669
- <div class="pf-v6-c-card">
670
- <div class="pf-v6-c-card__body">This is a card</div>
671
- </div>
672
- <div class="pf-v6-c-card">
673
- <div class="pf-v6-c-card__body">This is a card</div>
674
- </div>
675
- <div class="pf-v6-c-card">
676
- <div class="pf-v6-c-card__body">This is a card</div>
677
- </div>
678
- <div class="pf-v6-c-card">
679
- <div class="pf-v6-c-card__body">This is a card</div>
680
- </div>
681
- <div class="pf-v6-c-card">
682
- <div class="pf-v6-c-card__body">This is a card</div>
683
- </div>
684
- <div class="pf-v6-c-card">
685
- <div class="pf-v6-c-card__body">This is a card</div>
660
+ </section>
661
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
662
+ <div class="pf-v6-c-page__main-body">
663
+ <div class="pf-v6-c-content">
664
+ <h1>Main title</h1>
665
+ <p>This is a full page demo.</p>
686
666
  </div>
687
- <div class="pf-v6-c-card">
688
- <div class="pf-v6-c-card__body">This is a card</div>
689
- </div>
690
- <div class="pf-v6-c-card">
691
- <div class="pf-v6-c-card__body">This is a card</div>
692
- </div>
693
- <div class="pf-v6-c-card">
694
- <div class="pf-v6-c-card__body">This is a card</div>
695
- </div>
696
- <div class="pf-v6-c-card">
697
- <div class="pf-v6-c-card__body">This is a card</div>
667
+ </div>
668
+ </section>
669
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
670
+ <div class="pf-v6-c-page__main-body">
671
+ <div class="pf-v6-l-gallery pf-m-gutter">
672
+ <div class="pf-v6-c-card">
673
+ <div class="pf-v6-c-card__body">This is a card</div>
674
+ </div>
675
+ <div class="pf-v6-c-card">
676
+ <div class="pf-v6-c-card__body">This is a card</div>
677
+ </div>
678
+ <div class="pf-v6-c-card">
679
+ <div class="pf-v6-c-card__body">This is a card</div>
680
+ </div>
681
+ <div class="pf-v6-c-card">
682
+ <div class="pf-v6-c-card__body">This is a card</div>
683
+ </div>
684
+ <div class="pf-v6-c-card">
685
+ <div class="pf-v6-c-card__body">This is a card</div>
686
+ </div>
687
+ <div class="pf-v6-c-card">
688
+ <div class="pf-v6-c-card__body">This is a card</div>
689
+ </div>
690
+ <div class="pf-v6-c-card">
691
+ <div class="pf-v6-c-card__body">This is a card</div>
692
+ </div>
693
+ <div class="pf-v6-c-card">
694
+ <div class="pf-v6-c-card__body">This is a card</div>
695
+ </div>
696
+ <div class="pf-v6-c-card">
697
+ <div class="pf-v6-c-card__body">This is a card</div>
698
+ </div>
699
+ <div class="pf-v6-c-card">
700
+ <div class="pf-v6-c-card__body">This is a card</div>
701
+ </div>
698
702
  </div>
699
703
  </div>
700
- </div>
701
- </section>
702
- </main>
704
+ </section>
705
+ </main>
706
+ </div>
703
707
  </div>
704
708
 
705
709
  ```
@@ -1074,92 +1078,94 @@ deprecated: true
1074
1078
  </nav>
1075
1079
  </div>
1076
1080
  </div>
1077
- <main
1078
- class="pf-v6-c-page__main"
1079
- tabindex="-1"
1080
- id="main-content-context-selector-in-sidebar-expanded-example"
1081
- >
1082
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1083
- <div class="pf-v6-c-page__main-body">
1084
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1085
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1086
- <li class="pf-v6-c-breadcrumb__item">
1087
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1088
- </li>
1089
- <li class="pf-v6-c-breadcrumb__item">
1090
- <span class="pf-v6-c-breadcrumb__item-divider">
1091
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1092
- </span>
1081
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1082
+ <main
1083
+ class="pf-v6-c-page__main"
1084
+ tabindex="-1"
1085
+ id="main-content-context-selector-in-sidebar-expanded-example"
1086
+ >
1087
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1088
+ <div class="pf-v6-c-page__main-body">
1089
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1090
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1091
+ <li class="pf-v6-c-breadcrumb__item">
1092
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1093
+ </li>
1094
+ <li class="pf-v6-c-breadcrumb__item">
1095
+ <span class="pf-v6-c-breadcrumb__item-divider">
1096
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1097
+ </span>
1093
1098
 
1094
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1095
- </li>
1096
- <li class="pf-v6-c-breadcrumb__item">
1097
- <span class="pf-v6-c-breadcrumb__item-divider">
1098
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1099
- </span>
1099
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1100
+ </li>
1101
+ <li class="pf-v6-c-breadcrumb__item">
1102
+ <span class="pf-v6-c-breadcrumb__item-divider">
1103
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1104
+ </span>
1100
1105
 
1101
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1102
- </li>
1103
- <li class="pf-v6-c-breadcrumb__item">
1104
- <span class="pf-v6-c-breadcrumb__item-divider">
1105
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1106
- </span>
1106
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1107
+ </li>
1108
+ <li class="pf-v6-c-breadcrumb__item">
1109
+ <span class="pf-v6-c-breadcrumb__item-divider">
1110
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1111
+ </span>
1107
1112
 
1108
- <a
1109
- href="#"
1110
- class="pf-v6-c-breadcrumb__link pf-m-current"
1111
- aria-current="page"
1112
- >Section landing</a>
1113
- </li>
1114
- </ol>
1115
- </nav>
1116
- </div>
1117
- </section>
1118
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1119
- <div class="pf-v6-c-page__main-body">
1120
- <div class="pf-v6-c-content">
1121
- <h1>Main title</h1>
1122
- <p>This is a full page demo.</p>
1113
+ <a
1114
+ href="#"
1115
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1116
+ aria-current="page"
1117
+ >Section landing</a>
1118
+ </li>
1119
+ </ol>
1120
+ </nav>
1123
1121
  </div>
1124
- </div>
1125
- </section>
1126
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1127
- <div class="pf-v6-c-page__main-body">
1128
- <div class="pf-v6-l-gallery pf-m-gutter">
1129
- <div class="pf-v6-c-card">
1130
- <div class="pf-v6-c-card__body">This is a card</div>
1122
+ </section>
1123
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1124
+ <div class="pf-v6-c-page__main-body">
1125
+ <div class="pf-v6-c-content">
1126
+ <h1>Main title</h1>
1127
+ <p>This is a full page demo.</p>
1131
1128
  </div>
1132
- <div class="pf-v6-c-card">
1133
- <div class="pf-v6-c-card__body">This is a card</div>
1134
- </div>
1135
- <div class="pf-v6-c-card">
1136
- <div class="pf-v6-c-card__body">This is a card</div>
1137
- </div>
1138
- <div class="pf-v6-c-card">
1139
- <div class="pf-v6-c-card__body">This is a card</div>
1140
- </div>
1141
- <div class="pf-v6-c-card">
1142
- <div class="pf-v6-c-card__body">This is a card</div>
1143
- </div>
1144
- <div class="pf-v6-c-card">
1145
- <div class="pf-v6-c-card__body">This is a card</div>
1146
- </div>
1147
- <div class="pf-v6-c-card">
1148
- <div class="pf-v6-c-card__body">This is a card</div>
1149
- </div>
1150
- <div class="pf-v6-c-card">
1151
- <div class="pf-v6-c-card__body">This is a card</div>
1152
- </div>
1153
- <div class="pf-v6-c-card">
1154
- <div class="pf-v6-c-card__body">This is a card</div>
1155
- </div>
1156
- <div class="pf-v6-c-card">
1157
- <div class="pf-v6-c-card__body">This is a card</div>
1129
+ </div>
1130
+ </section>
1131
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1132
+ <div class="pf-v6-c-page__main-body">
1133
+ <div class="pf-v6-l-gallery pf-m-gutter">
1134
+ <div class="pf-v6-c-card">
1135
+ <div class="pf-v6-c-card__body">This is a card</div>
1136
+ </div>
1137
+ <div class="pf-v6-c-card">
1138
+ <div class="pf-v6-c-card__body">This is a card</div>
1139
+ </div>
1140
+ <div class="pf-v6-c-card">
1141
+ <div class="pf-v6-c-card__body">This is a card</div>
1142
+ </div>
1143
+ <div class="pf-v6-c-card">
1144
+ <div class="pf-v6-c-card__body">This is a card</div>
1145
+ </div>
1146
+ <div class="pf-v6-c-card">
1147
+ <div class="pf-v6-c-card__body">This is a card</div>
1148
+ </div>
1149
+ <div class="pf-v6-c-card">
1150
+ <div class="pf-v6-c-card__body">This is a card</div>
1151
+ </div>
1152
+ <div class="pf-v6-c-card">
1153
+ <div class="pf-v6-c-card__body">This is a card</div>
1154
+ </div>
1155
+ <div class="pf-v6-c-card">
1156
+ <div class="pf-v6-c-card__body">This is a card</div>
1157
+ </div>
1158
+ <div class="pf-v6-c-card">
1159
+ <div class="pf-v6-c-card__body">This is a card</div>
1160
+ </div>
1161
+ <div class="pf-v6-c-card">
1162
+ <div class="pf-v6-c-card__body">This is a card</div>
1163
+ </div>
1158
1164
  </div>
1159
1165
  </div>
1160
- </div>
1161
- </section>
1162
- </main>
1166
+ </section>
1167
+ </main>
1168
+ </div>
1163
1169
  </div>
1164
1170
 
1165
1171
  ```
@@ -1390,323 +1396,330 @@ deprecated: true
1390
1396
  </nav>
1391
1397
  </div>
1392
1398
  </div>
1393
- <main
1394
- class="pf-v6-c-page__main"
1395
- tabindex="-1"
1396
- id="main-content-context-selector-in-page-content-example"
1397
- >
1398
- <section
1399
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
1399
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1400
+ <main
1401
+ class="pf-v6-c-page__main"
1402
+ tabindex="-1"
1403
+ id="main-content-context-selector-in-page-content-example"
1400
1404
  >
1401
- <div class="pf-v6-c-page__main-body">
1402
- <div
1403
- class="pf-v6-c-toolbar pf-m-inset-none"
1404
- id="toolbar-simple-example"
1405
- >
1406
- <div class="pf-v6-c-toolbar__content">
1407
- <div class="pf-v6-c-toolbar__content-section">
1408
- <div class="pf-v6-c-toolbar__item">
1409
- <div
1410
- class="pf-v6-c-context-selector pf-m-page-insets pf-m-width-auto"
1411
- style="--pf-v5-c-context-selector--Width: 270px;"
1412
- >
1413
- <span
1414
- id="context-selector-in-page-content-example-context-selector-label"
1415
- hidden
1416
- >Selected project:</span>
1417
- <button
1418
- class="pf-v6-c-context-selector__toggle pf-m-text pf-m-plain"
1419
- aria-expanded="false"
1420
- id="context-selector-in-page-content-example-context-selector-toggle"
1421
- aria-labelledby="context-selector-in-page-content-example-context-selector-label context-selector-in-page-content-example-context-selector-toggle"
1405
+ <section
1406
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
1407
+ >
1408
+ <div class="pf-v6-c-page__main-body">
1409
+ <div
1410
+ class="pf-v6-c-toolbar pf-m-inset-none"
1411
+ id="toolbar-simple-example"
1412
+ >
1413
+ <div class="pf-v6-c-toolbar__content">
1414
+ <div class="pf-v6-c-toolbar__content-section">
1415
+ <div class="pf-v6-c-toolbar__item">
1416
+ <div
1417
+ class="pf-v6-c-context-selector pf-m-page-insets pf-m-width-auto"
1418
+ style="--pf-v5-c-context-selector--Width: 270px;"
1422
1419
  >
1423
1420
  <span
1424
- class="pf-v6-c-context-selector__toggle-text"
1425
- >Project: openshift-apple1</span>
1426
- <span class="pf-v6-c-context-selector__toggle-icon">
1427
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1428
- </span>
1429
- </button>
1430
- <div class="pf-v6-c-context-selector__menu" hidden>
1431
- <div class="pf-v6-c-context-selector__menu-search">
1432
- <div class="pf-v6-c-text-input-group">
1433
- <div class="pf-v6-c-text-input-group__main pf-m-icon">
1434
- <span class="pf-v6-c-text-input-group__text">
1435
- <span class="pf-v6-c-text-input-group__icon">
1436
- <i class="fas fa-fw fa-search"></i>
1421
+ id="context-selector-in-page-content-example-context-selector-label"
1422
+ hidden
1423
+ >Selected project:</span>
1424
+ <button
1425
+ class="pf-v6-c-context-selector__toggle pf-m-text pf-m-plain"
1426
+ aria-expanded="false"
1427
+ id="context-selector-in-page-content-example-context-selector-toggle"
1428
+ aria-labelledby="context-selector-in-page-content-example-context-selector-label context-selector-in-page-content-example-context-selector-toggle"
1429
+ >
1430
+ <span
1431
+ class="pf-v6-c-context-selector__toggle-text"
1432
+ >Project: openshift-apple1</span>
1433
+ <span class="pf-v6-c-context-selector__toggle-icon">
1434
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1435
+ </span>
1436
+ </button>
1437
+ <div class="pf-v6-c-context-selector__menu" hidden>
1438
+ <div class="pf-v6-c-context-selector__menu-search">
1439
+ <div class="pf-v6-c-text-input-group">
1440
+ <div class="pf-v6-c-text-input-group__main pf-m-icon">
1441
+ <span class="pf-v6-c-text-input-group__text">
1442
+ <span class="pf-v6-c-text-input-group__icon">
1443
+ <i class="fas fa-fw fa-search"></i>
1444
+ </span>
1445
+ <input
1446
+ class="pf-v6-c-text-input-group__text-input"
1447
+ type="text"
1448
+ placeholder="Search"
1449
+ value
1450
+ aria-label="Search input"
1451
+ />
1437
1452
  </span>
1438
- <input
1439
- class="pf-v6-c-text-input-group__text-input"
1440
- type="text"
1441
- placeholder="Search"
1442
- value
1443
- aria-label="Search input"
1444
- />
1445
- </span>
1453
+ </div>
1446
1454
  </div>
1447
1455
  </div>
1456
+ <ul
1457
+ class="pf-v6-c-context-selector__menu-list"
1458
+ role="menu"
1459
+ >
1460
+ <li role="none">
1461
+ <a
1462
+ class="pf-v6-c-context-selector__menu-list-item"
1463
+ href="#"
1464
+ role="menuitem"
1465
+ >Link</a>
1466
+ </li>
1467
+ <li role="none">
1468
+ <button
1469
+ class="pf-v6-c-context-selector__menu-list-item"
1470
+ type="button"
1471
+ role="menuitem"
1472
+ >Action</button>
1473
+ </li>
1474
+ <li role="none">
1475
+ <a
1476
+ class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
1477
+ href="#"
1478
+ aria-disabled="true"
1479
+ tabindex="-1"
1480
+ role="menuitem"
1481
+ >Disabled link</a>
1482
+ </li>
1483
+ <li role="none">
1484
+ <button
1485
+ class="pf-v6-c-context-selector__menu-list-item"
1486
+ type="button"
1487
+ disabled
1488
+ role="menuitem"
1489
+ >Disabled action</button>
1490
+ </li>
1491
+ <li role="none">
1492
+ <button
1493
+ class="pf-v6-c-context-selector__menu-list-item"
1494
+ type="button"
1495
+ role="menuitem"
1496
+ >My project</button>
1497
+ </li>
1498
+ <li role="none">
1499
+ <button
1500
+ class="pf-v6-c-context-selector__menu-list-item"
1501
+ type="button"
1502
+ role="menuitem"
1503
+ >OpenShift cluster</button>
1504
+ </li>
1505
+ <li role="none">
1506
+ <button
1507
+ class="pf-v6-c-context-selector__menu-list-item"
1508
+ type="button"
1509
+ role="menuitem"
1510
+ >Production Ansible</button>
1511
+ </li>
1512
+ <li role="none">
1513
+ <button
1514
+ class="pf-v6-c-context-selector__menu-list-item"
1515
+ type="button"
1516
+ role="menuitem"
1517
+ >AWS</button>
1518
+ </li>
1519
+ <li role="none">
1520
+ <button
1521
+ class="pf-v6-c-context-selector__menu-list-item"
1522
+ type="button"
1523
+ role="menuitem"
1524
+ >Azure</button>
1525
+ </li>
1526
+ <li role="none">
1527
+ <button
1528
+ class="pf-v6-c-context-selector__menu-list-item"
1529
+ type="button"
1530
+ role="menuitem"
1531
+ >My project</button>
1532
+ </li>
1533
+ <li role="none">
1534
+ <button
1535
+ class="pf-v6-c-context-selector__menu-list-item"
1536
+ type="button"
1537
+ role="menuitem"
1538
+ >OpenShift cluster</button>
1539
+ </li>
1540
+ <li role="none">
1541
+ <button
1542
+ class="pf-v6-c-context-selector__menu-list-item"
1543
+ type="button"
1544
+ role="menuitem"
1545
+ >Production Ansible</button>
1546
+ </li>
1547
+ <li role="none">
1548
+ <button
1549
+ class="pf-v6-c-context-selector__menu-list-item"
1550
+ type="button"
1551
+ role="menuitem"
1552
+ >AWS</button>
1553
+ </li>
1554
+ <li role="none">
1555
+ <button
1556
+ class="pf-v6-c-context-selector__menu-list-item"
1557
+ type="button"
1558
+ role="menuitem"
1559
+ >Azure</button>
1560
+ </li>
1561
+ </ul>
1448
1562
  </div>
1449
- <ul class="pf-v6-c-context-selector__menu-list" role="menu">
1450
- <li role="none">
1451
- <a
1452
- class="pf-v6-c-context-selector__menu-list-item"
1453
- href="#"
1454
- role="menuitem"
1455
- >Link</a>
1456
- </li>
1457
- <li role="none">
1458
- <button
1459
- class="pf-v6-c-context-selector__menu-list-item"
1460
- type="button"
1461
- role="menuitem"
1462
- >Action</button>
1463
- </li>
1464
- <li role="none">
1465
- <a
1466
- class="pf-v6-c-context-selector__menu-list-item pf-m-disabled"
1467
- href="#"
1468
- aria-disabled="true"
1469
- tabindex="-1"
1470
- role="menuitem"
1471
- >Disabled link</a>
1472
- </li>
1473
- <li role="none">
1474
- <button
1475
- class="pf-v6-c-context-selector__menu-list-item"
1476
- type="button"
1477
- disabled
1478
- role="menuitem"
1479
- >Disabled action</button>
1480
- </li>
1481
- <li role="none">
1482
- <button
1483
- class="pf-v6-c-context-selector__menu-list-item"
1484
- type="button"
1485
- role="menuitem"
1486
- >My project</button>
1487
- </li>
1488
- <li role="none">
1489
- <button
1490
- class="pf-v6-c-context-selector__menu-list-item"
1491
- type="button"
1492
- role="menuitem"
1493
- >OpenShift cluster</button>
1494
- </li>
1495
- <li role="none">
1496
- <button
1497
- class="pf-v6-c-context-selector__menu-list-item"
1498
- type="button"
1499
- role="menuitem"
1500
- >Production Ansible</button>
1501
- </li>
1502
- <li role="none">
1503
- <button
1504
- class="pf-v6-c-context-selector__menu-list-item"
1505
- type="button"
1506
- role="menuitem"
1507
- >AWS</button>
1508
- </li>
1509
- <li role="none">
1510
- <button
1511
- class="pf-v6-c-context-selector__menu-list-item"
1512
- type="button"
1513
- role="menuitem"
1514
- >Azure</button>
1515
- </li>
1516
- <li role="none">
1563
+ </div>
1564
+ </div>
1565
+ <div class="pf-v6-c-toolbar__item">
1566
+ <div class="pf-v6-c-select">
1567
+ <span
1568
+ id="context-selector-in-page-content-example-select-label"
1569
+ hidden
1570
+ >Choose one</span>
1571
+
1572
+ <button
1573
+ class="pf-v6-c-select__toggle pf-m-plain"
1574
+ type="button"
1575
+ id="context-selector-in-page-content-example-select-toggle"
1576
+ aria-haspopup="true"
1577
+ aria-expanded="false"
1578
+ aria-labelledby="context-selector-in-page-content-example-select-label context-selector-in-page-content-example-select-toggle"
1579
+ >
1580
+ <div class="pf-v6-c-select__toggle-wrapper">
1581
+ <span
1582
+ class="pf-v6-c-select__toggle-text"
1583
+ >All applications</span>
1584
+ </div>
1585
+ <span class="pf-v6-c-select__toggle-arrow">
1586
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1587
+ </span>
1588
+ </button>
1589
+
1590
+ <ul
1591
+ class="pf-v6-c-select__menu"
1592
+ role="listbox"
1593
+ aria-labelledby="context-selector-in-page-content-example-select-label"
1594
+ hidden
1595
+ >
1596
+ <li role="presentation">
1517
1597
  <button
1518
- class="pf-v6-c-context-selector__menu-list-item"
1519
- type="button"
1520
- role="menuitem"
1521
- >My project</button>
1598
+ class="pf-v6-c-select__menu-item"
1599
+ role="option"
1600
+ >Running</button>
1522
1601
  </li>
1523
- <li role="none">
1602
+ <li role="presentation">
1524
1603
  <button
1525
- class="pf-v6-c-context-selector__menu-list-item"
1526
- type="button"
1527
- role="menuitem"
1528
- >OpenShift cluster</button>
1604
+ class="pf-v6-c-select__menu-item pf-m-selected"
1605
+ role="option"
1606
+ aria-selected="true"
1607
+ >
1608
+ Stopped
1609
+ <span class="pf-v6-c-select__menu-item-icon">
1610
+ <i class="fas fa-check" aria-hidden="true"></i>
1611
+ </span>
1612
+ </button>
1529
1613
  </li>
1530
- <li role="none">
1614
+ <li role="presentation">
1531
1615
  <button
1532
- class="pf-v6-c-context-selector__menu-list-item"
1533
- type="button"
1534
- role="menuitem"
1535
- >Production Ansible</button>
1616
+ class="pf-v6-c-select__menu-item"
1617
+ role="option"
1618
+ >Down</button>
1536
1619
  </li>
1537
- <li role="none">
1620
+ <li role="presentation">
1538
1621
  <button
1539
- class="pf-v6-c-context-selector__menu-list-item"
1540
- type="button"
1541
- role="menuitem"
1542
- >AWS</button>
1622
+ class="pf-v6-c-select__menu-item"
1623
+ role="option"
1624
+ >Degraded</button>
1543
1625
  </li>
1544
- <li role="none">
1626
+ <li role="presentation">
1545
1627
  <button
1546
- class="pf-v6-c-context-selector__menu-list-item"
1547
- type="button"
1548
- role="menuitem"
1549
- >Azure</button>
1628
+ class="pf-v6-c-select__menu-item"
1629
+ role="option"
1630
+ >Needs maintenance</button>
1550
1631
  </li>
1551
1632
  </ul>
1552
1633
  </div>
1553
1634
  </div>
1554
1635
  </div>
1555
- <div class="pf-v6-c-toolbar__item">
1556
- <div class="pf-v6-c-select">
1557
- <span
1558
- id="context-selector-in-page-content-example-select-label"
1559
- hidden
1560
- >Choose one</span>
1561
-
1562
- <button
1563
- class="pf-v6-c-select__toggle pf-m-plain"
1564
- type="button"
1565
- id="context-selector-in-page-content-example-select-toggle"
1566
- aria-haspopup="true"
1567
- aria-expanded="false"
1568
- aria-labelledby="context-selector-in-page-content-example-select-label context-selector-in-page-content-example-select-toggle"
1569
- >
1570
- <div class="pf-v6-c-select__toggle-wrapper">
1571
- <span class="pf-v6-c-select__toggle-text">All applications</span>
1572
- </div>
1573
- <span class="pf-v6-c-select__toggle-arrow">
1574
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1575
- </span>
1576
- </button>
1577
-
1578
- <ul
1579
- class="pf-v6-c-select__menu"
1580
- role="listbox"
1581
- aria-labelledby="context-selector-in-page-content-example-select-label"
1582
- hidden
1583
- >
1584
- <li role="presentation">
1585
- <button
1586
- class="pf-v6-c-select__menu-item"
1587
- role="option"
1588
- >Running</button>
1589
- </li>
1590
- <li role="presentation">
1591
- <button
1592
- class="pf-v6-c-select__menu-item pf-m-selected"
1593
- role="option"
1594
- aria-selected="true"
1595
- >
1596
- Stopped
1597
- <span class="pf-v6-c-select__menu-item-icon">
1598
- <i class="fas fa-check" aria-hidden="true"></i>
1599
- </span>
1600
- </button>
1601
- </li>
1602
- <li role="presentation">
1603
- <button
1604
- class="pf-v6-c-select__menu-item"
1605
- role="option"
1606
- >Down</button>
1607
- </li>
1608
- <li role="presentation">
1609
- <button
1610
- class="pf-v6-c-select__menu-item"
1611
- role="option"
1612
- >Degraded</button>
1613
- </li>
1614
- <li role="presentation">
1615
- <button
1616
- class="pf-v6-c-select__menu-item"
1617
- role="option"
1618
- >Needs maintenance</button>
1619
- </li>
1620
- </ul>
1621
- </div>
1622
- </div>
1623
1636
  </div>
1624
1637
  </div>
1625
1638
  </div>
1626
- </div>
1627
- </section>
1628
- <hr class="pf-v6-c-divider" />
1629
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1630
- <div class="pf-v6-c-page__main-body">
1631
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1632
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1633
- <li class="pf-v6-c-breadcrumb__item">
1634
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1635
- </li>
1636
- <li class="pf-v6-c-breadcrumb__item">
1637
- <span class="pf-v6-c-breadcrumb__item-divider">
1638
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1639
- </span>
1639
+ </section>
1640
+ <hr class="pf-v6-c-divider" />
1641
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1642
+ <div class="pf-v6-c-page__main-body">
1643
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1644
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1645
+ <li class="pf-v6-c-breadcrumb__item">
1646
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1647
+ </li>
1648
+ <li class="pf-v6-c-breadcrumb__item">
1649
+ <span class="pf-v6-c-breadcrumb__item-divider">
1650
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1651
+ </span>
1640
1652
 
1641
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1642
- </li>
1643
- <li class="pf-v6-c-breadcrumb__item">
1644
- <span class="pf-v6-c-breadcrumb__item-divider">
1645
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1646
- </span>
1653
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</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>
1647
1659
 
1648
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1649
- </li>
1650
- <li class="pf-v6-c-breadcrumb__item">
1651
- <span class="pf-v6-c-breadcrumb__item-divider">
1652
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1653
- </span>
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>
1654
1666
 
1655
- <a
1656
- href="#"
1657
- class="pf-v6-c-breadcrumb__link pf-m-current"
1658
- aria-current="page"
1659
- >Section landing</a>
1660
- </li>
1661
- </ol>
1662
- </nav>
1663
- </div>
1664
- </section>
1665
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1666
- <div class="pf-v6-c-page__main-body">
1667
- <div class="pf-v6-c-content">
1668
- <h1>Main title</h1>
1669
- <p>This is a full page demo.</p>
1667
+ <a
1668
+ href="#"
1669
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1670
+ aria-current="page"
1671
+ >Section landing</a>
1672
+ </li>
1673
+ </ol>
1674
+ </nav>
1670
1675
  </div>
1671
- </div>
1672
- </section>
1673
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1674
- <div class="pf-v6-c-page__main-body">
1675
- <div class="pf-v6-l-gallery pf-m-gutter">
1676
- <div class="pf-v6-c-card">
1677
- <div class="pf-v6-c-card__body">This is a card</div>
1678
- </div>
1679
- <div class="pf-v6-c-card">
1680
- <div class="pf-v6-c-card__body">This is a card</div>
1681
- </div>
1682
- <div class="pf-v6-c-card">
1683
- <div class="pf-v6-c-card__body">This is a card</div>
1684
- </div>
1685
- <div class="pf-v6-c-card">
1686
- <div class="pf-v6-c-card__body">This is a card</div>
1687
- </div>
1688
- <div class="pf-v6-c-card">
1689
- <div class="pf-v6-c-card__body">This is a card</div>
1690
- </div>
1691
- <div class="pf-v6-c-card">
1692
- <div class="pf-v6-c-card__body">This is a card</div>
1676
+ </section>
1677
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1678
+ <div class="pf-v6-c-page__main-body">
1679
+ <div class="pf-v6-c-content">
1680
+ <h1>Main title</h1>
1681
+ <p>This is a full page demo.</p>
1693
1682
  </div>
1694
- <div class="pf-v6-c-card">
1695
- <div class="pf-v6-c-card__body">This is a card</div>
1696
- </div>
1697
- <div class="pf-v6-c-card">
1698
- <div class="pf-v6-c-card__body">This is a card</div>
1699
- </div>
1700
- <div class="pf-v6-c-card">
1701
- <div class="pf-v6-c-card__body">This is a card</div>
1702
- </div>
1703
- <div class="pf-v6-c-card">
1704
- <div class="pf-v6-c-card__body">This is a card</div>
1683
+ </div>
1684
+ </section>
1685
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1686
+ <div class="pf-v6-c-page__main-body">
1687
+ <div class="pf-v6-l-gallery pf-m-gutter">
1688
+ <div class="pf-v6-c-card">
1689
+ <div class="pf-v6-c-card__body">This is a card</div>
1690
+ </div>
1691
+ <div class="pf-v6-c-card">
1692
+ <div class="pf-v6-c-card__body">This is a card</div>
1693
+ </div>
1694
+ <div class="pf-v6-c-card">
1695
+ <div class="pf-v6-c-card__body">This is a card</div>
1696
+ </div>
1697
+ <div class="pf-v6-c-card">
1698
+ <div class="pf-v6-c-card__body">This is a card</div>
1699
+ </div>
1700
+ <div class="pf-v6-c-card">
1701
+ <div class="pf-v6-c-card__body">This is a card</div>
1702
+ </div>
1703
+ <div class="pf-v6-c-card">
1704
+ <div class="pf-v6-c-card__body">This is a card</div>
1705
+ </div>
1706
+ <div class="pf-v6-c-card">
1707
+ <div class="pf-v6-c-card__body">This is a card</div>
1708
+ </div>
1709
+ <div class="pf-v6-c-card">
1710
+ <div class="pf-v6-c-card__body">This is a card</div>
1711
+ </div>
1712
+ <div class="pf-v6-c-card">
1713
+ <div class="pf-v6-c-card__body">This is a card</div>
1714
+ </div>
1715
+ <div class="pf-v6-c-card">
1716
+ <div class="pf-v6-c-card__body">This is a card</div>
1717
+ </div>
1705
1718
  </div>
1706
1719
  </div>
1707
- </div>
1708
- </section>
1709
- </main>
1720
+ </section>
1721
+ </main>
1722
+ </div>
1710
1723
  </div>
1711
1724
 
1712
1725
  ```