@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/DescriptionList/examples/DescriptionList.md CHANGED
@@ -227,152 +227,156 @@ cssPrefix: pf-d-description-list
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-description-list-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-description-list-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-c-card">
282
- <div class="pf-v6-c-card__header">
283
- <h2 class="pf-v6-c-title pf-m-lg">Details</h2>
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>
284
277
  </div>
285
- <hr class="pf-v6-c-divider" />
286
- <div class="pf-v6-c-card__body">
287
- <dl class="pf-v6-c-description-list pf-m-auto-fit">
288
- <div class="pf-v6-c-description-list__group">
289
- <dt class="pf-v6-c-description-list__term">
290
- <span class="pf-v6-c-description-list__text">Name</span>
291
- </dt>
292
- <dd class="pf-v6-c-description-list__description">
293
- <div class="pf-v6-c-description-list__text">mary-test</div>
294
- </dd>
295
- </div>
296
- <div class="pf-v6-c-description-list__group">
297
- <dt class="pf-v6-c-description-list__term">
298
- <span class="pf-v6-c-description-list__text">Status</span>
299
- </dt>
300
- <dd class="pf-v6-c-description-list__description">
301
- <div class="pf-v6-c-description-list__text">
302
- <div class="pf-v6-l-flex pf-m-space-items-sm">
303
- <div class="pf-v6-l-flex__item">
304
- <i
305
- class="fas fa-check-circle pf-v6-u-success-color-100"
306
- aria-hidden="true"
307
- ></i>
308
- </div>
309
- <div class="pf-v6-l-flex__item">
310
- <span>Active</span>
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-c-card">
283
+ <div class="pf-v6-c-card__header">
284
+ <h2 class="pf-v6-c-title pf-m-lg">Details</h2>
285
+ </div>
286
+ <hr class="pf-v6-c-divider" />
287
+ <div class="pf-v6-c-card__body">
288
+ <dl class="pf-v6-c-description-list pf-m-auto-fit">
289
+ <div class="pf-v6-c-description-list__group">
290
+ <dt class="pf-v6-c-description-list__term">
291
+ <span class="pf-v6-c-description-list__text">Name</span>
292
+ </dt>
293
+ <dd class="pf-v6-c-description-list__description">
294
+ <div class="pf-v6-c-description-list__text">mary-test</div>
295
+ </dd>
296
+ </div>
297
+ <div class="pf-v6-c-description-list__group">
298
+ <dt class="pf-v6-c-description-list__term">
299
+ <span class="pf-v6-c-description-list__text">Status</span>
300
+ </dt>
301
+ <dd class="pf-v6-c-description-list__description">
302
+ <div class="pf-v6-c-description-list__text">
303
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
304
+ <div class="pf-v6-l-flex__item">
305
+ <i
306
+ class="fas fa-check-circle pf-v6-u-success-color-100"
307
+ aria-hidden="true"
308
+ ></i>
309
+ </div>
310
+ <div class="pf-v6-l-flex__item">
311
+ <span>Active</span>
312
+ </div>
311
313
  </div>
312
314
  </div>
313
- </div>
314
- </dd>
315
- </div>
316
- <div class="pf-v6-c-description-list__group">
317
- <dt class="pf-v6-c-description-list__term">
318
- <span
319
- class="pf-v6-c-description-list__text"
320
- >Default pull secret</span>
321
- </dt>
322
- <dd class="pf-v6-c-description-list__description">
323
- <div class="pf-v6-c-description-list__text">
324
- <span class="pf-v6-u-color-300">Not configured</span>
325
- </div>
326
- </dd>
327
- </div>
328
- <div class="pf-v6-c-description-list__group">
329
- <dt class="pf-v6-c-description-list__term">
330
- <span class="pf-v6-c-description-list__text">Tolerations</span>
331
- </dt>
332
- <dd class="pf-v6-c-description-list__description">
333
- <div class="pf-v6-c-description-list__text">6 Tolerations</div>
334
- </dd>
335
- </div>
336
- <div class="pf-v6-c-description-list__group">
337
- <dt class="pf-v6-c-description-list__term">
338
- <span class="pf-v6-c-description-list__text">Network Policies</span>
339
- </dt>
340
- <dd class="pf-v6-c-description-list__description">
341
- <div class="pf-v6-c-description-list__text">
342
- <a href="#">Network Policies</a>
343
- </div>
344
- </dd>
345
- </div>
346
- <div class="pf-v6-c-description-list__group">
347
- <dt class="pf-v6-c-description-list__term">
348
- <span class="pf-v6-c-description-list__text">Display name</span>
349
- </dt>
350
- <dd class="pf-v6-c-description-list__description">
351
- <div class="pf-v6-c-description-list__text">mary</div>
352
- </dd>
353
- </div>
354
- <div class="pf-v6-c-description-list__group">
355
- <dt class="pf-v6-c-description-list__term">
356
- <span class="pf-v6-c-description-list__text">Requester</span>
357
- </dt>
358
- <dd class="pf-v6-c-description-list__description">
359
- <div class="pf-v6-c-description-list__text">kube:admin</div>
360
- </dd>
361
- </div>
362
- <div class="pf-v6-c-description-list__group">
363
- <dt class="pf-v6-c-description-list__term">
364
- <span class="pf-v6-c-description-list__text">Created at:</span>
365
- </dt>
366
- <dd class="pf-v6-c-description-list__description">
367
- <div class="pf-v6-c-description-list__text">3 minutes ago</div>
368
- </dd>
369
- </div>
370
- </dl>
315
+ </dd>
316
+ </div>
317
+ <div class="pf-v6-c-description-list__group">
318
+ <dt class="pf-v6-c-description-list__term">
319
+ <span
320
+ class="pf-v6-c-description-list__text"
321
+ >Default pull secret</span>
322
+ </dt>
323
+ <dd class="pf-v6-c-description-list__description">
324
+ <div class="pf-v6-c-description-list__text">
325
+ <span class="pf-v6-u-color-300">Not configured</span>
326
+ </div>
327
+ </dd>
328
+ </div>
329
+ <div class="pf-v6-c-description-list__group">
330
+ <dt class="pf-v6-c-description-list__term">
331
+ <span class="pf-v6-c-description-list__text">Tolerations</span>
332
+ </dt>
333
+ <dd class="pf-v6-c-description-list__description">
334
+ <div class="pf-v6-c-description-list__text">6 Tolerations</div>
335
+ </dd>
336
+ </div>
337
+ <div class="pf-v6-c-description-list__group">
338
+ <dt class="pf-v6-c-description-list__term">
339
+ <span
340
+ class="pf-v6-c-description-list__text"
341
+ >Network Policies</span>
342
+ </dt>
343
+ <dd class="pf-v6-c-description-list__description">
344
+ <div class="pf-v6-c-description-list__text">
345
+ <a href="#">Network Policies</a>
346
+ </div>
347
+ </dd>
348
+ </div>
349
+ <div class="pf-v6-c-description-list__group">
350
+ <dt class="pf-v6-c-description-list__term">
351
+ <span class="pf-v6-c-description-list__text">Display name</span>
352
+ </dt>
353
+ <dd class="pf-v6-c-description-list__description">
354
+ <div class="pf-v6-c-description-list__text">mary</div>
355
+ </dd>
356
+ </div>
357
+ <div class="pf-v6-c-description-list__group">
358
+ <dt class="pf-v6-c-description-list__term">
359
+ <span class="pf-v6-c-description-list__text">Requester</span>
360
+ </dt>
361
+ <dd class="pf-v6-c-description-list__description">
362
+ <div class="pf-v6-c-description-list__text">kube:admin</div>
363
+ </dd>
364
+ </div>
365
+ <div class="pf-v6-c-description-list__group">
366
+ <dt class="pf-v6-c-description-list__term">
367
+ <span class="pf-v6-c-description-list__text">Created at:</span>
368
+ </dt>
369
+ <dd class="pf-v6-c-description-list__description">
370
+ <div class="pf-v6-c-description-list__text">3 minutes ago</div>
371
+ </dd>
372
+ </div>
373
+ </dl>
374
+ </div>
371
375
  </div>
372
376
  </div>
373
- </div>
374
- </section>
375
- </main>
377
+ </section>
378
+ </main>
379
+ </div>
376
380
  </div>
377
381
 
378
382
  ```
@@ -608,103 +612,105 @@ cssPrefix: pf-d-description-list
608
612
  <div class="pf-v6-c-drawer__main">
609
613
  <div class="pf-v6-c-drawer__content">
610
614
  <div class="pf-v6-c-drawer__body">
611
- <main
612
- class="pf-v6-c-page__main"
613
- tabindex="-1"
614
- id="main-content-description-list-in-drawer-example"
615
- >
616
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
617
- <div class="pf-v6-c-page__main-body">
618
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
619
- <ol class="pf-v6-c-breadcrumb__list" role="list">
620
- <li class="pf-v6-c-breadcrumb__item">
621
- <a
622
- href="#"
623
- class="pf-v6-c-breadcrumb__link"
624
- >Section home</a>
625
- </li>
626
- <li class="pf-v6-c-breadcrumb__item">
627
- <span class="pf-v6-c-breadcrumb__item-divider">
628
- <i class="fas fa-angle-right" aria-hidden="true"></i>
629
- </span>
615
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
616
+ <main
617
+ class="pf-v6-c-page__main"
618
+ tabindex="-1"
619
+ id="main-content-description-list-in-drawer-example"
620
+ >
621
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
622
+ <div class="pf-v6-c-page__main-body">
623
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
624
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
625
+ <li class="pf-v6-c-breadcrumb__item">
626
+ <a
627
+ href="#"
628
+ class="pf-v6-c-breadcrumb__link"
629
+ >Section home</a>
630
+ </li>
631
+ <li class="pf-v6-c-breadcrumb__item">
632
+ <span class="pf-v6-c-breadcrumb__item-divider">
633
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
634
+ </span>
630
635
 
631
- <a
632
- href="#"
633
- class="pf-v6-c-breadcrumb__link"
634
- >Section title</a>
635
- </li>
636
- <li class="pf-v6-c-breadcrumb__item">
637
- <span class="pf-v6-c-breadcrumb__item-divider">
638
- <i class="fas fa-angle-right" aria-hidden="true"></i>
639
- </span>
636
+ <a
637
+ href="#"
638
+ class="pf-v6-c-breadcrumb__link"
639
+ >Section title</a>
640
+ </li>
641
+ <li class="pf-v6-c-breadcrumb__item">
642
+ <span class="pf-v6-c-breadcrumb__item-divider">
643
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
644
+ </span>
640
645
 
641
- <a
642
- href="#"
643
- class="pf-v6-c-breadcrumb__link"
644
- >Section title</a>
645
- </li>
646
- <li class="pf-v6-c-breadcrumb__item">
647
- <span class="pf-v6-c-breadcrumb__item-divider">
648
- <i class="fas fa-angle-right" aria-hidden="true"></i>
649
- </span>
646
+ <a
647
+ href="#"
648
+ class="pf-v6-c-breadcrumb__link"
649
+ >Section title</a>
650
+ </li>
651
+ <li class="pf-v6-c-breadcrumb__item">
652
+ <span class="pf-v6-c-breadcrumb__item-divider">
653
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
654
+ </span>
650
655
 
651
- <a
652
- href="#"
653
- class="pf-v6-c-breadcrumb__link pf-m-current"
654
- aria-current="page"
655
- >Section landing</a>
656
- </li>
657
- </ol>
658
- </nav>
659
- </div>
660
- </section>
661
- <section
662
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
663
- >
664
- <div class="pf-v6-c-page__main-body">
665
- <div class="pf-v6-c-content">
666
- <h1>Main title</h1>
667
- <p>This is a full page demo.</p>
656
+ <a
657
+ href="#"
658
+ class="pf-v6-c-breadcrumb__link pf-m-current"
659
+ aria-current="page"
660
+ >Section landing</a>
661
+ </li>
662
+ </ol>
663
+ </nav>
668
664
  </div>
669
- </div>
670
- </section>
671
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
672
- <div class="pf-v6-c-page__main-body">
673
- <div class="pf-v6-l-gallery pf-m-gutter">
674
- <div class="pf-v6-c-card">
675
- <div class="pf-v6-c-card__body">This is a card</div>
676
- </div>
677
- <div class="pf-v6-c-card">
678
- <div class="pf-v6-c-card__body">This is a card</div>
679
- </div>
680
- <div class="pf-v6-c-card">
681
- <div class="pf-v6-c-card__body">This is a card</div>
682
- </div>
683
- <div class="pf-v6-c-card">
684
- <div class="pf-v6-c-card__body">This is a card</div>
685
- </div>
686
- <div class="pf-v6-c-card">
687
- <div class="pf-v6-c-card__body">This is a card</div>
688
- </div>
689
- <div class="pf-v6-c-card">
690
- <div class="pf-v6-c-card__body">This is a card</div>
691
- </div>
692
- <div class="pf-v6-c-card">
693
- <div class="pf-v6-c-card__body">This is a card</div>
694
- </div>
695
- <div class="pf-v6-c-card">
696
- <div class="pf-v6-c-card__body">This is a card</div>
697
- </div>
698
- <div class="pf-v6-c-card">
699
- <div class="pf-v6-c-card__body">This is a card</div>
665
+ </section>
666
+ <section
667
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light"
668
+ >
669
+ <div class="pf-v6-c-page__main-body">
670
+ <div class="pf-v6-c-content">
671
+ <h1>Main title</h1>
672
+ <p>This is a full page demo.</p>
700
673
  </div>
701
- <div class="pf-v6-c-card">
702
- <div class="pf-v6-c-card__body">This is a card</div>
674
+ </div>
675
+ </section>
676
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
677
+ <div class="pf-v6-c-page__main-body">
678
+ <div class="pf-v6-l-gallery pf-m-gutter">
679
+ <div class="pf-v6-c-card">
680
+ <div class="pf-v6-c-card__body">This is a card</div>
681
+ </div>
682
+ <div class="pf-v6-c-card">
683
+ <div class="pf-v6-c-card__body">This is a card</div>
684
+ </div>
685
+ <div class="pf-v6-c-card">
686
+ <div class="pf-v6-c-card__body">This is a card</div>
687
+ </div>
688
+ <div class="pf-v6-c-card">
689
+ <div class="pf-v6-c-card__body">This is a card</div>
690
+ </div>
691
+ <div class="pf-v6-c-card">
692
+ <div class="pf-v6-c-card__body">This is a card</div>
693
+ </div>
694
+ <div class="pf-v6-c-card">
695
+ <div class="pf-v6-c-card__body">This is a card</div>
696
+ </div>
697
+ <div class="pf-v6-c-card">
698
+ <div class="pf-v6-c-card__body">This is a card</div>
699
+ </div>
700
+ <div class="pf-v6-c-card">
701
+ <div class="pf-v6-c-card__body">This is a card</div>
702
+ </div>
703
+ <div class="pf-v6-c-card">
704
+ <div class="pf-v6-c-card__body">This is a card</div>
705
+ </div>
706
+ <div class="pf-v6-c-card">
707
+ <div class="pf-v6-c-card__body">This is a card</div>
708
+ </div>
703
709
  </div>
704
710
  </div>
705
- </div>
706
- </section>
707
- </main>
711
+ </section>
712
+ </main>
713
+ </div>
708
714
  </div>
709
715
  </div>
710
716
  <div class="pf-v6-c-drawer__panel pf-m-width-33-on-lg">
@@ -1294,323 +1300,331 @@ cssPrefix: pf-d-description-list
1294
1300
  </nav>
1295
1301
  </div>
1296
1302
  </div>
1297
- <main
1298
- class="pf-v6-c-page__main"
1299
- tabindex="-1"
1300
- id="main-content-description-list-complex-content-example"
1301
- >
1302
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1303
- <div class="pf-v6-c-page__main-body">
1304
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1305
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1306
- <li class="pf-v6-c-breadcrumb__item">
1307
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1308
- </li>
1309
- <li class="pf-v6-c-breadcrumb__item">
1310
- <span class="pf-v6-c-breadcrumb__item-divider">
1311
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1312
- </span>
1303
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1304
+ <main
1305
+ class="pf-v6-c-page__main"
1306
+ tabindex="-1"
1307
+ id="main-content-description-list-complex-content-example"
1308
+ >
1309
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1310
+ <div class="pf-v6-c-page__main-body">
1311
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1312
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1313
+ <li class="pf-v6-c-breadcrumb__item">
1314
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1315
+ </li>
1316
+ <li class="pf-v6-c-breadcrumb__item">
1317
+ <span class="pf-v6-c-breadcrumb__item-divider">
1318
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1319
+ </span>
1313
1320
 
1314
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1315
- </li>
1316
- <li class="pf-v6-c-breadcrumb__item">
1317
- <span class="pf-v6-c-breadcrumb__item-divider">
1318
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1319
- </span>
1321
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1322
+ </li>
1323
+ <li class="pf-v6-c-breadcrumb__item">
1324
+ <span class="pf-v6-c-breadcrumb__item-divider">
1325
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1326
+ </span>
1320
1327
 
1321
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1322
- </li>
1323
- <li class="pf-v6-c-breadcrumb__item">
1324
- <span class="pf-v6-c-breadcrumb__item-divider">
1325
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1326
- </span>
1328
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1329
+ </li>
1330
+ <li class="pf-v6-c-breadcrumb__item">
1331
+ <span class="pf-v6-c-breadcrumb__item-divider">
1332
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1333
+ </span>
1327
1334
 
1328
- <a
1329
- href="#"
1330
- class="pf-v6-c-breadcrumb__link pf-m-current"
1331
- aria-current="page"
1332
- >Section landing</a>
1333
- </li>
1334
- </ol>
1335
- </nav>
1336
- </div>
1337
- </section>
1338
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1339
- <div class="pf-v6-c-page__main-body">
1340
- <div class="pf-v6-c-content">
1341
- <h1>Main title</h1>
1342
- <p>This is a full page demo.</p>
1335
+ <a
1336
+ href="#"
1337
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1338
+ aria-current="page"
1339
+ >Section landing</a>
1340
+ </li>
1341
+ </ol>
1342
+ </nav>
1343
1343
  </div>
1344
- </div>
1345
- </section>
1346
- <hr class="pf-v6-c-divider" />
1347
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1348
- <div class="pf-v6-c-page__main-body">
1349
- <div class="pf-v6-l-grid pf-m-gutter">
1350
- <div class="pf-v6-l-grid__item pf-m-5-col-on-lg pf-m-4-col-on-xl">
1351
- <div class="pf-v6-l-grid pf-m-gutter">
1352
- <div class="pf-v6-l-grid__item">
1353
- <h2 class="pf-v6-c-title pf-m-lg">Service overview</h2>
1354
- </div>
1355
- <div class="pf-v6-l-grid__item">
1356
- <dl class="pf-v6-c-description-list pf-m-2-col-on-xl">
1357
- <div class="pf-v6-c-description-list__group">
1358
- <dt class="pf-v6-c-description-list__term">
1359
- <span class="pf-v6-c-description-list__text">Name</span>
1360
- </dt>
1361
- <dd class="pf-v6-c-description-list__description">
1362
- <div class="pf-v6-c-description-list__text">mary-test</div>
1363
- </dd>
1364
- </div>
1365
- <div class="pf-v6-c-description-list__group">
1366
- <dt class="pf-v6-c-description-list__term">
1367
- <span class="pf-v6-c-description-list__text">Namespace</span>
1368
- </dt>
1369
- <dd class="pf-v6-c-description-list__description">
1370
- <div class="pf-v6-c-description-list__text">
1371
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1372
- <div class="pf-v6-l-flex__item">
1373
- <span class="pf-v6-c-label pf-m-green">
1374
- <span class="pf-v6-c-label__content">
1375
- <span class="pf-v6-c-label__text">NS</span>
1376
- </span>
1377
- </span>
1378
- </div>
1379
- <div class="pf-v6-l-flex__item">
1380
- <a href="#">mary-test</a>
1381
- </div>
1382
- </div>
1383
- </div>
1384
- </dd>
1385
- </div>
1386
- <div class="pf-v6-c-description-list__group">
1387
- <dt class="pf-v6-c-description-list__term">
1388
- <span class="pf-v6-c-description-list__text">Labels</span>
1389
- </dt>
1390
- <dd class="pf-v6-c-description-list__description">
1391
- <div class="pf-v6-c-description-list__text">No labels</div>
1392
- </dd>
1393
- </div>
1394
- <div class="pf-v6-c-description-list__group">
1395
- <dt class="pf-v6-c-description-list__term">
1396
- <span class="pf-v6-c-description-list__text">Pod selector</span>
1397
- </dt>
1398
- <dd class="pf-v6-c-description-list__description">
1399
- <div class="pf-v6-c-description-list__text">
1400
- <a href="#">
1344
+ </section>
1345
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1346
+ <div class="pf-v6-c-page__main-body">
1347
+ <div class="pf-v6-c-content">
1348
+ <h1>Main title</h1>
1349
+ <p>This is a full page demo.</p>
1350
+ </div>
1351
+ </div>
1352
+ </section>
1353
+ <hr class="pf-v6-c-divider" />
1354
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1355
+ <div class="pf-v6-c-page__main-body">
1356
+ <div class="pf-v6-l-grid pf-m-gutter">
1357
+ <div class="pf-v6-l-grid__item pf-m-5-col-on-lg pf-m-4-col-on-xl">
1358
+ <div class="pf-v6-l-grid pf-m-gutter">
1359
+ <div class="pf-v6-l-grid__item">
1360
+ <h2 class="pf-v6-c-title pf-m-lg">Service overview</h2>
1361
+ </div>
1362
+ <div class="pf-v6-l-grid__item">
1363
+ <dl class="pf-v6-c-description-list pf-m-2-col-on-xl">
1364
+ <div class="pf-v6-c-description-list__group">
1365
+ <dt class="pf-v6-c-description-list__term">
1366
+ <span class="pf-v6-c-description-list__text">Name</span>
1367
+ </dt>
1368
+ <dd class="pf-v6-c-description-list__description">
1369
+ <div class="pf-v6-c-description-list__text">mary-test</div>
1370
+ </dd>
1371
+ </div>
1372
+ <div class="pf-v6-c-description-list__group">
1373
+ <dt class="pf-v6-c-description-list__term">
1374
+ <span class="pf-v6-c-description-list__text">Namespace</span>
1375
+ </dt>
1376
+ <dd class="pf-v6-c-description-list__description">
1377
+ <div class="pf-v6-c-description-list__text">
1401
1378
  <div class="pf-v6-l-flex pf-m-space-items-sm">
1402
1379
  <div class="pf-v6-l-flex__item">
1403
- <i class="fas fa-search" aria-hidden="true"></i>
1380
+ <span class="pf-v6-c-label pf-m-green">
1381
+ <span class="pf-v6-c-label__content">
1382
+ <span class="pf-v6-c-label__text">NS</span>
1383
+ </span>
1384
+ </span>
1404
1385
  </div>
1405
1386
  <div class="pf-v6-l-flex__item">
1406
- <span>app=MyApp</span>
1387
+ <a href="#">mary-test</a>
1407
1388
  </div>
1408
1389
  </div>
1409
- </a>
1410
- </div>
1411
- </dd>
1412
- </div>
1413
- <div class="pf-v6-c-description-list__group">
1414
- <dt class="pf-v6-c-description-list__term">
1415
- <span class="pf-v6-c-description-list__text">Annotations</span>
1416
- </dt>
1417
- <dd class="pf-v6-c-description-list__description">
1418
- <div class="pf-v6-c-description-list__text">2 Annotations</div>
1419
- </dd>
1420
- </div>
1421
- <div class="pf-v6-c-description-list__group">
1422
- <dt class="pf-v6-c-description-list__term">
1423
- <span
1424
- class="pf-v6-c-description-list__text"
1425
- >Session affinity</span>
1426
- </dt>
1427
- <dd class="pf-v6-c-description-list__description">
1428
- <div class="pf-v6-c-description-list__text">None</div>
1429
- </dd>
1430
- </div>
1431
- <div class="pf-v6-c-description-list__group">
1432
- <dt class="pf-v6-c-description-list__term">
1433
- <span class="pf-v6-c-description-list__text">Created at:</span>
1434
- </dt>
1435
- <dd class="pf-v6-c-description-list__description">
1436
- <div class="pf-v6-c-description-list__text">3 minutes ago</div>
1437
- </dd>
1438
- </div>
1439
- </dl>
1390
+ </div>
1391
+ </dd>
1392
+ </div>
1393
+ <div class="pf-v6-c-description-list__group">
1394
+ <dt class="pf-v6-c-description-list__term">
1395
+ <span class="pf-v6-c-description-list__text">Labels</span>
1396
+ </dt>
1397
+ <dd class="pf-v6-c-description-list__description">
1398
+ <div class="pf-v6-c-description-list__text">No labels</div>
1399
+ </dd>
1400
+ </div>
1401
+ <div class="pf-v6-c-description-list__group">
1402
+ <dt class="pf-v6-c-description-list__term">
1403
+ <span
1404
+ class="pf-v6-c-description-list__text"
1405
+ >Pod selector</span>
1406
+ </dt>
1407
+ <dd class="pf-v6-c-description-list__description">
1408
+ <div class="pf-v6-c-description-list__text">
1409
+ <a href="#">
1410
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1411
+ <div class="pf-v6-l-flex__item">
1412
+ <i class="fas fa-search" aria-hidden="true"></i>
1413
+ </div>
1414
+ <div class="pf-v6-l-flex__item">
1415
+ <span>app=MyApp</span>
1416
+ </div>
1417
+ </div>
1418
+ </a>
1419
+ </div>
1420
+ </dd>
1421
+ </div>
1422
+ <div class="pf-v6-c-description-list__group">
1423
+ <dt class="pf-v6-c-description-list__term">
1424
+ <span class="pf-v6-c-description-list__text">Annotations</span>
1425
+ </dt>
1426
+ <dd class="pf-v6-c-description-list__description">
1427
+ <div
1428
+ class="pf-v6-c-description-list__text"
1429
+ >2 Annotations</div>
1430
+ </dd>
1431
+ </div>
1432
+ <div class="pf-v6-c-description-list__group">
1433
+ <dt class="pf-v6-c-description-list__term">
1434
+ <span
1435
+ class="pf-v6-c-description-list__text"
1436
+ >Session affinity</span>
1437
+ </dt>
1438
+ <dd class="pf-v6-c-description-list__description">
1439
+ <div class="pf-v6-c-description-list__text">None</div>
1440
+ </dd>
1441
+ </div>
1442
+ <div class="pf-v6-c-description-list__group">
1443
+ <dt class="pf-v6-c-description-list__term">
1444
+ <span class="pf-v6-c-description-list__text">Created at:</span>
1445
+ </dt>
1446
+ <dd class="pf-v6-c-description-list__description">
1447
+ <div
1448
+ class="pf-v6-c-description-list__text"
1449
+ >3 minutes ago</div>
1450
+ </dd>
1451
+ </div>
1452
+ </dl>
1453
+ </div>
1440
1454
  </div>
1441
1455
  </div>
1442
- </div>
1443
- <div class="pf-v6-l-grid__item pf-m-6-col-on-lg pf-m-4-col-on-xl">
1444
- <div class="pf-v6-l-grid pf-m-gutter">
1445
- <div class="pf-v6-l-grid__item">
1446
- <h2 class="pf-v6-c-title pf-m-lg">Service routing</h2>
1447
- </div>
1448
- <div class="pf-v6-l-grid__item">
1449
- <dl class="pf-v6-c-description-list">
1450
- <div class="pf-v6-c-description-list__group">
1451
- <dt class="pf-v6-c-description-list__term">
1452
- <span
1453
- class="pf-v6-c-description-list__text"
1454
- >Service address</span>
1455
- </dt>
1456
- <dd class="pf-v6-c-description-list__description">
1457
- <div class="pf-v6-c-description-list__text">
1458
- <table
1459
- class="pf-v6-c-table pf-m-grid-md pf-m-compact"
1460
- role="grid"
1461
- aria-label="Service address"
1462
- id="service-address"
1463
- >
1464
- <thead class="pf-v6-c-table__thead">
1465
- <tr class="pf-v6-c-table__tr" role="row">
1466
- <th
1467
- class="pf-v6-c-table__th"
1468
- role="columnheader"
1469
- scope="col"
1470
- >Type</th>
1456
+ <div class="pf-v6-l-grid__item pf-m-6-col-on-lg pf-m-4-col-on-xl">
1457
+ <div class="pf-v6-l-grid pf-m-gutter">
1458
+ <div class="pf-v6-l-grid__item">
1459
+ <h2 class="pf-v6-c-title pf-m-lg">Service routing</h2>
1460
+ </div>
1461
+ <div class="pf-v6-l-grid__item">
1462
+ <dl class="pf-v6-c-description-list">
1463
+ <div class="pf-v6-c-description-list__group">
1464
+ <dt class="pf-v6-c-description-list__term">
1465
+ <span
1466
+ class="pf-v6-c-description-list__text"
1467
+ >Service address</span>
1468
+ </dt>
1469
+ <dd class="pf-v6-c-description-list__description">
1470
+ <div class="pf-v6-c-description-list__text">
1471
+ <table
1472
+ class="pf-v6-c-table pf-m-grid-md pf-m-compact"
1473
+ role="grid"
1474
+ aria-label="Service address"
1475
+ id="service-address"
1476
+ >
1477
+ <thead class="pf-v6-c-table__thead">
1478
+ <tr class="pf-v6-c-table__tr" role="row">
1479
+ <th
1480
+ class="pf-v6-c-table__th"
1481
+ role="columnheader"
1482
+ scope="col"
1483
+ >Type</th>
1471
1484
 
1472
- <th
1473
- class="pf-v6-c-table__th"
1474
- role="columnheader"
1475
- scope="col"
1476
- >Location</th>
1477
- </tr>
1478
- </thead>
1485
+ <th
1486
+ class="pf-v6-c-table__th"
1487
+ role="columnheader"
1488
+ scope="col"
1489
+ >Location</th>
1490
+ </tr>
1491
+ </thead>
1479
1492
 
1480
- <tbody class="pf-v6-c-table__tbody" role="rowgroup">
1481
- <tr class="pf-v6-c-table__tr" role="row">
1482
- <td
1483
- class="pf-v6-c-table__td"
1484
- role="cell"
1485
- data-label="Type"
1486
- >Cluster IP</td>
1487
- <td
1488
- class="pf-v6-c-table__td"
1489
- role="cell"
1490
- data-label="Location"
1491
- >172.30.126.106</td>
1492
- </tr>
1493
- <tr class="pf-v6-c-table__tr" role="row">
1494
- <td
1495
- class="pf-v6-c-table__td"
1496
- role="cell"
1497
- data-label="Type"
1498
- >Accessible within the cluster only</td>
1499
- <td
1500
- class="pf-v6-c-table__td"
1501
- role="cell"
1502
- data-label="Location"
1503
- >n/a</td>
1504
- </tr>
1505
- </tbody>
1506
- </table>
1507
- </div>
1508
- </dd>
1509
- </div>
1510
- <div class="pf-v6-c-description-list__group">
1511
- <dt class="pf-v6-c-description-list__term">
1512
- <span
1513
- class="pf-v6-c-description-list__text"
1514
- >Service port mapping</span>
1515
- </dt>
1516
- <dd class="pf-v6-c-description-list__description">
1517
- <div class="pf-v6-c-description-list__text">
1518
- <table
1519
- class="pf-v6-c-table pf-m-grid-md pf-m-compact"
1520
- role="grid"
1521
- aria-label="Service address"
1522
- id="service-port"
1523
- >
1524
- <thead class="pf-v6-c-table__thead">
1525
- <tr class="pf-v6-c-table__tr" role="row">
1526
- <th
1527
- class="pf-v6-c-table__th"
1528
- role="columnheader"
1529
- scope="col"
1530
- >Name</th>
1493
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
1494
+ <tr class="pf-v6-c-table__tr" role="row">
1495
+ <td
1496
+ class="pf-v6-c-table__td"
1497
+ role="cell"
1498
+ data-label="Type"
1499
+ >Cluster IP</td>
1500
+ <td
1501
+ class="pf-v6-c-table__td"
1502
+ role="cell"
1503
+ data-label="Location"
1504
+ >172.30.126.106</td>
1505
+ </tr>
1506
+ <tr class="pf-v6-c-table__tr" role="row">
1507
+ <td
1508
+ class="pf-v6-c-table__td"
1509
+ role="cell"
1510
+ data-label="Type"
1511
+ >Accessible within the cluster only</td>
1512
+ <td
1513
+ class="pf-v6-c-table__td"
1514
+ role="cell"
1515
+ data-label="Location"
1516
+ >n/a</td>
1517
+ </tr>
1518
+ </tbody>
1519
+ </table>
1520
+ </div>
1521
+ </dd>
1522
+ </div>
1523
+ <div class="pf-v6-c-description-list__group">
1524
+ <dt class="pf-v6-c-description-list__term">
1525
+ <span
1526
+ class="pf-v6-c-description-list__text"
1527
+ >Service port mapping</span>
1528
+ </dt>
1529
+ <dd class="pf-v6-c-description-list__description">
1530
+ <div class="pf-v6-c-description-list__text">
1531
+ <table
1532
+ class="pf-v6-c-table pf-m-grid-md pf-m-compact"
1533
+ role="grid"
1534
+ aria-label="Service address"
1535
+ id="service-port"
1536
+ >
1537
+ <thead class="pf-v6-c-table__thead">
1538
+ <tr class="pf-v6-c-table__tr" role="row">
1539
+ <th
1540
+ class="pf-v6-c-table__th"
1541
+ role="columnheader"
1542
+ scope="col"
1543
+ >Name</th>
1531
1544
 
1532
- <th
1533
- class="pf-v6-c-table__th"
1534
- role="columnheader"
1535
- scope="col"
1536
- >Port</th>
1545
+ <th
1546
+ class="pf-v6-c-table__th"
1547
+ role="columnheader"
1548
+ scope="col"
1549
+ >Port</th>
1537
1550
 
1538
- <th
1539
- class="pf-v6-c-table__th"
1540
- role="columnheader"
1541
- scope="col"
1542
- >Protocol</th>
1551
+ <th
1552
+ class="pf-v6-c-table__th"
1553
+ role="columnheader"
1554
+ scope="col"
1555
+ >Protocol</th>
1543
1556
 
1544
- <th
1545
- class="pf-v6-c-table__th"
1546
- role="columnheader"
1547
- scope="col"
1548
- >Pod port or name</th>
1549
- </tr>
1550
- </thead>
1557
+ <th
1558
+ class="pf-v6-c-table__th"
1559
+ role="columnheader"
1560
+ scope="col"
1561
+ >Pod port or name</th>
1562
+ </tr>
1563
+ </thead>
1551
1564
 
1552
- <tbody class="pf-v6-c-table__tbody" role="rowgroup">
1553
- <tr class="pf-v6-c-table__tr" role="row">
1554
- <td
1555
- class="pf-v6-c-table__td"
1556
- role="cell"
1557
- data-label="Name"
1558
- >--</td>
1559
- <td
1560
- class="pf-v6-c-table__td"
1561
- role="cell"
1562
- data-label="Port"
1563
- >
1564
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1565
- <div class="pf-v6-l-flex__item">
1566
- <span
1567
- class="pf-v6-c-label pf-m-compact pf-m-green"
1568
- >
1569
- <span class="pf-v6-c-label__content">
1570
- <span class="pf-v6-c-label__text">S</span>
1565
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
1566
+ <tr class="pf-v6-c-table__tr" role="row">
1567
+ <td
1568
+ class="pf-v6-c-table__td"
1569
+ role="cell"
1570
+ data-label="Name"
1571
+ >--</td>
1572
+ <td
1573
+ class="pf-v6-c-table__td"
1574
+ role="cell"
1575
+ data-label="Port"
1576
+ >
1577
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1578
+ <div class="pf-v6-l-flex__item">
1579
+ <span
1580
+ class="pf-v6-c-label pf-m-compact pf-m-green"
1581
+ >
1582
+ <span class="pf-v6-c-label__content">
1583
+ <span class="pf-v6-c-label__text">S</span>
1584
+ </span>
1571
1585
  </span>
1572
- </span>
1586
+ </div>
1587
+ <div class="pf-v6-l-flex__item">80</div>
1573
1588
  </div>
1574
- <div class="pf-v6-l-flex__item">80</div>
1575
- </div>
1576
- </td>
1577
- <td
1578
- class="pf-v6-c-table__td"
1579
- role="cell"
1580
- data-label="Protocol"
1581
- >TCP</td>
1582
- <td
1583
- class="pf-v6-c-table__td"
1584
- role="cell"
1585
- data-label="Pod port or name"
1586
- >
1587
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1588
- <div class="pf-v6-l-flex__item">
1589
- <span
1590
- class="pf-v6-c-label pf-m-compact pf-m-cyan"
1591
- >
1592
- <span class="pf-v6-c-label__content">
1593
- <span class="pf-v6-c-label__text">P</span>
1589
+ </td>
1590
+ <td
1591
+ class="pf-v6-c-table__td"
1592
+ role="cell"
1593
+ data-label="Protocol"
1594
+ >TCP</td>
1595
+ <td
1596
+ class="pf-v6-c-table__td"
1597
+ role="cell"
1598
+ data-label="Pod port or name"
1599
+ >
1600
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1601
+ <div class="pf-v6-l-flex__item">
1602
+ <span
1603
+ class="pf-v6-c-label pf-m-compact pf-m-cyan"
1604
+ >
1605
+ <span class="pf-v6-c-label__content">
1606
+ <span class="pf-v6-c-label__text">P</span>
1607
+ </span>
1594
1608
  </span>
1595
- </span>
1609
+ </div>
1610
+ <div class="pf-v6-l-flex__item">80</div>
1596
1611
  </div>
1597
- <div class="pf-v6-l-flex__item">80</div>
1598
- </div>
1599
- </td>
1600
- </tr>
1601
- </tbody>
1602
- </table>
1603
- </div>
1604
- </dd>
1605
- </div>
1606
- </dl>
1612
+ </td>
1613
+ </tr>
1614
+ </tbody>
1615
+ </table>
1616
+ </div>
1617
+ </dd>
1618
+ </div>
1619
+ </dl>
1620
+ </div>
1607
1621
  </div>
1608
1622
  </div>
1609
1623
  </div>
1610
1624
  </div>
1611
- </div>
1612
- </section>
1613
- </main>
1625
+ </section>
1626
+ </main>
1627
+ </div>
1614
1628
  </div>
1615
1629
 
1616
1630
  ```