@patternfly/patternfly 6.0.0-alpha.103 → 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 (36) hide show
  1. package/components/Drawer/drawer.css +5 -4
  2. package/components/Drawer/drawer.scss +7 -6
  3. package/components/Page/page.css +24 -23
  4. package/components/Page/page.scss +24 -23
  5. package/docs/components/Drawer/examples/Drawer.md +2 -1
  6. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  7. package/docs/components/Page/examples/Page.md +114 -100
  8. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  9. package/docs/demos/Alert/examples/Alert.md +551 -524
  10. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  11. package/docs/demos/Banner/examples/Banner.md +420 -412
  12. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  13. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  14. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  15. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  16. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  17. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  18. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  19. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  20. package/docs/demos/Modal/examples/Modal.md +486 -474
  21. package/docs/demos/Nav/examples/Nav.md +528 -510
  22. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  23. package/docs/demos/Page/examples/Page.md +1656 -1633
  24. package/docs/demos/Page/examples/Penta.md +632 -577
  25. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  26. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  27. package/docs/demos/Table/examples/Table.md +14137 -13972
  28. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  29. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  30. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  31. package/package.json +1 -1
  32. package/patternfly-no-globals.css +29 -27
  33. package/patternfly-theme-dark-unversioned.css +29 -27
  34. package/patternfly.css +29 -27
  35. package/patternfly.min.css +1 -1
  36. package/patternfly.min.css.map +1 -1
@@ -226,352 +226,358 @@ section: components
226
226
  </nav>
227
227
  </div>
228
228
  </div>
229
- <main
230
- class="pf-v6-c-page__main"
231
- tabindex="-1"
232
- id="main-content-tabs-tables-and-tabs-example"
233
- >
234
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
235
- <div class="pf-v6-c-page__main-body">
236
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
237
- <ol class="pf-v6-c-breadcrumb__list" role="list">
238
- <li class="pf-v6-c-breadcrumb__item">
239
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
240
- </li>
241
- <li class="pf-v6-c-breadcrumb__item">
242
- <span class="pf-v6-c-breadcrumb__item-divider">
243
- <i class="fas fa-angle-right" aria-hidden="true"></i>
244
- </span>
245
-
246
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
247
- </li>
248
- <li class="pf-v6-c-breadcrumb__item">
249
- <span class="pf-v6-c-breadcrumb__item-divider">
250
- <i class="fas fa-angle-right" aria-hidden="true"></i>
251
- </span>
252
-
253
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
254
- </li>
255
- <li class="pf-v6-c-breadcrumb__item">
256
- <span class="pf-v6-c-breadcrumb__item-divider">
257
- <i class="fas fa-angle-right" aria-hidden="true"></i>
258
- </span>
259
-
260
- <a
261
- href="#"
262
- class="pf-v6-c-breadcrumb__link pf-m-current"
263
- aria-current="page"
264
- >Section landing</a>
265
- </li>
266
- </ol>
267
- </nav>
268
- </div>
269
- </section>
270
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
271
- <div class="pf-v6-c-page__main-body">
272
- <div class="pf-v6-c-content">
273
- <h1>Main title</h1>
274
- <p>This is a full page demo.</p>
275
- </div>
276
- </div>
277
- </section>
229
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
230
+ <main
231
+ class="pf-v6-c-page__main"
232
+ tabindex="-1"
233
+ id="main-content-tabs-tables-and-tabs-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>
278
246
 
279
- <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
280
- <div class="pf-v6-c-page__main-body">
281
- <div
282
- class="pf-v6-c-tabs pf-m-page-insets"
283
- role="region"
284
- id="tabs-tables-and-tabs-example-tabs"
285
- >
286
- <ul class="pf-v6-c-tabs__list" role="tablist">
287
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
288
- <button
289
- type="button"
290
- class="pf-v6-c-tabs__link"
291
- role="tab"
292
- aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
293
- id="tabs-tables-and-tabs-example-tabs-details-link"
294
- >
295
- <span class="pf-v6-c-tabs__item-text">Details</span>
296
- </button>
297
- </li>
298
- <li class="pf-v6-c-tabs__item" role="presentation">
299
- <button
300
- type="button"
301
- class="pf-v6-c-tabs__link"
302
- role="tab"
303
- aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
304
- id="tabs-tables-and-tabs-example-tabs-yaml-link"
305
- >
306
- <span class="pf-v6-c-tabs__item-text">YAML</span>
307
- </button>
308
- </li>
309
- <li class="pf-v6-c-tabs__item" role="presentation">
310
- <button
311
- type="button"
312
- class="pf-v6-c-tabs__link"
313
- role="tab"
314
- aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
315
- id="tabs-tables-and-tabs-example-tabs-environment-link"
316
- >
317
- <span class="pf-v6-c-tabs__item-text">Environment</span>
318
- </button>
319
- </li>
320
- <li class="pf-v6-c-tabs__item" role="presentation">
321
- <button
322
- type="button"
323
- class="pf-v6-c-tabs__link"
324
- role="tab"
325
- aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
326
- id="tabs-tables-and-tabs-example-tabs-logs-link"
327
- >
328
- <span class="pf-v6-c-tabs__item-text">Logs</span>
329
- </button>
330
- </li>
331
- <li class="pf-v6-c-tabs__item" role="presentation">
332
- <button
333
- type="button"
334
- class="pf-v6-c-tabs__link"
335
- role="tab"
336
- aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
337
- id="tabs-tables-and-tabs-example-tabs-events-link"
338
- >
339
- <span class="pf-v6-c-tabs__item-text">Events</span>
340
- </button>
341
- </li>
342
- <li class="pf-v6-c-tabs__item" role="presentation">
343
- <button
344
- type="button"
345
- class="pf-v6-c-tabs__link"
346
- role="tab"
347
- aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
348
- id="tabs-tables-and-tabs-example-tabs-terminal-link"
349
- >
350
- <span class="pf-v6-c-tabs__item-text">Terminal</span>
351
- </button>
352
- </li>
353
- </ul>
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>
253
+
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>
260
+
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>
354
269
  </div>
355
- </div>
356
- </section>
357
-
358
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
359
- <div class="pf-v6-c-page__main-body">
360
- <section
361
- class="pf-v6-c-tab-content"
362
- aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
363
- id="tabs-tables-and-tabs-example-tabs-details-panel"
364
- role="tabpanel"
365
- tabindex="0"
366
- >
367
- <div class="pf-v6-c-tab-content__body">
368
- <div class="pf-v6-l-flex pf-m-column">
369
- <div class="pf-v6-l-flex__item pf-m-spacer-lg">
370
- <h2
371
- class="pf-v6-c-title pf-m-lg pf-v5-u-mt-sm"
372
- id="-details-title"
373
- >Pod details</h2>
374
- </div>
375
- <div class="pf-v6-l-flex__item">
376
- <dl
377
- class="pf-v6-c-description-list pf-m-2-col-on-lg"
378
- aria-labelledby="-details-title"
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>
276
+ </div>
277
+ </div>
278
+ </section>
279
+
280
+ <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
281
+ <div class="pf-v6-c-page__main-body">
282
+ <div
283
+ class="pf-v6-c-tabs pf-m-page-insets"
284
+ role="region"
285
+ id="tabs-tables-and-tabs-example-tabs"
286
+ >
287
+ <ul class="pf-v6-c-tabs__list" role="tablist">
288
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
289
+ <button
290
+ type="button"
291
+ class="pf-v6-c-tabs__link"
292
+ role="tab"
293
+ aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
294
+ id="tabs-tables-and-tabs-example-tabs-details-link"
379
295
  >
380
- <div class="pf-v6-c-description-list__group">
381
- <dt class="pf-v6-c-description-list__term">Name</dt>
382
- <dd class="pf-v6-c-description-list__description">
383
- <div
384
- class="pf-v6-c-description-list__text"
385
- >3scale-control-fccb6ddb9-phyqv9</div>
386
- </dd>
387
- </div>
388
- <div class="pf-v6-c-description-list__group">
389
- <dt class="pf-v6-c-description-list__term">Status</dt>
390
- <dd class="pf-v6-c-description-list__description">
391
- <div class="pf-v6-c-description-list__text">
392
- <div class="pf-v6-l-flex pf-m-space-items-sm">
393
- <div class="pf-v6-l-flex__item">
394
- <i
395
- class="fas fa-fw fa-check-circle"
396
- aria-hidden="true"
397
- ></i>
296
+ <span class="pf-v6-c-tabs__item-text">Details</span>
297
+ </button>
298
+ </li>
299
+ <li class="pf-v6-c-tabs__item" role="presentation">
300
+ <button
301
+ type="button"
302
+ class="pf-v6-c-tabs__link"
303
+ role="tab"
304
+ aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
305
+ id="tabs-tables-and-tabs-example-tabs-yaml-link"
306
+ >
307
+ <span class="pf-v6-c-tabs__item-text">YAML</span>
308
+ </button>
309
+ </li>
310
+ <li class="pf-v6-c-tabs__item" role="presentation">
311
+ <button
312
+ type="button"
313
+ class="pf-v6-c-tabs__link"
314
+ role="tab"
315
+ aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
316
+ id="tabs-tables-and-tabs-example-tabs-environment-link"
317
+ >
318
+ <span class="pf-v6-c-tabs__item-text">Environment</span>
319
+ </button>
320
+ </li>
321
+ <li class="pf-v6-c-tabs__item" role="presentation">
322
+ <button
323
+ type="button"
324
+ class="pf-v6-c-tabs__link"
325
+ role="tab"
326
+ aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
327
+ id="tabs-tables-and-tabs-example-tabs-logs-link"
328
+ >
329
+ <span class="pf-v6-c-tabs__item-text">Logs</span>
330
+ </button>
331
+ </li>
332
+ <li class="pf-v6-c-tabs__item" role="presentation">
333
+ <button
334
+ type="button"
335
+ class="pf-v6-c-tabs__link"
336
+ role="tab"
337
+ aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
338
+ id="tabs-tables-and-tabs-example-tabs-events-link"
339
+ >
340
+ <span class="pf-v6-c-tabs__item-text">Events</span>
341
+ </button>
342
+ </li>
343
+ <li class="pf-v6-c-tabs__item" role="presentation">
344
+ <button
345
+ type="button"
346
+ class="pf-v6-c-tabs__link"
347
+ role="tab"
348
+ aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
349
+ id="tabs-tables-and-tabs-example-tabs-terminal-link"
350
+ >
351
+ <span class="pf-v6-c-tabs__item-text">Terminal</span>
352
+ </button>
353
+ </li>
354
+ </ul>
355
+ </div>
356
+ </div>
357
+ </section>
358
+
359
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
360
+ <div class="pf-v6-c-page__main-body">
361
+ <section
362
+ class="pf-v6-c-tab-content"
363
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
364
+ id="tabs-tables-and-tabs-example-tabs-details-panel"
365
+ role="tabpanel"
366
+ tabindex="0"
367
+ >
368
+ <div class="pf-v6-c-tab-content__body">
369
+ <div class="pf-v6-l-flex pf-m-column">
370
+ <div class="pf-v6-l-flex__item pf-m-spacer-lg">
371
+ <h2
372
+ class="pf-v6-c-title pf-m-lg pf-v5-u-mt-sm"
373
+ id="-details-title"
374
+ >Pod details</h2>
375
+ </div>
376
+ <div class="pf-v6-l-flex__item">
377
+ <dl
378
+ class="pf-v6-c-description-list pf-m-2-col-on-lg"
379
+ aria-labelledby="-details-title"
380
+ >
381
+ <div class="pf-v6-c-description-list__group">
382
+ <dt class="pf-v6-c-description-list__term">Name</dt>
383
+ <dd class="pf-v6-c-description-list__description">
384
+ <div
385
+ class="pf-v6-c-description-list__text"
386
+ >3scale-control-fccb6ddb9-phyqv9</div>
387
+ </dd>
388
+ </div>
389
+ <div class="pf-v6-c-description-list__group">
390
+ <dt class="pf-v6-c-description-list__term">Status</dt>
391
+ <dd class="pf-v6-c-description-list__description">
392
+ <div class="pf-v6-c-description-list__text">
393
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
394
+ <div class="pf-v6-l-flex__item">
395
+ <i
396
+ class="fas fa-fw fa-check-circle"
397
+ aria-hidden="true"
398
+ ></i>
399
+ </div>
400
+ <div class="pf-v6-l-flex__item">Running</div>
398
401
  </div>
399
- <div class="pf-v6-l-flex__item">Running</div>
400
402
  </div>
401
- </div>
402
- </dd>
403
- </div>
404
- <div class="pf-v6-c-description-list__group">
405
- <dt class="pf-v6-c-description-list__term">Namespace</dt>
406
- <dd class="pf-v6-c-description-list__description">
407
- <div class="pf-v6-c-description-list__text">
408
- <div class="pf-v6-l-flex pf-m-space-items-sm">
409
- <div class="pf-v6-l-flex__item">
410
- <span class="pf-v6-c-label pf-m-cyan">
411
- <span class="pf-v6-c-label__content">
412
- <span class="pf-v6-c-label__text">NS</span>
403
+ </dd>
404
+ </div>
405
+ <div class="pf-v6-c-description-list__group">
406
+ <dt class="pf-v6-c-description-list__term">Namespace</dt>
407
+ <dd class="pf-v6-c-description-list__description">
408
+ <div class="pf-v6-c-description-list__text">
409
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
410
+ <div class="pf-v6-l-flex__item">
411
+ <span class="pf-v6-c-label pf-m-cyan">
412
+ <span class="pf-v6-c-label__content">
413
+ <span class="pf-v6-c-label__text">NS</span>
414
+ </span>
413
415
  </span>
414
- </span>
415
- </div>
416
- <div class="pf-v6-l-flex__item">
417
- <a href="#">knative-serving-ingress</a>
416
+ </div>
417
+ <div class="pf-v6-l-flex__item">
418
+ <a href="#">knative-serving-ingress</a>
419
+ </div>
418
420
  </div>
419
421
  </div>
420
- </div>
421
- </dd>
422
- </div>
423
- <div class="pf-v6-c-description-list__group">
424
- <dt class="pf-v6-c-description-list__term">Restart policy</dt>
425
- <dd class="pf-v6-c-description-list__description">
426
- <div class="pf-v6-c-description-list__text">Always restart</div>
427
- </dd>
428
- </div>
429
- <div class="pf-v6-c-description-list__group">
430
- <dt class="pf-v6-c-description-list__term">Labels</dt>
431
- <dd class="pf-v6-c-description-list__description">
432
- <div class="pf-v6-c-description-list__text">
433
- <div class="pf-v6-c-label-group">
434
- <div class="pf-v6-c-label-group__main">
435
- <ul
436
- class="pf-v6-c-label-group__list"
437
- role="list"
438
- aria-label="Group of labels"
439
- >
440
- <li class="pf-v6-c-label-group__list-item">
441
- <span class="pf-v6-c-label pf-m-outline">
442
- <span class="pf-v6-c-label__content">
443
- <span
444
- class="pf-v6-c-label__text"
445
- >app=3scale-gateway</span>
422
+ </dd>
423
+ </div>
424
+ <div class="pf-v6-c-description-list__group">
425
+ <dt class="pf-v6-c-description-list__term">Restart policy</dt>
426
+ <dd class="pf-v6-c-description-list__description">
427
+ <div
428
+ class="pf-v6-c-description-list__text"
429
+ >Always restart</div>
430
+ </dd>
431
+ </div>
432
+ <div class="pf-v6-c-description-list__group">
433
+ <dt class="pf-v6-c-description-list__term">Labels</dt>
434
+ <dd class="pf-v6-c-description-list__description">
435
+ <div class="pf-v6-c-description-list__text">
436
+ <div class="pf-v6-c-label-group">
437
+ <div class="pf-v6-c-label-group__main">
438
+ <ul
439
+ class="pf-v6-c-label-group__list"
440
+ role="list"
441
+ aria-label="Group of labels"
442
+ >
443
+ <li class="pf-v6-c-label-group__list-item">
444
+ <span class="pf-v6-c-label pf-m-outline">
445
+ <span class="pf-v6-c-label__content">
446
+ <span
447
+ class="pf-v6-c-label__text"
448
+ >app=3scale-gateway</span>
449
+ </span>
446
450
  </span>
447
- </span>
448
- </li>
449
- <li class="pf-v6-c-label-group__list-item">
450
- <span class="pf-v6-c-label pf-m-outline">
451
- <span class="pf-v6-c-label__content">
452
- <span
453
- class="pf-v6-c-label__text"
454
- >pod-template-has=6747686899</span>
451
+ </li>
452
+ <li class="pf-v6-c-label-group__list-item">
453
+ <span class="pf-v6-c-label pf-m-outline">
454
+ <span class="pf-v6-c-label__content">
455
+ <span
456
+ class="pf-v6-c-label__text"
457
+ >pod-template-has=6747686899</span>
458
+ </span>
455
459
  </span>
456
- </span>
457
- </li>
458
- </ul>
460
+ </li>
461
+ </ul>
462
+ </div>
459
463
  </div>
460
464
  </div>
461
- </div>
462
- </dd>
463
- </div>
464
- <div class="pf-v6-c-description-list__group">
465
- <dt
466
- class="pf-v6-c-description-list__term"
467
- >Active deadline seconds</dt>
468
- <dd class="pf-v6-c-description-list__description">
469
- <div class="pf-v6-c-description-list__text">Not configured</div>
470
- </dd>
471
- </div>
472
- <div class="pf-v6-c-description-list__group">
473
- <dt class="pf-v6-c-description-list__term">Tolerations</dt>
474
- <dd class="pf-v6-c-description-list__description">
475
- <div class="pf-v6-c-description-list__text">stuff</div>
476
- </dd>
477
- </div>
478
- <div class="pf-v6-c-description-list__group">
479
- <dt class="pf-v6-c-description-list__term">Pod IP</dt>
480
- <dd class="pf-v6-c-description-list__description">
481
- <div class="pf-v6-c-description-list__text">10.345.2.197</div>
482
- </dd>
483
- </div>
484
- <div class="pf-v6-c-description-list__group">
485
- <dt class="pf-v6-c-description-list__term">Annotations</dt>
486
- <dd class="pf-v6-c-description-list__description">
487
- <div class="pf-v6-c-description-list__text">stuff</div>
488
- </dd>
489
- </div>
490
- <div class="pf-v6-c-description-list__group">
491
- <dt class="pf-v6-c-description-list__term">Node</dt>
492
- <dd class="pf-v6-c-description-list__description">
493
- <div class="pf-v6-c-description-list__text">
494
- <div class="pf-v6-l-flex pf-m-space-items-sm">
495
- <div class="pf-v6-l-flex__item">
496
- <span class="pf-v6-c-label pf-m-purple">
497
- <span class="pf-v6-c-label__content">
498
- <span class="pf-v6-c-label__text">N</span>
465
+ </dd>
466
+ </div>
467
+ <div class="pf-v6-c-description-list__group">
468
+ <dt
469
+ class="pf-v6-c-description-list__term"
470
+ >Active deadline seconds</dt>
471
+ <dd class="pf-v6-c-description-list__description">
472
+ <div
473
+ class="pf-v6-c-description-list__text"
474
+ >Not configured</div>
475
+ </dd>
476
+ </div>
477
+ <div class="pf-v6-c-description-list__group">
478
+ <dt class="pf-v6-c-description-list__term">Tolerations</dt>
479
+ <dd class="pf-v6-c-description-list__description">
480
+ <div class="pf-v6-c-description-list__text">stuff</div>
481
+ </dd>
482
+ </div>
483
+ <div class="pf-v6-c-description-list__group">
484
+ <dt class="pf-v6-c-description-list__term">Pod IP</dt>
485
+ <dd class="pf-v6-c-description-list__description">
486
+ <div class="pf-v6-c-description-list__text">10.345.2.197</div>
487
+ </dd>
488
+ </div>
489
+ <div class="pf-v6-c-description-list__group">
490
+ <dt class="pf-v6-c-description-list__term">Annotations</dt>
491
+ <dd class="pf-v6-c-description-list__description">
492
+ <div class="pf-v6-c-description-list__text">stuff</div>
493
+ </dd>
494
+ </div>
495
+ <div class="pf-v6-c-description-list__group">
496
+ <dt class="pf-v6-c-description-list__term">Node</dt>
497
+ <dd class="pf-v6-c-description-list__description">
498
+ <div class="pf-v6-c-description-list__text">
499
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
500
+ <div class="pf-v6-l-flex__item">
501
+ <span class="pf-v6-c-label pf-m-purple">
502
+ <span class="pf-v6-c-label__content">
503
+ <span class="pf-v6-c-label__text">N</span>
504
+ </span>
499
505
  </span>
500
- </span>
506
+ </div>
507
+ <div
508
+ class="pf-v6-l-flex__item"
509
+ >ip-10-0-233-118.us-east-2.computer.external</div>
501
510
  </div>
502
- <div
503
- class="pf-v6-l-flex__item"
504
- >ip-10-0-233-118.us-east-2.computer.external</div>
505
511
  </div>
506
- </div>
507
- </dd>
508
- </div>
509
- <div class="pf-v6-c-description-list__group">
510
- <dt class="pf-v6-c-description-list__term">Created at</dt>
511
- <dd class="pf-v6-c-description-list__description">
512
- <div class="pf-v6-c-description-list__text">
513
- <time>Oct 15, 1:51 pm</time>
514
- </div>
515
- </dd>
516
- </div>
517
- </dl>
512
+ </dd>
513
+ </div>
514
+ <div class="pf-v6-c-description-list__group">
515
+ <dt class="pf-v6-c-description-list__term">Created at</dt>
516
+ <dd class="pf-v6-c-description-list__description">
517
+ <div class="pf-v6-c-description-list__text">
518
+ <time>Oct 15, 1:51 pm</time>
519
+ </div>
520
+ </dd>
521
+ </div>
522
+ </dl>
523
+ </div>
518
524
  </div>
519
525
  </div>
520
- </div>
521
- </section>
522
- <section
523
- class="pf-v6-c-tab-content"
524
- aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
525
- id="tabs-tables-and-tabs-example-tabs-yaml-panel"
526
- role="tabpanel"
527
- tabindex="0"
528
- hidden
529
- >
530
- <div class="pf-v6-c-tab-content__body">YAML panel</div>
531
- </section>
532
- <section
533
- class="pf-v6-c-tab-content"
534
- aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
535
- id="tabs-tables-and-tabs-example-tabs-environment-panel"
536
- role="tabpanel"
537
- tabindex="0"
538
- hidden
539
- >
540
- <div class="pf-v6-c-tab-content__body">Environment panel</div>
541
- </section>
542
- <section
543
- class="pf-v6-c-tab-content"
544
- aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
545
- id="tabs-tables-and-tabs-example-tabs-logs-panel"
546
- role="tabpanel"
547
- tabindex="0"
548
- hidden
549
- >
550
- <div class="pf-v6-c-tab-content__body">Logs panel</div>
551
- </section>
552
- <section
553
- class="pf-v6-c-tab-content"
554
- aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
555
- id="tabs-tables-and-tabs-example-tabs-events-panel"
556
- role="tabpanel"
557
- tabindex="0"
558
- hidden
559
- >
560
- <div class="pf-v6-c-tab-content__body">Events panel</div>
561
- </section>
562
- <section
563
- class="pf-v6-c-tab-content"
564
- aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
565
- id="tabs-tables-and-tabs-example-tabs-terminal-panel"
566
- role="tabpanel"
567
- tabindex="0"
568
- hidden
569
- >
570
- <div class="pf-v6-c-tab-content__body">Terminal panel</div>
571
- </section>
572
- </div>
573
- </section>
574
- </main>
526
+ </section>
527
+ <section
528
+ class="pf-v6-c-tab-content"
529
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
530
+ id="tabs-tables-and-tabs-example-tabs-yaml-panel"
531
+ role="tabpanel"
532
+ tabindex="0"
533
+ hidden
534
+ >
535
+ <div class="pf-v6-c-tab-content__body">YAML panel</div>
536
+ </section>
537
+ <section
538
+ class="pf-v6-c-tab-content"
539
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
540
+ id="tabs-tables-and-tabs-example-tabs-environment-panel"
541
+ role="tabpanel"
542
+ tabindex="0"
543
+ hidden
544
+ >
545
+ <div class="pf-v6-c-tab-content__body">Environment panel</div>
546
+ </section>
547
+ <section
548
+ class="pf-v6-c-tab-content"
549
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
550
+ id="tabs-tables-and-tabs-example-tabs-logs-panel"
551
+ role="tabpanel"
552
+ tabindex="0"
553
+ hidden
554
+ >
555
+ <div class="pf-v6-c-tab-content__body">Logs panel</div>
556
+ </section>
557
+ <section
558
+ class="pf-v6-c-tab-content"
559
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
560
+ id="tabs-tables-and-tabs-example-tabs-events-panel"
561
+ role="tabpanel"
562
+ tabindex="0"
563
+ hidden
564
+ >
565
+ <div class="pf-v6-c-tab-content__body">Events panel</div>
566
+ </section>
567
+ <section
568
+ class="pf-v6-c-tab-content"
569
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
570
+ id="tabs-tables-and-tabs-example-tabs-terminal-panel"
571
+ role="tabpanel"
572
+ tabindex="0"
573
+ hidden
574
+ >
575
+ <div class="pf-v6-c-tab-content__body">Terminal panel</div>
576
+ </section>
577
+ </div>
578
+ </section>
579
+ </main>
580
+ </div>
575
581
  </div>
576
582
 
577
583
  ```
@@ -799,357 +805,361 @@ section: components
799
805
  </nav>
800
806
  </div>
801
807
  </div>
802
- <main
803
- class="pf-v6-c-page__main"
804
- tabindex="-1"
805
- id="main-content-tabs-tables-and-tabs-example"
806
- >
807
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
808
- <div class="pf-v6-c-page__main-body">
809
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
810
- <ol class="pf-v6-c-breadcrumb__list" role="list">
811
- <li class="pf-v6-c-breadcrumb__item">
812
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
813
- </li>
814
- <li class="pf-v6-c-breadcrumb__item">
815
- <span class="pf-v6-c-breadcrumb__item-divider">
816
- <i class="fas fa-angle-right" aria-hidden="true"></i>
817
- </span>
818
-
819
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
820
- </li>
821
- <li class="pf-v6-c-breadcrumb__item">
822
- <span class="pf-v6-c-breadcrumb__item-divider">
823
- <i class="fas fa-angle-right" aria-hidden="true"></i>
824
- </span>
825
-
826
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
827
- </li>
828
- <li class="pf-v6-c-breadcrumb__item">
829
- <span class="pf-v6-c-breadcrumb__item-divider">
830
- <i class="fas fa-angle-right" aria-hidden="true"></i>
831
- </span>
832
-
833
- <a
834
- href="#"
835
- class="pf-v6-c-breadcrumb__link pf-m-current"
836
- aria-current="page"
837
- >Section landing</a>
838
- </li>
839
- </ol>
840
- </nav>
841
- </div>
842
- </section>
843
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
844
- <div class="pf-v6-c-page__main-body">
845
- <div class="pf-v6-c-content">
846
- <h1>Main title</h1>
847
- <p>This is a full page demo.</p>
808
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
809
+ <main
810
+ class="pf-v6-c-page__main"
811
+ tabindex="-1"
812
+ id="main-content-tabs-tables-and-tabs-example"
813
+ >
814
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
815
+ <div class="pf-v6-c-page__main-body">
816
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
817
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
818
+ <li class="pf-v6-c-breadcrumb__item">
819
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
820
+ </li>
821
+ <li class="pf-v6-c-breadcrumb__item">
822
+ <span class="pf-v6-c-breadcrumb__item-divider">
823
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
824
+ </span>
825
+
826
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
827
+ </li>
828
+ <li class="pf-v6-c-breadcrumb__item">
829
+ <span class="pf-v6-c-breadcrumb__item-divider">
830
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
831
+ </span>
832
+
833
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
834
+ </li>
835
+ <li class="pf-v6-c-breadcrumb__item">
836
+ <span class="pf-v6-c-breadcrumb__item-divider">
837
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
838
+ </span>
839
+
840
+ <a
841
+ href="#"
842
+ class="pf-v6-c-breadcrumb__link pf-m-current"
843
+ aria-current="page"
844
+ >Section landing</a>
845
+ </li>
846
+ </ol>
847
+ </nav>
848
848
  </div>
849
- </div>
850
- </section>
851
- <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
852
- <div class="pf-v6-c-page__main-body">
853
- <div
854
- class="pf-v6-c-tabs pf-m-page-insets"
855
- role="region"
856
- id="tabs-tables-and-tabs-example-tabs"
857
- >
858
- <ul class="pf-v6-c-tabs__list" role="tablist">
859
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
860
- <button
861
- type="button"
862
- class="pf-v6-c-tabs__link"
863
- role="tab"
864
- aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
865
- id="tabs-tables-and-tabs-example-tabs-details-link"
866
- >
867
- <span class="pf-v6-c-tabs__item-text">Details</span>
868
- </button>
869
- </li>
870
- <li class="pf-v6-c-tabs__item" role="presentation">
871
- <button
872
- type="button"
873
- class="pf-v6-c-tabs__link"
874
- role="tab"
875
- aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
876
- id="tabs-tables-and-tabs-example-tabs-yaml-link"
877
- >
878
- <span class="pf-v6-c-tabs__item-text">YAML</span>
879
- </button>
880
- </li>
881
- <li class="pf-v6-c-tabs__item" role="presentation">
882
- <button
883
- type="button"
884
- class="pf-v6-c-tabs__link"
885
- role="tab"
886
- aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
887
- id="tabs-tables-and-tabs-example-tabs-environment-link"
888
- >
889
- <span class="pf-v6-c-tabs__item-text">Environment</span>
890
- </button>
891
- </li>
892
- <li class="pf-v6-c-tabs__item" role="presentation">
893
- <button
894
- type="button"
895
- class="pf-v6-c-tabs__link"
896
- role="tab"
897
- aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
898
- id="tabs-tables-and-tabs-example-tabs-logs-link"
899
- >
900
- <span class="pf-v6-c-tabs__item-text">Logs</span>
901
- </button>
902
- </li>
903
- <li class="pf-v6-c-tabs__item" role="presentation">
904
- <button
905
- type="button"
906
- class="pf-v6-c-tabs__link"
907
- role="tab"
908
- aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
909
- id="tabs-tables-and-tabs-example-tabs-events-link"
910
- >
911
- <span class="pf-v6-c-tabs__item-text">Events</span>
912
- </button>
913
- </li>
914
- <li class="pf-v6-c-tabs__item" role="presentation">
915
- <button
916
- type="button"
917
- class="pf-v6-c-tabs__link"
918
- role="tab"
919
- aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
920
- id="tabs-tables-and-tabs-example-tabs-terminal-link"
921
- >
922
- <span class="pf-v6-c-tabs__item-text">Terminal</span>
923
- </button>
924
- </li>
925
- </ul>
849
+ </section>
850
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
851
+ <div class="pf-v6-c-page__main-body">
852
+ <div class="pf-v6-c-content">
853
+ <h1>Main title</h1>
854
+ <p>This is a full page demo.</p>
855
+ </div>
926
856
  </div>
927
- </div>
928
- </section>
929
- <section
930
- class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
931
- >
932
- <div class="pf-v6-c-page__main-body">
933
- <div
934
- class="pf-v6-c-tabs pf-m-secondary pf-m-page-insets"
935
- role="region"
936
- id="tabs-tables-and-tabs-example-tabs-secondary"
937
- >
938
- <ul class="pf-v6-c-tabs__list" role="tablist">
939
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
940
- <button
941
- type="button"
942
- class="pf-v6-c-tabs__link"
943
- role="tab"
944
- aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
945
- id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
946
- >
947
- <span class="pf-v6-c-tabs__item-text">Pod information</span>
948
- </button>
949
- </li>
950
- <li class="pf-v6-c-tabs__item" role="presentation">
951
- <button
952
- type="button"
953
- class="pf-v6-c-tabs__link"
954
- role="tab"
955
- aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
956
- id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
957
- >
958
- <span class="pf-v6-c-tabs__item-text">Editable Aspects</span>
959
- </button>
960
- </li>
961
- </ul>
857
+ </section>
858
+ <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
859
+ <div class="pf-v6-c-page__main-body">
860
+ <div
861
+ class="pf-v6-c-tabs pf-m-page-insets"
862
+ role="region"
863
+ id="tabs-tables-and-tabs-example-tabs"
864
+ >
865
+ <ul class="pf-v6-c-tabs__list" role="tablist">
866
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
867
+ <button
868
+ type="button"
869
+ class="pf-v6-c-tabs__link"
870
+ role="tab"
871
+ aria-controls="tabs-tables-and-tabs-example-tabs-details-panel"
872
+ id="tabs-tables-and-tabs-example-tabs-details-link"
873
+ >
874
+ <span class="pf-v6-c-tabs__item-text">Details</span>
875
+ </button>
876
+ </li>
877
+ <li class="pf-v6-c-tabs__item" role="presentation">
878
+ <button
879
+ type="button"
880
+ class="pf-v6-c-tabs__link"
881
+ role="tab"
882
+ aria-controls="tabs-tables-and-tabs-example-tabs-yaml-panel"
883
+ id="tabs-tables-and-tabs-example-tabs-yaml-link"
884
+ >
885
+ <span class="pf-v6-c-tabs__item-text">YAML</span>
886
+ </button>
887
+ </li>
888
+ <li class="pf-v6-c-tabs__item" role="presentation">
889
+ <button
890
+ type="button"
891
+ class="pf-v6-c-tabs__link"
892
+ role="tab"
893
+ aria-controls="tabs-tables-and-tabs-example-tabs-environment-panel"
894
+ id="tabs-tables-and-tabs-example-tabs-environment-link"
895
+ >
896
+ <span class="pf-v6-c-tabs__item-text">Environment</span>
897
+ </button>
898
+ </li>
899
+ <li class="pf-v6-c-tabs__item" role="presentation">
900
+ <button
901
+ type="button"
902
+ class="pf-v6-c-tabs__link"
903
+ role="tab"
904
+ aria-controls="tabs-tables-and-tabs-example-tabs-logs-panel"
905
+ id="tabs-tables-and-tabs-example-tabs-logs-link"
906
+ >
907
+ <span class="pf-v6-c-tabs__item-text">Logs</span>
908
+ </button>
909
+ </li>
910
+ <li class="pf-v6-c-tabs__item" role="presentation">
911
+ <button
912
+ type="button"
913
+ class="pf-v6-c-tabs__link"
914
+ role="tab"
915
+ aria-controls="tabs-tables-and-tabs-example-tabs-events-panel"
916
+ id="tabs-tables-and-tabs-example-tabs-events-link"
917
+ >
918
+ <span class="pf-v6-c-tabs__item-text">Events</span>
919
+ </button>
920
+ </li>
921
+ <li class="pf-v6-c-tabs__item" role="presentation">
922
+ <button
923
+ type="button"
924
+ class="pf-v6-c-tabs__link"
925
+ role="tab"
926
+ aria-controls="tabs-tables-and-tabs-example-tabs-terminal-panel"
927
+ id="tabs-tables-and-tabs-example-tabs-terminal-link"
928
+ >
929
+ <span class="pf-v6-c-tabs__item-text">Terminal</span>
930
+ </button>
931
+ </li>
932
+ </ul>
933
+ </div>
962
934
  </div>
963
- <section
964
- class="pf-v6-c-tab-content"
965
- aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
966
- id="tabs-tables-and-tabs-example-tabs-details-panel"
967
- role="tabpanel"
968
- tabindex="0"
969
- >
970
- <div class="pf-v6-c-tab-content__body pf-m-padding">
971
- <section
972
- class="pf-v6-c-tab-content"
973
- aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
974
- id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
975
- role="tabpanel"
976
- tabindex="0"
977
- >
978
- <div class="pf-v6-c-tab-content__body">
979
- <div class="pf-v6-l-flex pf-m-column">
980
- <div class="pf-v6-l-flex__item">
981
- <dl
982
- class="pf-v6-c-description-list pf-m-2-col-on-lg"
983
- aria-label="Pod information list"
984
- >
985
- <div class="pf-v6-c-description-list__group">
986
- <dt class="pf-v6-c-description-list__term">Name</dt>
987
- <dd class="pf-v6-c-description-list__description">
988
- <div
989
- class="pf-v6-c-description-list__text"
990
- >3scale-control-fccb6ddb9-phyqv9</div>
991
- </dd>
992
- </div>
993
- <div class="pf-v6-c-description-list__group">
994
- <dt class="pf-v6-c-description-list__term">Status</dt>
995
- <dd class="pf-v6-c-description-list__description">
996
- <div class="pf-v6-c-description-list__text">
997
- <div class="pf-v6-l-flex pf-m-space-items-sm">
998
- <div class="pf-v6-l-flex__item">
999
- <i
1000
- class="fas fa-fw fa-check-circle"
1001
- aria-hidden="true"
1002
- ></i>
935
+ </section>
936
+ <section
937
+ class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
938
+ >
939
+ <div class="pf-v6-c-page__main-body">
940
+ <div
941
+ class="pf-v6-c-tabs pf-m-secondary pf-m-page-insets"
942
+ role="region"
943
+ id="tabs-tables-and-tabs-example-tabs-secondary"
944
+ >
945
+ <ul class="pf-v6-c-tabs__list" role="tablist">
946
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
947
+ <button
948
+ type="button"
949
+ class="pf-v6-c-tabs__link"
950
+ role="tab"
951
+ aria-controls="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
952
+ id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
953
+ >
954
+ <span class="pf-v6-c-tabs__item-text">Pod information</span>
955
+ </button>
956
+ </li>
957
+ <li class="pf-v6-c-tabs__item" role="presentation">
958
+ <button
959
+ type="button"
960
+ class="pf-v6-c-tabs__link"
961
+ role="tab"
962
+ aria-controls="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
963
+ id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
964
+ >
965
+ <span class="pf-v6-c-tabs__item-text">Editable Aspects</span>
966
+ </button>
967
+ </li>
968
+ </ul>
969
+ </div>
970
+ <section
971
+ class="pf-v6-c-tab-content"
972
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-details-link"
973
+ id="tabs-tables-and-tabs-example-tabs-details-panel"
974
+ role="tabpanel"
975
+ tabindex="0"
976
+ >
977
+ <div class="pf-v6-c-tab-content__body pf-m-padding">
978
+ <section
979
+ class="pf-v6-c-tab-content"
980
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-pod-info-link"
981
+ id="tabs-tables-and-tabs-example-tabs-secondary-pod-info-panel"
982
+ role="tabpanel"
983
+ tabindex="0"
984
+ >
985
+ <div class="pf-v6-c-tab-content__body">
986
+ <div class="pf-v6-l-flex pf-m-column">
987
+ <div class="pf-v6-l-flex__item">
988
+ <dl
989
+ class="pf-v6-c-description-list pf-m-2-col-on-lg"
990
+ aria-label="Pod information list"
991
+ >
992
+ <div class="pf-v6-c-description-list__group">
993
+ <dt class="pf-v6-c-description-list__term">Name</dt>
994
+ <dd class="pf-v6-c-description-list__description">
995
+ <div
996
+ class="pf-v6-c-description-list__text"
997
+ >3scale-control-fccb6ddb9-phyqv9</div>
998
+ </dd>
999
+ </div>
1000
+ <div class="pf-v6-c-description-list__group">
1001
+ <dt class="pf-v6-c-description-list__term">Status</dt>
1002
+ <dd class="pf-v6-c-description-list__description">
1003
+ <div class="pf-v6-c-description-list__text">
1004
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1005
+ <div class="pf-v6-l-flex__item">
1006
+ <i
1007
+ class="fas fa-fw fa-check-circle"
1008
+ aria-hidden="true"
1009
+ ></i>
1010
+ </div>
1011
+ <div class="pf-v6-l-flex__item">Running</div>
1003
1012
  </div>
1004
- <div class="pf-v6-l-flex__item">Running</div>
1005
1013
  </div>
1006
- </div>
1007
- </dd>
1008
- </div>
1009
- <div class="pf-v6-c-description-list__group">
1010
- <dt class="pf-v6-c-description-list__term">Namespace</dt>
1011
- <dd class="pf-v6-c-description-list__description">
1012
- <div class="pf-v6-c-description-list__text">
1013
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1014
- <div class="pf-v6-l-flex__item">
1015
- <span class="pf-v6-c-label pf-m-cyan">
1016
- <span class="pf-v6-c-label__content">
1017
- <span class="pf-v6-c-label__text">NS</span>
1014
+ </dd>
1015
+ </div>
1016
+ <div class="pf-v6-c-description-list__group">
1017
+ <dt class="pf-v6-c-description-list__term">Namespace</dt>
1018
+ <dd class="pf-v6-c-description-list__description">
1019
+ <div class="pf-v6-c-description-list__text">
1020
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1021
+ <div class="pf-v6-l-flex__item">
1022
+ <span class="pf-v6-c-label pf-m-cyan">
1023
+ <span class="pf-v6-c-label__content">
1024
+ <span class="pf-v6-c-label__text">NS</span>
1025
+ </span>
1018
1026
  </span>
1019
- </span>
1027
+ </div>
1028
+ <div class="pf-v6-l-flex__item">
1029
+ <a href="#">knative-serving-ingress</a>
1030
+ </div>
1020
1031
  </div>
1021
- <div class="pf-v6-l-flex__item">
1022
- <a href="#">knative-serving-ingress</a>
1032
+ </div>
1033
+ </dd>
1034
+ </div>
1035
+ <div class="pf-v6-c-description-list__group">
1036
+ <dt
1037
+ class="pf-v6-c-description-list__term"
1038
+ >Restart policy</dt>
1039
+ <dd class="pf-v6-c-description-list__description">
1040
+ <div
1041
+ class="pf-v6-c-description-list__text"
1042
+ >Always restart</div>
1043
+ </dd>
1044
+ </div>
1045
+ <div class="pf-v6-c-description-list__group">
1046
+ <dt class="pf-v6-c-description-list__term">Pod IP</dt>
1047
+ <dd class="pf-v6-c-description-list__description">
1048
+ <div
1049
+ class="pf-v6-c-description-list__text"
1050
+ >10.345.2.197</div>
1051
+ </dd>
1052
+ </div>
1053
+ <div class="pf-v6-c-description-list__group">
1054
+ <dt
1055
+ class="pf-v6-c-description-list__term"
1056
+ >Active deadline seconds</dt>
1057
+ <dd class="pf-v6-c-description-list__description">
1058
+ <div
1059
+ class="pf-v6-c-description-list__text"
1060
+ >Not configured</div>
1061
+ </dd>
1062
+ </div>
1063
+ <div class="pf-v6-c-description-list__group">
1064
+ <dt class="pf-v6-c-description-list__term">Created at</dt>
1065
+ <dd class="pf-v6-c-description-list__description">
1066
+ <div class="pf-v6-c-description-list__text">
1067
+ <time>Oct 15, 1:51 pm</time>
1068
+ </div>
1069
+ </dd>
1070
+ </div>
1071
+ <div class="pf-v6-c-description-list__group">
1072
+ <dt class="pf-v6-c-description-list__term">Node</dt>
1073
+ <dd class="pf-v6-c-description-list__description">
1074
+ <div class="pf-v6-c-description-list__text">
1075
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1076
+ <div class="pf-v6-l-flex__item">
1077
+ <span class="pf-v6-c-label pf-m-purple">
1078
+ <span class="pf-v6-c-label__content">
1079
+ <span class="pf-v6-c-label__text">N</span>
1080
+ </span>
1081
+ </span>
1082
+ </div>
1083
+ <div
1084
+ class="pf-v6-l-flex__item"
1085
+ >ip-10-0-233-118.us-east-2.computer.external</div>
1023
1086
  </div>
1024
1087
  </div>
1025
- </div>
1026
- </dd>
1027
- </div>
1028
- <div class="pf-v6-c-description-list__group">
1029
- <dt
1030
- class="pf-v6-c-description-list__term"
1031
- >Restart policy</dt>
1032
- <dd class="pf-v6-c-description-list__description">
1033
- <div
1034
- class="pf-v6-c-description-list__text"
1035
- >Always restart</div>
1036
- </dd>
1037
- </div>
1038
- <div class="pf-v6-c-description-list__group">
1039
- <dt class="pf-v6-c-description-list__term">Pod IP</dt>
1040
- <dd class="pf-v6-c-description-list__description">
1041
- <div
1042
- class="pf-v6-c-description-list__text"
1043
- >10.345.2.197</div>
1044
- </dd>
1045
- </div>
1046
- <div class="pf-v6-c-description-list__group">
1047
- <dt
1048
- class="pf-v6-c-description-list__term"
1049
- >Active deadline seconds</dt>
1050
- <dd class="pf-v6-c-description-list__description">
1051
- <div
1052
- class="pf-v6-c-description-list__text"
1053
- >Not configured</div>
1054
- </dd>
1055
- </div>
1056
- <div class="pf-v6-c-description-list__group">
1057
- <dt class="pf-v6-c-description-list__term">Created at</dt>
1058
- <dd class="pf-v6-c-description-list__description">
1059
- <div class="pf-v6-c-description-list__text">
1060
- <time>Oct 15, 1:51 pm</time>
1061
- </div>
1062
- </dd>
1063
- </div>
1064
- <div class="pf-v6-c-description-list__group">
1065
- <dt class="pf-v6-c-description-list__term">Node</dt>
1066
- <dd class="pf-v6-c-description-list__description">
1067
- <div class="pf-v6-c-description-list__text">
1068
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1069
- <div class="pf-v6-l-flex__item">
1070
- <span class="pf-v6-c-label pf-m-purple">
1071
- <span class="pf-v6-c-label__content">
1072
- <span class="pf-v6-c-label__text">N</span>
1073
- </span>
1074
- </span>
1075
- </div>
1076
- <div
1077
- class="pf-v6-l-flex__item"
1078
- >ip-10-0-233-118.us-east-2.computer.external</div>
1079
- </div>
1080
- </div>
1081
- </dd>
1082
- </div>
1083
- </dl>
1088
+ </dd>
1089
+ </div>
1090
+ </dl>
1091
+ </div>
1084
1092
  </div>
1085
1093
  </div>
1086
- </div>
1087
- </section>
1088
- <section
1089
- class="pf-v6-c-tab-content"
1090
- aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
1091
- id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
1092
- role="tabpanel"
1093
- tabindex="0"
1094
- hidden
1095
- >
1096
- <div class="pf-v6-c-tab-content__body">Editable aspects panel</div>
1097
- </section>
1098
- </div>
1099
- </section>
1100
- <section
1101
- class="pf-v6-c-tab-content"
1102
- aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
1103
- id="tabs-tables-and-tabs-example-tabs-yaml-panel"
1104
- role="tabpanel"
1105
- tabindex="0"
1106
- hidden
1107
- >
1108
- <div class="pf-v6-c-tab-content__body pf-m-padding">YAML panel</div>
1109
- </section>
1110
- <section
1111
- class="pf-v6-c-tab-content"
1112
- aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
1113
- id="tabs-tables-and-tabs-example-tabs-environment-panel"
1114
- role="tabpanel"
1115
- tabindex="0"
1116
- hidden
1117
- >
1118
- <div class="pf-v6-c-tab-content__body pf-m-padding">Environment panel</div>
1119
- </section>
1120
- <section
1121
- class="pf-v6-c-tab-content"
1122
- aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
1123
- id="tabs-tables-and-tabs-example-tabs-logs-panel"
1124
- role="tabpanel"
1125
- tabindex="0"
1126
- hidden
1127
- >
1128
- <div class="pf-v6-c-tab-content__body pf-m-padding">Logs panel</div>
1129
- </section>
1130
- <section
1131
- class="pf-v6-c-tab-content"
1132
- aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
1133
- id="tabs-tables-and-tabs-example-tabs-events-panel"
1134
- role="tabpanel"
1135
- tabindex="0"
1136
- hidden
1137
- >
1138
- <div class="pf-v6-c-tab-content__body pf-m-padding">Events panel</div>
1139
- </section>
1140
- <section
1141
- class="pf-v6-c-tab-content"
1142
- aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
1143
- id="tabs-tables-and-tabs-example-tabs-terminal-panel"
1144
- role="tabpanel"
1145
- tabindex="0"
1146
- hidden
1147
- >
1148
- <div class="pf-v6-c-tab-content__body pf-m-padding">Terminal panel</div>
1149
- </section>
1150
- </div>
1151
- </section>
1152
- </main>
1094
+ </section>
1095
+ <section
1096
+ class="pf-v6-c-tab-content"
1097
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-link"
1098
+ id="tabs-tables-and-tabs-example-tabs-secondary-editable-aspects-panel"
1099
+ role="tabpanel"
1100
+ tabindex="0"
1101
+ hidden
1102
+ >
1103
+ <div class="pf-v6-c-tab-content__body">Editable aspects panel</div>
1104
+ </section>
1105
+ </div>
1106
+ </section>
1107
+ <section
1108
+ class="pf-v6-c-tab-content"
1109
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-yaml-link"
1110
+ id="tabs-tables-and-tabs-example-tabs-yaml-panel"
1111
+ role="tabpanel"
1112
+ tabindex="0"
1113
+ hidden
1114
+ >
1115
+ <div class="pf-v6-c-tab-content__body pf-m-padding">YAML panel</div>
1116
+ </section>
1117
+ <section
1118
+ class="pf-v6-c-tab-content"
1119
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-environment-link"
1120
+ id="tabs-tables-and-tabs-example-tabs-environment-panel"
1121
+ role="tabpanel"
1122
+ tabindex="0"
1123
+ hidden
1124
+ >
1125
+ <div
1126
+ class="pf-v6-c-tab-content__body pf-m-padding"
1127
+ >Environment panel</div>
1128
+ </section>
1129
+ <section
1130
+ class="pf-v6-c-tab-content"
1131
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-logs-link"
1132
+ id="tabs-tables-and-tabs-example-tabs-logs-panel"
1133
+ role="tabpanel"
1134
+ tabindex="0"
1135
+ hidden
1136
+ >
1137
+ <div class="pf-v6-c-tab-content__body pf-m-padding">Logs panel</div>
1138
+ </section>
1139
+ <section
1140
+ class="pf-v6-c-tab-content"
1141
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-events-link"
1142
+ id="tabs-tables-and-tabs-example-tabs-events-panel"
1143
+ role="tabpanel"
1144
+ tabindex="0"
1145
+ hidden
1146
+ >
1147
+ <div class="pf-v6-c-tab-content__body pf-m-padding">Events panel</div>
1148
+ </section>
1149
+ <section
1150
+ class="pf-v6-c-tab-content"
1151
+ aria-labelledby="tabs-tables-and-tabs-example-tabs-terminal-link"
1152
+ id="tabs-tables-and-tabs-example-tabs-terminal-panel"
1153
+ role="tabpanel"
1154
+ tabindex="0"
1155
+ hidden
1156
+ >
1157
+ <div class="pf-v6-c-tab-content__body pf-m-padding">Terminal panel</div>
1158
+ </section>
1159
+ </div>
1160
+ </section>
1161
+ </main>
1162
+ </div>
1153
1163
  </div>
1154
1164
 
1155
1165
  ```
@@ -1377,261 +1387,278 @@ section: components
1377
1387
  </nav>
1378
1388
  </div>
1379
1389
  </div>
1380
- <main
1381
- class="pf-v6-c-page__main"
1382
- tabindex="-1"
1383
- id="main-content-nested-tabs-example"
1384
- >
1385
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1386
- <div class="pf-v6-c-page__main-body">
1387
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1388
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1389
- <li class="pf-v6-c-breadcrumb__item">
1390
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1391
- </li>
1392
- <li class="pf-v6-c-breadcrumb__item">
1393
- <span class="pf-v6-c-breadcrumb__item-divider">
1394
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1395
- </span>
1396
-
1397
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1398
- </li>
1399
- <li class="pf-v6-c-breadcrumb__item">
1400
- <span class="pf-v6-c-breadcrumb__item-divider">
1401
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1402
- </span>
1403
-
1404
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1405
- </li>
1406
- <li class="pf-v6-c-breadcrumb__item">
1407
- <span class="pf-v6-c-breadcrumb__item-divider">
1408
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1409
- </span>
1410
-
1411
- <a
1412
- href="#"
1413
- class="pf-v6-c-breadcrumb__link pf-m-current"
1414
- aria-current="page"
1415
- >Section landing</a>
1416
- </li>
1417
- </ol>
1418
- </nav>
1419
- </div>
1420
- </section>
1421
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1422
- <div class="pf-v6-c-page__main-body">
1423
- <div class="pf-v6-c-content">
1424
- <h1>Main title</h1>
1425
- <p>This is a full page demo.</p>
1390
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1391
+ <main
1392
+ class="pf-v6-c-page__main"
1393
+ tabindex="-1"
1394
+ id="main-content-nested-tabs-example"
1395
+ >
1396
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1397
+ <div class="pf-v6-c-page__main-body">
1398
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1399
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1400
+ <li class="pf-v6-c-breadcrumb__item">
1401
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1402
+ </li>
1403
+ <li class="pf-v6-c-breadcrumb__item">
1404
+ <span class="pf-v6-c-breadcrumb__item-divider">
1405
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1406
+ </span>
1407
+
1408
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1409
+ </li>
1410
+ <li class="pf-v6-c-breadcrumb__item">
1411
+ <span class="pf-v6-c-breadcrumb__item-divider">
1412
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1413
+ </span>
1414
+
1415
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1416
+ </li>
1417
+ <li class="pf-v6-c-breadcrumb__item">
1418
+ <span class="pf-v6-c-breadcrumb__item-divider">
1419
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1420
+ </span>
1421
+
1422
+ <a
1423
+ href="#"
1424
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1425
+ aria-current="page"
1426
+ >Section landing</a>
1427
+ </li>
1428
+ </ol>
1429
+ </nav>
1426
1430
  </div>
1427
- </div>
1428
- </section>
1429
- <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
1430
- <div class="pf-v6-c-page__main-body">
1431
- <div
1432
- class="pf-v6-c-tabs pf-m-page-insets"
1433
- role="region"
1434
- id="nested-tabs-example-tabs-tabs"
1435
- >
1436
- <ul class="pf-v6-c-tabs__list" role="tablist">
1437
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1438
- <button
1439
- type="button"
1440
- class="pf-v6-c-tabs__link"
1441
- role="tab"
1442
- aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1443
- id="nested-tabs-example-tabs-tabs-cluster-1-link"
1444
- >
1445
- <span class="pf-v6-c-tabs__item-text">Cluster 1</span>
1446
- </button>
1447
- </li>
1448
- <li class="pf-v6-c-tabs__item" role="presentation">
1449
- <button
1450
- type="button"
1451
- class="pf-v6-c-tabs__link"
1452
- role="tab"
1453
- aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1454
- id="nested-tabs-example-tabs-tabs-cluster-2-link"
1455
- >
1456
- <span class="pf-v6-c-tabs__item-text">Cluster 2</span>
1457
- </button>
1458
- </li>
1459
- </ul>
1431
+ </section>
1432
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1433
+ <div class="pf-v6-c-page__main-body">
1434
+ <div class="pf-v6-c-content">
1435
+ <h1>Main title</h1>
1436
+ <p>This is a full page demo.</p>
1437
+ </div>
1460
1438
  </div>
1461
- </div>
1462
- </section>
1463
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
1464
- <div class="pf-v6-c-page__main-body">
1465
- <section
1466
- class="pf-v6-c-tab-content"
1467
- aria-labelledby="nested-tabs-example-tabs-tabs-cluster-1-link"
1468
- id="nested-tabs-example-tabs-tabs-cluster-1-panel"
1469
- role="tabpanel"
1470
- tabindex="0"
1471
- >
1472
- <div class="pf-v6-c-tab-content__body">
1473
- <div class="pf-v6-l-grid pf-m-gutter">
1474
- <div class="pf-v6-l-grid__item pf-m-6-col-on-md pf-m-8-col-on-xl">
1475
- <div class="pf-v6-c-card pf-m-full-height">
1476
- <div class="pf-v6-c-card__header">
1477
- <h2 class="pf-v6-c-title pf-m-lg">Status</h2>
1478
- </div>
1479
- <div class="pf-v6-c-card__body">
1480
- <div class="pf-v6-l-flex pf-m-column">
1481
- <div class="pf-v6-l-flex__item">
1482
- <div
1483
- class="pf-v6-c-tabs"
1484
- role="region"
1485
- id="nested-tabs-example-tabs-tabs-subtabs"
1486
- >
1487
- <ul class="pf-v6-c-tabs__list" role="tablist">
1488
- <li
1489
- class="pf-v6-c-tabs__item pf-m-current"
1490
- role="presentation"
1491
- >
1492
- <button
1493
- type="button"
1494
- class="pf-v6-c-tabs__link"
1495
- role="tab"
1496
- aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1497
- id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1439
+ </section>
1440
+ <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
1441
+ <div class="pf-v6-c-page__main-body">
1442
+ <div
1443
+ class="pf-v6-c-tabs pf-m-page-insets"
1444
+ role="region"
1445
+ id="nested-tabs-example-tabs-tabs"
1446
+ >
1447
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1448
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1449
+ <button
1450
+ type="button"
1451
+ class="pf-v6-c-tabs__link"
1452
+ role="tab"
1453
+ aria-controls="nested-tabs-example-tabs-tabs-cluster-1-panel"
1454
+ id="nested-tabs-example-tabs-tabs-cluster-1-link"
1455
+ >
1456
+ <span class="pf-v6-c-tabs__item-text">Cluster 1</span>
1457
+ </button>
1458
+ </li>
1459
+ <li class="pf-v6-c-tabs__item" role="presentation">
1460
+ <button
1461
+ type="button"
1462
+ class="pf-v6-c-tabs__link"
1463
+ role="tab"
1464
+ aria-controls="nested-tabs-example-tabs-tabs-cluster-2-panel"
1465
+ id="nested-tabs-example-tabs-tabs-cluster-2-link"
1466
+ >
1467
+ <span class="pf-v6-c-tabs__item-text">Cluster 2</span>
1468
+ </button>
1469
+ </li>
1470
+ </ul>
1471
+ </div>
1472
+ </div>
1473
+ </section>
1474
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
1475
+ <div class="pf-v6-c-page__main-body">
1476
+ <section
1477
+ class="pf-v6-c-tab-content"
1478
+ aria-labelledby="nested-tabs-example-tabs-tabs-cluster-1-link"
1479
+ id="nested-tabs-example-tabs-tabs-cluster-1-panel"
1480
+ role="tabpanel"
1481
+ tabindex="0"
1482
+ >
1483
+ <div class="pf-v6-c-tab-content__body">
1484
+ <div class="pf-v6-l-grid pf-m-gutter">
1485
+ <div
1486
+ class="pf-v6-l-grid__item pf-m-6-col-on-md pf-m-8-col-on-xl"
1487
+ >
1488
+ <div class="pf-v6-c-card pf-m-full-height">
1489
+ <div class="pf-v6-c-card__header">
1490
+ <h2 class="pf-v6-c-title pf-m-lg">Status</h2>
1491
+ </div>
1492
+ <div class="pf-v6-c-card__body">
1493
+ <div class="pf-v6-l-flex pf-m-column">
1494
+ <div class="pf-v6-l-flex__item">
1495
+ <div
1496
+ class="pf-v6-c-tabs"
1497
+ role="region"
1498
+ id="nested-tabs-example-tabs-tabs-subtabs"
1499
+ >
1500
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1501
+ <li
1502
+ class="pf-v6-c-tabs__item pf-m-current"
1503
+ role="presentation"
1498
1504
  >
1499
- <span class="pf-v6-c-tabs__item-text">Cluster</span>
1500
- </button>
1501
- </li>
1502
- <li class="pf-v6-c-tabs__item" role="presentation">
1503
- <button
1504
- type="button"
1505
- class="pf-v6-c-tabs__link"
1506
- role="tab"
1507
- aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1508
- id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1505
+ <button
1506
+ type="button"
1507
+ class="pf-v6-c-tabs__link"
1508
+ role="tab"
1509
+ aria-controls="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1510
+ id="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1511
+ >
1512
+ <span class="pf-v6-c-tabs__item-text">Cluster</span>
1513
+ </button>
1514
+ </li>
1515
+ <li
1516
+ class="pf-v6-c-tabs__item"
1517
+ role="presentation"
1509
1518
  >
1510
- <span
1511
- class="pf-v6-c-tabs__item-text"
1512
- >Control plane</span>
1513
- </button>
1514
- </li>
1515
- <li class="pf-v6-c-tabs__item" role="presentation">
1516
- <button
1517
- type="button"
1518
- class="pf-v6-c-tabs__link"
1519
- role="tab"
1520
- aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1521
- id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1519
+ <button
1520
+ type="button"
1521
+ class="pf-v6-c-tabs__link"
1522
+ role="tab"
1523
+ aria-controls="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1524
+ id="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1525
+ >
1526
+ <span
1527
+ class="pf-v6-c-tabs__item-text"
1528
+ >Control plane</span>
1529
+ </button>
1530
+ </li>
1531
+ <li
1532
+ class="pf-v6-c-tabs__item"
1533
+ role="presentation"
1522
1534
  >
1523
- <span class="pf-v6-c-tabs__item-text">Operators</span>
1524
- </button>
1525
- </li>
1526
- <li class="pf-v6-c-tabs__item" role="presentation">
1527
- <button
1528
- type="button"
1529
- class="pf-v6-c-tabs__link"
1530
- role="tab"
1531
- aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1532
- id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1535
+ <button
1536
+ type="button"
1537
+ class="pf-v6-c-tabs__link"
1538
+ role="tab"
1539
+ aria-controls="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1540
+ id="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1541
+ >
1542
+ <span
1543
+ class="pf-v6-c-tabs__item-text"
1544
+ >Operators</span>
1545
+ </button>
1546
+ </li>
1547
+ <li
1548
+ class="pf-v6-c-tabs__item"
1549
+ role="presentation"
1533
1550
  >
1534
- <span
1535
- class="pf-v6-c-tabs__item-text"
1536
- >Virtualization</span>
1537
- </button>
1538
- </li>
1539
- </ul>
1551
+ <button
1552
+ type="button"
1553
+ class="pf-v6-c-tabs__link"
1554
+ role="tab"
1555
+ aria-controls="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1556
+ id="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1557
+ >
1558
+ <span
1559
+ class="pf-v6-c-tabs__item-text"
1560
+ >Virtualization</span>
1561
+ </button>
1562
+ </li>
1563
+ </ul>
1564
+ </div>
1540
1565
  </div>
1541
- </div>
1542
- <div class="pf-v6-l-flex__item">
1543
- <section
1544
- class="pf-v6-c-tab-content"
1545
- aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1546
- id="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1547
- role="tabpanel"
1548
- tabindex="0"
1549
- >
1550
- <div class="pf-v6-c-tab-content__body">
1551
- <div class="pf-v6-c-content">
1552
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in odio porttitor, feugiat risus in, feugiat arcu. Nullam euismod enim eget fringilla condimentum. Maecenas tincidunt et metus id aliquet. Integer et fermentum purus. Nulla tempor velit arcu, vitae semper purus iaculis at. Sed malesuada auctor luctus. Pellentesque et leo urna. Aliquam vitae felis congue lacus mattis fringilla. Nullam et ultricies erat, sed dignissim elit. Cras mattis pulvinar aliquam. In ac est nulla. Pellentesque fermentum nibh ac sapien porta, ut congue orci aliquam. Sed nisl est, tempor eu pharetra eget, ullamcorper ut augue. Vestibulum eleifend libero eu nulla cursus lacinia.</p>
1566
+ <div class="pf-v6-l-flex__item">
1567
+ <section
1568
+ class="pf-v6-c-tab-content"
1569
+ aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-cluster-link"
1570
+ id="nested-tabs-example-tabs-tabs-subtabs-cluster-panel"
1571
+ role="tabpanel"
1572
+ tabindex="0"
1573
+ >
1574
+ <div class="pf-v6-c-tab-content__body">
1575
+ <div class="pf-v6-c-content">
1576
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in odio porttitor, feugiat risus in, feugiat arcu. Nullam euismod enim eget fringilla condimentum. Maecenas tincidunt et metus id aliquet. Integer et fermentum purus. Nulla tempor velit arcu, vitae semper purus iaculis at. Sed malesuada auctor luctus. Pellentesque et leo urna. Aliquam vitae felis congue lacus mattis fringilla. Nullam et ultricies erat, sed dignissim elit. Cras mattis pulvinar aliquam. In ac est nulla. Pellentesque fermentum nibh ac sapien porta, ut congue orci aliquam. Sed nisl est, tempor eu pharetra eget, ullamcorper ut augue. Vestibulum eleifend libero eu nulla cursus lacinia.</p>
1577
+ </div>
1553
1578
  </div>
1554
- </div>
1555
- </section>
1556
- <section
1557
- class="pf-v6-c-tab-content"
1558
- aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1559
- id="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1560
- role="tabpanel"
1561
- tabindex="0"
1562
- hidden
1563
- >
1564
- <div
1565
- class="pf-v6-c-tab-content__body"
1566
- >Control plane content</div>
1567
- </section>
1568
- <section
1569
- class="pf-v6-c-tab-content"
1570
- aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1571
- id="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1572
- role="tabpanel"
1573
- tabindex="0"
1574
- hidden
1575
- >
1576
- <div
1577
- class="pf-v6-c-tab-content__body"
1578
- >Operators content</div>
1579
- </section>
1580
- <section
1581
- class="pf-v6-c-tab-content"
1582
- aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1583
- id="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1584
- role="tabpanel"
1585
- tabindex="0"
1586
- hidden
1587
- >
1588
- <div
1589
- class="pf-v6-c-tab-content__body"
1590
- >Virtualization content</div>
1591
- </section>
1579
+ </section>
1580
+ <section
1581
+ class="pf-v6-c-tab-content"
1582
+ aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-control-plane-link"
1583
+ id="nested-tabs-example-tabs-tabs-subtabs-control-plane-panel"
1584
+ role="tabpanel"
1585
+ tabindex="0"
1586
+ hidden
1587
+ >
1588
+ <div
1589
+ class="pf-v6-c-tab-content__body"
1590
+ >Control plane content</div>
1591
+ </section>
1592
+ <section
1593
+ class="pf-v6-c-tab-content"
1594
+ aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-operators-link"
1595
+ id="nested-tabs-example-tabs-tabs-subtabs-operators-panel"
1596
+ role="tabpanel"
1597
+ tabindex="0"
1598
+ hidden
1599
+ >
1600
+ <div
1601
+ class="pf-v6-c-tab-content__body"
1602
+ >Operators content</div>
1603
+ </section>
1604
+ <section
1605
+ class="pf-v6-c-tab-content"
1606
+ aria-labelledby="nested-tabs-example-tabs-tabs-subtabs-virtualization-link"
1607
+ id="nested-tabs-example-tabs-tabs-subtabs-virtualization-panel"
1608
+ role="tabpanel"
1609
+ tabindex="0"
1610
+ hidden
1611
+ >
1612
+ <div
1613
+ class="pf-v6-c-tab-content__body"
1614
+ >Virtualization content</div>
1615
+ </section>
1616
+ </div>
1592
1617
  </div>
1593
1618
  </div>
1594
1619
  </div>
1595
1620
  </div>
1596
- </div>
1597
- <div class="pf-v6-l-grid__item pf-m-6-col-on-md pf-m-4-col-on-xl">
1598
- <div class="pf-v6-l-flex pf-m-column pf-v5-u-h-100">
1599
- <div class="pf-v6-l-flex__item pf-m-flex-1">
1600
- <div class="pf-v6-c-card pf-m-full-height">
1601
- <div class="pf-v6-c-card__header">
1602
- <h2 class="pf-v6-c-title pf-m-lg">Title of card</h2>
1621
+ <div
1622
+ class="pf-v6-l-grid__item pf-m-6-col-on-md pf-m-4-col-on-xl"
1623
+ >
1624
+ <div class="pf-v6-l-flex pf-m-column pf-v5-u-h-100">
1625
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1626
+ <div class="pf-v6-c-card pf-m-full-height">
1627
+ <div class="pf-v6-c-card__header">
1628
+ <h2 class="pf-v6-c-title pf-m-lg">Title of card</h2>
1629
+ </div>
1603
1630
  </div>
1604
1631
  </div>
1605
- </div>
1606
- <div class="pf-v6-l-flex__item pf-m-flex-1">
1607
- <div class="pf-v6-c-card pf-m-full-height">
1608
- <div class="pf-v6-c-card__header">
1609
- <h2 class="pf-v6-c-title pf-m-lg">Title of card</h2>
1632
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1633
+ <div class="pf-v6-c-card pf-m-full-height">
1634
+ <div class="pf-v6-c-card__header">
1635
+ <h2 class="pf-v6-c-title pf-m-lg">Title of card</h2>
1636
+ </div>
1610
1637
  </div>
1611
1638
  </div>
1612
1639
  </div>
1613
1640
  </div>
1614
1641
  </div>
1615
1642
  </div>
1616
- </div>
1617
- </section>
1618
- <section
1619
- class="pf-v6-c-tab-content"
1620
- aria-labelledby="nested-tabs-example-tabs-tabs-cluster-2-link"
1621
- id="nested-tabs-example-tabs-tabs-cluster-2-panel"
1622
- role="tabpanel"
1623
- tabindex="0"
1624
- hidden
1625
- >
1626
- <div class="pf-v6-c-tab-content__body">
1627
- <div class="pf-v6-c-content">
1628
- <p>Cluster 2 content</p>
1643
+ </section>
1644
+ <section
1645
+ class="pf-v6-c-tab-content"
1646
+ aria-labelledby="nested-tabs-example-tabs-tabs-cluster-2-link"
1647
+ id="nested-tabs-example-tabs-tabs-cluster-2-panel"
1648
+ role="tabpanel"
1649
+ tabindex="0"
1650
+ hidden
1651
+ >
1652
+ <div class="pf-v6-c-tab-content__body">
1653
+ <div class="pf-v6-c-content">
1654
+ <p>Cluster 2 content</p>
1655
+ </div>
1629
1656
  </div>
1630
- </div>
1631
- </section>
1632
- </div>
1633
- </section>
1634
- </main>
1657
+ </section>
1658
+ </div>
1659
+ </section>
1660
+ </main>
1661
+ </div>
1635
1662
  </div>
1636
1663
 
1637
1664
  ```
@@ -1859,1000 +1886,1037 @@ section: components
1859
1886
  </nav>
1860
1887
  </div>
1861
1888
  </div>
1862
- <main
1863
- class="pf-v6-c-page__main"
1864
- tabindex="-1"
1865
- id="main-content-table-tabs-example"
1866
- >
1867
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1868
- <div class="pf-v6-c-page__main-body">
1869
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1870
- <ol class="pf-v6-c-breadcrumb__list" role="list">
1871
- <li class="pf-v6-c-breadcrumb__item">
1872
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1873
- </li>
1874
- <li class="pf-v6-c-breadcrumb__item">
1875
- <span class="pf-v6-c-breadcrumb__item-divider">
1876
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1877
- </span>
1878
-
1879
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1880
- </li>
1881
- <li class="pf-v6-c-breadcrumb__item">
1882
- <span class="pf-v6-c-breadcrumb__item-divider">
1883
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1884
- </span>
1885
-
1886
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1887
- </li>
1888
- <li class="pf-v6-c-breadcrumb__item">
1889
- <span class="pf-v6-c-breadcrumb__item-divider">
1890
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1891
- </span>
1892
-
1893
- <a
1894
- href="#"
1895
- class="pf-v6-c-breadcrumb__link pf-m-current"
1896
- aria-current="page"
1897
- >Section landing</a>
1898
- </li>
1899
- </ol>
1900
- </nav>
1901
- </div>
1902
- </section>
1903
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1904
- <div class="pf-v6-c-page__main-body">
1905
- <div class="pf-v6-c-content">
1906
- <h1>Main title</h1>
1907
- <p>This is a full page demo.</p>
1908
- </div>
1909
- </div>
1910
- </section>
1911
- <section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
1912
- <div
1913
- class="pf-v6-c-toolbar pf-m-page-insets"
1914
- id="table-tabs-example-tabs-toolbar"
1915
- >
1916
- <div class="pf-v6-c-toolbar__content">
1917
- <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
1918
- <div
1919
- class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
1920
- >
1921
- <div class="pf-v6-c-toolbar__toggle pf-m-show">
1922
- <button
1923
- class="pf-v6-c-menu-toggle pf-m-plain"
1924
- type="button"
1925
- aria-expanded="false"
1926
- aria-label="Show filters"
1927
- aria-controls="table-tabs-example-tabs-toolbar-expandable-content"
1928
- >
1929
- <span class="pf-v6-c-menu-toggle__icon">
1930
- <i class="fas fa-filter" aria-hidden="true"></i>
1931
- </span>
1932
- </button>
1933
- </div>
1889
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
1890
+ <main
1891
+ class="pf-v6-c-page__main"
1892
+ tabindex="-1"
1893
+ id="main-content-table-tabs-example"
1894
+ >
1895
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
1896
+ <div class="pf-v6-c-page__main-body">
1897
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
1898
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
1899
+ <li class="pf-v6-c-breadcrumb__item">
1900
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
1901
+ </li>
1902
+ <li class="pf-v6-c-breadcrumb__item">
1903
+ <span class="pf-v6-c-breadcrumb__item-divider">
1904
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1905
+ </span>
1934
1906
 
1935
- <div class="pf-v6-c-toolbar__item">
1936
- <div class="pf-v6-c-select">
1937
- <span
1938
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-label"
1939
- hidden
1940
- >Choose many</span>
1907
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1908
+ </li>
1909
+ <li class="pf-v6-c-breadcrumb__item">
1910
+ <span class="pf-v6-c-breadcrumb__item-divider">
1911
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1912
+ </span>
1913
+
1914
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
1915
+ </li>
1916
+ <li class="pf-v6-c-breadcrumb__item">
1917
+ <span class="pf-v6-c-breadcrumb__item-divider">
1918
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1919
+ </span>
1941
1920
 
1921
+ <a
1922
+ href="#"
1923
+ class="pf-v6-c-breadcrumb__link pf-m-current"
1924
+ aria-current="page"
1925
+ >Section landing</a>
1926
+ </li>
1927
+ </ol>
1928
+ </nav>
1929
+ </div>
1930
+ </section>
1931
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
1932
+ <div class="pf-v6-c-page__main-body">
1933
+ <div class="pf-v6-c-content">
1934
+ <h1>Main title</h1>
1935
+ <p>This is a full page demo.</p>
1936
+ </div>
1937
+ </div>
1938
+ </section>
1939
+ <section class="pf-v6-c-page__main-section pf-m-no-padding pf-m-light">
1940
+ <div
1941
+ class="pf-v6-c-toolbar pf-m-page-insets"
1942
+ id="table-tabs-example-tabs-toolbar"
1943
+ >
1944
+ <div class="pf-v6-c-toolbar__content">
1945
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
1946
+ <div
1947
+ class="pf-v6-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
1948
+ >
1949
+ <div class="pf-v6-c-toolbar__toggle pf-m-show">
1942
1950
  <button
1943
- class="pf-v6-c-select__toggle"
1951
+ class="pf-v6-c-menu-toggle pf-m-plain"
1944
1952
  type="button"
1945
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-toggle"
1946
- aria-haspopup="true"
1947
1953
  aria-expanded="false"
1948
- aria-labelledby="table-tabs-example-tabs-toolbar-select-checkbox-status-label table-tabs-example-tabs-toolbar-select-checkbox-status-toggle"
1954
+ aria-label="Show filters"
1955
+ aria-controls="table-tabs-example-tabs-toolbar-expandable-content"
1949
1956
  >
1950
- <div class="pf-v6-c-select__toggle-wrapper">
1951
- <span class="pf-v6-c-select__toggle-text">Name</span>
1952
- </div>
1953
- <span class="pf-v6-c-select__toggle-arrow">
1954
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1957
+ <span class="pf-v6-c-menu-toggle__icon">
1958
+ <i class="fas fa-filter" aria-hidden="true"></i>
1955
1959
  </span>
1956
1960
  </button>
1961
+ </div>
1957
1962
 
1958
- <div class="pf-v6-c-select__menu" hidden>
1959
- <fieldset
1960
- class="pf-v6-c-select__menu-fieldset"
1961
- aria-label="Select input"
1963
+ <div class="pf-v6-c-toolbar__item">
1964
+ <div class="pf-v6-c-select">
1965
+ <span
1966
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-label"
1967
+ hidden
1968
+ >Choose many</span>
1969
+
1970
+ <button
1971
+ class="pf-v6-c-select__toggle"
1972
+ type="button"
1973
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-toggle"
1974
+ aria-haspopup="true"
1975
+ aria-expanded="false"
1976
+ aria-labelledby="table-tabs-example-tabs-toolbar-select-checkbox-status-label table-tabs-example-tabs-toolbar-select-checkbox-status-toggle"
1962
1977
  >
1963
- <label
1964
- class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
1965
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-active"
1966
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-active-input"
1967
- >
1968
- <input
1969
- class="pf-v6-c-check__input"
1970
- type="checkbox"
1971
- aria-describedby="table-tabs-example-tabs-toolbar-select-checkbox-status-active-description"
1972
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-active-input"
1973
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-active-input"
1974
- />
1975
- <span class="pf-v6-c-check__label">Active</span>
1976
- <span
1977
- class="pf-v6-c-check__description"
1978
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-active-description"
1979
- >This is a description</span>
1980
- </label>
1981
- <label
1982
- class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
1983
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled"
1984
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-input"
1985
- >
1986
- <input
1987
- class="pf-v6-c-check__input"
1988
- type="checkbox"
1989
- aria-describedby="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-description"
1990
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-input"
1991
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-input"
1992
- />
1993
- <span class="pf-v6-c-check__label">Canceled</span>
1994
- <span
1995
- class="pf-v6-c-check__description"
1996
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-description"
1997
- >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
1998
- </label>
1999
- <label
2000
- class="pf-v6-c-check pf-v5-c-select__menu-item"
2001
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-paused"
2002
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-paused-input"
2003
- >
2004
- <input
2005
- class="pf-v6-c-check__input"
2006
- type="checkbox"
2007
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-paused-input"
2008
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-paused-input"
2009
- />
2010
- <span class="pf-v6-c-check__label">Paused</span>
2011
- </label>
2012
- <label
2013
- class="pf-v6-c-check pf-v5-c-select__menu-item"
2014
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-warning"
2015
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-warning-input"
2016
- >
2017
- <input
2018
- class="pf-v6-c-check__input"
2019
- type="checkbox"
2020
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-warning-input"
2021
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-warning-input"
2022
- />
2023
- <span class="pf-v6-c-check__label">Warning</span>
2024
- </label>
2025
- <label
2026
- class="pf-v6-c-check pf-v5-c-select__menu-item"
2027
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted"
2028
- for="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted-input"
1978
+ <div class="pf-v6-c-select__toggle-wrapper">
1979
+ <span class="pf-v6-c-select__toggle-text">Name</span>
1980
+ </div>
1981
+ <span class="pf-v6-c-select__toggle-arrow">
1982
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1983
+ </span>
1984
+ </button>
1985
+
1986
+ <div class="pf-v6-c-select__menu" hidden>
1987
+ <fieldset
1988
+ class="pf-v6-c-select__menu-fieldset"
1989
+ aria-label="Select input"
2029
1990
  >
2030
- <input
2031
- class="pf-v6-c-check__input"
2032
- type="checkbox"
2033
- id="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted-input"
2034
- name="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted-input"
2035
- />
2036
- <span class="pf-v6-c-check__label">Restarted</span>
2037
- </label>
2038
- </fieldset>
1991
+ <label
1992
+ class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
1993
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-active"
1994
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-active-input"
1995
+ >
1996
+ <input
1997
+ class="pf-v6-c-check__input"
1998
+ type="checkbox"
1999
+ aria-describedby="table-tabs-example-tabs-toolbar-select-checkbox-status-active-description"
2000
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-active-input"
2001
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-active-input"
2002
+ />
2003
+ <span class="pf-v6-c-check__label">Active</span>
2004
+ <span
2005
+ class="pf-v6-c-check__description"
2006
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-active-description"
2007
+ >This is a description</span>
2008
+ </label>
2009
+ <label
2010
+ class="pf-v6-c-check pf-v5-c-select__menu-item pf-m-description"
2011
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled"
2012
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-input"
2013
+ >
2014
+ <input
2015
+ class="pf-v6-c-check__input"
2016
+ type="checkbox"
2017
+ aria-describedby="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-description"
2018
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-input"
2019
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-input"
2020
+ />
2021
+ <span class="pf-v6-c-check__label">Canceled</span>
2022
+ <span
2023
+ class="pf-v6-c-check__description"
2024
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-canceled-description"
2025
+ >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
2026
+ </label>
2027
+ <label
2028
+ class="pf-v6-c-check pf-v5-c-select__menu-item"
2029
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-paused"
2030
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-paused-input"
2031
+ >
2032
+ <input
2033
+ class="pf-v6-c-check__input"
2034
+ type="checkbox"
2035
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-paused-input"
2036
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-paused-input"
2037
+ />
2038
+ <span class="pf-v6-c-check__label">Paused</span>
2039
+ </label>
2040
+ <label
2041
+ class="pf-v6-c-check pf-v5-c-select__menu-item"
2042
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-warning"
2043
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-warning-input"
2044
+ >
2045
+ <input
2046
+ class="pf-v6-c-check__input"
2047
+ type="checkbox"
2048
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-warning-input"
2049
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-warning-input"
2050
+ />
2051
+ <span class="pf-v6-c-check__label">Warning</span>
2052
+ </label>
2053
+ <label
2054
+ class="pf-v6-c-check pf-v5-c-select__menu-item"
2055
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted"
2056
+ for="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted-input"
2057
+ >
2058
+ <input
2059
+ class="pf-v6-c-check__input"
2060
+ type="checkbox"
2061
+ id="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted-input"
2062
+ name="table-tabs-example-tabs-toolbar-select-checkbox-status-restarted-input"
2063
+ />
2064
+ <span class="pf-v6-c-check__label">Restarted</span>
2065
+ </label>
2066
+ </fieldset>
2067
+ </div>
2039
2068
  </div>
2040
2069
  </div>
2041
2070
  </div>
2042
- </div>
2043
2071
 
2044
- <div class="pf-v6-c-toolbar__item">
2045
- <button
2046
- class="pf-v6-c-button pf-m-plain"
2047
- type="button"
2048
- aria-label="Sort"
2049
- >
2050
- <i
2051
- class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2052
- aria-hidden="true"
2053
- ></i>
2054
- </button>
2055
- </div>
2072
+ <div class="pf-v6-c-toolbar__item">
2073
+ <button
2074
+ class="pf-v6-c-button pf-m-plain"
2075
+ type="button"
2076
+ aria-label="Sort"
2077
+ >
2078
+ <i
2079
+ class="fas fa-sort-amount-down pf-v6-m-mirror-inline-rtl"
2080
+ aria-hidden="true"
2081
+ ></i>
2082
+ </button>
2083
+ </div>
2056
2084
 
2057
- <div
2058
- class="pf-v6-c-overflow-menu"
2059
- id="table-tabs-example-tabs-toolbar-overflow-menu"
2060
- >
2061
2085
  <div
2062
- class="pf-v6-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
2086
+ class="pf-v6-c-overflow-menu"
2087
+ id="table-tabs-example-tabs-toolbar-overflow-menu"
2063
2088
  >
2064
- <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
2065
- <div class="pf-v6-c-overflow-menu__item">
2066
- <button
2067
- class="pf-v6-c-button pf-m-primary"
2068
- type="button"
2069
- >Generate</button>
2070
- </div>
2089
+ <div
2090
+ class="pf-v6-c-overflow-menu__content pf-v5-u-display-none pf-v5-u-display-flex-on-lg"
2091
+ >
2092
+ <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
2093
+ <div class="pf-v6-c-overflow-menu__item">
2094
+ <button
2095
+ class="pf-v6-c-button pf-m-primary"
2096
+ type="button"
2097
+ >Generate</button>
2098
+ </div>
2071
2099
 
2072
- <div class="pf-v6-c-overflow-menu__item">
2100
+ <div class="pf-v6-c-overflow-menu__item">
2101
+ <button
2102
+ class="pf-v6-c-button pf-m-secondary"
2103
+ type="button"
2104
+ >Deploy</button>
2105
+ </div>
2106
+ </div>
2107
+ </div>
2108
+ <div class="pf-v6-c-overflow-menu__control">
2109
+ <div class="pf-v6-c-dropdown">
2073
2110
  <button
2074
- class="pf-v6-c-button pf-m-secondary"
2111
+ class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2075
2112
  type="button"
2076
- >Deploy</button>
2113
+ id="table-tabs-example-tabs-toolbar-overflow-menu-dropdown-toggle"
2114
+ aria-label="Dropdown with additional options"
2115
+ aria-expanded="false"
2116
+ >
2117
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2118
+ </button>
2119
+ <ul
2120
+ class="pf-v6-c-dropdown__menu"
2121
+ role="menu"
2122
+ aria-labelledby="table-tabs-example-tabs-toolbar-overflow-menu-dropdown-toggle"
2123
+ hidden
2124
+ >
2125
+ <li role="none">
2126
+ <button
2127
+ role="menuitem"
2128
+ class="pf-v6-c-dropdown__menu-item"
2129
+ >Action 7</button>
2130
+ </li>
2131
+ </ul>
2077
2132
  </div>
2078
2133
  </div>
2079
2134
  </div>
2080
- <div class="pf-v6-c-overflow-menu__control">
2081
- <div class="pf-v6-c-dropdown">
2082
- <button
2083
- class="pf-v6-c-button pf-v5-c-dropdown__toggle pf-m-plain"
2084
- type="button"
2085
- id="table-tabs-example-tabs-toolbar-overflow-menu-dropdown-toggle"
2086
- aria-label="Dropdown with additional options"
2087
- aria-expanded="false"
2088
- >
2089
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2090
- </button>
2091
- <ul
2092
- class="pf-v6-c-dropdown__menu"
2093
- role="menu"
2094
- aria-labelledby="table-tabs-example-tabs-toolbar-overflow-menu-dropdown-toggle"
2095
- hidden
2096
- >
2097
- <li role="none">
2098
- <button
2099
- role="menuitem"
2100
- class="pf-v6-c-dropdown__menu-item"
2101
- >Action 7</button>
2102
- </li>
2103
- </ul>
2104
- </div>
2105
- </div>
2106
2135
  </div>
2107
- </div>
2108
2136
 
2109
- <div
2110
- class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
2111
- id="table-tabs-example-tabs-toolbar-expandable-content"
2112
- hidden
2113
- ></div>
2137
+ <div
2138
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
2139
+ id="table-tabs-example-tabs-toolbar-expandable-content"
2140
+ hidden
2141
+ ></div>
2142
+ </div>
2114
2143
  </div>
2115
- </div>
2116
- <hr class="pf-v6-c-divider" />
2117
- <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
2118
- <div class="pf-v6-c-drawer__main">
2119
- <!-- Content -->
2120
- <div class="pf-v6-c-drawer__content">
2121
- <div class="pf-v6-c-drawer__body">
2122
- <table
2123
- class="pf-v6-c-table pf-m-grid-md"
2124
- role="grid"
2125
- aria-label="This is a table with checkboxes"
2126
- id="table-tabs-example-table"
2127
- >
2128
- <thead class="pf-v6-c-table__thead">
2129
- <tr class="pf-v6-c-table__tr" role="row">
2130
- <td
2131
- class="pf-v6-c-table__td pf-v6-c-table__check"
2132
- role="cell"
2133
- >
2134
- <label
2135
- class="pf-v6-c-check pf-m-standalone"
2136
- id="table-tabs-example-tablecheckrowcheck"
2137
- for="table-tabs-example-tablecheckrowcheck-input"
2144
+ <hr class="pf-v6-c-divider" />
2145
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
2146
+ <div class="pf-v6-c-drawer__main">
2147
+ <!-- Content -->
2148
+ <div class="pf-v6-c-drawer__content">
2149
+ <div class="pf-v6-c-drawer__body">
2150
+ <table
2151
+ class="pf-v6-c-table pf-m-grid-md"
2152
+ role="grid"
2153
+ aria-label="This is a table with checkboxes"
2154
+ id="table-tabs-example-table"
2155
+ >
2156
+ <thead class="pf-v6-c-table__thead">
2157
+ <tr class="pf-v6-c-table__tr" role="row">
2158
+ <td
2159
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2160
+ role="cell"
2138
2161
  >
2139
- <input
2140
- class="pf-v6-c-check__input"
2141
- type="checkbox"
2142
- id="table-tabs-example-tablecheckrowcheck-input"
2143
- name="table-tabs-example-tablecheckrowcheck-input"
2144
- aria-label="Standalone check"
2145
- />
2146
- </label>
2147
- </td>
2148
-
2149
- <th
2150
- class="pf-v6-c-table__th"
2151
- role="columnheader"
2152
- scope="col"
2153
- >Repositories</th>
2154
-
2155
- <th
2156
- class="pf-v6-c-table__th"
2157
- role="columnheader"
2158
- scope="col"
2159
- >Branches</th>
2160
-
2161
- <th
2162
- class="pf-v6-c-table__th"
2163
- role="columnheader"
2164
- scope="col"
2165
- >Pull requests</th>
2166
-
2167
- <th
2168
- class="pf-v6-c-table__th"
2169
- role="columnheader"
2170
- scope="col"
2171
- >Workspaces</th>
2172
-
2173
- <th
2174
- class="pf-v6-c-table__th"
2175
- role="columnheader"
2176
- scope="col"
2177
- >Last commit</th>
2178
-
2179
- <td class="pf-v6-c-table__td"></td>
2180
- </tr>
2181
- </thead>
2182
-
2183
- <tbody class="pf-v6-c-table__tbody" role="rowgroup">
2184
- <tr class="pf-v6-c-table__tr" role="row">
2185
- <td
2186
- class="pf-v6-c-table__td pf-v6-c-table__check"
2187
- role="cell"
2188
- >
2189
- <label
2190
- class="pf-v6-c-check pf-m-standalone"
2191
- id="table-tabs-example-tablecheckrow1check"
2192
- for="table-tabs-example-tablecheckrow1check-input"
2162
+ <label
2163
+ class="pf-v6-c-check pf-m-standalone"
2164
+ id="table-tabs-example-tablecheckrowcheck"
2165
+ for="table-tabs-example-tablecheckrowcheck-input"
2166
+ >
2167
+ <input
2168
+ class="pf-v6-c-check__input"
2169
+ type="checkbox"
2170
+ id="table-tabs-example-tablecheckrowcheck-input"
2171
+ name="table-tabs-example-tablecheckrowcheck-input"
2172
+ aria-label="Standalone check"
2173
+ />
2174
+ </label>
2175
+ </td>
2176
+
2177
+ <th
2178
+ class="pf-v6-c-table__th"
2179
+ role="columnheader"
2180
+ scope="col"
2181
+ >Repositories</th>
2182
+
2183
+ <th
2184
+ class="pf-v6-c-table__th"
2185
+ role="columnheader"
2186
+ scope="col"
2187
+ >Branches</th>
2188
+
2189
+ <th
2190
+ class="pf-v6-c-table__th"
2191
+ role="columnheader"
2192
+ scope="col"
2193
+ >Pull requests</th>
2194
+
2195
+ <th
2196
+ class="pf-v6-c-table__th"
2197
+ role="columnheader"
2198
+ scope="col"
2199
+ >Workspaces</th>
2200
+
2201
+ <th
2202
+ class="pf-v6-c-table__th"
2203
+ role="columnheader"
2204
+ scope="col"
2205
+ >Last commit</th>
2206
+
2207
+ <td class="pf-v6-c-table__td"></td>
2208
+ </tr>
2209
+ </thead>
2210
+
2211
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
2212
+ <tr class="pf-v6-c-table__tr" role="row">
2213
+ <td
2214
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2215
+ role="cell"
2193
2216
  >
2194
- <input
2195
- class="pf-v6-c-check__input"
2196
- type="checkbox"
2197
- id="table-tabs-example-tablecheckrow1check-input"
2198
- name="table-tabs-example-tablecheckrow1check-input"
2199
- aria-label="Standalone check"
2200
- />
2201
- </label>
2202
- </td>
2203
-
2204
- <th
2205
- class="pf-v6-c-table__th"
2206
- role="columnheader"
2207
- data-label="Repository name"
2208
- >
2209
- <div>
2210
- <div id="table-tabs-example-table-node1">Node 1</div>
2211
- <a href="#">siemur/test-space</a>
2212
- </div>
2213
- </th>
2217
+ <label
2218
+ class="pf-v6-c-check pf-m-standalone"
2219
+ id="table-tabs-example-tablecheckrow1check"
2220
+ for="table-tabs-example-tablecheckrow1check-input"
2221
+ >
2222
+ <input
2223
+ class="pf-v6-c-check__input"
2224
+ type="checkbox"
2225
+ id="table-tabs-example-tablecheckrow1check-input"
2226
+ name="table-tabs-example-tablecheckrow1check-input"
2227
+ aria-label="Standalone check"
2228
+ />
2229
+ </label>
2230
+ </td>
2231
+
2232
+ <th
2233
+ class="pf-v6-c-table__th"
2234
+ role="columnheader"
2235
+ data-label="Repository name"
2236
+ >
2237
+ <div>
2238
+ <div id="table-tabs-example-table-node1">Node 1</div>
2239
+ <a href="#">siemur/test-space</a>
2240
+ </div>
2241
+ </th>
2214
2242
 
2215
- <td
2216
- class="pf-v6-c-table__td"
2217
- role="cell"
2218
- data-label="Branches"
2219
- >
2220
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2221
- <div class="pf-v6-l-flex__item">10</div>
2222
- <div class="pf-v6-l-flex__item">
2223
- <i class="fas fa-code-branch"></i>
2243
+ <td
2244
+ class="pf-v6-c-table__td"
2245
+ role="cell"
2246
+ data-label="Branches"
2247
+ >
2248
+ <div
2249
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2250
+ >
2251
+ <div class="pf-v6-l-flex__item">10</div>
2252
+ <div class="pf-v6-l-flex__item">
2253
+ <i class="fas fa-code-branch"></i>
2254
+ </div>
2224
2255
  </div>
2225
- </div>
2226
- </td>
2227
- <td
2228
- class="pf-v6-c-table__td"
2229
- role="cell"
2230
- data-label="Pull requests"
2231
- >
2232
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2233
- <div class="pf-v6-l-flex__item">25</div>
2234
- <div class="pf-v6-l-flex__item">
2235
- <i class="fas fa-code"></i>
2256
+ </td>
2257
+ <td
2258
+ class="pf-v6-c-table__td"
2259
+ role="cell"
2260
+ data-label="Pull requests"
2261
+ >
2262
+ <div
2263
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2264
+ >
2265
+ <div class="pf-v6-l-flex__item">25</div>
2266
+ <div class="pf-v6-l-flex__item">
2267
+ <i class="fas fa-code"></i>
2268
+ </div>
2236
2269
  </div>
2237
- </div>
2238
- </td>
2239
- <td
2240
- class="pf-v6-c-table__td"
2241
- role="cell"
2242
- data-label="Workspaces"
2243
- >
2244
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2245
- <div class="pf-v6-l-flex__item">5</div>
2246
- <div class="pf-v6-l-flex__item">
2247
- <i class="fas fa-cube"></i>
2270
+ </td>
2271
+ <td
2272
+ class="pf-v6-c-table__td"
2273
+ role="cell"
2274
+ data-label="Workspaces"
2275
+ >
2276
+ <div
2277
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2278
+ >
2279
+ <div class="pf-v6-l-flex__item">5</div>
2280
+ <div class="pf-v6-l-flex__item">
2281
+ <i class="fas fa-cube"></i>
2282
+ </div>
2248
2283
  </div>
2249
- </div>
2250
- </td>
2251
- <td
2252
- class="pf-v6-c-table__td"
2253
- role="cell"
2254
- data-label="Last commit"
2255
- >2 days ago</td>
2256
-
2257
- <td
2258
- class="pf-v6-c-table__td pf-v6-c-table__action"
2259
- role="cell"
2260
- >
2261
- <button
2262
- class="pf-v6-c-menu-toggle pf-m-plain"
2263
- type="button"
2264
- aria-expanded="false"
2265
- aria-label="Table actions"
2284
+ </td>
2285
+ <td
2286
+ class="pf-v6-c-table__td"
2287
+ role="cell"
2288
+ data-label="Last commit"
2289
+ >2 days ago</td>
2290
+
2291
+ <td
2292
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2293
+ role="cell"
2266
2294
  >
2267
- <span class="pf-v6-c-menu-toggle__icon">
2268
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2269
- </span>
2270
- </button>
2271
- </td>
2272
- </tr>
2273
-
2274
- <tr class="pf-v6-c-table__tr pf-m-selected" role="row">
2275
- <td
2276
- class="pf-v6-c-table__td pf-v6-c-table__check"
2277
- role="cell"
2278
- >
2279
- <label
2280
- class="pf-v6-c-check pf-m-standalone"
2281
- id="table-tabs-example-tablecheckrow2check"
2282
- for="table-tabs-example-tablecheckrow2check-input"
2295
+ <button
2296
+ class="pf-v6-c-menu-toggle pf-m-plain"
2297
+ type="button"
2298
+ aria-expanded="false"
2299
+ aria-label="Table actions"
2300
+ >
2301
+ <span class="pf-v6-c-menu-toggle__icon">
2302
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2303
+ </span>
2304
+ </button>
2305
+ </td>
2306
+ </tr>
2307
+
2308
+ <tr class="pf-v6-c-table__tr pf-m-selected" role="row">
2309
+ <td
2310
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2311
+ role="cell"
2283
2312
  >
2284
- <input
2285
- class="pf-v6-c-check__input"
2286
- type="checkbox"
2287
- id="table-tabs-example-tablecheckrow2check-input"
2288
- name="table-tabs-example-tablecheckrow2check-input"
2289
- aria-label="Standalone check"
2290
- />
2291
- </label>
2292
- </td>
2293
-
2294
- <th
2295
- class="pf-v6-c-table__th"
2296
- role="columnheader"
2297
- data-label="Repository name"
2298
- >
2299
- <div>
2300
- <div id="table-tabs-example-table-node2">Node 2</div>
2301
- <a href="#">siemur/test-space</a>
2302
- </div>
2303
- </th>
2313
+ <label
2314
+ class="pf-v6-c-check pf-m-standalone"
2315
+ id="table-tabs-example-tablecheckrow2check"
2316
+ for="table-tabs-example-tablecheckrow2check-input"
2317
+ >
2318
+ <input
2319
+ class="pf-v6-c-check__input"
2320
+ type="checkbox"
2321
+ id="table-tabs-example-tablecheckrow2check-input"
2322
+ name="table-tabs-example-tablecheckrow2check-input"
2323
+ aria-label="Standalone check"
2324
+ />
2325
+ </label>
2326
+ </td>
2327
+
2328
+ <th
2329
+ class="pf-v6-c-table__th"
2330
+ role="columnheader"
2331
+ data-label="Repository name"
2332
+ >
2333
+ <div>
2334
+ <div id="table-tabs-example-table-node2">Node 2</div>
2335
+ <a href="#">siemur/test-space</a>
2336
+ </div>
2337
+ </th>
2304
2338
 
2305
- <td
2306
- class="pf-v6-c-table__td"
2307
- role="cell"
2308
- data-label="Branches"
2309
- >
2310
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2311
- <div class="pf-v6-l-flex__item">8</div>
2312
- <div class="pf-v6-l-flex__item">
2313
- <i class="fas fa-code-branch"></i>
2339
+ <td
2340
+ class="pf-v6-c-table__td"
2341
+ role="cell"
2342
+ data-label="Branches"
2343
+ >
2344
+ <div
2345
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2346
+ >
2347
+ <div class="pf-v6-l-flex__item">8</div>
2348
+ <div class="pf-v6-l-flex__item">
2349
+ <i class="fas fa-code-branch"></i>
2350
+ </div>
2314
2351
  </div>
2315
- </div>
2316
- </td>
2317
- <td
2318
- class="pf-v6-c-table__td"
2319
- role="cell"
2320
- data-label="Pull requests"
2321
- >
2322
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2323
- <div class="pf-v6-l-flex__item">30</div>
2324
- <div class="pf-v6-l-flex__item">
2325
- <i class="fas fa-code"></i>
2352
+ </td>
2353
+ <td
2354
+ class="pf-v6-c-table__td"
2355
+ role="cell"
2356
+ data-label="Pull requests"
2357
+ >
2358
+ <div
2359
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2360
+ >
2361
+ <div class="pf-v6-l-flex__item">30</div>
2362
+ <div class="pf-v6-l-flex__item">
2363
+ <i class="fas fa-code"></i>
2364
+ </div>
2326
2365
  </div>
2327
- </div>
2328
- </td>
2329
- <td
2330
- class="pf-v6-c-table__td"
2331
- role="cell"
2332
- data-label="Workspaces"
2333
- >
2334
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2335
- <div class="pf-v6-l-flex__item">2</div>
2336
- <div class="pf-v6-l-flex__item">
2337
- <i class="fas fa-cube"></i>
2366
+ </td>
2367
+ <td
2368
+ class="pf-v6-c-table__td"
2369
+ role="cell"
2370
+ data-label="Workspaces"
2371
+ >
2372
+ <div
2373
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2374
+ >
2375
+ <div class="pf-v6-l-flex__item">2</div>
2376
+ <div class="pf-v6-l-flex__item">
2377
+ <i class="fas fa-cube"></i>
2378
+ </div>
2338
2379
  </div>
2339
- </div>
2340
- </td>
2341
- <td
2342
- class="pf-v6-c-table__td"
2343
- role="cell"
2344
- data-label="Last commit"
2345
- >2 days ago</td>
2346
-
2347
- <td
2348
- class="pf-v6-c-table__td pf-v6-c-table__action"
2349
- role="cell"
2350
- >
2351
- <button
2352
- class="pf-v6-c-menu-toggle pf-m-plain"
2353
- type="button"
2354
- aria-expanded="false"
2355
- aria-label="Table actions"
2380
+ </td>
2381
+ <td
2382
+ class="pf-v6-c-table__td"
2383
+ role="cell"
2384
+ data-label="Last commit"
2385
+ >2 days ago</td>
2386
+
2387
+ <td
2388
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2389
+ role="cell"
2356
2390
  >
2357
- <span class="pf-v6-c-menu-toggle__icon">
2358
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2359
- </span>
2360
- </button>
2361
- </td>
2362
- </tr>
2363
-
2364
- <tr class="pf-v6-c-table__tr" role="row">
2365
- <td
2366
- class="pf-v6-c-table__td pf-v6-c-table__check"
2367
- role="cell"
2368
- >
2369
- <label
2370
- class="pf-v6-c-check pf-m-standalone"
2371
- id="table-tabs-example-tablecheckrow3check"
2372
- for="table-tabs-example-tablecheckrow3check-input"
2391
+ <button
2392
+ class="pf-v6-c-menu-toggle pf-m-plain"
2393
+ type="button"
2394
+ aria-expanded="false"
2395
+ aria-label="Table actions"
2396
+ >
2397
+ <span class="pf-v6-c-menu-toggle__icon">
2398
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2399
+ </span>
2400
+ </button>
2401
+ </td>
2402
+ </tr>
2403
+
2404
+ <tr class="pf-v6-c-table__tr" role="row">
2405
+ <td
2406
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2407
+ role="cell"
2373
2408
  >
2374
- <input
2375
- class="pf-v6-c-check__input"
2376
- type="checkbox"
2377
- id="table-tabs-example-tablecheckrow3check-input"
2378
- name="table-tabs-example-tablecheckrow3check-input"
2379
- aria-label="Standalone check"
2380
- />
2381
- </label>
2382
- </td>
2383
-
2384
- <th
2385
- class="pf-v6-c-table__th"
2386
- role="columnheader"
2387
- data-label="Repository name"
2388
- >
2389
- <div>
2390
- <div id="table-tabs-example-table-node3">Node 3</div>
2391
- <a href="#">siemur/test-space</a>
2392
- </div>
2393
- </th>
2409
+ <label
2410
+ class="pf-v6-c-check pf-m-standalone"
2411
+ id="table-tabs-example-tablecheckrow3check"
2412
+ for="table-tabs-example-tablecheckrow3check-input"
2413
+ >
2414
+ <input
2415
+ class="pf-v6-c-check__input"
2416
+ type="checkbox"
2417
+ id="table-tabs-example-tablecheckrow3check-input"
2418
+ name="table-tabs-example-tablecheckrow3check-input"
2419
+ aria-label="Standalone check"
2420
+ />
2421
+ </label>
2422
+ </td>
2423
+
2424
+ <th
2425
+ class="pf-v6-c-table__th"
2426
+ role="columnheader"
2427
+ data-label="Repository name"
2428
+ >
2429
+ <div>
2430
+ <div id="table-tabs-example-table-node3">Node 3</div>
2431
+ <a href="#">siemur/test-space</a>
2432
+ </div>
2433
+ </th>
2394
2434
 
2395
- <td
2396
- class="pf-v6-c-table__td"
2397
- role="cell"
2398
- data-label="Branches"
2399
- >
2400
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2401
- <div class="pf-v6-l-flex__item">12</div>
2402
- <div class="pf-v6-l-flex__item">
2403
- <i class="fas fa-code-branch"></i>
2435
+ <td
2436
+ class="pf-v6-c-table__td"
2437
+ role="cell"
2438
+ data-label="Branches"
2439
+ >
2440
+ <div
2441
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2442
+ >
2443
+ <div class="pf-v6-l-flex__item">12</div>
2444
+ <div class="pf-v6-l-flex__item">
2445
+ <i class="fas fa-code-branch"></i>
2446
+ </div>
2404
2447
  </div>
2405
- </div>
2406
- </td>
2407
- <td
2408
- class="pf-v6-c-table__td"
2409
- role="cell"
2410
- data-label="Pull requests"
2411
- >
2412
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2413
- <div class="pf-v6-l-flex__item">48</div>
2414
- <div class="pf-v6-l-flex__item">
2415
- <i class="fas fa-code"></i>
2448
+ </td>
2449
+ <td
2450
+ class="pf-v6-c-table__td"
2451
+ role="cell"
2452
+ data-label="Pull requests"
2453
+ >
2454
+ <div
2455
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2456
+ >
2457
+ <div class="pf-v6-l-flex__item">48</div>
2458
+ <div class="pf-v6-l-flex__item">
2459
+ <i class="fas fa-code"></i>
2460
+ </div>
2416
2461
  </div>
2417
- </div>
2418
- </td>
2419
- <td
2420
- class="pf-v6-c-table__td"
2421
- role="cell"
2422
- data-label="Workspaces"
2423
- >
2424
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2425
- <div class="pf-v6-l-flex__item">13</div>
2426
- <div class="pf-v6-l-flex__item">
2427
- <i class="fas fa-cube"></i>
2462
+ </td>
2463
+ <td
2464
+ class="pf-v6-c-table__td"
2465
+ role="cell"
2466
+ data-label="Workspaces"
2467
+ >
2468
+ <div
2469
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2470
+ >
2471
+ <div class="pf-v6-l-flex__item">13</div>
2472
+ <div class="pf-v6-l-flex__item">
2473
+ <i class="fas fa-cube"></i>
2474
+ </div>
2428
2475
  </div>
2429
- </div>
2430
- </td>
2431
- <td
2432
- class="pf-v6-c-table__td"
2433
- role="cell"
2434
- data-label="Last commit"
2435
- >30 days ago</td>
2436
-
2437
- <td
2438
- class="pf-v6-c-table__td pf-v6-c-table__action"
2439
- role="cell"
2440
- >
2441
- <button
2442
- class="pf-v6-c-menu-toggle pf-m-plain"
2443
- type="button"
2444
- aria-expanded="false"
2445
- aria-label="Table actions"
2476
+ </td>
2477
+ <td
2478
+ class="pf-v6-c-table__td"
2479
+ role="cell"
2480
+ data-label="Last commit"
2481
+ >30 days ago</td>
2482
+
2483
+ <td
2484
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2485
+ role="cell"
2446
2486
  >
2447
- <span class="pf-v6-c-menu-toggle__icon">
2448
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2449
- </span>
2450
- </button>
2451
- </td>
2452
- </tr>
2453
-
2454
- <tr class="pf-v6-c-table__tr" role="row">
2455
- <td
2456
- class="pf-v6-c-table__td pf-v6-c-table__check"
2457
- role="cell"
2458
- >
2459
- <label
2460
- class="pf-v6-c-check pf-m-standalone"
2461
- id="table-tabs-example-tablecheckrow4check"
2462
- for="table-tabs-example-tablecheckrow4check-input"
2487
+ <button
2488
+ class="pf-v6-c-menu-toggle pf-m-plain"
2489
+ type="button"
2490
+ aria-expanded="false"
2491
+ aria-label="Table actions"
2492
+ >
2493
+ <span class="pf-v6-c-menu-toggle__icon">
2494
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2495
+ </span>
2496
+ </button>
2497
+ </td>
2498
+ </tr>
2499
+
2500
+ <tr class="pf-v6-c-table__tr" role="row">
2501
+ <td
2502
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2503
+ role="cell"
2463
2504
  >
2464
- <input
2465
- class="pf-v6-c-check__input"
2466
- type="checkbox"
2467
- id="table-tabs-example-tablecheckrow4check-input"
2468
- name="table-tabs-example-tablecheckrow4check-input"
2469
- aria-label="Standalone check"
2470
- />
2471
- </label>
2472
- </td>
2473
-
2474
- <th
2475
- class="pf-v6-c-table__th"
2476
- role="columnheader"
2477
- data-label="Repository name"
2478
- >
2479
- <div>
2480
- <div id="table-tabs-example-table-node4">Node 4</div>
2481
- <a href="#">siemur/test-space</a>
2482
- </div>
2483
- </th>
2505
+ <label
2506
+ class="pf-v6-c-check pf-m-standalone"
2507
+ id="table-tabs-example-tablecheckrow4check"
2508
+ for="table-tabs-example-tablecheckrow4check-input"
2509
+ >
2510
+ <input
2511
+ class="pf-v6-c-check__input"
2512
+ type="checkbox"
2513
+ id="table-tabs-example-tablecheckrow4check-input"
2514
+ name="table-tabs-example-tablecheckrow4check-input"
2515
+ aria-label="Standalone check"
2516
+ />
2517
+ </label>
2518
+ </td>
2519
+
2520
+ <th
2521
+ class="pf-v6-c-table__th"
2522
+ role="columnheader"
2523
+ data-label="Repository name"
2524
+ >
2525
+ <div>
2526
+ <div id="table-tabs-example-table-node4">Node 4</div>
2527
+ <a href="#">siemur/test-space</a>
2528
+ </div>
2529
+ </th>
2484
2530
 
2485
- <td
2486
- class="pf-v6-c-table__td"
2487
- role="cell"
2488
- data-label="Branches"
2489
- >
2490
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2491
- <div class="pf-v6-l-flex__item">3</div>
2492
- <div class="pf-v6-l-flex__item">
2493
- <i class="fas fa-code-branch"></i>
2531
+ <td
2532
+ class="pf-v6-c-table__td"
2533
+ role="cell"
2534
+ data-label="Branches"
2535
+ >
2536
+ <div
2537
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2538
+ >
2539
+ <div class="pf-v6-l-flex__item">3</div>
2540
+ <div class="pf-v6-l-flex__item">
2541
+ <i class="fas fa-code-branch"></i>
2542
+ </div>
2494
2543
  </div>
2495
- </div>
2496
- </td>
2497
- <td
2498
- class="pf-v6-c-table__td"
2499
- role="cell"
2500
- data-label="Pull requests"
2501
- >
2502
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2503
- <div class="pf-v6-l-flex__item">8</div>
2504
- <div class="pf-v6-l-flex__item">
2505
- <i class="fas fa-code"></i>
2544
+ </td>
2545
+ <td
2546
+ class="pf-v6-c-table__td"
2547
+ role="cell"
2548
+ data-label="Pull requests"
2549
+ >
2550
+ <div
2551
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2552
+ >
2553
+ <div class="pf-v6-l-flex__item">8</div>
2554
+ <div class="pf-v6-l-flex__item">
2555
+ <i class="fas fa-code"></i>
2556
+ </div>
2506
2557
  </div>
2507
- </div>
2508
- </td>
2509
- <td
2510
- class="pf-v6-c-table__td"
2511
- role="cell"
2512
- data-label="Workspaces"
2513
- >
2514
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2515
- <div class="pf-v6-l-flex__item">20</div>
2516
- <div class="pf-v6-l-flex__item">
2517
- <i class="fas fa-cube"></i>
2558
+ </td>
2559
+ <td
2560
+ class="pf-v6-c-table__td"
2561
+ role="cell"
2562
+ data-label="Workspaces"
2563
+ >
2564
+ <div
2565
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2566
+ >
2567
+ <div class="pf-v6-l-flex__item">20</div>
2568
+ <div class="pf-v6-l-flex__item">
2569
+ <i class="fas fa-cube"></i>
2570
+ </div>
2518
2571
  </div>
2519
- </div>
2520
- </td>
2521
- <td
2522
- class="pf-v6-c-table__td"
2523
- role="cell"
2524
- data-label="Last commit"
2525
- >8 days ago</td>
2526
-
2527
- <td
2528
- class="pf-v6-c-table__td pf-v6-c-table__action"
2529
- role="cell"
2530
- >
2531
- <button
2532
- class="pf-v6-c-menu-toggle pf-m-plain"
2533
- type="button"
2534
- aria-expanded="false"
2535
- aria-label="Table actions"
2572
+ </td>
2573
+ <td
2574
+ class="pf-v6-c-table__td"
2575
+ role="cell"
2576
+ data-label="Last commit"
2577
+ >8 days ago</td>
2578
+
2579
+ <td
2580
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2581
+ role="cell"
2536
2582
  >
2537
- <span class="pf-v6-c-menu-toggle__icon">
2538
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2539
- </span>
2540
- </button>
2541
- </td>
2542
- </tr>
2543
-
2544
- <tr class="pf-v6-c-table__tr" role="row">
2545
- <td
2546
- class="pf-v6-c-table__td pf-v6-c-table__check"
2547
- role="cell"
2548
- >
2549
- <label
2550
- class="pf-v6-c-check pf-m-standalone"
2551
- id="table-tabs-example-tablecheckrow5check"
2552
- for="table-tabs-example-tablecheckrow5check-input"
2583
+ <button
2584
+ class="pf-v6-c-menu-toggle pf-m-plain"
2585
+ type="button"
2586
+ aria-expanded="false"
2587
+ aria-label="Table actions"
2588
+ >
2589
+ <span class="pf-v6-c-menu-toggle__icon">
2590
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2591
+ </span>
2592
+ </button>
2593
+ </td>
2594
+ </tr>
2595
+
2596
+ <tr class="pf-v6-c-table__tr" role="row">
2597
+ <td
2598
+ class="pf-v6-c-table__td pf-v6-c-table__check"
2599
+ role="cell"
2553
2600
  >
2554
- <input
2555
- class="pf-v6-c-check__input"
2556
- type="checkbox"
2557
- id="table-tabs-example-tablecheckrow5check-input"
2558
- name="table-tabs-example-tablecheckrow5check-input"
2559
- aria-label="Standalone check"
2560
- />
2561
- </label>
2562
- </td>
2563
- <td
2564
- class="pf-v6-c-table__td"
2565
- role="cell"
2566
- data-label="Repository name"
2567
- >
2568
- <div>
2569
- <div id="table-tabs-example-table-node5">Node 5</div>
2570
- <a href="#">siemur/test-space</a>
2571
- </div>
2572
- </td>
2573
- <td
2574
- class="pf-v6-c-table__td"
2575
- role="cell"
2576
- data-label="Branches"
2577
- >
2578
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2579
- <div class="pf-v6-l-flex__item">34</div>
2580
- <div class="pf-v6-l-flex__item">
2581
- <i class="fas fa-code-branch"></i>
2601
+ <label
2602
+ class="pf-v6-c-check pf-m-standalone"
2603
+ id="table-tabs-example-tablecheckrow5check"
2604
+ for="table-tabs-example-tablecheckrow5check-input"
2605
+ >
2606
+ <input
2607
+ class="pf-v6-c-check__input"
2608
+ type="checkbox"
2609
+ id="table-tabs-example-tablecheckrow5check-input"
2610
+ name="table-tabs-example-tablecheckrow5check-input"
2611
+ aria-label="Standalone check"
2612
+ />
2613
+ </label>
2614
+ </td>
2615
+ <td
2616
+ class="pf-v6-c-table__td"
2617
+ role="cell"
2618
+ data-label="Repository name"
2619
+ >
2620
+ <div>
2621
+ <div id="table-tabs-example-table-node5">Node 5</div>
2622
+ <a href="#">siemur/test-space</a>
2582
2623
  </div>
2583
- </div>
2584
- </td>
2585
- <td
2586
- class="pf-v6-c-table__td"
2587
- role="cell"
2588
- data-label="Pull requests"
2589
- >
2590
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2591
- <div class="pf-v6-l-flex__item">21</div>
2592
- <div class="pf-v6-l-flex__item">
2593
- <i class="fas fa-code"></i>
2624
+ </td>
2625
+ <td
2626
+ class="pf-v6-c-table__td"
2627
+ role="cell"
2628
+ data-label="Branches"
2629
+ >
2630
+ <div
2631
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2632
+ >
2633
+ <div class="pf-v6-l-flex__item">34</div>
2634
+ <div class="pf-v6-l-flex__item">
2635
+ <i class="fas fa-code-branch"></i>
2636
+ </div>
2594
2637
  </div>
2595
- </div>
2596
- </td>
2597
- <td
2598
- class="pf-v6-c-table__td"
2599
- role="cell"
2600
- data-label="Workspaces"
2601
- >
2602
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
2603
- <div class="pf-v6-l-flex__item">26</div>
2604
- <div class="pf-v6-l-flex__item">
2605
- <i class="fas fa-cube"></i>
2638
+ </td>
2639
+ <td
2640
+ class="pf-v6-c-table__td"
2641
+ role="cell"
2642
+ data-label="Pull requests"
2643
+ >
2644
+ <div
2645
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2646
+ >
2647
+ <div class="pf-v6-l-flex__item">21</div>
2648
+ <div class="pf-v6-l-flex__item">
2649
+ <i class="fas fa-code"></i>
2650
+ </div>
2606
2651
  </div>
2607
- </div>
2608
- </td>
2609
- <td
2610
- class="pf-v6-c-table__td"
2611
- role="cell"
2612
- data-label="Last commit"
2613
- >2 days ago</td>
2614
-
2615
- <td
2616
- class="pf-v6-c-table__td pf-v6-c-table__action"
2617
- role="cell"
2618
- >
2652
+ </td>
2653
+ <td
2654
+ class="pf-v6-c-table__td"
2655
+ role="cell"
2656
+ data-label="Workspaces"
2657
+ >
2658
+ <div
2659
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap"
2660
+ >
2661
+ <div class="pf-v6-l-flex__item">26</div>
2662
+ <div class="pf-v6-l-flex__item">
2663
+ <i class="fas fa-cube"></i>
2664
+ </div>
2665
+ </div>
2666
+ </td>
2667
+ <td
2668
+ class="pf-v6-c-table__td"
2669
+ role="cell"
2670
+ data-label="Last commit"
2671
+ >2 days ago</td>
2672
+
2673
+ <td
2674
+ class="pf-v6-c-table__td pf-v6-c-table__action"
2675
+ role="cell"
2676
+ >
2677
+ <button
2678
+ class="pf-v6-c-menu-toggle pf-m-plain"
2679
+ type="button"
2680
+ aria-expanded="false"
2681
+ aria-label="Table actions"
2682
+ >
2683
+ <span class="pf-v6-c-menu-toggle__icon">
2684
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2685
+ </span>
2686
+ </button>
2687
+ </td>
2688
+ </tr>
2689
+ </tbody>
2690
+ </table>
2691
+ </div>
2692
+ </div>
2693
+
2694
+ <!-- Panel -->
2695
+ <div
2696
+ class="pf-v6-c-drawer__panel pf-m-width-33 pf-m-width-33-on-xl"
2697
+ >
2698
+ <div class="pf-v6-c-drawer__body">
2699
+ <div class="pf-v6-c-drawer__head">
2700
+ <div class="pf-v6-c-drawer__actions">
2701
+ <div class="pf-v6-c-drawer__close">
2619
2702
  <button
2620
- class="pf-v6-c-menu-toggle pf-m-plain"
2703
+ class="pf-v6-c-button pf-m-plain"
2621
2704
  type="button"
2622
- aria-expanded="false"
2623
- aria-label="Table actions"
2705
+ aria-label="Close drawer panel"
2624
2706
  >
2625
- <span class="pf-v6-c-menu-toggle__icon">
2626
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
2627
- </span>
2707
+ <i class="fas fa-times" aria-hidden="true"></i>
2628
2708
  </button>
2629
- </td>
2630
- </tr>
2631
- </tbody>
2632
- </table>
2633
- </div>
2634
- </div>
2635
-
2636
- <!-- Panel -->
2637
- <div class="pf-v6-c-drawer__panel pf-m-width-33 pf-m-width-33-on-xl">
2638
- <div class="pf-v6-c-drawer__body">
2639
- <div class="pf-v6-c-drawer__head">
2640
- <div class="pf-v6-c-drawer__actions">
2641
- <div class="pf-v6-c-drawer__close">
2642
- <button
2643
- class="pf-v6-c-button pf-m-plain"
2644
- type="button"
2645
- aria-label="Close drawer panel"
2646
- >
2647
- <i class="fas fa-times" aria-hidden="true"></i>
2648
- </button>
2649
- </div>
2650
- </div>
2651
- <div class="pf-v6-l-flex pf-m-column pf-m-space-items-sm">
2652
- <div class="pf-v6-l-flex__item">
2653
- <h2 class="pf-v6-c-title pf-m-lg" id="-drawer-label">Node 2</h2>
2709
+ </div>
2654
2710
  </div>
2655
- <div class="pf-v6-l-flex__item">
2656
- <a href="#">siemur/test-space</a>
2711
+ <div class="pf-v6-l-flex pf-m-column pf-m-space-items-sm">
2712
+ <div class="pf-v6-l-flex__item">
2713
+ <h2
2714
+ class="pf-v6-c-title pf-m-lg"
2715
+ id="-drawer-label"
2716
+ >Node 2</h2>
2717
+ </div>
2718
+ <div class="pf-v6-l-flex__item">
2719
+ <a href="#">siemur/test-space</a>
2720
+ </div>
2657
2721
  </div>
2658
2722
  </div>
2659
2723
  </div>
2660
- </div>
2661
- <div class="pf-v6-c-drawer__body pf-m-no-padding">
2662
- <div
2663
- class="pf-v6-c-tabs pf-m-box pf-m-fill"
2664
- role="region"
2665
- id="-tabs"
2666
- >
2667
- <div class="pf-v6-c-tabs__scroll-button">
2668
- <button
2669
- class="pf-v6-c-button pf-m-plain"
2670
- type="button"
2671
- aria-label="Scroll left"
2672
- >
2673
- <i class="fas fa-angle-left" aria-hidden="true"></i>
2674
- </button>
2675
- </div>
2676
- <ul class="pf-v6-c-tabs__list" role="tablist">
2677
- <li
2678
- class="pf-v6-c-tabs__item pf-m-current"
2679
- role="presentation"
2680
- >
2724
+ <div class="pf-v6-c-drawer__body pf-m-no-padding">
2725
+ <div
2726
+ class="pf-v6-c-tabs pf-m-box pf-m-fill"
2727
+ role="region"
2728
+ id="-tabs"
2729
+ >
2730
+ <div class="pf-v6-c-tabs__scroll-button">
2681
2731
  <button
2732
+ class="pf-v6-c-button pf-m-plain"
2682
2733
  type="button"
2683
- class="pf-v6-c-tabs__link"
2684
- role="tab"
2685
- aria-controls="-tabs-tab1-panel"
2686
- id="-tabs-tab1-link"
2734
+ aria-label="Scroll left"
2687
2735
  >
2688
- <span class="pf-v6-c-tabs__item-text">Overview</span>
2736
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2689
2737
  </button>
2690
- </li>
2691
- <li class="pf-v6-c-tabs__item" role="presentation">
2738
+ </div>
2739
+ <ul class="pf-v6-c-tabs__list" role="tablist">
2740
+ <li
2741
+ class="pf-v6-c-tabs__item pf-m-current"
2742
+ role="presentation"
2743
+ >
2744
+ <button
2745
+ type="button"
2746
+ class="pf-v6-c-tabs__link"
2747
+ role="tab"
2748
+ aria-controls="-tabs-tab1-panel"
2749
+ id="-tabs-tab1-link"
2750
+ >
2751
+ <span class="pf-v6-c-tabs__item-text">Overview</span>
2752
+ </button>
2753
+ </li>
2754
+ <li class="pf-v6-c-tabs__item" role="presentation">
2755
+ <button
2756
+ type="button"
2757
+ class="pf-v6-c-tabs__link"
2758
+ role="tab"
2759
+ aria-controls="-tabs-tab2-panel"
2760
+ id="-tabs-tab2-link"
2761
+ >
2762
+ <span class="pf-v6-c-tabs__item-text">Activity</span>
2763
+ </button>
2764
+ </li>
2765
+ </ul>
2766
+ <div class="pf-v6-c-tabs__scroll-button">
2692
2767
  <button
2768
+ class="pf-v6-c-button pf-m-plain"
2693
2769
  type="button"
2694
- class="pf-v6-c-tabs__link"
2695
- role="tab"
2696
- aria-controls="-tabs-tab2-panel"
2697
- id="-tabs-tab2-link"
2770
+ aria-label="Scroll right"
2698
2771
  >
2699
- <span class="pf-v6-c-tabs__item-text">Activity</span>
2772
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2700
2773
  </button>
2701
- </li>
2702
- </ul>
2703
- <div class="pf-v6-c-tabs__scroll-button">
2704
- <button
2705
- class="pf-v6-c-button pf-m-plain"
2706
- type="button"
2707
- aria-label="Scroll right"
2708
- >
2709
- <i class="fas fa-angle-right" aria-hidden="true"></i>
2710
- </button>
2774
+ </div>
2711
2775
  </div>
2712
2776
  </div>
2713
- </div>
2714
- <div class="pf-v6-c-drawer__body">
2715
- <section
2716
- class="pf-v6-c-tab-content"
2717
- id="-tabs-tab1-panel"
2718
- aria-labelledby="-tabs-tab1-link"
2719
- role="tabpanel"
2720
- tabindex="0"
2721
- >
2722
- <div class="pf-v6-c-tab-content__body">
2723
- <div class="pf-v6-l-flex pf-m-column pf-m-space-items-lg">
2724
- <div class="pf-v6-l-flex__item">
2725
- <p>The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.</p>
2726
- </div>
2727
- <div class="pf-v6-l-flex__item">
2728
- <div
2729
- class="pf-v6-c-progress pf-m-sm"
2730
- id="-progress-example1"
2731
- >
2732
- <div
2733
- class="pf-v6-c-progress__description"
2734
- id="-progress-example1-description"
2735
- >Capacity</div>
2736
- <div
2737
- class="pf-v6-c-progress__status"
2738
- aria-hidden="true"
2739
- >
2740
- <span class="pf-v6-c-progress__measure">33%</span>
2741
- </div>
2777
+ <div class="pf-v6-c-drawer__body">
2778
+ <section
2779
+ class="pf-v6-c-tab-content"
2780
+ id="-tabs-tab1-panel"
2781
+ aria-labelledby="-tabs-tab1-link"
2782
+ role="tabpanel"
2783
+ tabindex="0"
2784
+ >
2785
+ <div class="pf-v6-c-tab-content__body">
2786
+ <div class="pf-v6-l-flex pf-m-column pf-m-space-items-lg">
2787
+ <div class="pf-v6-l-flex__item">
2788
+ <p>The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.</p>
2789
+ </div>
2790
+ <div class="pf-v6-l-flex__item">
2742
2791
  <div
2743
- class="pf-v6-c-progress__bar"
2744
- role="progressbar"
2745
- aria-valuemin="0"
2746
- aria-valuemax="100"
2747
- aria-valuenow="33"
2748
- aria-labelledby="-progress-example1-description"
2749
- aria-label="Progress 1"
2792
+ class="pf-v6-c-progress pf-m-sm"
2793
+ id="-progress-example1"
2750
2794
  >
2751
2795
  <div
2752
- class="pf-v6-c-progress__indicator"
2753
- style="width:33%;"
2754
- ></div>
2796
+ class="pf-v6-c-progress__description"
2797
+ id="-progress-example1-description"
2798
+ >Capacity</div>
2799
+ <div
2800
+ class="pf-v6-c-progress__status"
2801
+ aria-hidden="true"
2802
+ >
2803
+ <span class="pf-v6-c-progress__measure">33%</span>
2804
+ </div>
2805
+ <div
2806
+ class="pf-v6-c-progress__bar"
2807
+ role="progressbar"
2808
+ aria-valuemin="0"
2809
+ aria-valuemax="100"
2810
+ aria-valuenow="33"
2811
+ aria-labelledby="-progress-example1-description"
2812
+ aria-label="Progress 1"
2813
+ >
2814
+ <div
2815
+ class="pf-v6-c-progress__indicator"
2816
+ style="width:33%;"
2817
+ ></div>
2818
+ </div>
2755
2819
  </div>
2756
2820
  </div>
2757
- </div>
2758
- <div class="pf-v6-l-flex__item">
2759
- <div
2760
- class="pf-v6-c-progress pf-m-sm"
2761
- id="-progress-example2"
2762
- >
2763
- <div
2764
- class="pf-v6-c-progress__description"
2765
- id="-progress-example2-description"
2766
- >Modules</div>
2767
- <div
2768
- class="pf-v6-c-progress__status"
2769
- aria-hidden="true"
2770
- >
2771
- <span class="pf-v6-c-progress__measure">66%</span>
2772
- </div>
2821
+ <div class="pf-v6-l-flex__item">
2773
2822
  <div
2774
- class="pf-v6-c-progress__bar"
2775
- role="progressbar"
2776
- aria-valuemin="0"
2777
- aria-valuemax="100"
2778
- aria-valuenow="66"
2779
- aria-labelledby="-progress-example2-description"
2780
- aria-label="Progress 2"
2823
+ class="pf-v6-c-progress pf-m-sm"
2824
+ id="-progress-example2"
2781
2825
  >
2782
2826
  <div
2783
- class="pf-v6-c-progress__indicator"
2784
- style="width:66%;"
2785
- ></div>
2827
+ class="pf-v6-c-progress__description"
2828
+ id="-progress-example2-description"
2829
+ >Modules</div>
2830
+ <div
2831
+ class="pf-v6-c-progress__status"
2832
+ aria-hidden="true"
2833
+ >
2834
+ <span class="pf-v6-c-progress__measure">66%</span>
2835
+ </div>
2836
+ <div
2837
+ class="pf-v6-c-progress__bar"
2838
+ role="progressbar"
2839
+ aria-valuemin="0"
2840
+ aria-valuemax="100"
2841
+ aria-valuenow="66"
2842
+ aria-labelledby="-progress-example2-description"
2843
+ aria-label="Progress 2"
2844
+ >
2845
+ <div
2846
+ class="pf-v6-c-progress__indicator"
2847
+ style="width:66%;"
2848
+ ></div>
2849
+ </div>
2786
2850
  </div>
2787
2851
  </div>
2788
- </div>
2789
- <div class="pf-v6-l-flex pf-m-column">
2790
- <div class="pf-v6-l-flex__item">
2791
- <h3 class="pf-v6-c-title" id="-title">Tags</h3>
2792
- </div>
2793
- <div class="pf-v6-l-flex__item">
2794
- <div class="pf-v6-c-label-group">
2795
- <div class="pf-v6-c-label-group__main">
2796
- <ul
2797
- class="pf-v6-c-label-group__list"
2798
- role="list"
2799
- aria-label="Group of labels"
2800
- >
2801
- <li class="pf-v6-c-label-group__list-item">
2802
- <span class="pf-v6-c-label pf-m-outline">
2803
- <span class="pf-v6-c-label__content">
2804
- <span class="pf-v6-c-label__text">Tag 1</span>
2805
- </span>
2806
- </span>
2807
- </li>
2808
- <li class="pf-v6-c-label-group__list-item">
2809
- <span class="pf-v6-c-label pf-m-outline">
2810
- <span class="pf-v6-c-label__content">
2811
- <span class="pf-v6-c-label__text">Tag 2</span>
2852
+ <div class="pf-v6-l-flex pf-m-column">
2853
+ <div class="pf-v6-l-flex__item">
2854
+ <h3 class="pf-v6-c-title" id="-title">Tags</h3>
2855
+ </div>
2856
+ <div class="pf-v6-l-flex__item">
2857
+ <div class="pf-v6-c-label-group">
2858
+ <div class="pf-v6-c-label-group__main">
2859
+ <ul
2860
+ class="pf-v6-c-label-group__list"
2861
+ role="list"
2862
+ aria-label="Group of labels"
2863
+ >
2864
+ <li class="pf-v6-c-label-group__list-item">
2865
+ <span class="pf-v6-c-label pf-m-outline">
2866
+ <span class="pf-v6-c-label__content">
2867
+ <span class="pf-v6-c-label__text">Tag 1</span>
2868
+ </span>
2812
2869
  </span>
2813
- </span>
2814
- </li>
2815
- <li class="pf-v6-c-label-group__list-item">
2816
- <span class="pf-v6-c-label pf-m-outline">
2817
- <span class="pf-v6-c-label__content">
2818
- <span class="pf-v6-c-label__text">Tag 3</span>
2870
+ </li>
2871
+ <li class="pf-v6-c-label-group__list-item">
2872
+ <span class="pf-v6-c-label pf-m-outline">
2873
+ <span class="pf-v6-c-label__content">
2874
+ <span class="pf-v6-c-label__text">Tag 2</span>
2875
+ </span>
2819
2876
  </span>
2820
- </span>
2821
- </li>
2822
- <li class="pf-v6-c-label-group__list-item">
2823
- <button
2824
- class="pf-v6-c-label pf-m-overflow"
2825
- type="button"
2826
- >
2827
- <span class="pf-v6-c-label__content">
2828
- <span class="pf-v6-c-label__text">2 more</span>
2877
+ </li>
2878
+ <li class="pf-v6-c-label-group__list-item">
2879
+ <span class="pf-v6-c-label pf-m-outline">
2880
+ <span class="pf-v6-c-label__content">
2881
+ <span class="pf-v6-c-label__text">Tag 3</span>
2882
+ </span>
2829
2883
  </span>
2830
- </button>
2831
- </li>
2832
- </ul>
2884
+ </li>
2885
+ <li class="pf-v6-c-label-group__list-item">
2886
+ <button
2887
+ class="pf-v6-c-label pf-m-overflow"
2888
+ type="button"
2889
+ >
2890
+ <span class="pf-v6-c-label__content">
2891
+ <span class="pf-v6-c-label__text">2 more</span>
2892
+ </span>
2893
+ </button>
2894
+ </li>
2895
+ </ul>
2896
+ </div>
2833
2897
  </div>
2834
2898
  </div>
2835
2899
  </div>
2836
2900
  </div>
2837
2901
  </div>
2838
- </div>
2839
- </section>
2840
- <section
2841
- class="pf-v6-c-tab-content"
2842
- id="-tabs-tab2-panel"
2843
- aria-labelledby="-tabs-tab2-link"
2844
- role="tabpanel"
2845
- tabindex="0"
2846
- hidden
2847
- >
2848
- <div class="pf-v6-c-tab-content__body">Panel 2</div>
2849
- </section>
2902
+ </section>
2903
+ <section
2904
+ class="pf-v6-c-tab-content"
2905
+ id="-tabs-tab2-panel"
2906
+ aria-labelledby="-tabs-tab2-link"
2907
+ role="tabpanel"
2908
+ tabindex="0"
2909
+ hidden
2910
+ >
2911
+ <div class="pf-v6-c-tab-content__body">Panel 2</div>
2912
+ </section>
2913
+ </div>
2850
2914
  </div>
2851
2915
  </div>
2852
2916
  </div>
2853
- </div>
2854
- </section>
2855
- </main>
2917
+ </section>
2918
+ </main>
2919
+ </div>
2856
2920
  </div>
2857
2921
 
2858
2922
  ```
@@ -3182,93 +3246,95 @@ section: components
3182
3246
  </nav>
3183
3247
  </div>
3184
3248
  </div>
3185
- <main
3186
- class="pf-v6-c-page__main"
3187
- tabindex="-1"
3188
- id="main-content-modal-tabs-example"
3189
- >
3190
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3191
- <div class="pf-v6-c-page__main-body">
3192
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3193
- <ol class="pf-v6-c-breadcrumb__list" role="list">
3194
- <li class="pf-v6-c-breadcrumb__item">
3195
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3196
- </li>
3197
- <li class="pf-v6-c-breadcrumb__item">
3198
- <span class="pf-v6-c-breadcrumb__item-divider">
3199
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3200
- </span>
3201
-
3202
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3203
- </li>
3204
- <li class="pf-v6-c-breadcrumb__item">
3205
- <span class="pf-v6-c-breadcrumb__item-divider">
3206
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3207
- </span>
3208
-
3209
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3210
- </li>
3211
- <li class="pf-v6-c-breadcrumb__item">
3212
- <span class="pf-v6-c-breadcrumb__item-divider">
3213
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3214
- </span>
3215
-
3216
- <a
3217
- href="#"
3218
- class="pf-v6-c-breadcrumb__link pf-m-current"
3219
- aria-current="page"
3220
- >Section landing</a>
3221
- </li>
3222
- </ol>
3223
- </nav>
3224
- </div>
3225
- </section>
3226
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3227
- <div class="pf-v6-c-page__main-body">
3228
- <div class="pf-v6-c-content">
3229
- <h1>Main title</h1>
3230
- <p>This is a full page demo.</p>
3249
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3250
+ <main
3251
+ class="pf-v6-c-page__main"
3252
+ tabindex="-1"
3253
+ id="main-content-modal-tabs-example"
3254
+ >
3255
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3256
+ <div class="pf-v6-c-page__main-body">
3257
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3258
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3259
+ <li class="pf-v6-c-breadcrumb__item">
3260
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3261
+ </li>
3262
+ <li class="pf-v6-c-breadcrumb__item">
3263
+ <span class="pf-v6-c-breadcrumb__item-divider">
3264
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3265
+ </span>
3266
+
3267
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3268
+ </li>
3269
+ <li class="pf-v6-c-breadcrumb__item">
3270
+ <span class="pf-v6-c-breadcrumb__item-divider">
3271
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3272
+ </span>
3273
+
3274
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3275
+ </li>
3276
+ <li class="pf-v6-c-breadcrumb__item">
3277
+ <span class="pf-v6-c-breadcrumb__item-divider">
3278
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3279
+ </span>
3280
+
3281
+ <a
3282
+ href="#"
3283
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3284
+ aria-current="page"
3285
+ >Section landing</a>
3286
+ </li>
3287
+ </ol>
3288
+ </nav>
3231
3289
  </div>
3232
- </div>
3233
- </section>
3234
- <section class="pf-v6-c-page__main-section">
3235
- <div class="pf-v6-l-gallery pf-m-gutter">
3236
- <div
3237
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3238
- id="modal-tabs-example-card-1"
3239
- >
3240
- <div class="pf-v6-c-card__title">
3241
- <h2 class="pf-v6-c-card__title-text">PatternFly</h2>
3290
+ </section>
3291
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3292
+ <div class="pf-v6-c-page__main-body">
3293
+ <div class="pf-v6-c-content">
3294
+ <h1>Main title</h1>
3295
+ <p>This is a full page demo.</p>
3242
3296
  </div>
3243
- <div
3244
- class="pf-v6-c-card__body"
3245
- >PatternFly is a community project that promotes design commonality and improves user experience.</div>
3246
3297
  </div>
3247
- <div
3248
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3249
- id="modal-tabs-example-card-2"
3250
- >
3251
- <div class="pf-v6-c-card__title">
3252
- <h2 class="pf-v6-c-card__title-text">ActiveMQ</h2>
3298
+ </section>
3299
+ <section class="pf-v6-c-page__main-section">
3300
+ <div class="pf-v6-l-gallery pf-m-gutter">
3301
+ <div
3302
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3303
+ id="modal-tabs-example-card-1"
3304
+ >
3305
+ <div class="pf-v6-c-card__title">
3306
+ <h2 class="pf-v6-c-card__title-text">PatternFly</h2>
3307
+ </div>
3308
+ <div
3309
+ class="pf-v6-c-card__body"
3310
+ >PatternFly is a community project that promotes design commonality and improves user experience.</div>
3253
3311
  </div>
3254
3312
  <div
3255
- class="pf-v6-c-card__body"
3256
- >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
3257
- </div>
3258
- <div
3259
- class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3260
- id="modal-tabs-example-card-3"
3261
- >
3262
- <div class="pf-v6-c-card__title">
3263
- <h2 class="pf-v6-c-card__title-text">Apache Spark</h2>
3313
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3314
+ id="modal-tabs-example-card-2"
3315
+ >
3316
+ <div class="pf-v6-c-card__title">
3317
+ <h2 class="pf-v6-c-card__title-text">ActiveMQ</h2>
3318
+ </div>
3319
+ <div
3320
+ class="pf-v6-c-card__body"
3321
+ >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
3264
3322
  </div>
3265
3323
  <div
3266
- class="pf-v6-c-card__body"
3267
- >This documentation page covers the Apache Spark component for the Apache Camel.</div>
3324
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3325
+ id="modal-tabs-example-card-3"
3326
+ >
3327
+ <div class="pf-v6-c-card__title">
3328
+ <h2 class="pf-v6-c-card__title-text">Apache Spark</h2>
3329
+ </div>
3330
+ <div
3331
+ class="pf-v6-c-card__body"
3332
+ >This documentation page covers the Apache Spark component for the Apache Camel.</div>
3333
+ </div>
3268
3334
  </div>
3269
- </div>
3270
- </section>
3271
- </main>
3335
+ </section>
3336
+ </main>
3337
+ </div>
3272
3338
  </div>
3273
3339
 
3274
3340
  ```
@@ -3496,280 +3562,282 @@ section: components
3496
3562
  </nav>
3497
3563
  </div>
3498
3564
  </div>
3499
- <main
3500
- class="pf-v6-c-page__main"
3501
- tabindex="-1"
3502
- id="main-content-gray-tabs-example"
3503
- >
3504
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3505
- <div class="pf-v6-c-page__main-body">
3506
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3507
- <ol class="pf-v6-c-breadcrumb__list" role="list">
3508
- <li class="pf-v6-c-breadcrumb__item">
3509
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3510
- </li>
3511
- <li class="pf-v6-c-breadcrumb__item">
3512
- <span class="pf-v6-c-breadcrumb__item-divider">
3513
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3514
- </span>
3515
-
3516
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3517
- </li>
3518
- <li class="pf-v6-c-breadcrumb__item">
3519
- <span class="pf-v6-c-breadcrumb__item-divider">
3520
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3521
- </span>
3522
-
3523
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3524
- </li>
3525
- <li class="pf-v6-c-breadcrumb__item">
3526
- <span class="pf-v6-c-breadcrumb__item-divider">
3527
- <i class="fas fa-angle-right" aria-hidden="true"></i>
3528
- </span>
3529
-
3530
- <a
3531
- href="#"
3532
- class="pf-v6-c-breadcrumb__link pf-m-current"
3533
- aria-current="page"
3534
- >Section landing</a>
3535
- </li>
3536
- </ol>
3537
- </nav>
3538
- </div>
3539
- </section>
3540
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3541
- <div class="pf-v6-c-page__main-body">
3542
- <div class="pf-v6-c-content">
3543
- <h1>Main title</h1>
3544
- <p>This is a full page demo.</p>
3565
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
3566
+ <main
3567
+ class="pf-v6-c-page__main"
3568
+ tabindex="-1"
3569
+ id="main-content-gray-tabs-example"
3570
+ >
3571
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
3572
+ <div class="pf-v6-c-page__main-body">
3573
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
3574
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
3575
+ <li class="pf-v6-c-breadcrumb__item">
3576
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
3577
+ </li>
3578
+ <li class="pf-v6-c-breadcrumb__item">
3579
+ <span class="pf-v6-c-breadcrumb__item-divider">
3580
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3581
+ </span>
3582
+
3583
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3584
+ </li>
3585
+ <li class="pf-v6-c-breadcrumb__item">
3586
+ <span class="pf-v6-c-breadcrumb__item-divider">
3587
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3588
+ </span>
3589
+
3590
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
3591
+ </li>
3592
+ <li class="pf-v6-c-breadcrumb__item">
3593
+ <span class="pf-v6-c-breadcrumb__item-divider">
3594
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3595
+ </span>
3596
+
3597
+ <a
3598
+ href="#"
3599
+ class="pf-v6-c-breadcrumb__link pf-m-current"
3600
+ aria-current="page"
3601
+ >Section landing</a>
3602
+ </li>
3603
+ </ol>
3604
+ </nav>
3545
3605
  </div>
3546
- </div>
3547
- </section>
3548
- <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
3549
- <div class="pf-v6-c-page__main-body">
3550
- <div
3551
- class="pf-v6-c-tabs pf-m-page-insets"
3552
- role="region"
3553
- id="gray-tabs-example-tabs-tabs"
3554
- >
3555
- <ul class="pf-v6-c-tabs__list" role="tablist">
3556
- <li class="pf-v6-c-tabs__item" role="presentation">
3557
- <button
3558
- type="button"
3559
- class="pf-v6-c-tabs__link"
3560
- role="tab"
3561
- aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3562
- id="gray-tabs-example-tabs-tabs-new-link"
3563
- >
3564
- <span class="pf-v6-c-tabs__item-text">What's new</span>
3565
- </button>
3566
- </li>
3567
- <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
3568
- <button
3569
- type="button"
3570
- class="pf-v6-c-tabs__link"
3571
- role="tab"
3572
- aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3573
- id="gray-tabs-example-tabs-tabs-get-started-link"
3574
- >
3575
- <span class="pf-v6-c-tabs__item-text">Get started</span>
3576
- </button>
3577
- </li>
3578
- <li class="pf-v6-c-tabs__item" role="presentation">
3579
- <button
3580
- type="button"
3581
- class="pf-v6-c-tabs__link"
3582
- role="tab"
3583
- aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3584
- id="gray-tabs-example-tabs-tabs-knowledge-link"
3585
- >
3586
- <span class="pf-v6-c-tabs__item-text">Knowledge</span>
3587
- </button>
3588
- </li>
3589
- <li class="pf-v6-c-tabs__item" role="presentation">
3590
- <button
3591
- type="button"
3592
- class="pf-v6-c-tabs__link"
3593
- role="tab"
3594
- aria-controls="gray-tabs-example-tabs-tabs-support-panel"
3595
- id="gray-tabs-example-tabs-tabs-support-link"
3596
- >
3597
- <span class="pf-v6-c-tabs__item-text">Support</span>
3598
- </button>
3599
- </li>
3600
- </ul>
3606
+ </section>
3607
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3608
+ <div class="pf-v6-c-page__main-body">
3609
+ <div class="pf-v6-c-content">
3610
+ <h1>Main title</h1>
3611
+ <p>This is a full page demo.</p>
3612
+ </div>
3601
3613
  </div>
3602
- </div>
3603
- </section>
3604
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3605
- <div class="pf-v6-c-page__main-body">
3606
- <section
3607
- class="pf-v6-c-tab-content"
3608
- aria-labelledby="gray-tabs-example-tabs-tabs-new-link"
3609
- id="gray-tabs-example-tabs-tabs-new-panel"
3610
- role="tabpanel"
3611
- tabindex="0"
3612
- hidden
3613
- >
3614
- <div class="pf-v6-c-tab-content__body">What's new content</div>
3615
- </section>
3616
- <section
3617
- class="pf-v6-c-tab-content"
3618
- aria-labelledby="gray-tabs-example-tabs-tabs-get-started-link"
3619
- id="gray-tabs-example-tabs-tabs-get-started-panel"
3620
- role="tabpanel"
3621
- tabindex="0"
3622
- >
3623
- <div class="pf-v6-c-tab-content__body">
3624
- <div class="pf-v6-l-grid pf-m-gutter">
3625
- <div class="pf-v6-l-grid__item">
3626
- <h1
3627
- class="pf-v6-c-title pf-m-lg"
3628
- >Get started with Red Hat Enterprise Linux</h1>
3629
- </div>
3630
- <div class="pf-v6-l-grid__item">
3631
- <div
3632
- class="pf-v6-c-tabs pf-m-inset-none"
3633
- role="region"
3634
- id="gray-tabs-example-tabs-subtabs"
3614
+ </section>
3615
+ <section class="pf-v6-c-page__main-tabs pf-m-limit-width">
3616
+ <div class="pf-v6-c-page__main-body">
3617
+ <div
3618
+ class="pf-v6-c-tabs pf-m-page-insets"
3619
+ role="region"
3620
+ id="gray-tabs-example-tabs-tabs"
3621
+ >
3622
+ <ul class="pf-v6-c-tabs__list" role="tablist">
3623
+ <li class="pf-v6-c-tabs__item" role="presentation">
3624
+ <button
3625
+ type="button"
3626
+ class="pf-v6-c-tabs__link"
3627
+ role="tab"
3628
+ aria-controls="gray-tabs-example-tabs-tabs-new-panel"
3629
+ id="gray-tabs-example-tabs-tabs-new-link"
3635
3630
  >
3636
- <ul class="pf-v6-c-tabs__list" role="tablist">
3637
- <li
3638
- class="pf-v6-c-tabs__item pf-m-current"
3639
- role="presentation"
3640
- >
3641
- <button
3642
- type="button"
3643
- class="pf-v6-c-tabs__link"
3644
- role="tab"
3645
- aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
3646
- id="gray-tabs-example-tabs-subtabs-x86-link"
3647
- >
3648
- <span class="pf-v6-c-tabs__item-text">x86 architecture</span>
3649
- </button>
3650
- </li>
3651
- <li class="pf-v6-c-tabs__item" role="presentation">
3652
- <button
3653
- type="button"
3654
- class="pf-v6-c-tabs__link"
3655
- role="tab"
3656
- aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3657
- id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3658
- >
3659
- <span
3660
- class="pf-v6-c-tabs__item-text"
3661
- >Additional Architectures</span>
3662
- </button>
3663
- </li>
3664
- </ul>
3665
- </div>
3666
- </div>
3667
- <div class="pf-v6-l-grid__item">
3668
- <section
3669
- class="pf-v6-c-tab-content"
3670
- aria-labelledby="gray-tabs-example-tabs-subtabs-x86-link"
3671
- id="gray-tabs-example-tabs-subtabs-x86-panel"
3672
- role="tabpanel"
3673
- tabindex="0"
3631
+ <span class="pf-v6-c-tabs__item-text">What's new</span>
3632
+ </button>
3633
+ </li>
3634
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
3635
+ <button
3636
+ type="button"
3637
+ class="pf-v6-c-tabs__link"
3638
+ role="tab"
3639
+ aria-controls="gray-tabs-example-tabs-tabs-get-started-panel"
3640
+ id="gray-tabs-example-tabs-tabs-get-started-link"
3674
3641
  >
3675
- <div class="pf-v6-c-tab-content__body">
3676
- <div class="pf-v6-l-grid pf-m-gutter">
3677
- <div class="pf-v6-l-grid__item">
3678
- <div class="pf-v6-c-content">
3679
- <p>To perform a standard x86_64 installation using the GUI, you'll need to:</p>
3680
- </div>
3681
- </div>
3682
- <div
3683
- class="pf-v6-l-grid pf-m-all-6-col-on-md pf-m-all-3-col-on-2xl pf-m-gutter"
3642
+ <span class="pf-v6-c-tabs__item-text">Get started</span>
3643
+ </button>
3644
+ </li>
3645
+ <li class="pf-v6-c-tabs__item" role="presentation">
3646
+ <button
3647
+ type="button"
3648
+ class="pf-v6-c-tabs__link"
3649
+ role="tab"
3650
+ aria-controls="gray-tabs-example-tabs-tabs-knowledge-panel"
3651
+ id="gray-tabs-example-tabs-tabs-knowledge-link"
3652
+ >
3653
+ <span class="pf-v6-c-tabs__item-text">Knowledge</span>
3654
+ </button>
3655
+ </li>
3656
+ <li class="pf-v6-c-tabs__item" role="presentation">
3657
+ <button
3658
+ type="button"
3659
+ class="pf-v6-c-tabs__link"
3660
+ role="tab"
3661
+ aria-controls="gray-tabs-example-tabs-tabs-support-panel"
3662
+ id="gray-tabs-example-tabs-tabs-support-link"
3663
+ >
3664
+ <span class="pf-v6-c-tabs__item-text">Support</span>
3665
+ </button>
3666
+ </li>
3667
+ </ul>
3668
+ </div>
3669
+ </div>
3670
+ </section>
3671
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
3672
+ <div class="pf-v6-c-page__main-body">
3673
+ <section
3674
+ class="pf-v6-c-tab-content"
3675
+ aria-labelledby="gray-tabs-example-tabs-tabs-new-link"
3676
+ id="gray-tabs-example-tabs-tabs-new-panel"
3677
+ role="tabpanel"
3678
+ tabindex="0"
3679
+ hidden
3680
+ >
3681
+ <div class="pf-v6-c-tab-content__body">What's new content</div>
3682
+ </section>
3683
+ <section
3684
+ class="pf-v6-c-tab-content"
3685
+ aria-labelledby="gray-tabs-example-tabs-tabs-get-started-link"
3686
+ id="gray-tabs-example-tabs-tabs-get-started-panel"
3687
+ role="tabpanel"
3688
+ tabindex="0"
3689
+ >
3690
+ <div class="pf-v6-c-tab-content__body">
3691
+ <div class="pf-v6-l-grid pf-m-gutter">
3692
+ <div class="pf-v6-l-grid__item">
3693
+ <h1
3694
+ class="pf-v6-c-title pf-m-lg"
3695
+ >Get started with Red Hat Enterprise Linux</h1>
3696
+ </div>
3697
+ <div class="pf-v6-l-grid__item">
3698
+ <div
3699
+ class="pf-v6-c-tabs pf-m-inset-none"
3700
+ role="region"
3701
+ id="gray-tabs-example-tabs-subtabs"
3702
+ >
3703
+ <ul class="pf-v6-c-tabs__list" role="tablist">
3704
+ <li
3705
+ class="pf-v6-c-tabs__item pf-m-current"
3706
+ role="presentation"
3684
3707
  >
3685
- <div class="pf-v6-c-card pf-m-flat">
3686
- <div class="pf-v6-c-card__title">
3687
- <h2
3688
- class="pf-v6-c-card__title-text"
3689
- >Check system requirements</h2>
3690
- </div>
3691
- <div class="pf-v6-c-card__body">
3692
- <p>
3693
- Your physical or virtual machine should meet the
3694
- <a href="#">system requirement</a>.
3695
- </p>
3708
+ <button
3709
+ type="button"
3710
+ class="pf-v6-c-tabs__link"
3711
+ role="tab"
3712
+ aria-controls="gray-tabs-example-tabs-subtabs-x86-panel"
3713
+ id="gray-tabs-example-tabs-subtabs-x86-link"
3714
+ >
3715
+ <span class="pf-v6-c-tabs__item-text">x86 architecture</span>
3716
+ </button>
3717
+ </li>
3718
+ <li class="pf-v6-c-tabs__item" role="presentation">
3719
+ <button
3720
+ type="button"
3721
+ class="pf-v6-c-tabs__link"
3722
+ role="tab"
3723
+ aria-controls="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3724
+ id="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3725
+ >
3726
+ <span
3727
+ class="pf-v6-c-tabs__item-text"
3728
+ >Additional Architectures</span>
3729
+ </button>
3730
+ </li>
3731
+ </ul>
3732
+ </div>
3733
+ </div>
3734
+ <div class="pf-v6-l-grid__item">
3735
+ <section
3736
+ class="pf-v6-c-tab-content"
3737
+ aria-labelledby="gray-tabs-example-tabs-subtabs-x86-link"
3738
+ id="gray-tabs-example-tabs-subtabs-x86-panel"
3739
+ role="tabpanel"
3740
+ tabindex="0"
3741
+ >
3742
+ <div class="pf-v6-c-tab-content__body">
3743
+ <div class="pf-v6-l-grid pf-m-gutter">
3744
+ <div class="pf-v6-l-grid__item">
3745
+ <div class="pf-v6-c-content">
3746
+ <p>To perform a standard x86_64 installation using the GUI, you'll need to:</p>
3696
3747
  </div>
3697
3748
  </div>
3698
- <div class="pf-v6-c-card pf-m-flat">
3699
- <div class="pf-v6-c-card__title">
3700
- <h2
3701
- class="pf-v6-c-card__title-text"
3702
- >Download an installation ISO image</h2>
3703
- </div>
3704
- <div class="pf-v6-c-card__body">
3705
- <p>
3706
- <a href="#">Download</a>&nbsp;the binary DVD ISO.
3707
- </p>
3749
+ <div
3750
+ class="pf-v6-l-grid pf-m-all-6-col-on-md pf-m-all-3-col-on-2xl pf-m-gutter"
3751
+ >
3752
+ <div class="pf-v6-c-card pf-m-flat">
3753
+ <div class="pf-v6-c-card__title">
3754
+ <h2
3755
+ class="pf-v6-c-card__title-text"
3756
+ >Check system requirements</h2>
3757
+ </div>
3758
+ <div class="pf-v6-c-card__body">
3759
+ <p>
3760
+ Your physical or virtual machine should meet the
3761
+ <a href="#">system requirement</a>.
3762
+ </p>
3763
+ </div>
3708
3764
  </div>
3709
- </div>
3710
- <div class="pf-v6-c-card pf-m-flat">
3711
- <div class="pf-v6-c-card__title">
3712
- <h2
3713
- class="pf-v6-c-card__title-text"
3714
- >Create a bootable installation media</h2>
3765
+ <div class="pf-v6-c-card pf-m-flat">
3766
+ <div class="pf-v6-c-card__title">
3767
+ <h2
3768
+ class="pf-v6-c-card__title-text"
3769
+ >Download an installation ISO image</h2>
3770
+ </div>
3771
+ <div class="pf-v6-c-card__body">
3772
+ <p>
3773
+ <a href="#">Download</a>&nbsp;the binary DVD ISO.
3774
+ </p>
3775
+ </div>
3715
3776
  </div>
3716
- <div class="pf-v6-c-card__body">
3717
- <p>
3718
- <a href="#">Create</a>&nbsp;a bootable installation media, for example a USB flash drive.
3719
- </p>
3777
+ <div class="pf-v6-c-card pf-m-flat">
3778
+ <div class="pf-v6-c-card__title">
3779
+ <h2
3780
+ class="pf-v6-c-card__title-text"
3781
+ >Create a bootable installation media</h2>
3782
+ </div>
3783
+ <div class="pf-v6-c-card__body">
3784
+ <p>
3785
+ <a href="#">Create</a>&nbsp;a bootable installation media, for example a USB flash drive.
3786
+ </p>
3787
+ </div>
3720
3788
  </div>
3721
3789
  </div>
3722
3790
  </div>
3723
3791
  </div>
3724
- </div>
3725
- </section>
3726
- <section
3727
- class="pf-v6-c-tab-content"
3728
- aria-labelledby="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3729
- id="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3730
- role="tabpanel"
3731
- tabindex="0"
3732
- hidden
3733
- >
3734
- <div class="pf-v6-c-tab-content__body">
3735
- <p>Additional architectural content</p>
3736
- </div>
3737
- </section>
3792
+ </section>
3793
+ <section
3794
+ class="pf-v6-c-tab-content"
3795
+ aria-labelledby="gray-tabs-example-tabs-subtabs-additional-architectures-link"
3796
+ id="gray-tabs-example-tabs-subtabs-additional-architectures-panel"
3797
+ role="tabpanel"
3798
+ tabindex="0"
3799
+ hidden
3800
+ >
3801
+ <div class="pf-v6-c-tab-content__body">
3802
+ <p>Additional architectural content</p>
3803
+ </div>
3804
+ </section>
3805
+ </div>
3738
3806
  </div>
3739
3807
  </div>
3740
- </div>
3741
- </section>
3742
- <section
3743
- class="pf-v6-c-tab-content"
3744
- aria-labelledby="gray-tabs-example-tabs-tabs-knowledge-link"
3745
- id="gray-tabs-example-tabs-tabs-knowledge-panel"
3746
- role="tabpanel"
3747
- tabindex="0"
3748
- hidden
3749
- >
3750
- <div class="pf-v6-c-tab-content__body">
3751
- <div class="pf-v6-c-content">
3752
- <p>Knowledge content</p>
3808
+ </section>
3809
+ <section
3810
+ class="pf-v6-c-tab-content"
3811
+ aria-labelledby="gray-tabs-example-tabs-tabs-knowledge-link"
3812
+ id="gray-tabs-example-tabs-tabs-knowledge-panel"
3813
+ role="tabpanel"
3814
+ tabindex="0"
3815
+ hidden
3816
+ >
3817
+ <div class="pf-v6-c-tab-content__body">
3818
+ <div class="pf-v6-c-content">
3819
+ <p>Knowledge content</p>
3820
+ </div>
3753
3821
  </div>
3754
- </div>
3755
- </section>
3756
- <section
3757
- class="pf-v6-c-tab-content"
3758
- aria-labelledby="gray-tabs-example-tabs-tabs-support-link"
3759
- id="gray-tabs-example-tabs-tabs-support-panel"
3760
- role="tabpanel"
3761
- tabindex="0"
3762
- hidden
3763
- >
3764
- <div class="pf-v6-c-tab-content__body">
3765
- <div class="pf-v6-c-content">
3766
- <p>Support content</p>
3822
+ </section>
3823
+ <section
3824
+ class="pf-v6-c-tab-content"
3825
+ aria-labelledby="gray-tabs-example-tabs-tabs-support-link"
3826
+ id="gray-tabs-example-tabs-tabs-support-panel"
3827
+ role="tabpanel"
3828
+ tabindex="0"
3829
+ hidden
3830
+ >
3831
+ <div class="pf-v6-c-tab-content__body">
3832
+ <div class="pf-v6-c-content">
3833
+ <p>Support content</p>
3834
+ </div>
3767
3835
  </div>
3768
- </div>
3769
- </section>
3770
- </div>
3771
- </section>
3772
- </main>
3836
+ </section>
3837
+ </div>
3838
+ </section>
3839
+ </main>
3840
+ </div>
3773
3841
  </div>
3774
3842
 
3775
3843
  ```