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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
package/docs/demos/Banner/examples/Banner.md CHANGED
@@ -228,228 +228,232 @@ wrapperTag: div
228
228
  </nav>
229
229
  </div>
230
230
  </div>
231
- <main
232
- class="pf-v6-c-page__main"
233
- tabindex="-1"
234
- id="main-content-banner-basic-example"
235
- >
236
- <div class="pf-v6-c-banner pf-m-sticky">
237
- <div
238
- class="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
239
- >
240
- <div class="pf-v6-u-display-none pf-v5-u-display-block-on-lg">Localhost</div>
241
- <div
242
- class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
243
- >This message is sticky to the top or bottom of the page.</div>
244
- <div
245
- class="pf-v6-u-display-none-on-lg"
246
- >Drop some text on mobile, truncate if needed.</div>
231
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
232
+ <main
233
+ class="pf-v6-c-page__main"
234
+ tabindex="-1"
235
+ id="main-content-banner-basic-example"
236
+ >
237
+ <div class="pf-v6-c-banner pf-m-sticky">
247
238
  <div
248
- class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
249
- >Ned Username</div>
239
+ class="pf-v6-l-flex pf-m-justify-content-center pf-m-justify-content-space-between-on-lg pf-m-nowrap"
240
+ >
241
+ <div
242
+ class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
243
+ >Localhost</div>
244
+ <div
245
+ class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
246
+ >This message is sticky to the top or bottom of the page.</div>
247
+ <div
248
+ class="pf-v6-u-display-none-on-lg"
249
+ >Drop some text on mobile, truncate if needed.</div>
250
+ <div
251
+ class="pf-v6-u-display-none pf-v5-u-display-block-on-lg"
252
+ >Ned Username</div>
253
+ </div>
250
254
  </div>
251
- </div>
252
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
253
- <div class="pf-v6-c-page__main-body">
254
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
255
- <ol class="pf-v6-c-breadcrumb__list" role="list">
256
- <li class="pf-v6-c-breadcrumb__item">
257
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
258
- </li>
259
- <li class="pf-v6-c-breadcrumb__item">
260
- <span class="pf-v6-c-breadcrumb__item-divider">
261
- <i class="fas fa-angle-right" aria-hidden="true"></i>
262
- </span>
255
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
256
+ <div class="pf-v6-c-page__main-body">
257
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
258
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
259
+ <li class="pf-v6-c-breadcrumb__item">
260
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
261
+ </li>
262
+ <li class="pf-v6-c-breadcrumb__item">
263
+ <span class="pf-v6-c-breadcrumb__item-divider">
264
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
265
+ </span>
263
266
 
264
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
265
- </li>
266
- <li class="pf-v6-c-breadcrumb__item">
267
- <span class="pf-v6-c-breadcrumb__item-divider">
268
- <i class="fas fa-angle-right" aria-hidden="true"></i>
269
- </span>
267
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
268
+ </li>
269
+ <li class="pf-v6-c-breadcrumb__item">
270
+ <span class="pf-v6-c-breadcrumb__item-divider">
271
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
272
+ </span>
270
273
 
271
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
272
- </li>
273
- <li class="pf-v6-c-breadcrumb__item">
274
- <span class="pf-v6-c-breadcrumb__item-divider">
275
- <i class="fas fa-angle-right" aria-hidden="true"></i>
276
- </span>
274
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
275
+ </li>
276
+ <li class="pf-v6-c-breadcrumb__item">
277
+ <span class="pf-v6-c-breadcrumb__item-divider">
278
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
279
+ </span>
277
280
 
278
- <a
279
- href="#"
280
- class="pf-v6-c-breadcrumb__link pf-m-current"
281
- aria-current="page"
282
- >Section landing</a>
283
- </li>
284
- </ol>
285
- </nav>
286
- </div>
287
- </section>
288
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
289
- <div class="pf-v6-c-page__main-body">
290
- <div class="pf-v6-c-content">
291
- <h1>Main title</h1>
292
- <p>This is a full page demo.</p>
281
+ <a
282
+ href="#"
283
+ class="pf-v6-c-breadcrumb__link pf-m-current"
284
+ aria-current="page"
285
+ >Section landing</a>
286
+ </li>
287
+ </ol>
288
+ </nav>
293
289
  </div>
294
- </div>
295
- </section>
296
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
297
- <div class="pf-v6-c-page__main-body">
298
- <div class="pf-v6-l-gallery pf-m-gutter">
299
- <div class="pf-v6-c-card">
300
- <div class="pf-v6-c-card__body">This is a card</div>
301
- </div>
302
- <div class="pf-v6-c-card">
303
- <div class="pf-v6-c-card__body">This is a card</div>
304
- </div>
305
- <div class="pf-v6-c-card">
306
- <div class="pf-v6-c-card__body">This is a card</div>
307
- </div>
308
- <div class="pf-v6-c-card">
309
- <div class="pf-v6-c-card__body">This is a card</div>
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>
335
- <div class="pf-v6-c-card">
336
- <div class="pf-v6-c-card__body">This is a card</div>
337
- </div>
338
- <div class="pf-v6-c-card">
339
- <div class="pf-v6-c-card__body">This is a card</div>
340
- </div>
341
- <div class="pf-v6-c-card">
342
- <div class="pf-v6-c-card__body">This is a card</div>
343
- </div>
344
- <div class="pf-v6-c-card">
345
- <div class="pf-v6-c-card__body">This is a card</div>
346
- </div>
347
- <div class="pf-v6-c-card">
348
- <div class="pf-v6-c-card__body">This is a card</div>
349
- </div>
350
- <div class="pf-v6-c-card">
351
- <div class="pf-v6-c-card__body">This is a card</div>
352
- </div>
353
- <div class="pf-v6-c-card">
354
- <div class="pf-v6-c-card__body">This is a card</div>
355
- </div>
356
- <div class="pf-v6-c-card">
357
- <div class="pf-v6-c-card__body">This is a card</div>
358
- </div>
359
- <div class="pf-v6-c-card">
360
- <div class="pf-v6-c-card__body">This is a card</div>
361
- </div>
362
- <div class="pf-v6-c-card">
363
- <div class="pf-v6-c-card__body">This is a card</div>
364
- </div>
365
- <div class="pf-v6-c-card">
366
- <div class="pf-v6-c-card__body">This is a card</div>
367
- </div>
368
- <div class="pf-v6-c-card">
369
- <div class="pf-v6-c-card__body">This is a card</div>
370
- </div>
371
- <div class="pf-v6-c-card">
372
- <div class="pf-v6-c-card__body">This is a card</div>
373
- </div>
374
- <div class="pf-v6-c-card">
375
- <div class="pf-v6-c-card__body">This is a card</div>
376
- </div>
377
- <div class="pf-v6-c-card">
378
- <div class="pf-v6-c-card__body">This is a card</div>
379
- </div>
380
- <div class="pf-v6-c-card">
381
- <div class="pf-v6-c-card__body">This is a card</div>
382
- </div>
383
- <div class="pf-v6-c-card">
384
- <div class="pf-v6-c-card__body">This is a card</div>
385
- </div>
386
- <div class="pf-v6-c-card">
387
- <div class="pf-v6-c-card__body">This is a card</div>
388
- </div>
389
- <div class="pf-v6-c-card">
390
- <div class="pf-v6-c-card__body">This is a card</div>
391
- </div>
392
- <div class="pf-v6-c-card">
393
- <div class="pf-v6-c-card__body">This is a card</div>
394
- </div>
395
- <div class="pf-v6-c-card">
396
- <div class="pf-v6-c-card__body">This is a card</div>
397
- </div>
398
- <div class="pf-v6-c-card">
399
- <div class="pf-v6-c-card__body">This is a card</div>
400
- </div>
401
- <div class="pf-v6-c-card">
402
- <div class="pf-v6-c-card__body">This is a card</div>
403
- </div>
404
- <div class="pf-v6-c-card">
405
- <div class="pf-v6-c-card__body">This is a card</div>
290
+ </section>
291
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
292
+ <div class="pf-v6-c-page__main-body">
293
+ <div class="pf-v6-c-content">
294
+ <h1>Main title</h1>
295
+ <p>This is a full page demo.</p>
406
296
  </div>
407
- <div class="pf-v6-c-card">
408
- <div class="pf-v6-c-card__body">This is a card</div>
409
- </div>
410
- <div class="pf-v6-c-card">
411
- <div class="pf-v6-c-card__body">This is a card</div>
412
- </div>
413
- <div class="pf-v6-c-card">
414
- <div class="pf-v6-c-card__body">This is a card</div>
415
- </div>
416
- <div class="pf-v6-c-card">
417
- <div class="pf-v6-c-card__body">This is a card</div>
418
- </div>
419
- <div class="pf-v6-c-card">
420
- <div class="pf-v6-c-card__body">This is a card</div>
421
- </div>
422
- <div class="pf-v6-c-card">
423
- <div class="pf-v6-c-card__body">This is a card</div>
424
- </div>
425
- <div class="pf-v6-c-card">
426
- <div class="pf-v6-c-card__body">This is a card</div>
427
- </div>
428
- <div class="pf-v6-c-card">
429
- <div class="pf-v6-c-card__body">This is a card</div>
430
- </div>
431
- <div class="pf-v6-c-card">
432
- <div class="pf-v6-c-card__body">This is a card</div>
433
- </div>
434
- <div class="pf-v6-c-card">
435
- <div class="pf-v6-c-card__body">This is a card</div>
436
- </div>
437
- <div class="pf-v6-c-card">
438
- <div class="pf-v6-c-card__body">This is a card</div>
439
- </div>
440
- <div class="pf-v6-c-card">
441
- <div class="pf-v6-c-card__body">This is a card</div>
442
- </div>
443
- <div class="pf-v6-c-card">
444
- <div class="pf-v6-c-card__body">This is a card</div>
445
- </div>
446
- <div class="pf-v6-c-card">
447
- <div class="pf-v6-c-card__body">This is a card</div>
297
+ </div>
298
+ </section>
299
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
300
+ <div class="pf-v6-c-page__main-body">
301
+ <div class="pf-v6-l-gallery pf-m-gutter">
302
+ <div class="pf-v6-c-card">
303
+ <div class="pf-v6-c-card__body">This is a card</div>
304
+ </div>
305
+ <div class="pf-v6-c-card">
306
+ <div class="pf-v6-c-card__body">This is a card</div>
307
+ </div>
308
+ <div class="pf-v6-c-card">
309
+ <div class="pf-v6-c-card__body">This is a card</div>
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>
335
+ <div class="pf-v6-c-card">
336
+ <div class="pf-v6-c-card__body">This is a card</div>
337
+ </div>
338
+ <div class="pf-v6-c-card">
339
+ <div class="pf-v6-c-card__body">This is a card</div>
340
+ </div>
341
+ <div class="pf-v6-c-card">
342
+ <div class="pf-v6-c-card__body">This is a card</div>
343
+ </div>
344
+ <div class="pf-v6-c-card">
345
+ <div class="pf-v6-c-card__body">This is a card</div>
346
+ </div>
347
+ <div class="pf-v6-c-card">
348
+ <div class="pf-v6-c-card__body">This is a card</div>
349
+ </div>
350
+ <div class="pf-v6-c-card">
351
+ <div class="pf-v6-c-card__body">This is a card</div>
352
+ </div>
353
+ <div class="pf-v6-c-card">
354
+ <div class="pf-v6-c-card__body">This is a card</div>
355
+ </div>
356
+ <div class="pf-v6-c-card">
357
+ <div class="pf-v6-c-card__body">This is a card</div>
358
+ </div>
359
+ <div class="pf-v6-c-card">
360
+ <div class="pf-v6-c-card__body">This is a card</div>
361
+ </div>
362
+ <div class="pf-v6-c-card">
363
+ <div class="pf-v6-c-card__body">This is a card</div>
364
+ </div>
365
+ <div class="pf-v6-c-card">
366
+ <div class="pf-v6-c-card__body">This is a card</div>
367
+ </div>
368
+ <div class="pf-v6-c-card">
369
+ <div class="pf-v6-c-card__body">This is a card</div>
370
+ </div>
371
+ <div class="pf-v6-c-card">
372
+ <div class="pf-v6-c-card__body">This is a card</div>
373
+ </div>
374
+ <div class="pf-v6-c-card">
375
+ <div class="pf-v6-c-card__body">This is a card</div>
376
+ </div>
377
+ <div class="pf-v6-c-card">
378
+ <div class="pf-v6-c-card__body">This is a card</div>
379
+ </div>
380
+ <div class="pf-v6-c-card">
381
+ <div class="pf-v6-c-card__body">This is a card</div>
382
+ </div>
383
+ <div class="pf-v6-c-card">
384
+ <div class="pf-v6-c-card__body">This is a card</div>
385
+ </div>
386
+ <div class="pf-v6-c-card">
387
+ <div class="pf-v6-c-card__body">This is a card</div>
388
+ </div>
389
+ <div class="pf-v6-c-card">
390
+ <div class="pf-v6-c-card__body">This is a card</div>
391
+ </div>
392
+ <div class="pf-v6-c-card">
393
+ <div class="pf-v6-c-card__body">This is a card</div>
394
+ </div>
395
+ <div class="pf-v6-c-card">
396
+ <div class="pf-v6-c-card__body">This is a card</div>
397
+ </div>
398
+ <div class="pf-v6-c-card">
399
+ <div class="pf-v6-c-card__body">This is a card</div>
400
+ </div>
401
+ <div class="pf-v6-c-card">
402
+ <div class="pf-v6-c-card__body">This is a card</div>
403
+ </div>
404
+ <div class="pf-v6-c-card">
405
+ <div class="pf-v6-c-card__body">This is a card</div>
406
+ </div>
407
+ <div class="pf-v6-c-card">
408
+ <div class="pf-v6-c-card__body">This is a card</div>
409
+ </div>
410
+ <div class="pf-v6-c-card">
411
+ <div class="pf-v6-c-card__body">This is a card</div>
412
+ </div>
413
+ <div class="pf-v6-c-card">
414
+ <div class="pf-v6-c-card__body">This is a card</div>
415
+ </div>
416
+ <div class="pf-v6-c-card">
417
+ <div class="pf-v6-c-card__body">This is a card</div>
418
+ </div>
419
+ <div class="pf-v6-c-card">
420
+ <div class="pf-v6-c-card__body">This is a card</div>
421
+ </div>
422
+ <div class="pf-v6-c-card">
423
+ <div class="pf-v6-c-card__body">This is a card</div>
424
+ </div>
425
+ <div class="pf-v6-c-card">
426
+ <div class="pf-v6-c-card__body">This is a card</div>
427
+ </div>
428
+ <div class="pf-v6-c-card">
429
+ <div class="pf-v6-c-card__body">This is a card</div>
430
+ </div>
431
+ <div class="pf-v6-c-card">
432
+ <div class="pf-v6-c-card__body">This is a card</div>
433
+ </div>
434
+ <div class="pf-v6-c-card">
435
+ <div class="pf-v6-c-card__body">This is a card</div>
436
+ </div>
437
+ <div class="pf-v6-c-card">
438
+ <div class="pf-v6-c-card__body">This is a card</div>
439
+ </div>
440
+ <div class="pf-v6-c-card">
441
+ <div class="pf-v6-c-card__body">This is a card</div>
442
+ </div>
443
+ <div class="pf-v6-c-card">
444
+ <div class="pf-v6-c-card__body">This is a card</div>
445
+ </div>
446
+ <div class="pf-v6-c-card">
447
+ <div class="pf-v6-c-card__body">This is a card</div>
448
+ </div>
449
+ <div class="pf-v6-c-card">
450
+ <div class="pf-v6-c-card__body">This is a card</div>
451
+ </div>
448
452
  </div>
449
453
  </div>
450
- </div>
451
- </section>
452
- </main>
454
+ </section>
455
+ </main>
456
+ </div>
453
457
  </div>
454
458
 
455
459
  ```
@@ -704,212 +708,216 @@ wrapperTag: div
704
708
  </nav>
705
709
  </div>
706
710
  </div>
707
- <main
708
- class="pf-v6-c-page__main"
709
- tabindex="-1"
710
- id="main-content-banner-top-bottom-example"
711
- >
712
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
713
- <div class="pf-v6-c-page__main-body">
714
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
715
- <ol class="pf-v6-c-breadcrumb__list" role="list">
716
- <li class="pf-v6-c-breadcrumb__item">
717
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
718
- </li>
719
- <li class="pf-v6-c-breadcrumb__item">
720
- <span class="pf-v6-c-breadcrumb__item-divider">
721
- <i class="fas fa-angle-right" aria-hidden="true"></i>
722
- </span>
711
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
712
+ <main
713
+ class="pf-v6-c-page__main"
714
+ tabindex="-1"
715
+ id="main-content-banner-top-bottom-example"
716
+ >
717
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
718
+ <div class="pf-v6-c-page__main-body">
719
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
720
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
721
+ <li class="pf-v6-c-breadcrumb__item">
722
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
723
+ </li>
724
+ <li class="pf-v6-c-breadcrumb__item">
725
+ <span class="pf-v6-c-breadcrumb__item-divider">
726
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
727
+ </span>
723
728
 
724
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
725
- </li>
726
- <li class="pf-v6-c-breadcrumb__item">
727
- <span class="pf-v6-c-breadcrumb__item-divider">
728
- <i class="fas fa-angle-right" aria-hidden="true"></i>
729
- </span>
729
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
730
+ </li>
731
+ <li class="pf-v6-c-breadcrumb__item">
732
+ <span class="pf-v6-c-breadcrumb__item-divider">
733
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
734
+ </span>
730
735
 
731
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
732
- </li>
733
- <li class="pf-v6-c-breadcrumb__item">
734
- <span class="pf-v6-c-breadcrumb__item-divider">
735
- <i class="fas fa-angle-right" aria-hidden="true"></i>
736
- </span>
736
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
737
+ </li>
738
+ <li class="pf-v6-c-breadcrumb__item">
739
+ <span class="pf-v6-c-breadcrumb__item-divider">
740
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
741
+ </span>
737
742
 
738
- <a
739
- href="#"
740
- class="pf-v6-c-breadcrumb__link pf-m-current"
741
- aria-current="page"
742
- >Section landing</a>
743
- </li>
744
- </ol>
745
- </nav>
746
- </div>
747
- </section>
748
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
749
- <div class="pf-v6-c-page__main-body">
750
- <div class="pf-v6-c-content">
751
- <h1>Main title</h1>
752
- <p>This is a full page demo.</p>
743
+ <a
744
+ href="#"
745
+ class="pf-v6-c-breadcrumb__link pf-m-current"
746
+ aria-current="page"
747
+ >Section landing</a>
748
+ </li>
749
+ </ol>
750
+ </nav>
753
751
  </div>
754
- </div>
755
- </section>
756
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
757
- <div class="pf-v6-c-page__main-body">
758
- <div class="pf-v6-l-gallery pf-m-gutter">
759
- <div class="pf-v6-c-card">
760
- <div class="pf-v6-c-card__body">This is a card</div>
761
- </div>
762
- <div class="pf-v6-c-card">
763
- <div class="pf-v6-c-card__body">This is a card</div>
764
- </div>
765
- <div class="pf-v6-c-card">
766
- <div class="pf-v6-c-card__body">This is a card</div>
767
- </div>
768
- <div class="pf-v6-c-card">
769
- <div class="pf-v6-c-card__body">This is a card</div>
770
- </div>
771
- <div class="pf-v6-c-card">
772
- <div class="pf-v6-c-card__body">This is a card</div>
773
- </div>
774
- <div class="pf-v6-c-card">
775
- <div class="pf-v6-c-card__body">This is a card</div>
776
- </div>
777
- <div class="pf-v6-c-card">
778
- <div class="pf-v6-c-card__body">This is a card</div>
779
- </div>
780
- <div class="pf-v6-c-card">
781
- <div class="pf-v6-c-card__body">This is a card</div>
782
- </div>
783
- <div class="pf-v6-c-card">
784
- <div class="pf-v6-c-card__body">This is a card</div>
785
- </div>
786
- <div class="pf-v6-c-card">
787
- <div class="pf-v6-c-card__body">This is a card</div>
788
- </div>
789
- <div class="pf-v6-c-card">
790
- <div class="pf-v6-c-card__body">This is a card</div>
791
- </div>
792
- <div class="pf-v6-c-card">
793
- <div class="pf-v6-c-card__body">This is a card</div>
794
- </div>
795
- <div class="pf-v6-c-card">
796
- <div class="pf-v6-c-card__body">This is a card</div>
797
- </div>
798
- <div class="pf-v6-c-card">
799
- <div class="pf-v6-c-card__body">This is a card</div>
800
- </div>
801
- <div class="pf-v6-c-card">
802
- <div class="pf-v6-c-card__body">This is a card</div>
803
- </div>
804
- <div class="pf-v6-c-card">
805
- <div class="pf-v6-c-card__body">This is a card</div>
806
- </div>
807
- <div class="pf-v6-c-card">
808
- <div class="pf-v6-c-card__body">This is a card</div>
809
- </div>
810
- <div class="pf-v6-c-card">
811
- <div class="pf-v6-c-card__body">This is a card</div>
812
- </div>
813
- <div class="pf-v6-c-card">
814
- <div class="pf-v6-c-card__body">This is a card</div>
815
- </div>
816
- <div class="pf-v6-c-card">
817
- <div class="pf-v6-c-card__body">This is a card</div>
818
- </div>
819
- <div class="pf-v6-c-card">
820
- <div class="pf-v6-c-card__body">This is a card</div>
821
- </div>
822
- <div class="pf-v6-c-card">
823
- <div class="pf-v6-c-card__body">This is a card</div>
824
- </div>
825
- <div class="pf-v6-c-card">
826
- <div class="pf-v6-c-card__body">This is a card</div>
827
- </div>
828
- <div class="pf-v6-c-card">
829
- <div class="pf-v6-c-card__body">This is a card</div>
830
- </div>
831
- <div class="pf-v6-c-card">
832
- <div class="pf-v6-c-card__body">This is a card</div>
833
- </div>
834
- <div class="pf-v6-c-card">
835
- <div class="pf-v6-c-card__body">This is a card</div>
836
- </div>
837
- <div class="pf-v6-c-card">
838
- <div class="pf-v6-c-card__body">This is a card</div>
839
- </div>
840
- <div class="pf-v6-c-card">
841
- <div class="pf-v6-c-card__body">This is a card</div>
842
- </div>
843
- <div class="pf-v6-c-card">
844
- <div class="pf-v6-c-card__body">This is a card</div>
845
- </div>
846
- <div class="pf-v6-c-card">
847
- <div class="pf-v6-c-card__body">This is a card</div>
848
- </div>
849
- <div class="pf-v6-c-card">
850
- <div class="pf-v6-c-card__body">This is a card</div>
851
- </div>
852
- <div class="pf-v6-c-card">
853
- <div class="pf-v6-c-card__body">This is a card</div>
854
- </div>
855
- <div class="pf-v6-c-card">
856
- <div class="pf-v6-c-card__body">This is a card</div>
857
- </div>
858
- <div class="pf-v6-c-card">
859
- <div class="pf-v6-c-card__body">This is a card</div>
860
- </div>
861
- <div class="pf-v6-c-card">
862
- <div class="pf-v6-c-card__body">This is a card</div>
863
- </div>
864
- <div class="pf-v6-c-card">
865
- <div class="pf-v6-c-card__body">This is a card</div>
866
- </div>
867
- <div class="pf-v6-c-card">
868
- <div class="pf-v6-c-card__body">This is a card</div>
869
- </div>
870
- <div class="pf-v6-c-card">
871
- <div class="pf-v6-c-card__body">This is a card</div>
872
- </div>
873
- <div class="pf-v6-c-card">
874
- <div class="pf-v6-c-card__body">This is a card</div>
875
- </div>
876
- <div class="pf-v6-c-card">
877
- <div class="pf-v6-c-card__body">This is a card</div>
878
- </div>
879
- <div class="pf-v6-c-card">
880
- <div class="pf-v6-c-card__body">This is a card</div>
881
- </div>
882
- <div class="pf-v6-c-card">
883
- <div class="pf-v6-c-card__body">This is a card</div>
884
- </div>
885
- <div class="pf-v6-c-card">
886
- <div class="pf-v6-c-card__body">This is a card</div>
887
- </div>
888
- <div class="pf-v6-c-card">
889
- <div class="pf-v6-c-card__body">This is a card</div>
890
- </div>
891
- <div class="pf-v6-c-card">
892
- <div class="pf-v6-c-card__body">This is a card</div>
893
- </div>
894
- <div class="pf-v6-c-card">
895
- <div class="pf-v6-c-card__body">This is a card</div>
896
- </div>
897
- <div class="pf-v6-c-card">
898
- <div class="pf-v6-c-card__body">This is a card</div>
899
- </div>
900
- <div class="pf-v6-c-card">
901
- <div class="pf-v6-c-card__body">This is a card</div>
902
- </div>
903
- <div class="pf-v6-c-card">
904
- <div class="pf-v6-c-card__body">This is a card</div>
752
+ </section>
753
+ <section
754
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
755
+ >
756
+ <div class="pf-v6-c-page__main-body">
757
+ <div class="pf-v6-c-content">
758
+ <h1>Main title</h1>
759
+ <p>This is a full page demo.</p>
905
760
  </div>
906
- <div class="pf-v6-c-card">
907
- <div class="pf-v6-c-card__body">This is a card</div>
761
+ </div>
762
+ </section>
763
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
764
+ <div class="pf-v6-c-page__main-body">
765
+ <div class="pf-v6-l-gallery pf-m-gutter">
766
+ <div class="pf-v6-c-card">
767
+ <div class="pf-v6-c-card__body">This is a card</div>
768
+ </div>
769
+ <div class="pf-v6-c-card">
770
+ <div class="pf-v6-c-card__body">This is a card</div>
771
+ </div>
772
+ <div class="pf-v6-c-card">
773
+ <div class="pf-v6-c-card__body">This is a card</div>
774
+ </div>
775
+ <div class="pf-v6-c-card">
776
+ <div class="pf-v6-c-card__body">This is a card</div>
777
+ </div>
778
+ <div class="pf-v6-c-card">
779
+ <div class="pf-v6-c-card__body">This is a card</div>
780
+ </div>
781
+ <div class="pf-v6-c-card">
782
+ <div class="pf-v6-c-card__body">This is a card</div>
783
+ </div>
784
+ <div class="pf-v6-c-card">
785
+ <div class="pf-v6-c-card__body">This is a card</div>
786
+ </div>
787
+ <div class="pf-v6-c-card">
788
+ <div class="pf-v6-c-card__body">This is a card</div>
789
+ </div>
790
+ <div class="pf-v6-c-card">
791
+ <div class="pf-v6-c-card__body">This is a card</div>
792
+ </div>
793
+ <div class="pf-v6-c-card">
794
+ <div class="pf-v6-c-card__body">This is a card</div>
795
+ </div>
796
+ <div class="pf-v6-c-card">
797
+ <div class="pf-v6-c-card__body">This is a card</div>
798
+ </div>
799
+ <div class="pf-v6-c-card">
800
+ <div class="pf-v6-c-card__body">This is a card</div>
801
+ </div>
802
+ <div class="pf-v6-c-card">
803
+ <div class="pf-v6-c-card__body">This is a card</div>
804
+ </div>
805
+ <div class="pf-v6-c-card">
806
+ <div class="pf-v6-c-card__body">This is a card</div>
807
+ </div>
808
+ <div class="pf-v6-c-card">
809
+ <div class="pf-v6-c-card__body">This is a card</div>
810
+ </div>
811
+ <div class="pf-v6-c-card">
812
+ <div class="pf-v6-c-card__body">This is a card</div>
813
+ </div>
814
+ <div class="pf-v6-c-card">
815
+ <div class="pf-v6-c-card__body">This is a card</div>
816
+ </div>
817
+ <div class="pf-v6-c-card">
818
+ <div class="pf-v6-c-card__body">This is a card</div>
819
+ </div>
820
+ <div class="pf-v6-c-card">
821
+ <div class="pf-v6-c-card__body">This is a card</div>
822
+ </div>
823
+ <div class="pf-v6-c-card">
824
+ <div class="pf-v6-c-card__body">This is a card</div>
825
+ </div>
826
+ <div class="pf-v6-c-card">
827
+ <div class="pf-v6-c-card__body">This is a card</div>
828
+ </div>
829
+ <div class="pf-v6-c-card">
830
+ <div class="pf-v6-c-card__body">This is a card</div>
831
+ </div>
832
+ <div class="pf-v6-c-card">
833
+ <div class="pf-v6-c-card__body">This is a card</div>
834
+ </div>
835
+ <div class="pf-v6-c-card">
836
+ <div class="pf-v6-c-card__body">This is a card</div>
837
+ </div>
838
+ <div class="pf-v6-c-card">
839
+ <div class="pf-v6-c-card__body">This is a card</div>
840
+ </div>
841
+ <div class="pf-v6-c-card">
842
+ <div class="pf-v6-c-card__body">This is a card</div>
843
+ </div>
844
+ <div class="pf-v6-c-card">
845
+ <div class="pf-v6-c-card__body">This is a card</div>
846
+ </div>
847
+ <div class="pf-v6-c-card">
848
+ <div class="pf-v6-c-card__body">This is a card</div>
849
+ </div>
850
+ <div class="pf-v6-c-card">
851
+ <div class="pf-v6-c-card__body">This is a card</div>
852
+ </div>
853
+ <div class="pf-v6-c-card">
854
+ <div class="pf-v6-c-card__body">This is a card</div>
855
+ </div>
856
+ <div class="pf-v6-c-card">
857
+ <div class="pf-v6-c-card__body">This is a card</div>
858
+ </div>
859
+ <div class="pf-v6-c-card">
860
+ <div class="pf-v6-c-card__body">This is a card</div>
861
+ </div>
862
+ <div class="pf-v6-c-card">
863
+ <div class="pf-v6-c-card__body">This is a card</div>
864
+ </div>
865
+ <div class="pf-v6-c-card">
866
+ <div class="pf-v6-c-card__body">This is a card</div>
867
+ </div>
868
+ <div class="pf-v6-c-card">
869
+ <div class="pf-v6-c-card__body">This is a card</div>
870
+ </div>
871
+ <div class="pf-v6-c-card">
872
+ <div class="pf-v6-c-card__body">This is a card</div>
873
+ </div>
874
+ <div class="pf-v6-c-card">
875
+ <div class="pf-v6-c-card__body">This is a card</div>
876
+ </div>
877
+ <div class="pf-v6-c-card">
878
+ <div class="pf-v6-c-card__body">This is a card</div>
879
+ </div>
880
+ <div class="pf-v6-c-card">
881
+ <div class="pf-v6-c-card__body">This is a card</div>
882
+ </div>
883
+ <div class="pf-v6-c-card">
884
+ <div class="pf-v6-c-card__body">This is a card</div>
885
+ </div>
886
+ <div class="pf-v6-c-card">
887
+ <div class="pf-v6-c-card__body">This is a card</div>
888
+ </div>
889
+ <div class="pf-v6-c-card">
890
+ <div class="pf-v6-c-card__body">This is a card</div>
891
+ </div>
892
+ <div class="pf-v6-c-card">
893
+ <div class="pf-v6-c-card__body">This is a card</div>
894
+ </div>
895
+ <div class="pf-v6-c-card">
896
+ <div class="pf-v6-c-card__body">This is a card</div>
897
+ </div>
898
+ <div class="pf-v6-c-card">
899
+ <div class="pf-v6-c-card__body">This is a card</div>
900
+ </div>
901
+ <div class="pf-v6-c-card">
902
+ <div class="pf-v6-c-card__body">This is a card</div>
903
+ </div>
904
+ <div class="pf-v6-c-card">
905
+ <div class="pf-v6-c-card__body">This is a card</div>
906
+ </div>
907
+ <div class="pf-v6-c-card">
908
+ <div class="pf-v6-c-card__body">This is a card</div>
909
+ </div>
910
+ <div class="pf-v6-c-card">
911
+ <div class="pf-v6-c-card__body">This is a card</div>
912
+ </div>
913
+ <div class="pf-v6-c-card">
914
+ <div class="pf-v6-c-card__body">This is a card</div>
915
+ </div>
908
916
  </div>
909
917
  </div>
910
- </div>
911
- </section>
912
- </main>
918
+ </section>
919
+ </main>
920
+ </div>
913
921
  </div>
914
922
  </div>
915
923
  <div class="pf-v6-c-banner pf-m-sticky">