@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/Wizard/examples/Wizard.md CHANGED
@@ -227,92 +227,94 @@ wrapperTag: div
227
227
  </nav>
228
228
  </div>
229
229
  </div>
230
- <main
231
- class="pf-v6-c-page__main"
232
- tabindex="-1"
233
- id="main-content-wizard-basic-example"
234
- >
235
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
236
- <div class="pf-v6-c-page__main-body">
237
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
238
- <ol class="pf-v6-c-breadcrumb__list" role="list">
239
- <li class="pf-v6-c-breadcrumb__item">
240
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
241
- </li>
242
- <li class="pf-v6-c-breadcrumb__item">
243
- <span class="pf-v6-c-breadcrumb__item-divider">
244
- <i class="fas fa-angle-right" aria-hidden="true"></i>
245
- </span>
230
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
231
+ <main
232
+ class="pf-v6-c-page__main"
233
+ tabindex="-1"
234
+ id="main-content-wizard-basic-example"
235
+ >
236
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
237
+ <div class="pf-v6-c-page__main-body">
238
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
239
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
240
+ <li class="pf-v6-c-breadcrumb__item">
241
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
242
+ </li>
243
+ <li class="pf-v6-c-breadcrumb__item">
244
+ <span class="pf-v6-c-breadcrumb__item-divider">
245
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
246
+ </span>
246
247
 
247
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
248
- </li>
249
- <li class="pf-v6-c-breadcrumb__item">
250
- <span class="pf-v6-c-breadcrumb__item-divider">
251
- <i class="fas fa-angle-right" aria-hidden="true"></i>
252
- </span>
248
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
249
+ </li>
250
+ <li class="pf-v6-c-breadcrumb__item">
251
+ <span class="pf-v6-c-breadcrumb__item-divider">
252
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
253
+ </span>
253
254
 
254
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
255
- </li>
256
- <li class="pf-v6-c-breadcrumb__item">
257
- <span class="pf-v6-c-breadcrumb__item-divider">
258
- <i class="fas fa-angle-right" aria-hidden="true"></i>
259
- </span>
255
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
+ </li>
257
+ <li class="pf-v6-c-breadcrumb__item">
258
+ <span class="pf-v6-c-breadcrumb__item-divider">
259
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
260
+ </span>
260
261
 
261
- <a
262
- href="#"
263
- class="pf-v6-c-breadcrumb__link pf-m-current"
264
- aria-current="page"
265
- >Section landing</a>
266
- </li>
267
- </ol>
268
- </nav>
269
- </div>
270
- </section>
271
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
272
- <div class="pf-v6-c-page__main-body">
273
- <div class="pf-v6-c-content">
274
- <h1>Main title</h1>
275
- <p>This is a full page demo.</p>
262
+ <a
263
+ href="#"
264
+ class="pf-v6-c-breadcrumb__link pf-m-current"
265
+ aria-current="page"
266
+ >Section landing</a>
267
+ </li>
268
+ </ol>
269
+ </nav>
276
270
  </div>
277
- </div>
278
- </section>
279
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
280
- <div class="pf-v6-c-page__main-body">
281
- <div class="pf-v6-l-gallery pf-m-gutter">
282
- <div class="pf-v6-c-card">
283
- <div class="pf-v6-c-card__body">This is a card</div>
284
- </div>
285
- <div class="pf-v6-c-card">
286
- <div class="pf-v6-c-card__body">This is a card</div>
287
- </div>
288
- <div class="pf-v6-c-card">
289
- <div class="pf-v6-c-card__body">This is a card</div>
290
- </div>
291
- <div class="pf-v6-c-card">
292
- <div class="pf-v6-c-card__body">This is a card</div>
293
- </div>
294
- <div class="pf-v6-c-card">
295
- <div class="pf-v6-c-card__body">This is a card</div>
296
- </div>
297
- <div class="pf-v6-c-card">
298
- <div class="pf-v6-c-card__body">This is a card</div>
299
- </div>
300
- <div class="pf-v6-c-card">
301
- <div class="pf-v6-c-card__body">This is a card</div>
271
+ </section>
272
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
273
+ <div class="pf-v6-c-page__main-body">
274
+ <div class="pf-v6-c-content">
275
+ <h1>Main title</h1>
276
+ <p>This is a full page demo.</p>
302
277
  </div>
303
- <div class="pf-v6-c-card">
304
- <div class="pf-v6-c-card__body">This is a card</div>
305
- </div>
306
- <div class="pf-v6-c-card">
307
- <div class="pf-v6-c-card__body">This is a card</div>
308
- </div>
309
- <div class="pf-v6-c-card">
310
- <div class="pf-v6-c-card__body">This is a card</div>
278
+ </div>
279
+ </section>
280
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
281
+ <div class="pf-v6-c-page__main-body">
282
+ <div class="pf-v6-l-gallery pf-m-gutter">
283
+ <div class="pf-v6-c-card">
284
+ <div class="pf-v6-c-card__body">This is a card</div>
285
+ </div>
286
+ <div class="pf-v6-c-card">
287
+ <div class="pf-v6-c-card__body">This is a card</div>
288
+ </div>
289
+ <div class="pf-v6-c-card">
290
+ <div class="pf-v6-c-card__body">This is a card</div>
291
+ </div>
292
+ <div class="pf-v6-c-card">
293
+ <div class="pf-v6-c-card__body">This is a card</div>
294
+ </div>
295
+ <div class="pf-v6-c-card">
296
+ <div class="pf-v6-c-card__body">This is a card</div>
297
+ </div>
298
+ <div class="pf-v6-c-card">
299
+ <div class="pf-v6-c-card__body">This is a card</div>
300
+ </div>
301
+ <div class="pf-v6-c-card">
302
+ <div class="pf-v6-c-card__body">This is a card</div>
303
+ </div>
304
+ <div class="pf-v6-c-card">
305
+ <div class="pf-v6-c-card__body">This is a card</div>
306
+ </div>
307
+ <div class="pf-v6-c-card">
308
+ <div class="pf-v6-c-card__body">This is a card</div>
309
+ </div>
310
+ <div class="pf-v6-c-card">
311
+ <div class="pf-v6-c-card__body">This is a card</div>
312
+ </div>
311
313
  </div>
312
314
  </div>
313
- </div>
314
- </section>
315
- </main>
315
+ </section>
316
+ </main>
317
+ </div>
316
318
  </div>
317
319
  <div class="pf-v6-c-backdrop">
318
320
  <div class="pf-v6-l-bullseye">
@@ -808,92 +810,94 @@ wrapperTag: div
808
810
  </nav>
809
811
  </div>
810
812
  </div>
811
- <main
812
- class="pf-v6-c-page__main"
813
- tabindex="-1"
814
- id="main-content-wizard-nav-expanded-example"
815
- >
816
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
817
- <div class="pf-v6-c-page__main-body">
818
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
819
- <ol class="pf-v6-c-breadcrumb__list" role="list">
820
- <li class="pf-v6-c-breadcrumb__item">
821
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
822
- </li>
823
- <li class="pf-v6-c-breadcrumb__item">
824
- <span class="pf-v6-c-breadcrumb__item-divider">
825
- <i class="fas fa-angle-right" aria-hidden="true"></i>
826
- </span>
813
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
814
+ <main
815
+ class="pf-v6-c-page__main"
816
+ tabindex="-1"
817
+ id="main-content-wizard-nav-expanded-example"
818
+ >
819
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
820
+ <div class="pf-v6-c-page__main-body">
821
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
822
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
823
+ <li class="pf-v6-c-breadcrumb__item">
824
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
825
+ </li>
826
+ <li class="pf-v6-c-breadcrumb__item">
827
+ <span class="pf-v6-c-breadcrumb__item-divider">
828
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
829
+ </span>
827
830
 
828
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
829
- </li>
830
- <li class="pf-v6-c-breadcrumb__item">
831
- <span class="pf-v6-c-breadcrumb__item-divider">
832
- <i class="fas fa-angle-right" aria-hidden="true"></i>
833
- </span>
831
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
832
+ </li>
833
+ <li class="pf-v6-c-breadcrumb__item">
834
+ <span class="pf-v6-c-breadcrumb__item-divider">
835
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
836
+ </span>
834
837
 
835
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
836
- </li>
837
- <li class="pf-v6-c-breadcrumb__item">
838
- <span class="pf-v6-c-breadcrumb__item-divider">
839
- <i class="fas fa-angle-right" aria-hidden="true"></i>
840
- </span>
838
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
839
+ </li>
840
+ <li class="pf-v6-c-breadcrumb__item">
841
+ <span class="pf-v6-c-breadcrumb__item-divider">
842
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
843
+ </span>
841
844
 
842
- <a
843
- href="#"
844
- class="pf-v6-c-breadcrumb__link pf-m-current"
845
- aria-current="page"
846
- >Section landing</a>
847
- </li>
848
- </ol>
849
- </nav>
850
- </div>
851
- </section>
852
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
853
- <div class="pf-v6-c-page__main-body">
854
- <div class="pf-v6-c-content">
855
- <h1>Main title</h1>
856
- <p>This is a full page demo.</p>
845
+ <a
846
+ href="#"
847
+ class="pf-v6-c-breadcrumb__link pf-m-current"
848
+ aria-current="page"
849
+ >Section landing</a>
850
+ </li>
851
+ </ol>
852
+ </nav>
857
853
  </div>
858
- </div>
859
- </section>
860
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
861
- <div class="pf-v6-c-page__main-body">
862
- <div class="pf-v6-l-gallery pf-m-gutter">
863
- <div class="pf-v6-c-card">
864
- <div class="pf-v6-c-card__body">This is a card</div>
865
- </div>
866
- <div class="pf-v6-c-card">
867
- <div class="pf-v6-c-card__body">This is a card</div>
868
- </div>
869
- <div class="pf-v6-c-card">
870
- <div class="pf-v6-c-card__body">This is a card</div>
871
- </div>
872
- <div class="pf-v6-c-card">
873
- <div class="pf-v6-c-card__body">This is a card</div>
874
- </div>
875
- <div class="pf-v6-c-card">
876
- <div class="pf-v6-c-card__body">This is a card</div>
877
- </div>
878
- <div class="pf-v6-c-card">
879
- <div class="pf-v6-c-card__body">This is a card</div>
880
- </div>
881
- <div class="pf-v6-c-card">
882
- <div class="pf-v6-c-card__body">This is a card</div>
883
- </div>
884
- <div class="pf-v6-c-card">
885
- <div class="pf-v6-c-card__body">This is a card</div>
854
+ </section>
855
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
856
+ <div class="pf-v6-c-page__main-body">
857
+ <div class="pf-v6-c-content">
858
+ <h1>Main title</h1>
859
+ <p>This is a full page demo.</p>
886
860
  </div>
887
- <div class="pf-v6-c-card">
888
- <div class="pf-v6-c-card__body">This is a card</div>
889
- </div>
890
- <div class="pf-v6-c-card">
891
- <div class="pf-v6-c-card__body">This is a card</div>
861
+ </div>
862
+ </section>
863
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
864
+ <div class="pf-v6-c-page__main-body">
865
+ <div class="pf-v6-l-gallery pf-m-gutter">
866
+ <div class="pf-v6-c-card">
867
+ <div class="pf-v6-c-card__body">This is a card</div>
868
+ </div>
869
+ <div class="pf-v6-c-card">
870
+ <div class="pf-v6-c-card__body">This is a card</div>
871
+ </div>
872
+ <div class="pf-v6-c-card">
873
+ <div class="pf-v6-c-card__body">This is a card</div>
874
+ </div>
875
+ <div class="pf-v6-c-card">
876
+ <div class="pf-v6-c-card__body">This is a card</div>
877
+ </div>
878
+ <div class="pf-v6-c-card">
879
+ <div class="pf-v6-c-card__body">This is a card</div>
880
+ </div>
881
+ <div class="pf-v6-c-card">
882
+ <div class="pf-v6-c-card__body">This is a card</div>
883
+ </div>
884
+ <div class="pf-v6-c-card">
885
+ <div class="pf-v6-c-card__body">This is a card</div>
886
+ </div>
887
+ <div class="pf-v6-c-card">
888
+ <div class="pf-v6-c-card__body">This is a card</div>
889
+ </div>
890
+ <div class="pf-v6-c-card">
891
+ <div class="pf-v6-c-card__body">This is a card</div>
892
+ </div>
893
+ <div class="pf-v6-c-card">
894
+ <div class="pf-v6-c-card__body">This is a card</div>
895
+ </div>
892
896
  </div>
893
897
  </div>
894
- </div>
895
- </section>
896
- </main>
898
+ </section>
899
+ </main>
900
+ </div>
897
901
  </div>
898
902
  <div class="pf-v6-c-backdrop">
899
903
  <div class="pf-v6-l-bullseye">
@@ -1371,92 +1375,94 @@ wrapperTag: div
1371
1375
  </nav>
1372
1376
  </div>
1373
1377
  </div>
1374
- <main
1375
- class="pf-v6-c-page__main"
1376
- tabindex="-1"
1377
- id="main-content-wizard-with-drawer-closed-example"
1378
- >
1379
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1380
- <div class="pf-v6-c-page__main-body">
1381
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1382
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1383
- <li class="pf-v6-c-breadcrumb__item">
1384
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1385
- </li>
1386
- <li class="pf-v6-c-breadcrumb__item">
1387
- <span class="pf-v6-c-breadcrumb__item-divider">
1388
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1389
- </span>
1378
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1379
+ <main
1380
+ class="pf-v6-c-page__main"
1381
+ tabindex="-1"
1382
+ id="main-content-wizard-with-drawer-closed-example"
1383
+ >
1384
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1385
+ <div class="pf-v6-c-page__main-body">
1386
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1387
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1388
+ <li class="pf-v6-c-breadcrumb__item">
1389
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1390
+ </li>
1391
+ <li class="pf-v6-c-breadcrumb__item">
1392
+ <span class="pf-v6-c-breadcrumb__item-divider">
1393
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1394
+ </span>
1390
1395
 
1391
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1392
- </li>
1393
- <li class="pf-v6-c-breadcrumb__item">
1394
- <span class="pf-v6-c-breadcrumb__item-divider">
1395
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1396
- </span>
1396
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1397
+ </li>
1398
+ <li class="pf-v6-c-breadcrumb__item">
1399
+ <span class="pf-v6-c-breadcrumb__item-divider">
1400
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1401
+ </span>
1397
1402
 
1398
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1399
- </li>
1400
- <li class="pf-v6-c-breadcrumb__item">
1401
- <span class="pf-v6-c-breadcrumb__item-divider">
1402
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1403
- </span>
1403
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1404
+ </li>
1405
+ <li class="pf-v6-c-breadcrumb__item">
1406
+ <span class="pf-v6-c-breadcrumb__item-divider">
1407
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1408
+ </span>
1404
1409
 
1405
- <a
1406
- href="#"
1407
- class="pf-v6-c-breadcrumb__link pf-m-current"
1408
- aria-current="page"
1409
- >Section landing</a>
1410
- </li>
1411
- </ol>
1412
- </nav>
1413
- </div>
1414
- </section>
1415
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1416
- <div class="pf-v6-c-page__main-body">
1417
- <div class="pf-v6-c-content">
1418
- <h1>Main title</h1>
1419
- <p>This is a full page demo.</p>
1410
+ <a
1411
+ href="#"
1412
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1413
+ aria-current="page"
1414
+ >Section landing</a>
1415
+ </li>
1416
+ </ol>
1417
+ </nav>
1420
1418
  </div>
1421
- </div>
1422
- </section>
1423
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1424
- <div class="pf-v6-c-page__main-body">
1425
- <div class="pf-v6-l-gallery pf-m-gutter">
1426
- <div class="pf-v6-c-card">
1427
- <div class="pf-v6-c-card__body">This is a card</div>
1428
- </div>
1429
- <div class="pf-v6-c-card">
1430
- <div class="pf-v6-c-card__body">This is a card</div>
1431
- </div>
1432
- <div class="pf-v6-c-card">
1433
- <div class="pf-v6-c-card__body">This is a card</div>
1434
- </div>
1435
- <div class="pf-v6-c-card">
1436
- <div class="pf-v6-c-card__body">This is a card</div>
1437
- </div>
1438
- <div class="pf-v6-c-card">
1439
- <div class="pf-v6-c-card__body">This is a card</div>
1440
- </div>
1441
- <div class="pf-v6-c-card">
1442
- <div class="pf-v6-c-card__body">This is a card</div>
1443
- </div>
1444
- <div class="pf-v6-c-card">
1445
- <div class="pf-v6-c-card__body">This is a card</div>
1446
- </div>
1447
- <div class="pf-v6-c-card">
1448
- <div class="pf-v6-c-card__body">This is a card</div>
1449
- </div>
1450
- <div class="pf-v6-c-card">
1451
- <div class="pf-v6-c-card__body">This is a card</div>
1419
+ </section>
1420
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1421
+ <div class="pf-v6-c-page__main-body">
1422
+ <div class="pf-v6-c-content">
1423
+ <h1>Main title</h1>
1424
+ <p>This is a full page demo.</p>
1452
1425
  </div>
1453
- <div class="pf-v6-c-card">
1454
- <div class="pf-v6-c-card__body">This is a card</div>
1426
+ </div>
1427
+ </section>
1428
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1429
+ <div class="pf-v6-c-page__main-body">
1430
+ <div class="pf-v6-l-gallery pf-m-gutter">
1431
+ <div class="pf-v6-c-card">
1432
+ <div class="pf-v6-c-card__body">This is a card</div>
1433
+ </div>
1434
+ <div class="pf-v6-c-card">
1435
+ <div class="pf-v6-c-card__body">This is a card</div>
1436
+ </div>
1437
+ <div class="pf-v6-c-card">
1438
+ <div class="pf-v6-c-card__body">This is a card</div>
1439
+ </div>
1440
+ <div class="pf-v6-c-card">
1441
+ <div class="pf-v6-c-card__body">This is a card</div>
1442
+ </div>
1443
+ <div class="pf-v6-c-card">
1444
+ <div class="pf-v6-c-card__body">This is a card</div>
1445
+ </div>
1446
+ <div class="pf-v6-c-card">
1447
+ <div class="pf-v6-c-card__body">This is a card</div>
1448
+ </div>
1449
+ <div class="pf-v6-c-card">
1450
+ <div class="pf-v6-c-card__body">This is a card</div>
1451
+ </div>
1452
+ <div class="pf-v6-c-card">
1453
+ <div class="pf-v6-c-card__body">This is a card</div>
1454
+ </div>
1455
+ <div class="pf-v6-c-card">
1456
+ <div class="pf-v6-c-card__body">This is a card</div>
1457
+ </div>
1458
+ <div class="pf-v6-c-card">
1459
+ <div class="pf-v6-c-card__body">This is a card</div>
1460
+ </div>
1455
1461
  </div>
1456
1462
  </div>
1457
- </div>
1458
- </section>
1459
- </main>
1463
+ </section>
1464
+ </main>
1465
+ </div>
1460
1466
  </div>
1461
1467
  <div class="pf-v6-c-backdrop">
1462
1468
  <div class="pf-v6-l-bullseye">
@@ -2018,92 +2024,94 @@ wrapperTag: div
2018
2024
  </nav>
2019
2025
  </div>
2020
2026
  </div>
2021
- <main
2022
- class="pf-v6-c-page__main"
2023
- tabindex="-1"
2024
- id="main-content-wizard-with-drawer-expanded-example"
2025
- >
2026
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2027
- <div class="pf-v6-c-page__main-body">
2028
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2029
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2030
- <li class="pf-v6-c-breadcrumb__item">
2031
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2032
- </li>
2033
- <li class="pf-v6-c-breadcrumb__item">
2034
- <span class="pf-v6-c-breadcrumb__item-divider">
2035
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2036
- </span>
2027
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2028
+ <main
2029
+ class="pf-v6-c-page__main"
2030
+ tabindex="-1"
2031
+ id="main-content-wizard-with-drawer-expanded-example"
2032
+ >
2033
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2034
+ <div class="pf-v6-c-page__main-body">
2035
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2036
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2037
+ <li class="pf-v6-c-breadcrumb__item">
2038
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2039
+ </li>
2040
+ <li class="pf-v6-c-breadcrumb__item">
2041
+ <span class="pf-v6-c-breadcrumb__item-divider">
2042
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2043
+ </span>
2037
2044
 
2038
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2039
- </li>
2040
- <li class="pf-v6-c-breadcrumb__item">
2041
- <span class="pf-v6-c-breadcrumb__item-divider">
2042
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2043
- </span>
2045
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2046
+ </li>
2047
+ <li class="pf-v6-c-breadcrumb__item">
2048
+ <span class="pf-v6-c-breadcrumb__item-divider">
2049
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2050
+ </span>
2044
2051
 
2045
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2046
- </li>
2047
- <li class="pf-v6-c-breadcrumb__item">
2048
- <span class="pf-v6-c-breadcrumb__item-divider">
2049
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2050
- </span>
2052
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2053
+ </li>
2054
+ <li class="pf-v6-c-breadcrumb__item">
2055
+ <span class="pf-v6-c-breadcrumb__item-divider">
2056
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2057
+ </span>
2051
2058
 
2052
- <a
2053
- href="#"
2054
- class="pf-v6-c-breadcrumb__link pf-m-current"
2055
- aria-current="page"
2056
- >Section landing</a>
2057
- </li>
2058
- </ol>
2059
- </nav>
2060
- </div>
2061
- </section>
2062
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2063
- <div class="pf-v6-c-page__main-body">
2064
- <div class="pf-v6-c-content">
2065
- <h1>Main title</h1>
2066
- <p>This is a full page demo.</p>
2059
+ <a
2060
+ href="#"
2061
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2062
+ aria-current="page"
2063
+ >Section landing</a>
2064
+ </li>
2065
+ </ol>
2066
+ </nav>
2067
2067
  </div>
2068
- </div>
2069
- </section>
2070
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2071
- <div class="pf-v6-c-page__main-body">
2072
- <div class="pf-v6-l-gallery pf-m-gutter">
2073
- <div class="pf-v6-c-card">
2074
- <div class="pf-v6-c-card__body">This is a card</div>
2075
- </div>
2076
- <div class="pf-v6-c-card">
2077
- <div class="pf-v6-c-card__body">This is a card</div>
2068
+ </section>
2069
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2070
+ <div class="pf-v6-c-page__main-body">
2071
+ <div class="pf-v6-c-content">
2072
+ <h1>Main title</h1>
2073
+ <p>This is a full page demo.</p>
2078
2074
  </div>
2079
- <div class="pf-v6-c-card">
2080
- <div class="pf-v6-c-card__body">This is a card</div>
2081
- </div>
2082
- <div class="pf-v6-c-card">
2083
- <div class="pf-v6-c-card__body">This is a card</div>
2084
- </div>
2085
- <div class="pf-v6-c-card">
2086
- <div class="pf-v6-c-card__body">This is a card</div>
2087
- </div>
2088
- <div class="pf-v6-c-card">
2089
- <div class="pf-v6-c-card__body">This is a card</div>
2090
- </div>
2091
- <div class="pf-v6-c-card">
2092
- <div class="pf-v6-c-card__body">This is a card</div>
2093
- </div>
2094
- <div class="pf-v6-c-card">
2095
- <div class="pf-v6-c-card__body">This is a card</div>
2096
- </div>
2097
- <div class="pf-v6-c-card">
2098
- <div class="pf-v6-c-card__body">This is a card</div>
2099
- </div>
2100
- <div class="pf-v6-c-card">
2101
- <div class="pf-v6-c-card__body">This is a card</div>
2075
+ </div>
2076
+ </section>
2077
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2078
+ <div class="pf-v6-c-page__main-body">
2079
+ <div class="pf-v6-l-gallery pf-m-gutter">
2080
+ <div class="pf-v6-c-card">
2081
+ <div class="pf-v6-c-card__body">This is a card</div>
2082
+ </div>
2083
+ <div class="pf-v6-c-card">
2084
+ <div class="pf-v6-c-card__body">This is a card</div>
2085
+ </div>
2086
+ <div class="pf-v6-c-card">
2087
+ <div class="pf-v6-c-card__body">This is a card</div>
2088
+ </div>
2089
+ <div class="pf-v6-c-card">
2090
+ <div class="pf-v6-c-card__body">This is a card</div>
2091
+ </div>
2092
+ <div class="pf-v6-c-card">
2093
+ <div class="pf-v6-c-card__body">This is a card</div>
2094
+ </div>
2095
+ <div class="pf-v6-c-card">
2096
+ <div class="pf-v6-c-card__body">This is a card</div>
2097
+ </div>
2098
+ <div class="pf-v6-c-card">
2099
+ <div class="pf-v6-c-card__body">This is a card</div>
2100
+ </div>
2101
+ <div class="pf-v6-c-card">
2102
+ <div class="pf-v6-c-card__body">This is a card</div>
2103
+ </div>
2104
+ <div class="pf-v6-c-card">
2105
+ <div class="pf-v6-c-card__body">This is a card</div>
2106
+ </div>
2107
+ <div class="pf-v6-c-card">
2108
+ <div class="pf-v6-c-card__body">This is a card</div>
2109
+ </div>
2102
2110
  </div>
2103
2111
  </div>
2104
- </div>
2105
- </section>
2106
- </main>
2112
+ </section>
2113
+ </main>
2114
+ </div>
2107
2115
  </div>
2108
2116
  <div class="pf-v6-c-backdrop">
2109
2117
  <div class="pf-v6-l-bullseye">
@@ -2664,92 +2672,94 @@ wrapperTag: div
2664
2672
  </nav>
2665
2673
  </div>
2666
2674
  </div>
2667
- <main
2668
- class="pf-v6-c-page__main"
2669
- tabindex="-1"
2670
- id="main-content-wizard-with-drawer-info-example"
2671
- >
2672
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2673
- <div class="pf-v6-c-page__main-body">
2674
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2675
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2676
- <li class="pf-v6-c-breadcrumb__item">
2677
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2678
- </li>
2679
- <li class="pf-v6-c-breadcrumb__item">
2680
- <span class="pf-v6-c-breadcrumb__item-divider">
2681
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2682
- </span>
2675
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2676
+ <main
2677
+ class="pf-v6-c-page__main"
2678
+ tabindex="-1"
2679
+ id="main-content-wizard-with-drawer-info-example"
2680
+ >
2681
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2682
+ <div class="pf-v6-c-page__main-body">
2683
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2684
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2685
+ <li class="pf-v6-c-breadcrumb__item">
2686
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
2687
+ </li>
2688
+ <li class="pf-v6-c-breadcrumb__item">
2689
+ <span class="pf-v6-c-breadcrumb__item-divider">
2690
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2691
+ </span>
2683
2692
 
2684
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2685
- </li>
2686
- <li class="pf-v6-c-breadcrumb__item">
2687
- <span class="pf-v6-c-breadcrumb__item-divider">
2688
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2689
- </span>
2693
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2694
+ </li>
2695
+ <li class="pf-v6-c-breadcrumb__item">
2696
+ <span class="pf-v6-c-breadcrumb__item-divider">
2697
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2698
+ </span>
2690
2699
 
2691
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2692
- </li>
2693
- <li class="pf-v6-c-breadcrumb__item">
2694
- <span class="pf-v6-c-breadcrumb__item-divider">
2695
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2696
- </span>
2700
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
2701
+ </li>
2702
+ <li class="pf-v6-c-breadcrumb__item">
2703
+ <span class="pf-v6-c-breadcrumb__item-divider">
2704
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2705
+ </span>
2697
2706
 
2698
- <a
2699
- href="#"
2700
- class="pf-v6-c-breadcrumb__link pf-m-current"
2701
- aria-current="page"
2702
- >Section landing</a>
2703
- </li>
2704
- </ol>
2705
- </nav>
2706
- </div>
2707
- </section>
2708
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2709
- <div class="pf-v6-c-page__main-body">
2710
- <div class="pf-v6-c-content">
2711
- <h1>Main title</h1>
2712
- <p>This is a full page demo.</p>
2707
+ <a
2708
+ href="#"
2709
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2710
+ aria-current="page"
2711
+ >Section landing</a>
2712
+ </li>
2713
+ </ol>
2714
+ </nav>
2713
2715
  </div>
2714
- </div>
2715
- </section>
2716
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2717
- <div class="pf-v6-c-page__main-body">
2718
- <div class="pf-v6-l-gallery pf-m-gutter">
2719
- <div class="pf-v6-c-card">
2720
- <div class="pf-v6-c-card__body">This is a card</div>
2721
- </div>
2722
- <div class="pf-v6-c-card">
2723
- <div class="pf-v6-c-card__body">This is a card</div>
2724
- </div>
2725
- <div class="pf-v6-c-card">
2726
- <div class="pf-v6-c-card__body">This is a card</div>
2716
+ </section>
2717
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
2718
+ <div class="pf-v6-c-page__main-body">
2719
+ <div class="pf-v6-c-content">
2720
+ <h1>Main title</h1>
2721
+ <p>This is a full page demo.</p>
2727
2722
  </div>
2728
- <div class="pf-v6-c-card">
2729
- <div class="pf-v6-c-card__body">This is a card</div>
2730
- </div>
2731
- <div class="pf-v6-c-card">
2732
- <div class="pf-v6-c-card__body">This is a card</div>
2733
- </div>
2734
- <div class="pf-v6-c-card">
2735
- <div class="pf-v6-c-card__body">This is a card</div>
2736
- </div>
2737
- <div class="pf-v6-c-card">
2738
- <div class="pf-v6-c-card__body">This is a card</div>
2739
- </div>
2740
- <div class="pf-v6-c-card">
2741
- <div class="pf-v6-c-card__body">This is a card</div>
2742
- </div>
2743
- <div class="pf-v6-c-card">
2744
- <div class="pf-v6-c-card__body">This is a card</div>
2745
- </div>
2746
- <div class="pf-v6-c-card">
2747
- <div class="pf-v6-c-card__body">This is a card</div>
2723
+ </div>
2724
+ </section>
2725
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2726
+ <div class="pf-v6-c-page__main-body">
2727
+ <div class="pf-v6-l-gallery pf-m-gutter">
2728
+ <div class="pf-v6-c-card">
2729
+ <div class="pf-v6-c-card__body">This is a card</div>
2730
+ </div>
2731
+ <div class="pf-v6-c-card">
2732
+ <div class="pf-v6-c-card__body">This is a card</div>
2733
+ </div>
2734
+ <div class="pf-v6-c-card">
2735
+ <div class="pf-v6-c-card__body">This is a card</div>
2736
+ </div>
2737
+ <div class="pf-v6-c-card">
2738
+ <div class="pf-v6-c-card__body">This is a card</div>
2739
+ </div>
2740
+ <div class="pf-v6-c-card">
2741
+ <div class="pf-v6-c-card__body">This is a card</div>
2742
+ </div>
2743
+ <div class="pf-v6-c-card">
2744
+ <div class="pf-v6-c-card__body">This is a card</div>
2745
+ </div>
2746
+ <div class="pf-v6-c-card">
2747
+ <div class="pf-v6-c-card__body">This is a card</div>
2748
+ </div>
2749
+ <div class="pf-v6-c-card">
2750
+ <div class="pf-v6-c-card__body">This is a card</div>
2751
+ </div>
2752
+ <div class="pf-v6-c-card">
2753
+ <div class="pf-v6-c-card__body">This is a card</div>
2754
+ </div>
2755
+ <div class="pf-v6-c-card">
2756
+ <div class="pf-v6-c-card__body">This is a card</div>
2757
+ </div>
2748
2758
  </div>
2749
2759
  </div>
2750
- </div>
2751
- </section>
2752
- </main>
2760
+ </section>
2761
+ </main>
2762
+ </div>
2753
2763
  </div>
2754
2764
  <div class="pf-v6-c-backdrop">
2755
2765
  <div class="pf-v6-l-bullseye">
@@ -3178,298 +3188,300 @@ wrapperTag: div
3178
3188
  </nav>
3179
3189
  </div>
3180
3190
  </div>
3181
- <main
3182
- class="pf-v6-c-page__main"
3183
- tabindex="-1"
3184
- id="main-content-wizard-in-page-example"
3185
- >
3186
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3187
- <div class="pf-v6-c-page__main-body">
3188
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3189
- <ol class="pf-v6-c-breadcrumb__list" role="list">
3190
- <li class="pf-v6-c-breadcrumb__item">
3191
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3192
- </li>
3193
- <li class="pf-v6-c-breadcrumb__item">
3194
- <span class="pf-v6-c-breadcrumb__item-divider">
3195
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3196
- </span>
3191
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3192
+ <main
3193
+ class="pf-v6-c-page__main"
3194
+ tabindex="-1"
3195
+ id="main-content-wizard-in-page-example"
3196
+ >
3197
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3198
+ <div class="pf-v6-c-page__main-body">
3199
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3200
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3201
+ <li class="pf-v6-c-breadcrumb__item">
3202
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3203
+ </li>
3204
+ <li class="pf-v6-c-breadcrumb__item">
3205
+ <span class="pf-v6-c-breadcrumb__item-divider">
3206
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3207
+ </span>
3197
3208
 
3198
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3199
- </li>
3200
- <li class="pf-v6-c-breadcrumb__item">
3201
- <span class="pf-v6-c-breadcrumb__item-divider">
3202
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3203
- </span>
3209
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3210
+ </li>
3211
+ <li class="pf-v6-c-breadcrumb__item">
3212
+ <span class="pf-v6-c-breadcrumb__item-divider">
3213
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3214
+ </span>
3204
3215
 
3205
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3206
- </li>
3207
- <li class="pf-v6-c-breadcrumb__item">
3208
- <span class="pf-v6-c-breadcrumb__item-divider">
3209
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3210
- </span>
3216
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3217
+ </li>
3218
+ <li class="pf-v6-c-breadcrumb__item">
3219
+ <span class="pf-v6-c-breadcrumb__item-divider">
3220
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3221
+ </span>
3211
3222
 
3212
- <a
3213
- href="#"
3214
- class="pf-v6-c-breadcrumb__link pf-m-current"
3215
- aria-current="page"
3216
- >Section landing</a>
3217
- </li>
3218
- </ol>
3219
- </nav>
3220
- </div>
3221
- </section>
3222
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3223
- <div class="pf-v6-c-page__main-body">
3224
- <div class="pf-v6-c-content">
3225
- <h1>Main title</h1>
3226
- <p>This is a full page demo.</p>
3223
+ <a
3224
+ href="#"
3225
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3226
+ aria-current="page"
3227
+ >Section landing</a>
3228
+ </li>
3229
+ </ol>
3230
+ </nav>
3227
3231
  </div>
3228
- </div>
3229
- </section>
3230
- <section class="pf-v6-c-page__main-wizard">
3231
- <div class="pf-v6-c-wizard">
3232
- <button
3233
- aria-label="Wizard Header Toggle"
3234
- class="pf-v6-c-wizard__toggle"
3235
- aria-expanded="false"
3236
- >
3237
- <span class="pf-v6-c-wizard__toggle-list">
3238
- <span class="pf-v6-c-wizard__toggle-list-item">
3239
- <span class="pf-v6-c-wizard__toggle-num">2</span>
3240
- Configuration
3241
- <i
3242
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3243
- aria-hidden="true"
3244
- ></i>
3232
+ </section>
3233
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3234
+ <div class="pf-v6-c-page__main-body">
3235
+ <div class="pf-v6-c-content">
3236
+ <h1>Main title</h1>
3237
+ <p>This is a full page demo.</p>
3238
+ </div>
3239
+ </div>
3240
+ </section>
3241
+ <section class="pf-v6-c-page__main-wizard">
3242
+ <div class="pf-v6-c-wizard">
3243
+ <button
3244
+ aria-label="Wizard Header Toggle"
3245
+ class="pf-v6-c-wizard__toggle"
3246
+ aria-expanded="false"
3247
+ >
3248
+ <span class="pf-v6-c-wizard__toggle-list">
3249
+ <span class="pf-v6-c-wizard__toggle-list-item">
3250
+ <span class="pf-v6-c-wizard__toggle-num">2</span>
3251
+ Configuration
3252
+ <i
3253
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3254
+ aria-hidden="true"
3255
+ ></i>
3256
+ </span>
3257
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3245
3258
  </span>
3246
- <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3247
- </span>
3248
- <span class="pf-v6-c-wizard__toggle-icon">
3249
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3250
- </span>
3251
- </button>
3252
- <div class="pf-v6-c-wizard__outer-wrap">
3253
- <div class="pf-v6-c-wizard__inner-wrap">
3254
- <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
3255
- <ol class="pf-v6-c-wizard__nav-list" role="list">
3256
- <li class="pf-v6-c-wizard__nav-item">
3257
- <button
3258
- class="pf-v6-c-wizard__nav-link"
3259
- type="button"
3260
- >Information</button>
3261
- </li>
3262
- <li
3263
- class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded"
3264
- >
3265
- <button
3266
- class="pf-v6-c-wizard__nav-link pf-m-current"
3267
- type="button"
3268
- aria-expanded="true"
3259
+ <span class="pf-v6-c-wizard__toggle-icon">
3260
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3261
+ </span>
3262
+ </button>
3263
+ <div class="pf-v6-c-wizard__outer-wrap">
3264
+ <div class="pf-v6-c-wizard__inner-wrap">
3265
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
3266
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3267
+ <li class="pf-v6-c-wizard__nav-item">
3268
+ <button
3269
+ class="pf-v6-c-wizard__nav-link"
3270
+ type="button"
3271
+ >Information</button>
3272
+ </li>
3273
+ <li
3274
+ class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded"
3269
3275
  >
3270
- <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3271
- <span class="pf-v6-c-wizard__nav-link-toggle">
3272
- <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3273
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3274
- </span>
3275
- </span>
3276
- </button>
3277
- <ol class="pf-v6-c-wizard__nav-list" role="list">
3278
- <li class="pf-v6-c-wizard__nav-item">
3279
- <button
3280
- class="pf-v6-c-wizard__nav-link"
3281
- type="button"
3282
- >Substep A</button>
3283
- </li>
3284
- <li class="pf-v6-c-wizard__nav-item">
3285
- <button
3286
- class="pf-v6-c-wizard__nav-link pf-m-current"
3287
- type="button"
3288
- aria-current="page"
3289
- >Substep B</button>
3290
- </li>
3291
- <li class="pf-v6-c-wizard__nav-item">
3292
- <button
3293
- class="pf-v6-c-wizard__nav-link"
3294
- type="button"
3295
- >Substep C</button>
3296
- </li>
3297
- </ol>
3298
- </li>
3299
- <li class="pf-v6-c-wizard__nav-item">
3300
- <button
3301
- class="pf-v6-c-wizard__nav-link"
3302
- type="button"
3303
- >Additional</button>
3304
- </li>
3305
- <li class="pf-v6-c-wizard__nav-item">
3306
- <button
3307
- class="pf-v6-c-wizard__nav-link pf-m-disabled"
3308
- type="button"
3309
- aria-disabled="true"
3310
- tabindex="-1"
3311
- >Review</button>
3312
- </li>
3313
- </ol>
3314
- </nav>
3315
- <div class="pf-v6-c-wizard__main" tabindex="0">
3316
- <div class="pf-v6-c-wizard__main-body">
3317
- <form class="pf-v6-c-form pf-m-limit-width" novalidate>
3318
- <div class="pf-v6-c-form__group">
3319
- <div class="pf-v6-c-form__group-label"><label
3320
- class="pf-v6-c-form__label"
3321
- for="wizard-in-page-example-wizard-form-field1"
3322
- >
3323
- <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
3324
- class="pf-v6-c-form__label-required"
3325
- aria-hidden="true"
3326
- >&#42;</span></label>
3327
- </div>
3328
- <div class="pf-v6-c-form__group-control">
3329
- <span class="pf-v6-c-form-control">
3330
- <input
3331
- type="text"
3332
- id="wizard-in-page-example-wizard-form-field1"
3333
- name="wizard-in-page-example-wizard-form-field1"
3334
- />
3335
- </span>
3336
- </div>
3337
- </div>
3338
- <div class="pf-v6-c-form__group">
3339
- <div class="pf-v6-c-form__group-label"><label
3340
- class="pf-v6-c-form__label"
3341
- for="wizard-in-page-example-wizard-form-field2"
3342
- >
3343
- <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
3344
- class="pf-v6-c-form__label-required"
3345
- aria-hidden="true"
3346
- >&#42;</span></label>
3347
- </div>
3348
- <div class="pf-v6-c-form__group-control">
3349
- <span class="pf-v6-c-form-control">
3350
- <input
3351
- type="text"
3352
- id="wizard-in-page-example-wizard-form-field2"
3353
- name="wizard-in-page-example-wizard-form-field2"
3354
- />
3355
- </span>
3356
- </div>
3357
- </div>
3358
- <div class="pf-v6-c-form__group">
3359
- <div class="pf-v6-c-form__group-label"><label
3360
- class="pf-v6-c-form__label"
3361
- for="wizard-in-page-example-wizard-form-field3"
3362
- >
3363
- <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
3364
- class="pf-v6-c-form__label-required"
3365
- aria-hidden="true"
3366
- >&#42;</span></label>
3367
- </div>
3368
- <div class="pf-v6-c-form__group-control">
3369
- <span class="pf-v6-c-form-control">
3370
- <input
3371
- type="text"
3372
- id="wizard-in-page-example-wizard-form-field3"
3373
- name="wizard-in-page-example-wizard-form-field3"
3374
- />
3375
- </span>
3376
- </div>
3377
- </div>
3378
- <div class="pf-v6-c-form__group">
3379
- <div class="pf-v6-c-form__group-label"><label
3380
- class="pf-v6-c-form__label"
3381
- for="wizard-in-page-example-wizard-form-field4"
3382
- >
3383
- <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
3384
- class="pf-v6-c-form__label-required"
3385
- aria-hidden="true"
3386
- >&#42;</span></label>
3387
- </div>
3388
- <div class="pf-v6-c-form__group-control">
3389
- <span class="pf-v6-c-form-control">
3390
- <input
3391
- type="text"
3392
- id="wizard-in-page-example-wizard-form-field4"
3393
- name="wizard-in-page-example-wizard-form-field4"
3394
- />
3276
+ <button
3277
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3278
+ type="button"
3279
+ aria-expanded="true"
3280
+ >
3281
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3282
+ <span class="pf-v6-c-wizard__nav-link-toggle">
3283
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3284
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3285
+ </span>
3395
3286
  </span>
3287
+ </button>
3288
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3289
+ <li class="pf-v6-c-wizard__nav-item">
3290
+ <button
3291
+ class="pf-v6-c-wizard__nav-link"
3292
+ type="button"
3293
+ >Substep A</button>
3294
+ </li>
3295
+ <li class="pf-v6-c-wizard__nav-item">
3296
+ <button
3297
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3298
+ type="button"
3299
+ aria-current="page"
3300
+ >Substep B</button>
3301
+ </li>
3302
+ <li class="pf-v6-c-wizard__nav-item">
3303
+ <button
3304
+ class="pf-v6-c-wizard__nav-link"
3305
+ type="button"
3306
+ >Substep C</button>
3307
+ </li>
3308
+ </ol>
3309
+ </li>
3310
+ <li class="pf-v6-c-wizard__nav-item">
3311
+ <button
3312
+ class="pf-v6-c-wizard__nav-link"
3313
+ type="button"
3314
+ >Additional</button>
3315
+ </li>
3316
+ <li class="pf-v6-c-wizard__nav-item">
3317
+ <button
3318
+ class="pf-v6-c-wizard__nav-link pf-m-disabled"
3319
+ type="button"
3320
+ aria-disabled="true"
3321
+ tabindex="-1"
3322
+ >Review</button>
3323
+ </li>
3324
+ </ol>
3325
+ </nav>
3326
+ <div class="pf-v6-c-wizard__main" tabindex="0">
3327
+ <div class="pf-v6-c-wizard__main-body">
3328
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
3329
+ <div class="pf-v6-c-form__group">
3330
+ <div class="pf-v6-c-form__group-label"><label
3331
+ class="pf-v6-c-form__label"
3332
+ for="wizard-in-page-example-wizard-form-field1"
3333
+ >
3334
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
3335
+ class="pf-v6-c-form__label-required"
3336
+ aria-hidden="true"
3337
+ >&#42;</span></label>
3338
+ </div>
3339
+ <div class="pf-v6-c-form__group-control">
3340
+ <span class="pf-v6-c-form-control">
3341
+ <input
3342
+ type="text"
3343
+ id="wizard-in-page-example-wizard-form-field1"
3344
+ name="wizard-in-page-example-wizard-form-field1"
3345
+ />
3346
+ </span>
3347
+ </div>
3396
3348
  </div>
3397
- </div>
3398
- <div class="pf-v6-c-form__group">
3399
- <div class="pf-v6-c-form__group-label"><label
3400
- class="pf-v6-c-form__label"
3401
- for="wizard-in-page-example-wizard-form-field5"
3402
- >
3403
- <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
3404
- class="pf-v6-c-form__label-required"
3405
- aria-hidden="true"
3406
- >&#42;</span></label>
3349
+ <div class="pf-v6-c-form__group">
3350
+ <div class="pf-v6-c-form__group-label"><label
3351
+ class="pf-v6-c-form__label"
3352
+ for="wizard-in-page-example-wizard-form-field2"
3353
+ >
3354
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
3355
+ class="pf-v6-c-form__label-required"
3356
+ aria-hidden="true"
3357
+ >&#42;</span></label>
3358
+ </div>
3359
+ <div class="pf-v6-c-form__group-control">
3360
+ <span class="pf-v6-c-form-control">
3361
+ <input
3362
+ type="text"
3363
+ id="wizard-in-page-example-wizard-form-field2"
3364
+ name="wizard-in-page-example-wizard-form-field2"
3365
+ />
3366
+ </span>
3367
+ </div>
3407
3368
  </div>
3408
- <div class="pf-v6-c-form__group-control">
3409
- <span class="pf-v6-c-form-control">
3410
- <input
3411
- type="text"
3412
- id="wizard-in-page-example-wizard-form-field5"
3413
- name="wizard-in-page-example-wizard-form-field5"
3414
- />
3415
- </span>
3369
+ <div class="pf-v6-c-form__group">
3370
+ <div class="pf-v6-c-form__group-label"><label
3371
+ class="pf-v6-c-form__label"
3372
+ for="wizard-in-page-example-wizard-form-field3"
3373
+ >
3374
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
3375
+ class="pf-v6-c-form__label-required"
3376
+ aria-hidden="true"
3377
+ >&#42;</span></label>
3378
+ </div>
3379
+ <div class="pf-v6-c-form__group-control">
3380
+ <span class="pf-v6-c-form-control">
3381
+ <input
3382
+ type="text"
3383
+ id="wizard-in-page-example-wizard-form-field3"
3384
+ name="wizard-in-page-example-wizard-form-field3"
3385
+ />
3386
+ </span>
3387
+ </div>
3416
3388
  </div>
3417
- </div>
3418
- <div class="pf-v6-c-form__group">
3419
- <div class="pf-v6-c-form__group-label"><label
3420
- class="pf-v6-c-form__label"
3421
- for="wizard-in-page-example-wizard-form-field6"
3422
- >
3423
- <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
3424
- class="pf-v6-c-form__label-required"
3425
- aria-hidden="true"
3426
- >&#42;</span></label>
3389
+ <div class="pf-v6-c-form__group">
3390
+ <div class="pf-v6-c-form__group-label"><label
3391
+ class="pf-v6-c-form__label"
3392
+ for="wizard-in-page-example-wizard-form-field4"
3393
+ >
3394
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
3395
+ class="pf-v6-c-form__label-required"
3396
+ aria-hidden="true"
3397
+ >&#42;</span></label>
3398
+ </div>
3399
+ <div class="pf-v6-c-form__group-control">
3400
+ <span class="pf-v6-c-form-control">
3401
+ <input
3402
+ type="text"
3403
+ id="wizard-in-page-example-wizard-form-field4"
3404
+ name="wizard-in-page-example-wizard-form-field4"
3405
+ />
3406
+ </span>
3407
+ </div>
3427
3408
  </div>
3428
- <div class="pf-v6-c-form__group-control">
3429
- <span class="pf-v6-c-form-control">
3430
- <input
3431
- type="text"
3432
- id="wizard-in-page-example-wizard-form-field6"
3433
- name="wizard-in-page-example-wizard-form-field6"
3434
- />
3435
- </span>
3409
+ <div class="pf-v6-c-form__group">
3410
+ <div class="pf-v6-c-form__group-label"><label
3411
+ class="pf-v6-c-form__label"
3412
+ for="wizard-in-page-example-wizard-form-field5"
3413
+ >
3414
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
3415
+ class="pf-v6-c-form__label-required"
3416
+ aria-hidden="true"
3417
+ >&#42;</span></label>
3418
+ </div>
3419
+ <div class="pf-v6-c-form__group-control">
3420
+ <span class="pf-v6-c-form-control">
3421
+ <input
3422
+ type="text"
3423
+ id="wizard-in-page-example-wizard-form-field5"
3424
+ name="wizard-in-page-example-wizard-form-field5"
3425
+ />
3426
+ </span>
3427
+ </div>
3436
3428
  </div>
3437
- </div>
3438
- <div class="pf-v6-c-form__group">
3439
- <div class="pf-v6-c-form__group-label"><label
3440
- class="pf-v6-c-form__label"
3441
- for="wizard-in-page-example-wizard-form-field7"
3442
- >
3443
- <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
3444
- class="pf-v6-c-form__label-required"
3445
- aria-hidden="true"
3446
- >&#42;</span></label>
3429
+ <div class="pf-v6-c-form__group">
3430
+ <div class="pf-v6-c-form__group-label"><label
3431
+ class="pf-v6-c-form__label"
3432
+ for="wizard-in-page-example-wizard-form-field6"
3433
+ >
3434
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
3435
+ class="pf-v6-c-form__label-required"
3436
+ aria-hidden="true"
3437
+ >&#42;</span></label>
3438
+ </div>
3439
+ <div class="pf-v6-c-form__group-control">
3440
+ <span class="pf-v6-c-form-control">
3441
+ <input
3442
+ type="text"
3443
+ id="wizard-in-page-example-wizard-form-field6"
3444
+ name="wizard-in-page-example-wizard-form-field6"
3445
+ />
3446
+ </span>
3447
+ </div>
3447
3448
  </div>
3448
- <div class="pf-v6-c-form__group-control">
3449
- <span class="pf-v6-c-form-control">
3450
- <input
3451
- type="text"
3452
- id="wizard-in-page-example-wizard-form-field7"
3453
- name="wizard-in-page-example-wizard-form-field7"
3454
- />
3455
- </span>
3449
+ <div class="pf-v6-c-form__group">
3450
+ <div class="pf-v6-c-form__group-label"><label
3451
+ class="pf-v6-c-form__label"
3452
+ for="wizard-in-page-example-wizard-form-field7"
3453
+ >
3454
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
3455
+ class="pf-v6-c-form__label-required"
3456
+ aria-hidden="true"
3457
+ >&#42;</span></label>
3458
+ </div>
3459
+ <div class="pf-v6-c-form__group-control">
3460
+ <span class="pf-v6-c-form-control">
3461
+ <input
3462
+ type="text"
3463
+ id="wizard-in-page-example-wizard-form-field7"
3464
+ name="wizard-in-page-example-wizard-form-field7"
3465
+ />
3466
+ </span>
3467
+ </div>
3456
3468
  </div>
3457
- </div>
3458
- </form>
3469
+ </form>
3470
+ </div>
3459
3471
  </div>
3460
3472
  </div>
3473
+ <footer class="pf-v6-c-wizard__footer">
3474
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
3475
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
3476
+ <div class="pf-v6-c-wizard__footer-cancel">
3477
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
3478
+ </div>
3479
+ </footer>
3461
3480
  </div>
3462
- <footer class="pf-v6-c-wizard__footer">
3463
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
3464
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
3465
- <div class="pf-v6-c-wizard__footer-cancel">
3466
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
3467
- </div>
3468
- </footer>
3469
3481
  </div>
3470
- </div>
3471
- </section>
3472
- </main>
3482
+ </section>
3483
+ </main>
3484
+ </div>
3473
3485
  </div>
3474
3486
 
3475
3487
  ```
@@ -3697,277 +3709,279 @@ wrapperTag: div
3697
3709
  </nav>
3698
3710
  </div>
3699
3711
  </div>
3700
- <main
3701
- class="pf-v6-c-page__main"
3702
- tabindex="-1"
3703
- id="main-content-in-page-nav-expanded-example"
3704
- >
3705
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3706
- <div class="pf-v6-c-page__main-body">
3707
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3708
- <ol class="pf-v6-c-breadcrumb__list" role="list">
3709
- <li class="pf-v6-c-breadcrumb__item">
3710
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3711
- </li>
3712
- <li class="pf-v6-c-breadcrumb__item">
3713
- <span class="pf-v6-c-breadcrumb__item-divider">
3714
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3715
- </span>
3712
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3713
+ <main
3714
+ class="pf-v6-c-page__main"
3715
+ tabindex="-1"
3716
+ id="main-content-in-page-nav-expanded-example"
3717
+ >
3718
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3719
+ <div class="pf-v6-c-page__main-body">
3720
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3721
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3722
+ <li class="pf-v6-c-breadcrumb__item">
3723
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3724
+ </li>
3725
+ <li class="pf-v6-c-breadcrumb__item">
3726
+ <span class="pf-v6-c-breadcrumb__item-divider">
3727
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3728
+ </span>
3716
3729
 
3717
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3718
- </li>
3719
- <li class="pf-v6-c-breadcrumb__item">
3720
- <span class="pf-v6-c-breadcrumb__item-divider">
3721
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3722
- </span>
3730
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3731
+ </li>
3732
+ <li class="pf-v6-c-breadcrumb__item">
3733
+ <span class="pf-v6-c-breadcrumb__item-divider">
3734
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3735
+ </span>
3723
3736
 
3724
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3725
- </li>
3726
- <li class="pf-v6-c-breadcrumb__item">
3727
- <span class="pf-v6-c-breadcrumb__item-divider">
3728
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3729
- </span>
3737
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3738
+ </li>
3739
+ <li class="pf-v6-c-breadcrumb__item">
3740
+ <span class="pf-v6-c-breadcrumb__item-divider">
3741
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3742
+ </span>
3730
3743
 
3731
- <a
3732
- href="#"
3733
- class="pf-v6-c-breadcrumb__link pf-m-current"
3734
- aria-current="page"
3735
- >Section landing</a>
3736
- </li>
3737
- </ol>
3738
- </nav>
3739
- </div>
3740
- </section>
3741
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3742
- <div class="pf-v6-c-page__main-body">
3743
- <div class="pf-v6-c-content">
3744
- <h1>Main title</h1>
3745
- <p>This is a full page demo.</p>
3744
+ <a
3745
+ href="#"
3746
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3747
+ aria-current="page"
3748
+ >Section landing</a>
3749
+ </li>
3750
+ </ol>
3751
+ </nav>
3746
3752
  </div>
3747
- </div>
3748
- </section>
3749
- <section class="pf-v6-c-page__main-wizard">
3750
- <div class="pf-v6-c-wizard">
3751
- <button
3752
- aria-label="Wizard Header Toggle"
3753
- class="pf-v6-c-wizard__toggle pf-m-expanded"
3754
- aria-expanded="true"
3755
- >
3756
- <span class="pf-v6-c-wizard__toggle-list">
3757
- <span class="pf-v6-c-wizard__toggle-list-item">
3758
- <span class="pf-v6-c-wizard__toggle-num">2</span>
3759
- Configuration
3760
- <i
3761
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3762
- aria-hidden="true"
3763
- ></i>
3753
+ </section>
3754
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3755
+ <div class="pf-v6-c-page__main-body">
3756
+ <div class="pf-v6-c-content">
3757
+ <h1>Main title</h1>
3758
+ <p>This is a full page demo.</p>
3759
+ </div>
3760
+ </div>
3761
+ </section>
3762
+ <section class="pf-v6-c-page__main-wizard">
3763
+ <div class="pf-v6-c-wizard">
3764
+ <button
3765
+ aria-label="Wizard Header Toggle"
3766
+ class="pf-v6-c-wizard__toggle pf-m-expanded"
3767
+ aria-expanded="true"
3768
+ >
3769
+ <span class="pf-v6-c-wizard__toggle-list">
3770
+ <span class="pf-v6-c-wizard__toggle-list-item">
3771
+ <span class="pf-v6-c-wizard__toggle-num">2</span>
3772
+ Configuration
3773
+ <i
3774
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
3775
+ aria-hidden="true"
3776
+ ></i>
3777
+ </span>
3778
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3764
3779
  </span>
3765
- <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
3766
- </span>
3767
- <span class="pf-v6-c-wizard__toggle-icon">
3768
- <i class="fas fa-caret-down" aria-hidden="true"></i>
3769
- </span>
3770
- </button>
3771
- <div class="pf-v6-c-wizard__outer-wrap">
3772
- <div class="pf-v6-c-wizard__inner-wrap">
3773
- <nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
3774
- <ol class="pf-v6-c-wizard__nav-list" role="list">
3775
- <li class="pf-v6-c-wizard__nav-item">
3776
- <button
3777
- class="pf-v6-c-wizard__nav-link"
3778
- type="button"
3779
- >Information</button>
3780
- </li>
3781
- <li
3782
- class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded"
3783
- >
3784
- <button
3785
- class="pf-v6-c-wizard__nav-link pf-m-current"
3786
- type="button"
3787
- aria-expanded="true"
3780
+ <span class="pf-v6-c-wizard__toggle-icon">
3781
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3782
+ </span>
3783
+ </button>
3784
+ <div class="pf-v6-c-wizard__outer-wrap">
3785
+ <div class="pf-v6-c-wizard__inner-wrap">
3786
+ <nav class="pf-v6-c-wizard__nav pf-m-expanded" aria-label="Steps">
3787
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3788
+ <li class="pf-v6-c-wizard__nav-item">
3789
+ <button
3790
+ class="pf-v6-c-wizard__nav-link"
3791
+ type="button"
3792
+ >Information</button>
3793
+ </li>
3794
+ <li
3795
+ class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded"
3788
3796
  >
3789
- <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3790
- <span class="pf-v6-c-wizard__nav-link-toggle">
3791
- <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3792
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3797
+ <button
3798
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3799
+ type="button"
3800
+ aria-expanded="true"
3801
+ >
3802
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
3803
+ <span class="pf-v6-c-wizard__nav-link-toggle">
3804
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
3805
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3806
+ </span>
3793
3807
  </span>
3794
- </span>
3795
- </button>
3796
- <ol class="pf-v6-c-wizard__nav-list" role="list">
3797
- <li class="pf-v6-c-wizard__nav-item">
3798
- <button
3799
- class="pf-v6-c-wizard__nav-link"
3800
- type="button"
3801
- >Substep A</button>
3802
- </li>
3803
- <li class="pf-v6-c-wizard__nav-item">
3804
- <button
3805
- class="pf-v6-c-wizard__nav-link pf-m-current"
3806
- type="button"
3807
- aria-current="page"
3808
- >Substep B</button>
3809
- </li>
3810
- <li class="pf-v6-c-wizard__nav-item">
3811
- <button
3812
- class="pf-v6-c-wizard__nav-link"
3813
- type="button"
3814
- >Substep C</button>
3815
- </li>
3816
- </ol>
3817
- </li>
3818
- <li class="pf-v6-c-wizard__nav-item">
3819
- <button
3820
- class="pf-v6-c-wizard__nav-link"
3821
- type="button"
3822
- >Additional</button>
3823
- </li>
3824
- <li class="pf-v6-c-wizard__nav-item">
3825
- <button
3826
- class="pf-v6-c-wizard__nav-link pf-m-disabled"
3827
- type="button"
3828
- aria-disabled="true"
3829
- tabindex="-1"
3830
- >Review</button>
3831
- </li>
3832
- </ol>
3833
- </nav>
3834
- <div class="pf-v6-c-wizard__main" tabindex="0">
3835
- <div class="pf-v6-c-wizard__main-body">
3836
- <form class="pf-v6-c-form pf-m-limit-width" novalidate>
3837
- <div class="pf-v6-c-form__group">
3838
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field1">
3839
- <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
3840
- class="pf-v6-c-form__label-required"
3841
- aria-hidden="true"
3842
- >&#42;</span></label>
3808
+ </button>
3809
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
3810
+ <li class="pf-v6-c-wizard__nav-item">
3811
+ <button
3812
+ class="pf-v6-c-wizard__nav-link"
3813
+ type="button"
3814
+ >Substep A</button>
3815
+ </li>
3816
+ <li class="pf-v6-c-wizard__nav-item">
3817
+ <button
3818
+ class="pf-v6-c-wizard__nav-link pf-m-current"
3819
+ type="button"
3820
+ aria-current="page"
3821
+ >Substep B</button>
3822
+ </li>
3823
+ <li class="pf-v6-c-wizard__nav-item">
3824
+ <button
3825
+ class="pf-v6-c-wizard__nav-link"
3826
+ type="button"
3827
+ >Substep C</button>
3828
+ </li>
3829
+ </ol>
3830
+ </li>
3831
+ <li class="pf-v6-c-wizard__nav-item">
3832
+ <button
3833
+ class="pf-v6-c-wizard__nav-link"
3834
+ type="button"
3835
+ >Additional</button>
3836
+ </li>
3837
+ <li class="pf-v6-c-wizard__nav-item">
3838
+ <button
3839
+ class="pf-v6-c-wizard__nav-link pf-m-disabled"
3840
+ type="button"
3841
+ aria-disabled="true"
3842
+ tabindex="-1"
3843
+ >Review</button>
3844
+ </li>
3845
+ </ol>
3846
+ </nav>
3847
+ <div class="pf-v6-c-wizard__main" tabindex="0">
3848
+ <div class="pf-v6-c-wizard__main-body">
3849
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
3850
+ <div class="pf-v6-c-form__group">
3851
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field1">
3852
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
3853
+ class="pf-v6-c-form__label-required"
3854
+ aria-hidden="true"
3855
+ >&#42;</span></label>
3856
+ </div>
3857
+ <div class="pf-v6-c-form__group-control">
3858
+ <span class="pf-v6-c-form-control">
3859
+ <input
3860
+ type="text"
3861
+ id="-form-field1"
3862
+ name="-form-field1"
3863
+ />
3864
+ </span>
3865
+ </div>
3843
3866
  </div>
3844
- <div class="pf-v6-c-form__group-control">
3845
- <span class="pf-v6-c-form-control">
3846
- <input
3847
- type="text"
3848
- id="-form-field1"
3849
- name="-form-field1"
3850
- />
3851
- </span>
3852
- </div>
3853
- </div>
3854
- <div class="pf-v6-c-form__group">
3855
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field2">
3856
- <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
3857
- class="pf-v6-c-form__label-required"
3858
- aria-hidden="true"
3859
- >&#42;</span></label>
3860
- </div>
3861
- <div class="pf-v6-c-form__group-control">
3862
- <span class="pf-v6-c-form-control">
3863
- <input
3864
- type="text"
3865
- id="-form-field2"
3866
- name="-form-field2"
3867
- />
3868
- </span>
3869
- </div>
3870
- </div>
3871
- <div class="pf-v6-c-form__group">
3872
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field3">
3873
- <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
3874
- class="pf-v6-c-form__label-required"
3875
- aria-hidden="true"
3876
- >&#42;</span></label>
3877
- </div>
3878
- <div class="pf-v6-c-form__group-control">
3879
- <span class="pf-v6-c-form-control">
3880
- <input
3881
- type="text"
3882
- id="-form-field3"
3883
- name="-form-field3"
3884
- />
3885
- </span>
3886
- </div>
3887
- </div>
3888
- <div class="pf-v6-c-form__group">
3889
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field4">
3890
- <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
3891
- class="pf-v6-c-form__label-required"
3892
- aria-hidden="true"
3893
- >&#42;</span></label>
3894
- </div>
3895
- <div class="pf-v6-c-form__group-control">
3896
- <span class="pf-v6-c-form-control">
3897
- <input
3898
- type="text"
3899
- id="-form-field4"
3900
- name="-form-field4"
3901
- />
3902
- </span>
3903
- </div>
3904
- </div>
3905
- <div class="pf-v6-c-form__group">
3906
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field5">
3907
- <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
3908
- class="pf-v6-c-form__label-required"
3909
- aria-hidden="true"
3910
- >&#42;</span></label>
3867
+ <div class="pf-v6-c-form__group">
3868
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field2">
3869
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
3870
+ class="pf-v6-c-form__label-required"
3871
+ aria-hidden="true"
3872
+ >&#42;</span></label>
3873
+ </div>
3874
+ <div class="pf-v6-c-form__group-control">
3875
+ <span class="pf-v6-c-form-control">
3876
+ <input
3877
+ type="text"
3878
+ id="-form-field2"
3879
+ name="-form-field2"
3880
+ />
3881
+ </span>
3882
+ </div>
3911
3883
  </div>
3912
- <div class="pf-v6-c-form__group-control">
3913
- <span class="pf-v6-c-form-control">
3914
- <input
3915
- type="text"
3916
- id="-form-field5"
3917
- name="-form-field5"
3918
- />
3919
- </span>
3884
+ <div class="pf-v6-c-form__group">
3885
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field3">
3886
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
3887
+ class="pf-v6-c-form__label-required"
3888
+ aria-hidden="true"
3889
+ >&#42;</span></label>
3890
+ </div>
3891
+ <div class="pf-v6-c-form__group-control">
3892
+ <span class="pf-v6-c-form-control">
3893
+ <input
3894
+ type="text"
3895
+ id="-form-field3"
3896
+ name="-form-field3"
3897
+ />
3898
+ </span>
3899
+ </div>
3920
3900
  </div>
3921
- </div>
3922
- <div class="pf-v6-c-form__group">
3923
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field6">
3924
- <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
3925
- class="pf-v6-c-form__label-required"
3926
- aria-hidden="true"
3927
- >&#42;</span></label>
3901
+ <div class="pf-v6-c-form__group">
3902
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field4">
3903
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
3904
+ class="pf-v6-c-form__label-required"
3905
+ aria-hidden="true"
3906
+ >&#42;</span></label>
3907
+ </div>
3908
+ <div class="pf-v6-c-form__group-control">
3909
+ <span class="pf-v6-c-form-control">
3910
+ <input
3911
+ type="text"
3912
+ id="-form-field4"
3913
+ name="-form-field4"
3914
+ />
3915
+ </span>
3916
+ </div>
3928
3917
  </div>
3929
- <div class="pf-v6-c-form__group-control">
3930
- <span class="pf-v6-c-form-control">
3931
- <input
3932
- type="text"
3933
- id="-form-field6"
3934
- name="-form-field6"
3935
- />
3936
- </span>
3918
+ <div class="pf-v6-c-form__group">
3919
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field5">
3920
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
3921
+ class="pf-v6-c-form__label-required"
3922
+ aria-hidden="true"
3923
+ >&#42;</span></label>
3924
+ </div>
3925
+ <div class="pf-v6-c-form__group-control">
3926
+ <span class="pf-v6-c-form-control">
3927
+ <input
3928
+ type="text"
3929
+ id="-form-field5"
3930
+ name="-form-field5"
3931
+ />
3932
+ </span>
3933
+ </div>
3937
3934
  </div>
3938
- </div>
3939
- <div class="pf-v6-c-form__group">
3940
- <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field7">
3941
- <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
3942
- class="pf-v6-c-form__label-required"
3943
- aria-hidden="true"
3944
- >&#42;</span></label>
3935
+ <div class="pf-v6-c-form__group">
3936
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field6">
3937
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
3938
+ class="pf-v6-c-form__label-required"
3939
+ aria-hidden="true"
3940
+ >&#42;</span></label>
3941
+ </div>
3942
+ <div class="pf-v6-c-form__group-control">
3943
+ <span class="pf-v6-c-form-control">
3944
+ <input
3945
+ type="text"
3946
+ id="-form-field6"
3947
+ name="-form-field6"
3948
+ />
3949
+ </span>
3950
+ </div>
3945
3951
  </div>
3946
- <div class="pf-v6-c-form__group-control">
3947
- <span class="pf-v6-c-form-control">
3948
- <input
3949
- type="text"
3950
- id="-form-field7"
3951
- name="-form-field7"
3952
- />
3953
- </span>
3952
+ <div class="pf-v6-c-form__group">
3953
+ <div class="pf-v6-c-form__group-label"><label class="pf-v6-c-form__label" for="-form-field7">
3954
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
3955
+ class="pf-v6-c-form__label-required"
3956
+ aria-hidden="true"
3957
+ >&#42;</span></label>
3958
+ </div>
3959
+ <div class="pf-v6-c-form__group-control">
3960
+ <span class="pf-v6-c-form-control">
3961
+ <input
3962
+ type="text"
3963
+ id="-form-field7"
3964
+ name="-form-field7"
3965
+ />
3966
+ </span>
3967
+ </div>
3954
3968
  </div>
3955
- </div>
3956
- </form>
3969
+ </form>
3970
+ </div>
3957
3971
  </div>
3958
3972
  </div>
3973
+ <footer class="pf-v6-c-wizard__footer">
3974
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
3975
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
3976
+ <div class="pf-v6-c-wizard__footer-cancel">
3977
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
3978
+ </div>
3979
+ </footer>
3959
3980
  </div>
3960
- <footer class="pf-v6-c-wizard__footer">
3961
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
3962
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
3963
- <div class="pf-v6-c-wizard__footer-cancel">
3964
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
3965
- </div>
3966
- </footer>
3967
3981
  </div>
3968
- </div>
3969
- </section>
3970
- </main>
3982
+ </section>
3983
+ </main>
3984
+ </div>
3971
3985
  </div>
3972
3986
 
3973
3987
  ```
@@ -4198,349 +4212,351 @@ wrapperTag: div
4198
4212
  </nav>
4199
4213
  </div>
4200
4214
  </div>
4201
- <main
4202
- class="pf-v6-c-page__main"
4203
- tabindex="-1"
4204
- id="main-content-wizard-with-drawer-in-page-example"
4205
- >
4206
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4207
- <div class="pf-v6-c-page__main-body">
4208
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4209
- <ol class="pf-v6-c-breadcrumb__list" role="list">
4210
- <li class="pf-v6-c-breadcrumb__item">
4211
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4212
- </li>
4213
- <li class="pf-v6-c-breadcrumb__item">
4214
- <span class="pf-v6-c-breadcrumb__item-divider">
4215
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4216
- </span>
4215
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4216
+ <main
4217
+ class="pf-v6-c-page__main"
4218
+ tabindex="-1"
4219
+ id="main-content-wizard-with-drawer-in-page-example"
4220
+ >
4221
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4222
+ <div class="pf-v6-c-page__main-body">
4223
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4224
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4225
+ <li class="pf-v6-c-breadcrumb__item">
4226
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4227
+ </li>
4228
+ <li class="pf-v6-c-breadcrumb__item">
4229
+ <span class="pf-v6-c-breadcrumb__item-divider">
4230
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4231
+ </span>
4217
4232
 
4218
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4219
- </li>
4220
- <li class="pf-v6-c-breadcrumb__item">
4221
- <span class="pf-v6-c-breadcrumb__item-divider">
4222
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4223
- </span>
4233
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4234
+ </li>
4235
+ <li class="pf-v6-c-breadcrumb__item">
4236
+ <span class="pf-v6-c-breadcrumb__item-divider">
4237
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4238
+ </span>
4224
4239
 
4225
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4226
- </li>
4227
- <li class="pf-v6-c-breadcrumb__item">
4228
- <span class="pf-v6-c-breadcrumb__item-divider">
4229
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4230
- </span>
4240
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4241
+ </li>
4242
+ <li class="pf-v6-c-breadcrumb__item">
4243
+ <span class="pf-v6-c-breadcrumb__item-divider">
4244
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4245
+ </span>
4231
4246
 
4232
- <a
4233
- href="#"
4234
- class="pf-v6-c-breadcrumb__link pf-m-current"
4235
- aria-current="page"
4236
- >Section landing</a>
4237
- </li>
4238
- </ol>
4239
- </nav>
4240
- </div>
4241
- </section>
4242
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
4243
- <div class="pf-v6-c-page__main-body">
4244
- <div class="pf-v6-c-content">
4245
- <h1>Main title</h1>
4246
- <p>This is a full page demo.</p>
4247
+ <a
4248
+ href="#"
4249
+ class="pf-v6-c-breadcrumb__link pf-m-current"
4250
+ aria-current="page"
4251
+ >Section landing</a>
4252
+ </li>
4253
+ </ol>
4254
+ </nav>
4247
4255
  </div>
4248
- </div>
4249
- </section>
4250
- <section class="pf-v6-c-page__main-wizard pf-m-light-200">
4251
- <div class="pf-v6-c-wizard">
4252
- <button
4253
- aria-label="Wizard Header Toggle"
4254
- class="pf-v6-c-wizard__toggle"
4255
- aria-expanded="false"
4256
- >
4257
- <span class="pf-v6-c-wizard__toggle-list">
4258
- <span class="pf-v6-c-wizard__toggle-list-item">
4259
- <span class="pf-v6-c-wizard__toggle-num">2</span>
4260
- Configuration
4261
- <i
4262
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4263
- aria-hidden="true"
4264
- ></i>
4256
+ </section>
4257
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
4258
+ <div class="pf-v6-c-page__main-body">
4259
+ <div class="pf-v6-c-content">
4260
+ <h1>Main title</h1>
4261
+ <p>This is a full page demo.</p>
4262
+ </div>
4263
+ </div>
4264
+ </section>
4265
+ <section class="pf-v6-c-page__main-wizard pf-m-light-200">
4266
+ <div class="pf-v6-c-wizard">
4267
+ <button
4268
+ aria-label="Wizard Header Toggle"
4269
+ class="pf-v6-c-wizard__toggle"
4270
+ aria-expanded="false"
4271
+ >
4272
+ <span class="pf-v6-c-wizard__toggle-list">
4273
+ <span class="pf-v6-c-wizard__toggle-list-item">
4274
+ <span class="pf-v6-c-wizard__toggle-num">2</span>
4275
+ Configuration
4276
+ <i
4277
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4278
+ aria-hidden="true"
4279
+ ></i>
4280
+ </span>
4281
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4265
4282
  </span>
4266
- <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4267
- </span>
4268
- <span class="pf-v6-c-wizard__toggle-icon">
4269
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4270
- </span>
4271
- </button>
4272
- <div class="pf-v6-c-wizard__outer-wrap">
4273
- <div class="pf-v6-c-wizard__inner-wrap">
4274
- <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
4275
- <ol class="pf-v6-c-wizard__nav-list" role="list">
4276
- <li class="pf-v6-c-wizard__nav-item">
4277
- <button
4278
- class="pf-v6-c-wizard__nav-link"
4279
- type="button"
4280
- >Information</button>
4281
- </li>
4282
- <li
4283
- class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded"
4284
- >
4285
- <button
4286
- class="pf-v6-c-wizard__nav-link pf-m-current"
4287
- type="button"
4288
- aria-expanded="true"
4283
+ <span class="pf-v6-c-wizard__toggle-icon">
4284
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4285
+ </span>
4286
+ </button>
4287
+ <div class="pf-v6-c-wizard__outer-wrap">
4288
+ <div class="pf-v6-c-wizard__inner-wrap">
4289
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
4290
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
4291
+ <li class="pf-v6-c-wizard__nav-item">
4292
+ <button
4293
+ class="pf-v6-c-wizard__nav-link"
4294
+ type="button"
4295
+ >Information</button>
4296
+ </li>
4297
+ <li
4298
+ class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded"
4289
4299
  >
4290
- <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
4291
- <span class="pf-v6-c-wizard__nav-link-toggle">
4292
- <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4293
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4300
+ <button
4301
+ class="pf-v6-c-wizard__nav-link pf-m-current"
4302
+ type="button"
4303
+ aria-expanded="true"
4304
+ >
4305
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
4306
+ <span class="pf-v6-c-wizard__nav-link-toggle">
4307
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4308
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4309
+ </span>
4294
4310
  </span>
4295
- </span>
4296
- </button>
4297
- <ol class="pf-v6-c-wizard__nav-list" role="list">
4298
- <li class="pf-v6-c-wizard__nav-item">
4299
- <button
4300
- class="pf-v6-c-wizard__nav-link"
4301
- type="button"
4302
- >Substep A</button>
4303
- </li>
4304
- <li class="pf-v6-c-wizard__nav-item">
4305
- <button
4306
- class="pf-v6-c-wizard__nav-link pf-m-current"
4307
- type="button"
4308
- aria-current="page"
4309
- >Substep B</button>
4310
- </li>
4311
- <li class="pf-v6-c-wizard__nav-item">
4312
- <button
4313
- class="pf-v6-c-wizard__nav-link"
4314
- type="button"
4315
- >Substep C</button>
4316
- </li>
4317
- </ol>
4318
- </li>
4319
- <li class="pf-v6-c-wizard__nav-item">
4320
- <button
4321
- class="pf-v6-c-wizard__nav-link"
4322
- type="button"
4323
- >Additional</button>
4324
- </li>
4325
- <li class="pf-v6-c-wizard__nav-item">
4326
- <button
4327
- class="pf-v6-c-wizard__nav-link"
4328
- type="button"
4329
- disabled
4330
- >Review</button>
4331
- </li>
4332
- </ol>
4333
- </nav>
4334
- <main class="pf-v6-c-wizard__main" tabindex="0">
4335
- <div class="pf-v6-c-drawer pf-m-inline">
4336
- <div class="pf-v6-c-drawer__main">
4337
- <div class="pf-v6-c-drawer__content">
4338
- <div class="pf-v6-c-wizard__main-body">
4339
- <form class="pf-v6-c-form pf-m-limit-width" novalidate>
4340
- <div class="pf-v6-c-form__group">
4341
- <div class="pf-v6-c-form__group-label"><label
4342
- class="pf-v6-c-form__label"
4343
- for="wizard-with-drawer-in-page-example-wizard-form-field1"
4344
- >
4345
- <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
4346
- class="pf-v6-c-form__label-required"
4347
- aria-hidden="true"
4348
- >&#42;</span></label>
4311
+ </button>
4312
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
4313
+ <li class="pf-v6-c-wizard__nav-item">
4314
+ <button
4315
+ class="pf-v6-c-wizard__nav-link"
4316
+ type="button"
4317
+ >Substep A</button>
4318
+ </li>
4319
+ <li class="pf-v6-c-wizard__nav-item">
4320
+ <button
4321
+ class="pf-v6-c-wizard__nav-link pf-m-current"
4322
+ type="button"
4323
+ aria-current="page"
4324
+ >Substep B</button>
4325
+ </li>
4326
+ <li class="pf-v6-c-wizard__nav-item">
4327
+ <button
4328
+ class="pf-v6-c-wizard__nav-link"
4329
+ type="button"
4330
+ >Substep C</button>
4331
+ </li>
4332
+ </ol>
4333
+ </li>
4334
+ <li class="pf-v6-c-wizard__nav-item">
4335
+ <button
4336
+ class="pf-v6-c-wizard__nav-link"
4337
+ type="button"
4338
+ >Additional</button>
4339
+ </li>
4340
+ <li class="pf-v6-c-wizard__nav-item">
4341
+ <button
4342
+ class="pf-v6-c-wizard__nav-link"
4343
+ type="button"
4344
+ disabled
4345
+ >Review</button>
4346
+ </li>
4347
+ </ol>
4348
+ </nav>
4349
+ <main class="pf-v6-c-wizard__main" tabindex="0">
4350
+ <div class="pf-v6-c-drawer pf-m-inline">
4351
+ <div class="pf-v6-c-drawer__main">
4352
+ <div class="pf-v6-c-drawer__content">
4353
+ <div class="pf-v6-c-wizard__main-body">
4354
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
4355
+ <div class="pf-v6-c-form__group">
4356
+ <div class="pf-v6-c-form__group-label"><label
4357
+ class="pf-v6-c-form__label"
4358
+ for="wizard-with-drawer-in-page-example-wizard-form-field1"
4359
+ >
4360
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
4361
+ class="pf-v6-c-form__label-required"
4362
+ aria-hidden="true"
4363
+ >&#42;</span></label>
4364
+ </div>
4365
+ <div class="pf-v6-c-form__group-control">
4366
+ <span class="pf-v6-c-form-control">
4367
+ <input
4368
+ type="text"
4369
+ id="wizard-with-drawer-in-page-example-wizard-form-field1"
4370
+ name="wizard-with-drawer-in-page-example-wizard-form-field1"
4371
+ />
4372
+ </span>
4373
+ </div>
4349
4374
  </div>
4350
- <div class="pf-v6-c-form__group-control">
4351
- <span class="pf-v6-c-form-control">
4352
- <input
4353
- type="text"
4354
- id="wizard-with-drawer-in-page-example-wizard-form-field1"
4355
- name="wizard-with-drawer-in-page-example-wizard-form-field1"
4356
- />
4357
- </span>
4375
+ <div class="pf-v6-c-form__group">
4376
+ <div class="pf-v6-c-form__group-label"><label
4377
+ class="pf-v6-c-form__label"
4378
+ for="wizard-with-drawer-in-page-example-wizard-form-field2"
4379
+ >
4380
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
4381
+ class="pf-v6-c-form__label-required"
4382
+ aria-hidden="true"
4383
+ >&#42;</span></label>
4384
+ </div>
4385
+ <div class="pf-v6-c-form__group-control">
4386
+ <span class="pf-v6-c-form-control">
4387
+ <input
4388
+ type="text"
4389
+ id="wizard-with-drawer-in-page-example-wizard-form-field2"
4390
+ name="wizard-with-drawer-in-page-example-wizard-form-field2"
4391
+ />
4392
+ </span>
4393
+ </div>
4358
4394
  </div>
4359
- </div>
4360
- <div class="pf-v6-c-form__group">
4361
- <div class="pf-v6-c-form__group-label"><label
4362
- class="pf-v6-c-form__label"
4363
- for="wizard-with-drawer-in-page-example-wizard-form-field2"
4364
- >
4365
- <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
4366
- class="pf-v6-c-form__label-required"
4367
- aria-hidden="true"
4368
- >&#42;</span></label>
4395
+ <div class="pf-v6-c-form__group">
4396
+ <div class="pf-v6-c-form__group-label"><label
4397
+ class="pf-v6-c-form__label"
4398
+ for="wizard-with-drawer-in-page-example-wizard-form-field3"
4399
+ >
4400
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
4401
+ class="pf-v6-c-form__label-required"
4402
+ aria-hidden="true"
4403
+ >&#42;</span></label>
4404
+ </div>
4405
+ <div class="pf-v6-c-form__group-control">
4406
+ <span class="pf-v6-c-form-control">
4407
+ <input
4408
+ type="text"
4409
+ id="wizard-with-drawer-in-page-example-wizard-form-field3"
4410
+ name="wizard-with-drawer-in-page-example-wizard-form-field3"
4411
+ />
4412
+ </span>
4413
+ </div>
4369
4414
  </div>
4370
- <div class="pf-v6-c-form__group-control">
4371
- <span class="pf-v6-c-form-control">
4372
- <input
4373
- type="text"
4374
- id="wizard-with-drawer-in-page-example-wizard-form-field2"
4375
- name="wizard-with-drawer-in-page-example-wizard-form-field2"
4376
- />
4377
- </span>
4415
+ <div class="pf-v6-c-form__group">
4416
+ <div class="pf-v6-c-form__group-label"><label
4417
+ class="pf-v6-c-form__label"
4418
+ for="wizard-with-drawer-in-page-example-wizard-form-field4"
4419
+ >
4420
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
4421
+ class="pf-v6-c-form__label-required"
4422
+ aria-hidden="true"
4423
+ >&#42;</span></label>
4424
+ </div>
4425
+ <div class="pf-v6-c-form__group-control">
4426
+ <span class="pf-v6-c-form-control">
4427
+ <input
4428
+ type="text"
4429
+ id="wizard-with-drawer-in-page-example-wizard-form-field4"
4430
+ name="wizard-with-drawer-in-page-example-wizard-form-field4"
4431
+ />
4432
+ </span>
4433
+ </div>
4378
4434
  </div>
4379
- </div>
4380
- <div class="pf-v6-c-form__group">
4381
- <div class="pf-v6-c-form__group-label"><label
4382
- class="pf-v6-c-form__label"
4383
- for="wizard-with-drawer-in-page-example-wizard-form-field3"
4384
- >
4385
- <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
4386
- class="pf-v6-c-form__label-required"
4387
- aria-hidden="true"
4388
- >&#42;</span></label>
4435
+ <div class="pf-v6-c-form__group">
4436
+ <div class="pf-v6-c-form__group-label"><label
4437
+ class="pf-v6-c-form__label"
4438
+ for="wizard-with-drawer-in-page-example-wizard-form-field5"
4439
+ >
4440
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
4441
+ class="pf-v6-c-form__label-required"
4442
+ aria-hidden="true"
4443
+ >&#42;</span></label>
4444
+ </div>
4445
+ <div class="pf-v6-c-form__group-control">
4446
+ <span class="pf-v6-c-form-control">
4447
+ <input
4448
+ type="text"
4449
+ id="wizard-with-drawer-in-page-example-wizard-form-field5"
4450
+ name="wizard-with-drawer-in-page-example-wizard-form-field5"
4451
+ />
4452
+ </span>
4453
+ </div>
4389
4454
  </div>
4390
- <div class="pf-v6-c-form__group-control">
4391
- <span class="pf-v6-c-form-control">
4392
- <input
4393
- type="text"
4394
- id="wizard-with-drawer-in-page-example-wizard-form-field3"
4395
- name="wizard-with-drawer-in-page-example-wizard-form-field3"
4396
- />
4397
- </span>
4455
+ <div class="pf-v6-c-form__group">
4456
+ <div class="pf-v6-c-form__group-label"><label
4457
+ class="pf-v6-c-form__label"
4458
+ for="wizard-with-drawer-in-page-example-wizard-form-field6"
4459
+ >
4460
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
4461
+ class="pf-v6-c-form__label-required"
4462
+ aria-hidden="true"
4463
+ >&#42;</span></label>
4464
+ </div>
4465
+ <div class="pf-v6-c-form__group-control">
4466
+ <span class="pf-v6-c-form-control">
4467
+ <input
4468
+ type="text"
4469
+ id="wizard-with-drawer-in-page-example-wizard-form-field6"
4470
+ name="wizard-with-drawer-in-page-example-wizard-form-field6"
4471
+ />
4472
+ </span>
4473
+ </div>
4398
4474
  </div>
4399
- </div>
4400
- <div class="pf-v6-c-form__group">
4401
- <div class="pf-v6-c-form__group-label"><label
4402
- class="pf-v6-c-form__label"
4403
- for="wizard-with-drawer-in-page-example-wizard-form-field4"
4404
- >
4405
- <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
4406
- class="pf-v6-c-form__label-required"
4407
- aria-hidden="true"
4408
- >&#42;</span></label>
4409
- </div>
4410
- <div class="pf-v6-c-form__group-control">
4411
- <span class="pf-v6-c-form-control">
4412
- <input
4413
- type="text"
4414
- id="wizard-with-drawer-in-page-example-wizard-form-field4"
4415
- name="wizard-with-drawer-in-page-example-wizard-form-field4"
4416
- />
4417
- </span>
4475
+ <div class="pf-v6-c-form__group">
4476
+ <div class="pf-v6-c-form__group-label"><label
4477
+ class="pf-v6-c-form__label"
4478
+ for="wizard-with-drawer-in-page-example-wizard-form-field7"
4479
+ >
4480
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
4481
+ class="pf-v6-c-form__label-required"
4482
+ aria-hidden="true"
4483
+ >&#42;</span></label>
4484
+ </div>
4485
+ <div class="pf-v6-c-form__group-control">
4486
+ <span class="pf-v6-c-form-control">
4487
+ <input
4488
+ type="text"
4489
+ id="wizard-with-drawer-in-page-example-wizard-form-field7"
4490
+ name="wizard-with-drawer-in-page-example-wizard-form-field7"
4491
+ />
4492
+ </span>
4493
+ </div>
4418
4494
  </div>
4419
- </div>
4420
- <div class="pf-v6-c-form__group">
4421
- <div class="pf-v6-c-form__group-label"><label
4422
- class="pf-v6-c-form__label"
4423
- for="wizard-with-drawer-in-page-example-wizard-form-field5"
4424
- >
4425
- <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
4426
- class="pf-v6-c-form__label-required"
4427
- aria-hidden="true"
4428
- >&#42;</span></label>
4429
- </div>
4430
- <div class="pf-v6-c-form__group-control">
4431
- <span class="pf-v6-c-form-control">
4432
- <input
4433
- type="text"
4434
- id="wizard-with-drawer-in-page-example-wizard-form-field5"
4435
- name="wizard-with-drawer-in-page-example-wizard-form-field5"
4436
- />
4437
- </span>
4438
- </div>
4439
- </div>
4440
- <div class="pf-v6-c-form__group">
4441
- <div class="pf-v6-c-form__group-label"><label
4442
- class="pf-v6-c-form__label"
4443
- for="wizard-with-drawer-in-page-example-wizard-form-field6"
4444
- >
4445
- <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
4446
- class="pf-v6-c-form__label-required"
4447
- aria-hidden="true"
4448
- >&#42;</span></label>
4449
- </div>
4450
- <div class="pf-v6-c-form__group-control">
4451
- <span class="pf-v6-c-form-control">
4452
- <input
4453
- type="text"
4454
- id="wizard-with-drawer-in-page-example-wizard-form-field6"
4455
- name="wizard-with-drawer-in-page-example-wizard-form-field6"
4456
- />
4457
- </span>
4495
+ </form>
4496
+ </div>
4497
+ </div>
4498
+ <div
4499
+ class="pf-v6-c-drawer__panel pf-m-light-200 pf-m-width-33"
4500
+ hidden
4501
+ >
4502
+ <div class="pf-v6-c-drawer__body">
4503
+ <div class="pf-v6-c-drawer__head">
4504
+ <h2
4505
+ class="pf-v6-c-title pf-m-xl"
4506
+ >Register with Red Hat connector</h2>
4507
+ <div class="pf-v6-c-drawer__actions">
4508
+ <div class="pf-v6-c-drawer__close">
4509
+ <button
4510
+ class="pf-v6-c-button pf-m-plain"
4511
+ type="button"
4512
+ aria-label="Close drawer panel"
4513
+ >
4514
+ <i class="fas fa-times" aria-hidden="true"></i>
4515
+ </button>
4516
+ </div>
4458
4517
  </div>
4459
4518
  </div>
4460
- <div class="pf-v6-c-form__group">
4461
- <div class="pf-v6-c-form__group-label"><label
4462
- class="pf-v6-c-form__label"
4463
- for="wizard-with-drawer-in-page-example-wizard-form-field7"
4519
+ </div>
4520
+ <div class="pf-v6-c-drawer__body">
4521
+ <div class="pf-v6-c-content">
4522
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
4523
+ <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
4524
+ <p>
4525
+ Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
4526
+ <a
4527
+ href="#"
4528
+ >Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
4529
+ </p>
4530
+ <a href="#">
4531
+ <span
4532
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
4464
4533
  >
4465
- <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
4466
- class="pf-v6-c-form__label-required"
4534
+ <span>Learn about Red Hat connector</span>
4535
+ <i
4536
+ class="fas fa-external-link-alt"
4467
4537
  aria-hidden="true"
4468
- >&#42;</span></label>
4469
- </div>
4470
- <div class="pf-v6-c-form__group-control">
4471
- <span class="pf-v6-c-form-control">
4472
- <input
4473
- type="text"
4474
- id="wizard-with-drawer-in-page-example-wizard-form-field7"
4475
- name="wizard-with-drawer-in-page-example-wizard-form-field7"
4476
- />
4538
+ ></i>
4477
4539
  </span>
4478
- </div>
4479
- </div>
4480
- </form>
4481
- </div>
4482
- </div>
4483
- <div
4484
- class="pf-v6-c-drawer__panel pf-m-light-200 pf-m-width-33"
4485
- hidden
4486
- >
4487
- <div class="pf-v6-c-drawer__body">
4488
- <div class="pf-v6-c-drawer__head">
4489
- <h2
4490
- class="pf-v6-c-title pf-m-xl"
4491
- >Register with Red Hat connector</h2>
4492
- <div class="pf-v6-c-drawer__actions">
4493
- <div class="pf-v6-c-drawer__close">
4494
- <button
4495
- class="pf-v6-c-button pf-m-plain"
4496
- type="button"
4497
- aria-label="Close drawer panel"
4498
- >
4499
- <i class="fas fa-times" aria-hidden="true"></i>
4500
- </button>
4501
- </div>
4540
+ </a>
4502
4541
  </div>
4503
4542
  </div>
4504
4543
  </div>
4505
- <div class="pf-v6-c-drawer__body">
4506
- <div class="pf-v6-c-content">
4507
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
4508
- <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
4509
- <p>
4510
- Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
4511
- <a
4512
- href="#"
4513
- >Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
4514
- </p>
4515
- <a href="#">
4516
- <span
4517
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
4518
- >
4519
- <span>Learn about Red Hat connector</span>
4520
- <i
4521
- class="fas fa-external-link-alt"
4522
- aria-hidden="true"
4523
- ></i>
4524
- </span>
4525
- </a>
4526
- </div>
4527
- </div>
4528
4544
  </div>
4529
4545
  </div>
4546
+ </main>
4547
+ </div>
4548
+ <footer class="pf-v6-c-wizard__footer">
4549
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
4550
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
4551
+ <div class="pf-v6-c-wizard__footer-cancel">
4552
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
4530
4553
  </div>
4531
- </main>
4554
+ </footer>
4532
4555
  </div>
4533
- <footer class="pf-v6-c-wizard__footer">
4534
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
4535
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
4536
- <div class="pf-v6-c-wizard__footer-cancel">
4537
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
4538
- </div>
4539
- </footer>
4540
4556
  </div>
4541
- </div>
4542
- </section>
4543
- </main>
4557
+ </section>
4558
+ </main>
4559
+ </div>
4544
4560
  </div>
4545
4561
 
4546
4562
  ```
@@ -4771,348 +4787,350 @@ wrapperTag: div
4771
4787
  </nav>
4772
4788
  </div>
4773
4789
  </div>
4774
- <main
4775
- class="pf-v6-c-page__main"
4776
- tabindex="-1"
4777
- id="main-content-wizard-with-drawer-in-page-expanded-example"
4778
- >
4779
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4780
- <div class="pf-v6-c-page__main-body">
4781
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4782
- <ol class="pf-v6-c-breadcrumb__list" role="list">
4783
- <li class="pf-v6-c-breadcrumb__item">
4784
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4785
- </li>
4786
- <li class="pf-v6-c-breadcrumb__item">
4787
- <span class="pf-v6-c-breadcrumb__item-divider">
4788
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4789
- </span>
4790
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4791
+ <main
4792
+ class="pf-v6-c-page__main"
4793
+ tabindex="-1"
4794
+ id="main-content-wizard-with-drawer-in-page-expanded-example"
4795
+ >
4796
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4797
+ <div class="pf-v6-c-page__main-body">
4798
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4799
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4800
+ <li class="pf-v6-c-breadcrumb__item">
4801
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
4802
+ </li>
4803
+ <li class="pf-v6-c-breadcrumb__item">
4804
+ <span class="pf-v6-c-breadcrumb__item-divider">
4805
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4806
+ </span>
4790
4807
 
4791
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4792
- </li>
4793
- <li class="pf-v6-c-breadcrumb__item">
4794
- <span class="pf-v6-c-breadcrumb__item-divider">
4795
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4796
- </span>
4808
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4809
+ </li>
4810
+ <li class="pf-v6-c-breadcrumb__item">
4811
+ <span class="pf-v6-c-breadcrumb__item-divider">
4812
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4813
+ </span>
4797
4814
 
4798
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4799
- </li>
4800
- <li class="pf-v6-c-breadcrumb__item">
4801
- <span class="pf-v6-c-breadcrumb__item-divider">
4802
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4803
- </span>
4815
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
4816
+ </li>
4817
+ <li class="pf-v6-c-breadcrumb__item">
4818
+ <span class="pf-v6-c-breadcrumb__item-divider">
4819
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4820
+ </span>
4804
4821
 
4805
- <a
4806
- href="#"
4807
- class="pf-v6-c-breadcrumb__link pf-m-current"
4808
- aria-current="page"
4809
- >Section landing</a>
4810
- </li>
4811
- </ol>
4812
- </nav>
4813
- </div>
4814
- </section>
4815
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
4816
- <div class="pf-v6-c-page__main-body">
4817
- <div class="pf-v6-c-content">
4818
- <h1>Main title</h1>
4819
- <p>This is a full page demo.</p>
4822
+ <a
4823
+ href="#"
4824
+ class="pf-v6-c-breadcrumb__link pf-m-current"
4825
+ aria-current="page"
4826
+ >Section landing</a>
4827
+ </li>
4828
+ </ol>
4829
+ </nav>
4820
4830
  </div>
4821
- </div>
4822
- </section>
4823
- <section class="pf-v6-c-page__main-wizard pf-m-light-200">
4824
- <div class="pf-v6-c-wizard">
4825
- <button
4826
- aria-label="Wizard Header Toggle"
4827
- class="pf-v6-c-wizard__toggle"
4828
- aria-expanded="false"
4829
- >
4830
- <span class="pf-v6-c-wizard__toggle-list">
4831
- <span class="pf-v6-c-wizard__toggle-list-item">
4832
- <span class="pf-v6-c-wizard__toggle-num">2</span>
4833
- Configuration
4834
- <i
4835
- class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4836
- aria-hidden="true"
4837
- ></i>
4831
+ </section>
4832
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
4833
+ <div class="pf-v6-c-page__main-body">
4834
+ <div class="pf-v6-c-content">
4835
+ <h1>Main title</h1>
4836
+ <p>This is a full page demo.</p>
4837
+ </div>
4838
+ </div>
4839
+ </section>
4840
+ <section class="pf-v6-c-page__main-wizard pf-m-light-200">
4841
+ <div class="pf-v6-c-wizard">
4842
+ <button
4843
+ aria-label="Wizard Header Toggle"
4844
+ class="pf-v6-c-wizard__toggle"
4845
+ aria-expanded="false"
4846
+ >
4847
+ <span class="pf-v6-c-wizard__toggle-list">
4848
+ <span class="pf-v6-c-wizard__toggle-list-item">
4849
+ <span class="pf-v6-c-wizard__toggle-num">2</span>
4850
+ Configuration
4851
+ <i
4852
+ class="fas fa-angle-right pf-v6-c-wizard__toggle-separator"
4853
+ aria-hidden="true"
4854
+ ></i>
4855
+ </span>
4856
+ <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4838
4857
  </span>
4839
- <span class="pf-v6-c-wizard__toggle-list-item">Substep B</span>
4840
- </span>
4841
- <span class="pf-v6-c-wizard__toggle-icon">
4842
- <i class="fas fa-caret-down" aria-hidden="true"></i>
4843
- </span>
4844
- </button>
4845
- <div class="pf-v6-c-wizard__outer-wrap">
4846
- <div class="pf-v6-c-wizard__inner-wrap">
4847
- <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
4848
- <ol class="pf-v6-c-wizard__nav-list" role="list">
4849
- <li class="pf-v6-c-wizard__nav-item">
4850
- <button
4851
- class="pf-v6-c-wizard__nav-link"
4852
- type="button"
4853
- >Information</button>
4854
- </li>
4855
- <li
4856
- class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded"
4857
- >
4858
- <button
4859
- class="pf-v6-c-wizard__nav-link pf-m-current"
4860
- type="button"
4861
- aria-expanded="true"
4858
+ <span class="pf-v6-c-wizard__toggle-icon">
4859
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4860
+ </span>
4861
+ </button>
4862
+ <div class="pf-v6-c-wizard__outer-wrap">
4863
+ <div class="pf-v6-c-wizard__inner-wrap">
4864
+ <nav class="pf-v6-c-wizard__nav" aria-label="Steps">
4865
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
4866
+ <li class="pf-v6-c-wizard__nav-item">
4867
+ <button
4868
+ class="pf-v6-c-wizard__nav-link"
4869
+ type="button"
4870
+ >Information</button>
4871
+ </li>
4872
+ <li
4873
+ class="pf-v6-c-wizard__nav-item pf-m-expandable pf-m-expanded"
4862
4874
  >
4863
- <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
4864
- <span class="pf-v6-c-wizard__nav-link-toggle">
4865
- <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4866
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4875
+ <button
4876
+ class="pf-v6-c-wizard__nav-link pf-m-current"
4877
+ type="button"
4878
+ aria-expanded="true"
4879
+ >
4880
+ <span class="pf-v6-c-wizard__nav-link-text">Configuration</span>
4881
+ <span class="pf-v6-c-wizard__nav-link-toggle">
4882
+ <span class="pf-v6-c-wizard__nav-link-toggle-icon">
4883
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4884
+ </span>
4867
4885
  </span>
4868
- </span>
4869
- </button>
4870
- <ol class="pf-v6-c-wizard__nav-list" role="list">
4871
- <li class="pf-v6-c-wizard__nav-item">
4872
- <button
4873
- class="pf-v6-c-wizard__nav-link"
4874
- type="button"
4875
- >Substep A</button>
4876
- </li>
4877
- <li class="pf-v6-c-wizard__nav-item">
4878
- <button
4879
- class="pf-v6-c-wizard__nav-link pf-m-current"
4880
- type="button"
4881
- aria-current="page"
4882
- >Substep B</button>
4883
- </li>
4884
- <li class="pf-v6-c-wizard__nav-item">
4885
- <button
4886
- class="pf-v6-c-wizard__nav-link"
4887
- type="button"
4888
- >Substep C</button>
4889
- </li>
4890
- </ol>
4891
- </li>
4892
- <li class="pf-v6-c-wizard__nav-item">
4893
- <button
4894
- class="pf-v6-c-wizard__nav-link"
4895
- type="button"
4896
- >Additional</button>
4897
- </li>
4898
- <li class="pf-v6-c-wizard__nav-item">
4899
- <button
4900
- class="pf-v6-c-wizard__nav-link"
4901
- type="button"
4902
- disabled
4903
- >Review</button>
4904
- </li>
4905
- </ol>
4906
- </nav>
4907
- <main class="pf-v6-c-wizard__main" tabindex="0">
4908
- <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
4909
- <div class="pf-v6-c-drawer__main">
4910
- <div class="pf-v6-c-drawer__content">
4911
- <div class="pf-v6-c-wizard__main-body">
4912
- <form class="pf-v6-c-form pf-m-limit-width" novalidate>
4913
- <div class="pf-v6-c-form__group">
4914
- <div class="pf-v6-c-form__group-label"><label
4915
- class="pf-v6-c-form__label"
4916
- for="wizard-with-drawer-in-page-expanded-example-wizard-form-field1"
4917
- >
4918
- <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
4919
- class="pf-v6-c-form__label-required"
4920
- aria-hidden="true"
4921
- >&#42;</span></label>
4922
- </div>
4923
- <div class="pf-v6-c-form__group-control">
4924
- <span class="pf-v6-c-form-control">
4925
- <input
4926
- type="text"
4927
- id="wizard-with-drawer-in-page-expanded-example-wizard-form-field1"
4928
- name="wizard-with-drawer-in-page-expanded-example-wizard-form-field1"
4929
- />
4930
- </span>
4931
- </div>
4932
- </div>
4933
- <div class="pf-v6-c-form__group">
4934
- <div class="pf-v6-c-form__group-label"><label
4935
- class="pf-v6-c-form__label"
4936
- for="wizard-with-drawer-in-page-expanded-example-wizard-form-field2"
4937
- >
4938
- <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
4939
- class="pf-v6-c-form__label-required"
4940
- aria-hidden="true"
4941
- >&#42;</span></label>
4942
- </div>
4943
- <div class="pf-v6-c-form__group-control">
4944
- <span class="pf-v6-c-form-control">
4945
- <input
4946
- type="text"
4947
- id="wizard-with-drawer-in-page-expanded-example-wizard-form-field2"
4948
- name="wizard-with-drawer-in-page-expanded-example-wizard-form-field2"
4949
- />
4950
- </span>
4951
- </div>
4952
- </div>
4953
- <div class="pf-v6-c-form__group">
4954
- <div class="pf-v6-c-form__group-label"><label
4955
- class="pf-v6-c-form__label"
4956
- for="wizard-with-drawer-in-page-expanded-example-wizard-form-field3"
4957
- >
4958
- <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
4959
- class="pf-v6-c-form__label-required"
4960
- aria-hidden="true"
4961
- >&#42;</span></label>
4886
+ </button>
4887
+ <ol class="pf-v6-c-wizard__nav-list" role="list">
4888
+ <li class="pf-v6-c-wizard__nav-item">
4889
+ <button
4890
+ class="pf-v6-c-wizard__nav-link"
4891
+ type="button"
4892
+ >Substep A</button>
4893
+ </li>
4894
+ <li class="pf-v6-c-wizard__nav-item">
4895
+ <button
4896
+ class="pf-v6-c-wizard__nav-link pf-m-current"
4897
+ type="button"
4898
+ aria-current="page"
4899
+ >Substep B</button>
4900
+ </li>
4901
+ <li class="pf-v6-c-wizard__nav-item">
4902
+ <button
4903
+ class="pf-v6-c-wizard__nav-link"
4904
+ type="button"
4905
+ >Substep C</button>
4906
+ </li>
4907
+ </ol>
4908
+ </li>
4909
+ <li class="pf-v6-c-wizard__nav-item">
4910
+ <button
4911
+ class="pf-v6-c-wizard__nav-link"
4912
+ type="button"
4913
+ >Additional</button>
4914
+ </li>
4915
+ <li class="pf-v6-c-wizard__nav-item">
4916
+ <button
4917
+ class="pf-v6-c-wizard__nav-link"
4918
+ type="button"
4919
+ disabled
4920
+ >Review</button>
4921
+ </li>
4922
+ </ol>
4923
+ </nav>
4924
+ <main class="pf-v6-c-wizard__main" tabindex="0">
4925
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
4926
+ <div class="pf-v6-c-drawer__main">
4927
+ <div class="pf-v6-c-drawer__content">
4928
+ <div class="pf-v6-c-wizard__main-body">
4929
+ <form class="pf-v6-c-form pf-m-limit-width" novalidate>
4930
+ <div class="pf-v6-c-form__group">
4931
+ <div class="pf-v6-c-form__group-label"><label
4932
+ class="pf-v6-c-form__label"
4933
+ for="wizard-with-drawer-in-page-expanded-example-wizard-form-field1"
4934
+ >
4935
+ <span class="pf-v6-c-form__label-text">Field 1</span>&nbsp;<span
4936
+ class="pf-v6-c-form__label-required"
4937
+ aria-hidden="true"
4938
+ >&#42;</span></label>
4939
+ </div>
4940
+ <div class="pf-v6-c-form__group-control">
4941
+ <span class="pf-v6-c-form-control">
4942
+ <input
4943
+ type="text"
4944
+ id="wizard-with-drawer-in-page-expanded-example-wizard-form-field1"
4945
+ name="wizard-with-drawer-in-page-expanded-example-wizard-form-field1"
4946
+ />
4947
+ </span>
4948
+ </div>
4962
4949
  </div>
4963
- <div class="pf-v6-c-form__group-control">
4964
- <span class="pf-v6-c-form-control">
4965
- <input
4966
- type="text"
4967
- id="wizard-with-drawer-in-page-expanded-example-wizard-form-field3"
4968
- name="wizard-with-drawer-in-page-expanded-example-wizard-form-field3"
4969
- />
4970
- </span>
4950
+ <div class="pf-v6-c-form__group">
4951
+ <div class="pf-v6-c-form__group-label"><label
4952
+ class="pf-v6-c-form__label"
4953
+ for="wizard-with-drawer-in-page-expanded-example-wizard-form-field2"
4954
+ >
4955
+ <span class="pf-v6-c-form__label-text">Field 2</span>&nbsp;<span
4956
+ class="pf-v6-c-form__label-required"
4957
+ aria-hidden="true"
4958
+ >&#42;</span></label>
4959
+ </div>
4960
+ <div class="pf-v6-c-form__group-control">
4961
+ <span class="pf-v6-c-form-control">
4962
+ <input
4963
+ type="text"
4964
+ id="wizard-with-drawer-in-page-expanded-example-wizard-form-field2"
4965
+ name="wizard-with-drawer-in-page-expanded-example-wizard-form-field2"
4966
+ />
4967
+ </span>
4968
+ </div>
4971
4969
  </div>
4972
- </div>
4973
- <div class="pf-v6-c-form__group">
4974
- <div class="pf-v6-c-form__group-label"><label
4975
- class="pf-v6-c-form__label"
4976
- for="wizard-with-drawer-in-page-expanded-example-wizard-form-field4"
4977
- >
4978
- <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
4979
- class="pf-v6-c-form__label-required"
4980
- aria-hidden="true"
4981
- >&#42;</span></label>
4970
+ <div class="pf-v6-c-form__group">
4971
+ <div class="pf-v6-c-form__group-label"><label
4972
+ class="pf-v6-c-form__label"
4973
+ for="wizard-with-drawer-in-page-expanded-example-wizard-form-field3"
4974
+ >
4975
+ <span class="pf-v6-c-form__label-text">Field 3</span>&nbsp;<span
4976
+ class="pf-v6-c-form__label-required"
4977
+ aria-hidden="true"
4978
+ >&#42;</span></label>
4979
+ </div>
4980
+ <div class="pf-v6-c-form__group-control">
4981
+ <span class="pf-v6-c-form-control">
4982
+ <input
4983
+ type="text"
4984
+ id="wizard-with-drawer-in-page-expanded-example-wizard-form-field3"
4985
+ name="wizard-with-drawer-in-page-expanded-example-wizard-form-field3"
4986
+ />
4987
+ </span>
4988
+ </div>
4982
4989
  </div>
4983
- <div class="pf-v6-c-form__group-control">
4984
- <span class="pf-v6-c-form-control">
4985
- <input
4986
- type="text"
4987
- id="wizard-with-drawer-in-page-expanded-example-wizard-form-field4"
4988
- name="wizard-with-drawer-in-page-expanded-example-wizard-form-field4"
4989
- />
4990
- </span>
4990
+ <div class="pf-v6-c-form__group">
4991
+ <div class="pf-v6-c-form__group-label"><label
4992
+ class="pf-v6-c-form__label"
4993
+ for="wizard-with-drawer-in-page-expanded-example-wizard-form-field4"
4994
+ >
4995
+ <span class="pf-v6-c-form__label-text">Field 4</span>&nbsp;<span
4996
+ class="pf-v6-c-form__label-required"
4997
+ aria-hidden="true"
4998
+ >&#42;</span></label>
4999
+ </div>
5000
+ <div class="pf-v6-c-form__group-control">
5001
+ <span class="pf-v6-c-form-control">
5002
+ <input
5003
+ type="text"
5004
+ id="wizard-with-drawer-in-page-expanded-example-wizard-form-field4"
5005
+ name="wizard-with-drawer-in-page-expanded-example-wizard-form-field4"
5006
+ />
5007
+ </span>
5008
+ </div>
4991
5009
  </div>
4992
- </div>
4993
- <div class="pf-v6-c-form__group">
4994
- <div class="pf-v6-c-form__group-label"><label
4995
- class="pf-v6-c-form__label"
4996
- for="wizard-with-drawer-in-page-expanded-example-wizard-form-field5"
4997
- >
4998
- <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
4999
- class="pf-v6-c-form__label-required"
5000
- aria-hidden="true"
5001
- >&#42;</span></label>
5010
+ <div class="pf-v6-c-form__group">
5011
+ <div class="pf-v6-c-form__group-label"><label
5012
+ class="pf-v6-c-form__label"
5013
+ for="wizard-with-drawer-in-page-expanded-example-wizard-form-field5"
5014
+ >
5015
+ <span class="pf-v6-c-form__label-text">Field 5</span>&nbsp;<span
5016
+ class="pf-v6-c-form__label-required"
5017
+ aria-hidden="true"
5018
+ >&#42;</span></label>
5019
+ </div>
5020
+ <div class="pf-v6-c-form__group-control">
5021
+ <span class="pf-v6-c-form-control">
5022
+ <input
5023
+ type="text"
5024
+ id="wizard-with-drawer-in-page-expanded-example-wizard-form-field5"
5025
+ name="wizard-with-drawer-in-page-expanded-example-wizard-form-field5"
5026
+ />
5027
+ </span>
5028
+ </div>
5002
5029
  </div>
5003
- <div class="pf-v6-c-form__group-control">
5004
- <span class="pf-v6-c-form-control">
5005
- <input
5006
- type="text"
5007
- id="wizard-with-drawer-in-page-expanded-example-wizard-form-field5"
5008
- name="wizard-with-drawer-in-page-expanded-example-wizard-form-field5"
5009
- />
5010
- </span>
5030
+ <div class="pf-v6-c-form__group">
5031
+ <div class="pf-v6-c-form__group-label"><label
5032
+ class="pf-v6-c-form__label"
5033
+ for="wizard-with-drawer-in-page-expanded-example-wizard-form-field6"
5034
+ >
5035
+ <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
5036
+ class="pf-v6-c-form__label-required"
5037
+ aria-hidden="true"
5038
+ >&#42;</span></label>
5039
+ </div>
5040
+ <div class="pf-v6-c-form__group-control">
5041
+ <span class="pf-v6-c-form-control">
5042
+ <input
5043
+ type="text"
5044
+ id="wizard-with-drawer-in-page-expanded-example-wizard-form-field6"
5045
+ name="wizard-with-drawer-in-page-expanded-example-wizard-form-field6"
5046
+ />
5047
+ </span>
5048
+ </div>
5011
5049
  </div>
5012
- </div>
5013
- <div class="pf-v6-c-form__group">
5014
- <div class="pf-v6-c-form__group-label"><label
5015
- class="pf-v6-c-form__label"
5016
- for="wizard-with-drawer-in-page-expanded-example-wizard-form-field6"
5017
- >
5018
- <span class="pf-v6-c-form__label-text">Field 6</span>&nbsp;<span
5019
- class="pf-v6-c-form__label-required"
5020
- aria-hidden="true"
5021
- >&#42;</span></label>
5050
+ <div class="pf-v6-c-form__group">
5051
+ <div class="pf-v6-c-form__group-label"><label
5052
+ class="pf-v6-c-form__label"
5053
+ for="wizard-with-drawer-in-page-expanded-example-wizard-form-field7"
5054
+ >
5055
+ <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
5056
+ class="pf-v6-c-form__label-required"
5057
+ aria-hidden="true"
5058
+ >&#42;</span></label>
5059
+ </div>
5060
+ <div class="pf-v6-c-form__group-control">
5061
+ <span class="pf-v6-c-form-control">
5062
+ <input
5063
+ type="text"
5064
+ id="wizard-with-drawer-in-page-expanded-example-wizard-form-field7"
5065
+ name="wizard-with-drawer-in-page-expanded-example-wizard-form-field7"
5066
+ />
5067
+ </span>
5068
+ </div>
5022
5069
  </div>
5023
- <div class="pf-v6-c-form__group-control">
5024
- <span class="pf-v6-c-form-control">
5025
- <input
5026
- type="text"
5027
- id="wizard-with-drawer-in-page-expanded-example-wizard-form-field6"
5028
- name="wizard-with-drawer-in-page-expanded-example-wizard-form-field6"
5029
- />
5030
- </span>
5070
+ </form>
5071
+ </div>
5072
+ </div>
5073
+ <div
5074
+ class="pf-v6-c-drawer__panel pf-m-light-200 pf-m-width-33"
5075
+ >
5076
+ <div class="pf-v6-c-drawer__body">
5077
+ <div class="pf-v6-c-drawer__head">
5078
+ <h2
5079
+ class="pf-v6-c-title pf-m-xl"
5080
+ >Register with Red Hat connector</h2>
5081
+ <div class="pf-v6-c-drawer__actions">
5082
+ <div class="pf-v6-c-drawer__close">
5083
+ <button
5084
+ class="pf-v6-c-button pf-m-plain"
5085
+ type="button"
5086
+ aria-label="Close drawer panel"
5087
+ >
5088
+ <i class="fas fa-times" aria-hidden="true"></i>
5089
+ </button>
5090
+ </div>
5031
5091
  </div>
5032
5092
  </div>
5033
- <div class="pf-v6-c-form__group">
5034
- <div class="pf-v6-c-form__group-label"><label
5035
- class="pf-v6-c-form__label"
5036
- for="wizard-with-drawer-in-page-expanded-example-wizard-form-field7"
5093
+ </div>
5094
+ <div class="pf-v6-c-drawer__body">
5095
+ <div class="pf-v6-c-content">
5096
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
5097
+ <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
5098
+ <p>
5099
+ Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
5100
+ <a
5101
+ href="#"
5102
+ >Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
5103
+ </p>
5104
+ <a href="#">
5105
+ <span
5106
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
5037
5107
  >
5038
- <span class="pf-v6-c-form__label-text">Field 7</span>&nbsp;<span
5039
- class="pf-v6-c-form__label-required"
5108
+ <span>Learn about Red Hat connector</span>
5109
+ <i
5110
+ class="fas fa-external-link-alt"
5040
5111
  aria-hidden="true"
5041
- >&#42;</span></label>
5042
- </div>
5043
- <div class="pf-v6-c-form__group-control">
5044
- <span class="pf-v6-c-form-control">
5045
- <input
5046
- type="text"
5047
- id="wizard-with-drawer-in-page-expanded-example-wizard-form-field7"
5048
- name="wizard-with-drawer-in-page-expanded-example-wizard-form-field7"
5049
- />
5112
+ ></i>
5050
5113
  </span>
5051
- </div>
5114
+ </a>
5052
5115
  </div>
5053
- </form>
5054
- </div>
5055
- </div>
5056
- <div
5057
- class="pf-v6-c-drawer__panel pf-m-light-200 pf-m-width-33"
5058
- >
5059
- <div class="pf-v6-c-drawer__body">
5060
- <div class="pf-v6-c-drawer__head">
5061
- <h2
5062
- class="pf-v6-c-title pf-m-xl"
5063
- >Register with Red Hat connector</h2>
5064
- <div class="pf-v6-c-drawer__actions">
5065
- <div class="pf-v6-c-drawer__close">
5066
- <button
5067
- class="pf-v6-c-button pf-m-plain"
5068
- type="button"
5069
- aria-label="Close drawer panel"
5070
- >
5071
- <i class="fas fa-times" aria-hidden="true"></i>
5072
- </button>
5073
- </div>
5074
- </div>
5075
- </div>
5076
- </div>
5077
- <div class="pf-v6-c-drawer__body">
5078
- <div class="pf-v6-c-content">
5079
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
5080
- <p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
5081
- <p>
5082
- Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
5083
- <a
5084
- href="#"
5085
- >Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
5086
- </p>
5087
- <a href="#">
5088
- <span
5089
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
5090
- >
5091
- <span>Learn about Red Hat connector</span>
5092
- <i
5093
- class="fas fa-external-link-alt"
5094
- aria-hidden="true"
5095
- ></i>
5096
- </span>
5097
- </a>
5098
5116
  </div>
5099
5117
  </div>
5100
5118
  </div>
5101
5119
  </div>
5120
+ </main>
5121
+ </div>
5122
+ <footer class="pf-v6-c-wizard__footer">
5123
+ <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
5124
+ <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
5125
+ <div class="pf-v6-c-wizard__footer-cancel">
5126
+ <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
5102
5127
  </div>
5103
- </main>
5128
+ </footer>
5104
5129
  </div>
5105
- <footer class="pf-v6-c-wizard__footer">
5106
- <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
5107
- <button class="pf-v6-c-button pf-m-primary" type="submit">Next</button>
5108
- <div class="pf-v6-c-wizard__footer-cancel">
5109
- <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
5110
- </div>
5111
- </footer>
5112
5130
  </div>
5113
- </div>
5114
- </section>
5115
- </main>
5131
+ </section>
5132
+ </main>
5133
+ </div>
5116
5134
  </div>
5117
5135
 
5118
5136
  ```