@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/NotificationDrawer/examples/NotificationDrawer.md CHANGED
@@ -242,100 +242,101 @@ section: components
242
242
  <div class="pf-v6-c-drawer__main">
243
243
  <div class="pf-v6-c-drawer__content">
244
244
  <div class="pf-v6-c-drawer__body">
245
- <main class="pf-v6-c-page__main" tabindex="-1">
246
- // TODO should this be a page-main-list so there is not a duplicate main tag?
247
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
248
- <div class="pf-v6-c-page__main-body">
249
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
250
- <ol class="pf-v6-c-breadcrumb__list" role="list">
251
- <li class="pf-v6-c-breadcrumb__item">
252
- <a
253
- href="#"
254
- class="pf-v6-c-breadcrumb__link"
255
- >Section home</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>
245
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
246
+ <main class="pf-v6-c-page__main" tabindex="-1">
247
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
248
+ <div class="pf-v6-c-page__main-body">
249
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
250
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
251
+ <li class="pf-v6-c-breadcrumb__item">
252
+ <a
253
+ href="#"
254
+ class="pf-v6-c-breadcrumb__link"
255
+ >Section home</a>
256
+ </li>
257
+ <li class="pf-v6-c-breadcrumb__item">
258
+ <span class="pf-v6-c-breadcrumb__item-divider">
259
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
260
+ </span>
261
261
 
262
- <a
263
- href="#"
264
- class="pf-v6-c-breadcrumb__link"
265
- >Section title</a>
266
- </li>
267
- <li class="pf-v6-c-breadcrumb__item">
268
- <span class="pf-v6-c-breadcrumb__item-divider">
269
- <i class="fas fa-angle-right" aria-hidden="true"></i>
270
- </span>
262
+ <a
263
+ href="#"
264
+ class="pf-v6-c-breadcrumb__link"
265
+ >Section title</a>
266
+ </li>
267
+ <li class="pf-v6-c-breadcrumb__item">
268
+ <span class="pf-v6-c-breadcrumb__item-divider">
269
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
270
+ </span>
271
271
 
272
- <a
273
- href="#"
274
- class="pf-v6-c-breadcrumb__link"
275
- >Section title</a>
276
- </li>
277
- <li class="pf-v6-c-breadcrumb__item">
278
- <span class="pf-v6-c-breadcrumb__item-divider">
279
- <i class="fas fa-angle-right" aria-hidden="true"></i>
280
- </span>
272
+ <a
273
+ href="#"
274
+ class="pf-v6-c-breadcrumb__link"
275
+ >Section title</a>
276
+ </li>
277
+ <li class="pf-v6-c-breadcrumb__item">
278
+ <span class="pf-v6-c-breadcrumb__item-divider">
279
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
280
+ </span>
281
281
 
282
- <a
283
- href="#"
284
- class="pf-v6-c-breadcrumb__link pf-m-current"
285
- aria-current="page"
286
- >Section landing</a>
287
- </li>
288
- </ol>
289
- </nav>
290
- </div>
291
- </section>
292
- <section
293
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
294
- >
295
- <div class="pf-v6-c-page__main-body">
296
- <div class="pf-v6-c-content">
297
- <h1>Main title</h1>
298
- <p>This is a full page demo.</p>
282
+ <a
283
+ href="#"
284
+ class="pf-v6-c-breadcrumb__link pf-m-current"
285
+ aria-current="page"
286
+ >Section landing</a>
287
+ </li>
288
+ </ol>
289
+ </nav>
299
290
  </div>
300
- </div>
301
- </section>
302
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
303
- <div class="pf-v6-c-page__main-body">
304
- <div class="pf-v6-l-gallery pf-m-gutter">
305
- <div class="pf-v6-c-card">
306
- <div class="pf-v6-c-card__body">This is a card</div>
307
- </div>
308
- <div class="pf-v6-c-card">
309
- <div class="pf-v6-c-card__body">This is a card</div>
310
- </div>
311
- <div class="pf-v6-c-card">
312
- <div class="pf-v6-c-card__body">This is a card</div>
313
- </div>
314
- <div class="pf-v6-c-card">
315
- <div class="pf-v6-c-card__body">This is a card</div>
316
- </div>
317
- <div class="pf-v6-c-card">
318
- <div class="pf-v6-c-card__body">This is a card</div>
319
- </div>
320
- <div class="pf-v6-c-card">
321
- <div class="pf-v6-c-card__body">This is a card</div>
322
- </div>
323
- <div class="pf-v6-c-card">
324
- <div class="pf-v6-c-card__body">This is a card</div>
325
- </div>
326
- <div class="pf-v6-c-card">
327
- <div class="pf-v6-c-card__body">This is a card</div>
328
- </div>
329
- <div class="pf-v6-c-card">
330
- <div class="pf-v6-c-card__body">This is a card</div>
291
+ </section>
292
+ <section
293
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
294
+ >
295
+ <div class="pf-v6-c-page__main-body">
296
+ <div class="pf-v6-c-content">
297
+ <h1>Main title</h1>
298
+ <p>This is a full page demo.</p>
331
299
  </div>
332
- <div class="pf-v6-c-card">
333
- <div class="pf-v6-c-card__body">This is a card</div>
300
+ </div>
301
+ </section>
302
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
303
+ <div class="pf-v6-c-page__main-body">
304
+ <div class="pf-v6-l-gallery pf-m-gutter">
305
+ <div class="pf-v6-c-card">
306
+ <div class="pf-v6-c-card__body">This is a card</div>
307
+ </div>
308
+ <div class="pf-v6-c-card">
309
+ <div class="pf-v6-c-card__body">This is a card</div>
310
+ </div>
311
+ <div class="pf-v6-c-card">
312
+ <div class="pf-v6-c-card__body">This is a card</div>
313
+ </div>
314
+ <div class="pf-v6-c-card">
315
+ <div class="pf-v6-c-card__body">This is a card</div>
316
+ </div>
317
+ <div class="pf-v6-c-card">
318
+ <div class="pf-v6-c-card__body">This is a card</div>
319
+ </div>
320
+ <div class="pf-v6-c-card">
321
+ <div class="pf-v6-c-card__body">This is a card</div>
322
+ </div>
323
+ <div class="pf-v6-c-card">
324
+ <div class="pf-v6-c-card__body">This is a card</div>
325
+ </div>
326
+ <div class="pf-v6-c-card">
327
+ <div class="pf-v6-c-card__body">This is a card</div>
328
+ </div>
329
+ <div class="pf-v6-c-card">
330
+ <div class="pf-v6-c-card__body">This is a card</div>
331
+ </div>
332
+ <div class="pf-v6-c-card">
333
+ <div class="pf-v6-c-card__body">This is a card</div>
334
+ </div>
334
335
  </div>
335
336
  </div>
336
- </div>
337
- </section>
338
- </main>
337
+ </section>
338
+ </main>
339
+ </div>
339
340
  </div>
340
341
  </div>
341
342
  <div class="pf-v6-c-drawer__panel pf-m-width-33" hidden>
@@ -1250,100 +1251,101 @@ section: components
1250
1251
  <div class="pf-v6-c-drawer__main">
1251
1252
  <div class="pf-v6-c-drawer__content">
1252
1253
  <div class="pf-v6-c-drawer__body">
1253
- <main class="pf-v6-c-page__main" tabindex="-1">
1254
- // TODO should this be a page-main-list so there is not a duplicate main tag?
1255
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1256
- <div class="pf-v6-c-page__main-body">
1257
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1258
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1259
- <li class="pf-v6-c-breadcrumb__item">
1260
- <a
1261
- href="#"
1262
- class="pf-v6-c-breadcrumb__link"
1263
- >Section home</a>
1264
- </li>
1265
- <li class="pf-v6-c-breadcrumb__item">
1266
- <span class="pf-v6-c-breadcrumb__item-divider">
1267
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1268
- </span>
1254
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1255
+ <main class="pf-v6-c-page__main" tabindex="-1">
1256
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1257
+ <div class="pf-v6-c-page__main-body">
1258
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1259
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1260
+ <li class="pf-v6-c-breadcrumb__item">
1261
+ <a
1262
+ href="#"
1263
+ class="pf-v6-c-breadcrumb__link"
1264
+ >Section home</a>
1265
+ </li>
1266
+ <li class="pf-v6-c-breadcrumb__item">
1267
+ <span class="pf-v6-c-breadcrumb__item-divider">
1268
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1269
+ </span>
1269
1270
 
1270
- <a
1271
- href="#"
1272
- class="pf-v6-c-breadcrumb__link"
1273
- >Section title</a>
1274
- </li>
1275
- <li class="pf-v6-c-breadcrumb__item">
1276
- <span class="pf-v6-c-breadcrumb__item-divider">
1277
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1278
- </span>
1271
+ <a
1272
+ href="#"
1273
+ class="pf-v6-c-breadcrumb__link"
1274
+ >Section title</a>
1275
+ </li>
1276
+ <li class="pf-v6-c-breadcrumb__item">
1277
+ <span class="pf-v6-c-breadcrumb__item-divider">
1278
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1279
+ </span>
1279
1280
 
1280
- <a
1281
- href="#"
1282
- class="pf-v6-c-breadcrumb__link"
1283
- >Section title</a>
1284
- </li>
1285
- <li class="pf-v6-c-breadcrumb__item">
1286
- <span class="pf-v6-c-breadcrumb__item-divider">
1287
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1288
- </span>
1281
+ <a
1282
+ href="#"
1283
+ class="pf-v6-c-breadcrumb__link"
1284
+ >Section title</a>
1285
+ </li>
1286
+ <li class="pf-v6-c-breadcrumb__item">
1287
+ <span class="pf-v6-c-breadcrumb__item-divider">
1288
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1289
+ </span>
1289
1290
 
1290
- <a
1291
- href="#"
1292
- class="pf-v6-c-breadcrumb__link pf-m-current"
1293
- aria-current="page"
1294
- >Section landing</a>
1295
- </li>
1296
- </ol>
1297
- </nav>
1298
- </div>
1299
- </section>
1300
- <section
1301
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
1302
- >
1303
- <div class="pf-v6-c-page__main-body">
1304
- <div class="pf-v6-c-content">
1305
- <h1>Main title</h1>
1306
- <p>This is a full page demo.</p>
1291
+ <a
1292
+ href="#"
1293
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1294
+ aria-current="page"
1295
+ >Section landing</a>
1296
+ </li>
1297
+ </ol>
1298
+ </nav>
1307
1299
  </div>
1308
- </div>
1309
- </section>
1310
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1311
- <div class="pf-v6-c-page__main-body">
1312
- <div class="pf-v6-l-gallery pf-m-gutter">
1313
- <div class="pf-v6-c-card">
1314
- <div class="pf-v6-c-card__body">This is a card</div>
1315
- </div>
1316
- <div class="pf-v6-c-card">
1317
- <div class="pf-v6-c-card__body">This is a card</div>
1318
- </div>
1319
- <div class="pf-v6-c-card">
1320
- <div class="pf-v6-c-card__body">This is a card</div>
1321
- </div>
1322
- <div class="pf-v6-c-card">
1323
- <div class="pf-v6-c-card__body">This is a card</div>
1324
- </div>
1325
- <div class="pf-v6-c-card">
1326
- <div class="pf-v6-c-card__body">This is a card</div>
1327
- </div>
1328
- <div class="pf-v6-c-card">
1329
- <div class="pf-v6-c-card__body">This is a card</div>
1330
- </div>
1331
- <div class="pf-v6-c-card">
1332
- <div class="pf-v6-c-card__body">This is a card</div>
1333
- </div>
1334
- <div class="pf-v6-c-card">
1335
- <div class="pf-v6-c-card__body">This is a card</div>
1336
- </div>
1337
- <div class="pf-v6-c-card">
1338
- <div class="pf-v6-c-card__body">This is a card</div>
1300
+ </section>
1301
+ <section
1302
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
1303
+ >
1304
+ <div class="pf-v6-c-page__main-body">
1305
+ <div class="pf-v6-c-content">
1306
+ <h1>Main title</h1>
1307
+ <p>This is a full page demo.</p>
1339
1308
  </div>
1340
- <div class="pf-v6-c-card">
1341
- <div class="pf-v6-c-card__body">This is a card</div>
1309
+ </div>
1310
+ </section>
1311
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1312
+ <div class="pf-v6-c-page__main-body">
1313
+ <div class="pf-v6-l-gallery pf-m-gutter">
1314
+ <div class="pf-v6-c-card">
1315
+ <div class="pf-v6-c-card__body">This is a card</div>
1316
+ </div>
1317
+ <div class="pf-v6-c-card">
1318
+ <div class="pf-v6-c-card__body">This is a card</div>
1319
+ </div>
1320
+ <div class="pf-v6-c-card">
1321
+ <div class="pf-v6-c-card__body">This is a card</div>
1322
+ </div>
1323
+ <div class="pf-v6-c-card">
1324
+ <div class="pf-v6-c-card__body">This is a card</div>
1325
+ </div>
1326
+ <div class="pf-v6-c-card">
1327
+ <div class="pf-v6-c-card__body">This is a card</div>
1328
+ </div>
1329
+ <div class="pf-v6-c-card">
1330
+ <div class="pf-v6-c-card__body">This is a card</div>
1331
+ </div>
1332
+ <div class="pf-v6-c-card">
1333
+ <div class="pf-v6-c-card__body">This is a card</div>
1334
+ </div>
1335
+ <div class="pf-v6-c-card">
1336
+ <div class="pf-v6-c-card__body">This is a card</div>
1337
+ </div>
1338
+ <div class="pf-v6-c-card">
1339
+ <div class="pf-v6-c-card__body">This is a card</div>
1340
+ </div>
1341
+ <div class="pf-v6-c-card">
1342
+ <div class="pf-v6-c-card__body">This is a card</div>
1343
+ </div>
1342
1344
  </div>
1343
1345
  </div>
1344
- </div>
1345
- </section>
1346
- </main>
1346
+ </section>
1347
+ </main>
1348
+ </div>
1347
1349
  </div>
1348
1350
  </div>
1349
1351
  <div class="pf-v6-c-drawer__panel pf-m-width-33">
@@ -2258,100 +2260,101 @@ section: components
2258
2260
  <div class="pf-v6-c-drawer__main">
2259
2261
  <div class="pf-v6-c-drawer__content">
2260
2262
  <div class="pf-v6-c-drawer__body">
2261
- <main class="pf-v6-c-page__main" tabindex="-1">
2262
- // TODO should this be a page-main-list so there is not a duplicate main tag?
2263
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2264
- <div class="pf-v6-c-page__main-body">
2265
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2266
- <ol class="pf-v6-c-breadcrumb__list" role="list">
2267
- <li class="pf-v6-c-breadcrumb__item">
2268
- <a
2269
- href="#"
2270
- class="pf-v6-c-breadcrumb__link"
2271
- >Section home</a>
2272
- </li>
2273
- <li class="pf-v6-c-breadcrumb__item">
2274
- <span class="pf-v6-c-breadcrumb__item-divider">
2275
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2276
- </span>
2263
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
2264
+ <main class="pf-v6-c-page__main" tabindex="-1">
2265
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
2266
+ <div class="pf-v6-c-page__main-body">
2267
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
2268
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
2269
+ <li class="pf-v6-c-breadcrumb__item">
2270
+ <a
2271
+ href="#"
2272
+ class="pf-v6-c-breadcrumb__link"
2273
+ >Section home</a>
2274
+ </li>
2275
+ <li class="pf-v6-c-breadcrumb__item">
2276
+ <span class="pf-v6-c-breadcrumb__item-divider">
2277
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2278
+ </span>
2277
2279
 
2278
- <a
2279
- href="#"
2280
- class="pf-v6-c-breadcrumb__link"
2281
- >Section title</a>
2282
- </li>
2283
- <li class="pf-v6-c-breadcrumb__item">
2284
- <span class="pf-v6-c-breadcrumb__item-divider">
2285
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2286
- </span>
2280
+ <a
2281
+ href="#"
2282
+ class="pf-v6-c-breadcrumb__link"
2283
+ >Section title</a>
2284
+ </li>
2285
+ <li class="pf-v6-c-breadcrumb__item">
2286
+ <span class="pf-v6-c-breadcrumb__item-divider">
2287
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2288
+ </span>
2287
2289
 
2288
- <a
2289
- href="#"
2290
- class="pf-v6-c-breadcrumb__link"
2291
- >Section title</a>
2292
- </li>
2293
- <li class="pf-v6-c-breadcrumb__item">
2294
- <span class="pf-v6-c-breadcrumb__item-divider">
2295
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2296
- </span>
2290
+ <a
2291
+ href="#"
2292
+ class="pf-v6-c-breadcrumb__link"
2293
+ >Section title</a>
2294
+ </li>
2295
+ <li class="pf-v6-c-breadcrumb__item">
2296
+ <span class="pf-v6-c-breadcrumb__item-divider">
2297
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2298
+ </span>
2297
2299
 
2298
- <a
2299
- href="#"
2300
- class="pf-v6-c-breadcrumb__link pf-m-current"
2301
- aria-current="page"
2302
- >Section landing</a>
2303
- </li>
2304
- </ol>
2305
- </nav>
2306
- </div>
2307
- </section>
2308
- <section
2309
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
2310
- >
2311
- <div class="pf-v6-c-page__main-body">
2312
- <div class="pf-v6-c-content">
2313
- <h1>Main title</h1>
2314
- <p>This is a full page demo.</p>
2300
+ <a
2301
+ href="#"
2302
+ class="pf-v6-c-breadcrumb__link pf-m-current"
2303
+ aria-current="page"
2304
+ >Section landing</a>
2305
+ </li>
2306
+ </ol>
2307
+ </nav>
2315
2308
  </div>
2316
- </div>
2317
- </section>
2318
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
2319
- <div class="pf-v6-c-page__main-body">
2320
- <div class="pf-v6-l-gallery pf-m-gutter">
2321
- <div class="pf-v6-c-card">
2322
- <div class="pf-v6-c-card__body">This is a card</div>
2323
- </div>
2324
- <div class="pf-v6-c-card">
2325
- <div class="pf-v6-c-card__body">This is a card</div>
2326
- </div>
2327
- <div class="pf-v6-c-card">
2328
- <div class="pf-v6-c-card__body">This is a card</div>
2329
- </div>
2330
- <div class="pf-v6-c-card">
2331
- <div class="pf-v6-c-card__body">This is a card</div>
2332
- </div>
2333
- <div class="pf-v6-c-card">
2334
- <div class="pf-v6-c-card__body">This is a card</div>
2335
- </div>
2336
- <div class="pf-v6-c-card">
2337
- <div class="pf-v6-c-card__body">This is a card</div>
2338
- </div>
2339
- <div class="pf-v6-c-card">
2340
- <div class="pf-v6-c-card__body">This is a card</div>
2341
- </div>
2342
- <div class="pf-v6-c-card">
2343
- <div class="pf-v6-c-card__body">This is a card</div>
2344
- </div>
2345
- <div class="pf-v6-c-card">
2346
- <div class="pf-v6-c-card__body">This is a card</div>
2309
+ </section>
2310
+ <section
2311
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
2312
+ >
2313
+ <div class="pf-v6-c-page__main-body">
2314
+ <div class="pf-v6-c-content">
2315
+ <h1>Main title</h1>
2316
+ <p>This is a full page demo.</p>
2347
2317
  </div>
2348
- <div class="pf-v6-c-card">
2349
- <div class="pf-v6-c-card__body">This is a card</div>
2318
+ </div>
2319
+ </section>
2320
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
2321
+ <div class="pf-v6-c-page__main-body">
2322
+ <div class="pf-v6-l-gallery pf-m-gutter">
2323
+ <div class="pf-v6-c-card">
2324
+ <div class="pf-v6-c-card__body">This is a card</div>
2325
+ </div>
2326
+ <div class="pf-v6-c-card">
2327
+ <div class="pf-v6-c-card__body">This is a card</div>
2328
+ </div>
2329
+ <div class="pf-v6-c-card">
2330
+ <div class="pf-v6-c-card__body">This is a card</div>
2331
+ </div>
2332
+ <div class="pf-v6-c-card">
2333
+ <div class="pf-v6-c-card__body">This is a card</div>
2334
+ </div>
2335
+ <div class="pf-v6-c-card">
2336
+ <div class="pf-v6-c-card__body">This is a card</div>
2337
+ </div>
2338
+ <div class="pf-v6-c-card">
2339
+ <div class="pf-v6-c-card__body">This is a card</div>
2340
+ </div>
2341
+ <div class="pf-v6-c-card">
2342
+ <div class="pf-v6-c-card__body">This is a card</div>
2343
+ </div>
2344
+ <div class="pf-v6-c-card">
2345
+ <div class="pf-v6-c-card__body">This is a card</div>
2346
+ </div>
2347
+ <div class="pf-v6-c-card">
2348
+ <div class="pf-v6-c-card__body">This is a card</div>
2349
+ </div>
2350
+ <div class="pf-v6-c-card">
2351
+ <div class="pf-v6-c-card__body">This is a card</div>
2352
+ </div>
2350
2353
  </div>
2351
2354
  </div>
2352
- </div>
2353
- </section>
2354
- </main>
2355
+ </section>
2356
+ </main>
2357
+ </div>
2355
2358
  </div>
2356
2359
  </div>
2357
2360
  <div class="pf-v6-c-drawer__panel pf-m-width-33">
@@ -3269,100 +3272,101 @@ section: components
3269
3272
  <div class="pf-v6-c-drawer__main">
3270
3273
  <div class="pf-v6-c-drawer__content">
3271
3274
  <div class="pf-v6-c-drawer__body">
3272
- <main class="pf-v6-c-page__main" tabindex="-1">
3273
- // TODO should this be a page-main-list so there is not a duplicate main tag?
3274
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3275
- <div class="pf-v6-c-page__main-body">
3276
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3277
- <ol class="pf-v6-c-breadcrumb__list" role="list">
3278
- <li class="pf-v6-c-breadcrumb__item">
3279
- <a
3280
- href="#"
3281
- class="pf-v6-c-breadcrumb__link"
3282
- >Section home</a>
3283
- </li>
3284
- <li class="pf-v6-c-breadcrumb__item">
3285
- <span class="pf-v6-c-breadcrumb__item-divider">
3286
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3287
- </span>
3275
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3276
+ <main class="pf-v6-c-page__main" tabindex="-1">
3277
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3278
+ <div class="pf-v6-c-page__main-body">
3279
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3280
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3281
+ <li class="pf-v6-c-breadcrumb__item">
3282
+ <a
3283
+ href="#"
3284
+ class="pf-v6-c-breadcrumb__link"
3285
+ >Section home</a>
3286
+ </li>
3287
+ <li class="pf-v6-c-breadcrumb__item">
3288
+ <span class="pf-v6-c-breadcrumb__item-divider">
3289
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3290
+ </span>
3288
3291
 
3289
- <a
3290
- href="#"
3291
- class="pf-v6-c-breadcrumb__link"
3292
- >Section title</a>
3293
- </li>
3294
- <li class="pf-v6-c-breadcrumb__item">
3295
- <span class="pf-v6-c-breadcrumb__item-divider">
3296
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3297
- </span>
3292
+ <a
3293
+ href="#"
3294
+ class="pf-v6-c-breadcrumb__link"
3295
+ >Section title</a>
3296
+ </li>
3297
+ <li class="pf-v6-c-breadcrumb__item">
3298
+ <span class="pf-v6-c-breadcrumb__item-divider">
3299
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3300
+ </span>
3298
3301
 
3299
- <a
3300
- href="#"
3301
- class="pf-v6-c-breadcrumb__link"
3302
- >Section title</a>
3303
- </li>
3304
- <li class="pf-v6-c-breadcrumb__item">
3305
- <span class="pf-v6-c-breadcrumb__item-divider">
3306
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3307
- </span>
3302
+ <a
3303
+ href="#"
3304
+ class="pf-v6-c-breadcrumb__link"
3305
+ >Section title</a>
3306
+ </li>
3307
+ <li class="pf-v6-c-breadcrumb__item">
3308
+ <span class="pf-v6-c-breadcrumb__item-divider">
3309
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3310
+ </span>
3308
3311
 
3309
- <a
3310
- href="#"
3311
- class="pf-v6-c-breadcrumb__link pf-m-current"
3312
- aria-current="page"
3313
- >Section landing</a>
3314
- </li>
3315
- </ol>
3316
- </nav>
3317
- </div>
3318
- </section>
3319
- <section
3320
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
3321
- >
3322
- <div class="pf-v6-c-page__main-body">
3323
- <div class="pf-v6-c-content">
3324
- <h1>Main title</h1>
3325
- <p>This is a full page demo.</p>
3312
+ <a
3313
+ href="#"
3314
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3315
+ aria-current="page"
3316
+ >Section landing</a>
3317
+ </li>
3318
+ </ol>
3319
+ </nav>
3326
3320
  </div>
3327
- </div>
3328
- </section>
3329
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
3330
- <div class="pf-v6-c-page__main-body">
3331
- <div class="pf-v6-l-gallery pf-m-gutter">
3332
- <div class="pf-v6-c-card">
3333
- <div class="pf-v6-c-card__body">This is a card</div>
3334
- </div>
3335
- <div class="pf-v6-c-card">
3336
- <div class="pf-v6-c-card__body">This is a card</div>
3337
- </div>
3338
- <div class="pf-v6-c-card">
3339
- <div class="pf-v6-c-card__body">This is a card</div>
3340
- </div>
3341
- <div class="pf-v6-c-card">
3342
- <div class="pf-v6-c-card__body">This is a card</div>
3343
- </div>
3344
- <div class="pf-v6-c-card">
3345
- <div class="pf-v6-c-card__body">This is a card</div>
3346
- </div>
3347
- <div class="pf-v6-c-card">
3348
- <div class="pf-v6-c-card__body">This is a card</div>
3349
- </div>
3350
- <div class="pf-v6-c-card">
3351
- <div class="pf-v6-c-card__body">This is a card</div>
3352
- </div>
3353
- <div class="pf-v6-c-card">
3354
- <div class="pf-v6-c-card__body">This is a card</div>
3355
- </div>
3356
- <div class="pf-v6-c-card">
3357
- <div class="pf-v6-c-card__body">This is a card</div>
3321
+ </section>
3322
+ <section
3323
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
3324
+ >
3325
+ <div class="pf-v6-c-page__main-body">
3326
+ <div class="pf-v6-c-content">
3327
+ <h1>Main title</h1>
3328
+ <p>This is a full page demo.</p>
3358
3329
  </div>
3359
- <div class="pf-v6-c-card">
3360
- <div class="pf-v6-c-card__body">This is a card</div>
3330
+ </div>
3331
+ </section>
3332
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
3333
+ <div class="pf-v6-c-page__main-body">
3334
+ <div class="pf-v6-l-gallery pf-m-gutter">
3335
+ <div class="pf-v6-c-card">
3336
+ <div class="pf-v6-c-card__body">This is a card</div>
3337
+ </div>
3338
+ <div class="pf-v6-c-card">
3339
+ <div class="pf-v6-c-card__body">This is a card</div>
3340
+ </div>
3341
+ <div class="pf-v6-c-card">
3342
+ <div class="pf-v6-c-card__body">This is a card</div>
3343
+ </div>
3344
+ <div class="pf-v6-c-card">
3345
+ <div class="pf-v6-c-card__body">This is a card</div>
3346
+ </div>
3347
+ <div class="pf-v6-c-card">
3348
+ <div class="pf-v6-c-card__body">This is a card</div>
3349
+ </div>
3350
+ <div class="pf-v6-c-card">
3351
+ <div class="pf-v6-c-card__body">This is a card</div>
3352
+ </div>
3353
+ <div class="pf-v6-c-card">
3354
+ <div class="pf-v6-c-card__body">This is a card</div>
3355
+ </div>
3356
+ <div class="pf-v6-c-card">
3357
+ <div class="pf-v6-c-card__body">This is a card</div>
3358
+ </div>
3359
+ <div class="pf-v6-c-card">
3360
+ <div class="pf-v6-c-card__body">This is a card</div>
3361
+ </div>
3362
+ <div class="pf-v6-c-card">
3363
+ <div class="pf-v6-c-card__body">This is a card</div>
3364
+ </div>
3361
3365
  </div>
3362
3366
  </div>
3363
- </div>
3364
- </section>
3365
- </main>
3367
+ </section>
3368
+ </main>
3369
+ </div>
3366
3370
  </div>
3367
3371
  </div>
3368
3372
  <div class="pf-v6-c-drawer__panel pf-m-width-33">
@@ -4279,100 +4283,101 @@ section: components
4279
4283
  <div class="pf-v6-c-drawer__main">
4280
4284
  <div class="pf-v6-c-drawer__content">
4281
4285
  <div class="pf-v6-c-drawer__body">
4282
- <main class="pf-v6-c-page__main" tabindex="-1">
4283
- // TODO should this be a page-main-list so there is not a duplicate main tag?
4284
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4285
- <div class="pf-v6-c-page__main-body">
4286
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4287
- <ol class="pf-v6-c-breadcrumb__list" role="list">
4288
- <li class="pf-v6-c-breadcrumb__item">
4289
- <a
4290
- href="#"
4291
- class="pf-v6-c-breadcrumb__link"
4292
- >Section home</a>
4293
- </li>
4294
- <li class="pf-v6-c-breadcrumb__item">
4295
- <span class="pf-v6-c-breadcrumb__item-divider">
4296
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4297
- </span>
4286
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
4287
+ <main class="pf-v6-c-page__main" tabindex="-1">
4288
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
4289
+ <div class="pf-v6-c-page__main-body">
4290
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
4291
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
4292
+ <li class="pf-v6-c-breadcrumb__item">
4293
+ <a
4294
+ href="#"
4295
+ class="pf-v6-c-breadcrumb__link"
4296
+ >Section home</a>
4297
+ </li>
4298
+ <li class="pf-v6-c-breadcrumb__item">
4299
+ <span class="pf-v6-c-breadcrumb__item-divider">
4300
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4301
+ </span>
4298
4302
 
4299
- <a
4300
- href="#"
4301
- class="pf-v6-c-breadcrumb__link"
4302
- >Section title</a>
4303
- </li>
4304
- <li class="pf-v6-c-breadcrumb__item">
4305
- <span class="pf-v6-c-breadcrumb__item-divider">
4306
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4307
- </span>
4303
+ <a
4304
+ href="#"
4305
+ class="pf-v6-c-breadcrumb__link"
4306
+ >Section title</a>
4307
+ </li>
4308
+ <li class="pf-v6-c-breadcrumb__item">
4309
+ <span class="pf-v6-c-breadcrumb__item-divider">
4310
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4311
+ </span>
4308
4312
 
4309
- <a
4310
- href="#"
4311
- class="pf-v6-c-breadcrumb__link"
4312
- >Section title</a>
4313
- </li>
4314
- <li class="pf-v6-c-breadcrumb__item">
4315
- <span class="pf-v6-c-breadcrumb__item-divider">
4316
- <i class="fas fa-angle-right" aria-hidden="true"></i>
4317
- </span>
4313
+ <a
4314
+ href="#"
4315
+ class="pf-v6-c-breadcrumb__link"
4316
+ >Section title</a>
4317
+ </li>
4318
+ <li class="pf-v6-c-breadcrumb__item">
4319
+ <span class="pf-v6-c-breadcrumb__item-divider">
4320
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4321
+ </span>
4318
4322
 
4319
- <a
4320
- href="#"
4321
- class="pf-v6-c-breadcrumb__link pf-m-current"
4322
- aria-current="page"
4323
- >Section landing</a>
4324
- </li>
4325
- </ol>
4326
- </nav>
4327
- </div>
4328
- </section>
4329
- <section
4330
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
4331
- >
4332
- <div class="pf-v6-c-page__main-body">
4333
- <div class="pf-v6-c-content">
4334
- <h1>Main title</h1>
4335
- <p>This is a full page demo.</p>
4323
+ <a
4324
+ href="#"
4325
+ class="pf-v6-c-breadcrumb__link pf-m-current"
4326
+ aria-current="page"
4327
+ >Section landing</a>
4328
+ </li>
4329
+ </ol>
4330
+ </nav>
4336
4331
  </div>
4337
- </div>
4338
- </section>
4339
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
4340
- <div class="pf-v6-c-page__main-body">
4341
- <div class="pf-v6-l-gallery pf-m-gutter">
4342
- <div class="pf-v6-c-card">
4343
- <div class="pf-v6-c-card__body">This is a card</div>
4344
- </div>
4345
- <div class="pf-v6-c-card">
4346
- <div class="pf-v6-c-card__body">This is a card</div>
4347
- </div>
4348
- <div class="pf-v6-c-card">
4349
- <div class="pf-v6-c-card__body">This is a card</div>
4350
- </div>
4351
- <div class="pf-v6-c-card">
4352
- <div class="pf-v6-c-card__body">This is a card</div>
4353
- </div>
4354
- <div class="pf-v6-c-card">
4355
- <div class="pf-v6-c-card__body">This is a card</div>
4356
- </div>
4357
- <div class="pf-v6-c-card">
4358
- <div class="pf-v6-c-card__body">This is a card</div>
4359
- </div>
4360
- <div class="pf-v6-c-card">
4361
- <div class="pf-v6-c-card__body">This is a card</div>
4362
- </div>
4363
- <div class="pf-v6-c-card">
4364
- <div class="pf-v6-c-card__body">This is a card</div>
4365
- </div>
4366
- <div class="pf-v6-c-card">
4367
- <div class="pf-v6-c-card__body">This is a card</div>
4332
+ </section>
4333
+ <section
4334
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
4335
+ >
4336
+ <div class="pf-v6-c-page__main-body">
4337
+ <div class="pf-v6-c-content">
4338
+ <h1>Main title</h1>
4339
+ <p>This is a full page demo.</p>
4368
4340
  </div>
4369
- <div class="pf-v6-c-card">
4370
- <div class="pf-v6-c-card__body">This is a card</div>
4341
+ </div>
4342
+ </section>
4343
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
4344
+ <div class="pf-v6-c-page__main-body">
4345
+ <div class="pf-v6-l-gallery pf-m-gutter">
4346
+ <div class="pf-v6-c-card">
4347
+ <div class="pf-v6-c-card__body">This is a card</div>
4348
+ </div>
4349
+ <div class="pf-v6-c-card">
4350
+ <div class="pf-v6-c-card__body">This is a card</div>
4351
+ </div>
4352
+ <div class="pf-v6-c-card">
4353
+ <div class="pf-v6-c-card__body">This is a card</div>
4354
+ </div>
4355
+ <div class="pf-v6-c-card">
4356
+ <div class="pf-v6-c-card__body">This is a card</div>
4357
+ </div>
4358
+ <div class="pf-v6-c-card">
4359
+ <div class="pf-v6-c-card__body">This is a card</div>
4360
+ </div>
4361
+ <div class="pf-v6-c-card">
4362
+ <div class="pf-v6-c-card__body">This is a card</div>
4363
+ </div>
4364
+ <div class="pf-v6-c-card">
4365
+ <div class="pf-v6-c-card__body">This is a card</div>
4366
+ </div>
4367
+ <div class="pf-v6-c-card">
4368
+ <div class="pf-v6-c-card__body">This is a card</div>
4369
+ </div>
4370
+ <div class="pf-v6-c-card">
4371
+ <div class="pf-v6-c-card__body">This is a card</div>
4372
+ </div>
4373
+ <div class="pf-v6-c-card">
4374
+ <div class="pf-v6-c-card__body">This is a card</div>
4375
+ </div>
4371
4376
  </div>
4372
4377
  </div>
4373
- </div>
4374
- </section>
4375
- </main>
4378
+ </section>
4379
+ </main>
4380
+ </div>
4376
4381
  </div>
4377
4382
  </div>
4378
4383
  <div class="pf-v6-c-drawer__panel pf-m-width-33">