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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/base/patternfly-variables.css +22 -19
  2. package/base/tokens/_tokens-charts.scss +6 -6
  3. package/base/tokens/_tokens-dark.scss +4 -3
  4. package/base/tokens/_tokens-default.scss +20 -18
  5. package/base/tokens/_tokens-palette.scss +1 -1
  6. package/components/Drawer/drawer.css +5 -4
  7. package/components/Drawer/drawer.scss +7 -6
  8. package/components/FormControl/form-control.scss +1 -1
  9. package/components/MenuToggle/menu-toggle.css +24 -0
  10. package/components/MenuToggle/menu-toggle.scss +36 -0
  11. package/components/Page/page.css +24 -23
  12. package/components/Page/page.scss +24 -23
  13. package/docs/components/Drawer/examples/Drawer.md +2 -1
  14. package/docs/components/MenuToggle/examples/MenuToggle.md +64 -0
  15. package/docs/components/Page/deprecated/PageHeader.md +113 -99
  16. package/docs/components/Page/examples/Page.md +114 -100
  17. package/docs/demos/AboutModal/examples/AboutModal.md +81 -79
  18. package/docs/demos/Alert/examples/Alert.md +551 -524
  19. package/docs/demos/BackToTop/examples/BackToTop.md +211 -209
  20. package/docs/demos/Banner/examples/Banner.md +420 -412
  21. package/docs/demos/CardView/examples/CardView.md +1302 -1297
  22. package/docs/demos/ContextSelector/examples/ContextSelector.md +536 -523
  23. package/docs/demos/Dashboard/examples/Dashboard.md +1344 -1314
  24. package/docs/demos/DataList/examples/DataList.md +3006 -2958
  25. package/docs/demos/DescriptionList/examples/DescriptionList.md +532 -518
  26. package/docs/demos/Drawer/examples/Drawer.md +544 -528
  27. package/docs/demos/JumpLinks/examples/JumpLinks.md +915 -897
  28. package/docs/demos/Masthead/examples/Masthead.md +729 -711
  29. package/docs/demos/Modal/examples/Modal.md +486 -474
  30. package/docs/demos/Nav/examples/Nav.md +528 -510
  31. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +440 -435
  32. package/docs/demos/Page/examples/Page.md +1656 -1633
  33. package/docs/demos/Page/examples/Penta.md +632 -577
  34. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5222 -5080
  35. package/docs/demos/Skeleton/examples/Skeleton.md +177 -175
  36. package/docs/demos/Table/examples/Table.md +14137 -13972
  37. package/docs/demos/Tabs/examples/Tabs.md +2206 -2138
  38. package/docs/demos/Toolbar/examples/Toolbar.md +1322 -1269
  39. package/docs/demos/Wizard/examples/Wizard.md +1571 -1553
  40. package/package.json +1 -1
  41. package/patternfly-base-no-globals-theme-dark-unversioned.css +22 -19
  42. package/patternfly-base-no-globals.css +22 -19
  43. package/patternfly-base-theme-dark-unversioned.css +22 -19
  44. package/patternfly-base.css +22 -19
  45. package/patternfly-no-globals.css +75 -46
  46. package/patternfly-theme-dark-unversioned.css +75 -46
  47. package/patternfly.css +75 -46
  48. package/patternfly.min.css +1 -1
  49. package/patternfly.min.css.map +1 -1
@@ -227,867 +227,888 @@ cssPrefix: pf-d-dashboard
227
227
  </nav>
228
228
  </div>
229
229
  </div>
230
- <main
231
- class="pf-v6-c-page__main"
232
- tabindex="-1"
233
- id="main-content-dashboard-demo"
234
- >
235
- <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
236
- <div class="pf-v6-c-page__main-body">
237
- <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
238
- <ol class="pf-v6-c-breadcrumb__list" role="list">
239
- <li class="pf-v6-c-breadcrumb__item">
240
- <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
241
- </li>
242
- <li class="pf-v6-c-breadcrumb__item">
243
- <span class="pf-v6-c-breadcrumb__item-divider">
244
- <i class="fas fa-angle-right" aria-hidden="true"></i>
245
- </span>
230
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
231
+ <main
232
+ class="pf-v6-c-page__main"
233
+ tabindex="-1"
234
+ id="main-content-dashboard-demo"
235
+ >
236
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
237
+ <div class="pf-v6-c-page__main-body">
238
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
239
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
240
+ <li class="pf-v6-c-breadcrumb__item">
241
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
242
+ </li>
243
+ <li class="pf-v6-c-breadcrumb__item">
244
+ <span class="pf-v6-c-breadcrumb__item-divider">
245
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
246
+ </span>
246
247
 
247
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
248
- </li>
249
- <li class="pf-v6-c-breadcrumb__item">
250
- <span class="pf-v6-c-breadcrumb__item-divider">
251
- <i class="fas fa-angle-right" aria-hidden="true"></i>
252
- </span>
248
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
249
+ </li>
250
+ <li class="pf-v6-c-breadcrumb__item">
251
+ <span class="pf-v6-c-breadcrumb__item-divider">
252
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
253
+ </span>
253
254
 
254
- <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
255
- </li>
256
- <li class="pf-v6-c-breadcrumb__item">
257
- <span class="pf-v6-c-breadcrumb__item-divider">
258
- <i class="fas fa-angle-right" aria-hidden="true"></i>
259
- </span>
255
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
256
+ </li>
257
+ <li class="pf-v6-c-breadcrumb__item">
258
+ <span class="pf-v6-c-breadcrumb__item-divider">
259
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
260
+ </span>
260
261
 
261
- <a
262
- href="#"
263
- class="pf-v6-c-breadcrumb__link pf-m-current"
264
- aria-current="page"
265
- >Section landing</a>
266
- </li>
267
- </ol>
268
- </nav>
269
- </div>
270
- </section>
271
- <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
272
- <div class="pf-v6-c-page__main-body">
273
- <div class="pf-v6-c-content">
274
- <h1>Main title</h1>
275
- <p>This is a full page demo.</p>
262
+ <a
263
+ href="#"
264
+ class="pf-v6-c-breadcrumb__link pf-m-current"
265
+ aria-current="page"
266
+ >Section landing</a>
267
+ </li>
268
+ </ol>
269
+ </nav>
276
270
  </div>
277
- </div>
278
- </section>
279
- <section class="pf-v6-c-page__main-section pf-m-limit-width">
280
- <div class="pf-v6-c-page__main-body">
281
- <div class="pf-v6-l-grid pf-m-gutter">
282
- <div class="pf-v6-c-card pf-m-expanded">
283
- <div class="pf-v6-c-card__header">
284
- <div class="pf-v6-c-card__header-toggle">
285
- <button
286
- class="pf-v6-c-button pf-m-plain"
287
- type="button"
288
- aria-label="Details"
289
- id="dashboard-demo-expandable-status-card-1-toggle"
290
- aria-labelledby="dashboard-demo-expandable-status-card-1-title dashboard-demo-expandable-status-card-1-toggle"
291
- >
292
- <span class="pf-v6-c-card__header-toggle-icon">
293
- <i class="fas fa-angle-right" aria-hidden="true"></i>
294
- </span>
295
- </button>
296
- </div>
297
- <div class="pf-v6-c-card__actions">
298
- <div class="pf-v6-c-dropdown">
271
+ </section>
272
+ <section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light">
273
+ <div class="pf-v6-c-page__main-body">
274
+ <div class="pf-v6-c-content">
275
+ <h1>Main title</h1>
276
+ <p>This is a full page demo.</p>
277
+ </div>
278
+ </div>
279
+ </section>
280
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
281
+ <div class="pf-v6-c-page__main-body">
282
+ <div class="pf-v6-l-grid pf-m-gutter">
283
+ <div class="pf-v6-c-card pf-m-expanded">
284
+ <div class="pf-v6-c-card__header">
285
+ <div class="pf-v6-c-card__header-toggle">
299
286
  <button
300
- class="pf-v6-c-dropdown__toggle pf-m-plain"
301
- id="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
302
- aria-expanded="false"
287
+ class="pf-v6-c-button pf-m-plain"
303
288
  type="button"
304
- aria-label="Actions"
289
+ aria-label="Details"
290
+ id="dashboard-demo-expandable-status-card-1-toggle"
291
+ aria-labelledby="dashboard-demo-expandable-status-card-1-title dashboard-demo-expandable-status-card-1-toggle"
305
292
  >
306
- <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
293
+ <span class="pf-v6-c-card__header-toggle-icon">
294
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
295
+ </span>
307
296
  </button>
308
- <ul
309
- class="pf-v6-c-dropdown__menu"
310
- aria-labelledby="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
311
- hidden
312
- role="menu"
313
- >
314
- <li role="none">
315
- <a
316
- class="pf-v6-c-dropdown__menu-item"
317
- role="menuitem"
318
- href="#"
319
- >Link</a>
320
- </li>
321
- <li role="none">
322
- <button
323
- class="pf-v6-c-dropdown__menu-item"
324
- role="menuitem"
325
- type="button"
326
- >Action</button>
327
- </li>
328
- <li role="none">
329
- <a
330
- class="pf-v6-c-dropdown__menu-item pf-m-disabled"
331
- role="menuitem"
332
- href="#"
333
- aria-disabled="true"
334
- tabindex="-1"
335
- >Disabled link</a>
336
- </li>
337
- <li role="none">
338
- <button
339
- class="pf-v6-c-dropdown__menu-item"
340
- role="menuitem"
341
- type="button"
342
- disabled
343
- >Disabled action</button>
344
- </li>
345
- <li class="pf-v6-c-divider" role="separator"></li>
346
- <li role="none">
347
- <a
348
- class="pf-v6-c-dropdown__menu-item"
349
- role="menuitem"
350
- href="#"
351
- >Separated link</a>
352
- </li>
353
- </ul>
354
297
  </div>
355
- </div>
356
- <div
357
- class="pf-v6-c-card__title"
358
- id="dashboard-demo-expandable-status-card-1-title"
359
- >
360
- <h2 class="pf-v6-c-title pf-m-xl">Improve recommended pathways</h2>
361
- </div>
362
- </div>
363
- <div class="pf-v6-c-card__expandable-content">
364
- <div class="pf-v6-l-flex pf-m-column pf-m-row-on-md">
298
+ <div class="pf-v6-c-card__actions">
299
+ <div class="pf-v6-c-dropdown">
300
+ <button
301
+ class="pf-v6-c-dropdown__toggle pf-m-plain"
302
+ id="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
303
+ aria-expanded="false"
304
+ type="button"
305
+ aria-label="Actions"
306
+ >
307
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
308
+ </button>
309
+ <ul
310
+ class="pf-v6-c-dropdown__menu"
311
+ aria-labelledby="dashboard-demo-expandable-status-card-1-dropdown-kebab-right-aligned-button"
312
+ hidden
313
+ role="menu"
314
+ >
315
+ <li role="none">
316
+ <a
317
+ class="pf-v6-c-dropdown__menu-item"
318
+ role="menuitem"
319
+ href="#"
320
+ >Link</a>
321
+ </li>
322
+ <li role="none">
323
+ <button
324
+ class="pf-v6-c-dropdown__menu-item"
325
+ role="menuitem"
326
+ type="button"
327
+ >Action</button>
328
+ </li>
329
+ <li role="none">
330
+ <a
331
+ class="pf-v6-c-dropdown__menu-item pf-m-disabled"
332
+ role="menuitem"
333
+ href="#"
334
+ aria-disabled="true"
335
+ tabindex="-1"
336
+ >Disabled link</a>
337
+ </li>
338
+ <li role="none">
339
+ <button
340
+ class="pf-v6-c-dropdown__menu-item"
341
+ role="menuitem"
342
+ type="button"
343
+ disabled
344
+ >Disabled action</button>
345
+ </li>
346
+ <li class="pf-v6-c-divider" role="separator"></li>
347
+ <li role="none">
348
+ <a
349
+ class="pf-v6-c-dropdown__menu-item"
350
+ role="menuitem"
351
+ href="#"
352
+ >Separated link</a>
353
+ </li>
354
+ </ul>
355
+ </div>
356
+ </div>
365
357
  <div
366
- class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
358
+ class="pf-v6-c-card__title"
359
+ id="dashboard-demo-expandable-status-card-1-title"
367
360
  >
368
- <div class="pf-v6-c-card pf-m-plain">
369
- <div class="pf-v6-c-card__body">
370
- <div
371
- class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
372
- >
361
+ <h2 class="pf-v6-c-title pf-m-xl">Improve recommended pathways</h2>
362
+ </div>
363
+ </div>
364
+ <div class="pf-v6-c-card__expandable-content">
365
+ <div class="pf-v6-l-flex pf-m-column pf-m-row-on-md">
366
+ <div
367
+ class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
368
+ >
369
+ <div class="pf-v6-c-card pf-m-plain">
370
+ <div class="pf-v6-c-card__body">
373
371
  <div
374
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
372
+ class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
375
373
  >
376
- <div class="pf-v6-c-label-group">
377
- <div class="pf-v6-c-label-group__main">
378
- <ul
379
- class="pf-v6-c-label-group__list"
380
- role="list"
381
- aria-label="Group of labels"
382
- >
383
- <li class="pf-v6-c-label-group__list-item">
384
- <span
385
- class="pf-v6-c-label pf-m-outline pf-m-blue"
386
- >
387
- <span class="pf-v6-c-label__content">
388
- <span class="pf-v6-c-label__icon">
389
- <i
390
- class="pf-v5-pficon pf-v5-pficon-port"
391
- aria-hidden="true"
392
- ></i>
374
+ <div
375
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
376
+ >
377
+ <div class="pf-v6-c-label-group">
378
+ <div class="pf-v6-c-label-group__main">
379
+ <ul
380
+ class="pf-v6-c-label-group__list"
381
+ role="list"
382
+ aria-label="Group of labels"
383
+ >
384
+ <li class="pf-v6-c-label-group__list-item">
385
+ <span
386
+ class="pf-v6-c-label pf-m-outline pf-m-blue"
387
+ >
388
+ <span class="pf-v6-c-label__content">
389
+ <span class="pf-v6-c-label__icon">
390
+ <i
391
+ class="pf-v5-pficon pf-v5-pficon-port"
392
+ aria-hidden="true"
393
+ ></i>
394
+ </span>
395
+ <span
396
+ class="pf-v6-c-label__text"
397
+ >Performance</span>
393
398
  </span>
394
- <span
395
- class="pf-v6-c-label__text"
396
- >Performance</span>
397
399
  </span>
398
- </span>
399
- </li>
400
- </ul>
400
+ </li>
401
+ </ul>
402
+ </div>
401
403
  </div>
404
+ <a href="#">378 systems</a>
402
405
  </div>
403
- <a href="#">378 systems</a>
404
- </div>
405
- <div class="pf-v6-l-flex__item pf-m-spacer-md">
406
- <p>Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and issues with system performance</p>
407
- </div>
408
- <div
409
- class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
410
- style="row-gap: var(--pf-v5-global--spacer--md);"
411
- >
412
- <div
413
- class="pf-v6-l-flex__item"
414
- style="margin-block-end: -.25em"
415
- >
416
- <span class="pf-v6-c-label pf-m-red">
417
- <span class="pf-v6-c-label__content">
418
- <span class="pf-v6-c-label__text">Incident</span>
419
- </span>
420
- </span>
406
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">
407
+ <p>Upgrade your kernel version to remediate ntpd time sync issues, kernel panics, network instabilities and issues with system performance</p>
421
408
  </div>
422
409
  <div
423
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
410
+ class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
424
411
  style="row-gap: var(--pf-v5-global--spacer--md);"
425
412
  >
426
- <i
427
- class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-color-400"
428
- style="line-height: 1"
429
- aria-hidden="true"
430
- ></i>
431
- <p class="pf-v6-u-color-200">
432
- System reboot
433
- <b class="pf-v6-u-color-100">is not</b> required
434
- </p>
413
+ <div
414
+ class="pf-v6-l-flex__item"
415
+ style="margin-block-end: -.25em"
416
+ >
417
+ <span class="pf-v6-c-label pf-m-red">
418
+ <span class="pf-v6-c-label__content">
419
+ <span class="pf-v6-c-label__text">Incident</span>
420
+ </span>
421
+ </span>
422
+ </div>
423
+ <div
424
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
425
+ style="row-gap: var(--pf-v5-global--spacer--md);"
426
+ >
427
+ <i
428
+ class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-color-400"
429
+ style="line-height: 1"
430
+ aria-hidden="true"
431
+ ></i>
432
+ <p class="pf-v6-u-color-200">
433
+ System reboot
434
+ <b class="pf-v6-u-color-100">is not</b> required
435
+ </p>
436
+ </div>
435
437
  </div>
436
438
  </div>
437
439
  </div>
438
- </div>
439
- <div class="pf-v6-c-card__footer">
440
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
441
- View pathway
442
- <span class="pf-v6-c-button__icon pf-m-end">
443
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
444
- </span>
445
- </a>
440
+ <div class="pf-v6-c-card__footer">
441
+ <a
442
+ class="pf-v6-c-button pf-m-link pf-m-inline"
443
+ href="#"
444
+ >
445
+ View pathway
446
+ <span
447
+ class="pf-v6-c-button__icon pf-m-end"
448
+ >
449
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
450
+ </span>
451
+ </a>
452
+ </div>
446
453
  </div>
447
454
  </div>
448
- </div>
449
- <hr class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl" />
450
- <div
451
- class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
452
- >
453
- <div class="pf-v6-c-card pf-m-plain">
454
- <div class="pf-v6-c-card__body">
455
- <div
456
- class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
457
- >
455
+ <hr
456
+ class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl"
457
+ />
458
+ <div
459
+ class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
460
+ >
461
+ <div class="pf-v6-c-card pf-m-plain">
462
+ <div class="pf-v6-c-card__body">
458
463
  <div
459
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
464
+ class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
460
465
  >
461
- <div class="pf-v6-c-label-group">
462
- <div class="pf-v6-c-label-group__main">
463
- <ul
464
- class="pf-v6-c-label-group__list"
465
- role="list"
466
- aria-label="Group of labels"
467
- >
468
- <li class="pf-v6-c-label-group__list-item">
469
- <span
470
- class="pf-v6-c-label pf-m-outline pf-m-blue"
471
- >
472
- <span class="pf-v6-c-label__content">
473
- <span class="pf-v6-c-label__icon">
474
- <i
475
- class="fas fa-cube"
476
- aria-hidden="true"
477
- ></i>
466
+ <div
467
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
468
+ >
469
+ <div class="pf-v6-c-label-group">
470
+ <div class="pf-v6-c-label-group__main">
471
+ <ul
472
+ class="pf-v6-c-label-group__list"
473
+ role="list"
474
+ aria-label="Group of labels"
475
+ >
476
+ <li class="pf-v6-c-label-group__list-item">
477
+ <span
478
+ class="pf-v6-c-label pf-m-outline pf-m-blue"
479
+ >
480
+ <span class="pf-v6-c-label__content">
481
+ <span class="pf-v6-c-label__icon">
482
+ <i
483
+ class="fas fa-cube"
484
+ aria-hidden="true"
485
+ ></i>
486
+ </span>
487
+ <span
488
+ class="pf-v6-c-label__text"
489
+ >Stablility</span>
478
490
  </span>
479
- <span
480
- class="pf-v6-c-label__text"
481
- >Stablility</span>
482
- </span>
483
- </span>
484
- </li>
485
- <li class="pf-v6-c-label-group__list-item">
486
- <button
487
- class="pf-v6-c-label pf-m-overflow"
488
- type="button"
489
- >
490
- <span class="pf-v6-c-label__content">
491
- <span class="pf-v6-c-label__text">1 more</span>
492
491
  </span>
493
- </button>
494
- </li>
495
- </ul>
492
+ </li>
493
+ <li class="pf-v6-c-label-group__list-item">
494
+ <button
495
+ class="pf-v6-c-label pf-m-overflow"
496
+ type="button"
497
+ >
498
+ <span class="pf-v6-c-label__content">
499
+ <span class="pf-v6-c-label__text">1 more</span>
500
+ </span>
501
+ </button>
502
+ </li>
503
+ </ul>
504
+ </div>
496
505
  </div>
506
+ <a href="#">211 systems</a>
507
+ </div>
508
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">
509
+ <p>Adjust your networking configuration to get ahead of network perfomance degradations and packet losses</p>
497
510
  </div>
498
- <a href="#">211 systems</a>
499
- </div>
500
- <div class="pf-v6-l-flex__item pf-m-spacer-md">
501
- <p>Adjust your networking configuration to get ahead of network perfomance degradations and packet losses</p>
502
- </div>
503
- <div
504
- class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
505
- style="row-gap: var(--pf-v5-global--spacer--md);"
506
- >
507
511
  <div
508
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
512
+ class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
509
513
  style="row-gap: var(--pf-v5-global--spacer--md);"
510
514
  >
511
- <i
512
- class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-danger-color-100"
513
- style="line-height: 1"
514
- aria-hidden="true"
515
- ></i>
516
- <p class="pf-v6-u-color-200">
517
- System reboot
518
- <b class="pf-v6-u-color-100">is</b> required
519
- </p>
515
+ <div
516
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
517
+ style="row-gap: var(--pf-v5-global--spacer--md);"
518
+ >
519
+ <i
520
+ class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-danger-color-100"
521
+ style="line-height: 1"
522
+ aria-hidden="true"
523
+ ></i>
524
+ <p class="pf-v6-u-color-200">
525
+ System reboot
526
+ <b class="pf-v6-u-color-100">is</b> required
527
+ </p>
528
+ </div>
520
529
  </div>
521
530
  </div>
522
531
  </div>
523
- </div>
524
- <div class="pf-v6-c-card__footer">
525
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
526
- View pathway
527
- <span class="pf-v6-c-button__icon pf-m-end">
528
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
529
- </span>
530
- </a>
532
+ <div class="pf-v6-c-card__footer">
533
+ <a
534
+ class="pf-v6-c-button pf-m-link pf-m-inline"
535
+ href="#"
536
+ >
537
+ View pathway
538
+ <span
539
+ class="pf-v6-c-button__icon pf-m-end"
540
+ >
541
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
542
+ </span>
543
+ </a>
544
+ </div>
531
545
  </div>
532
546
  </div>
533
- </div>
534
- <hr class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl" />
535
- <div
536
- class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
537
- >
538
- <div class="pf-v6-c-card pf-m-plain">
539
- <div class="pf-v6-c-card__body">
540
- <div
541
- class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
542
- >
547
+ <hr
548
+ class="pf-v6-c-divider pf-m-vertical-on-md pf-m-inset-3xl"
549
+ />
550
+ <div
551
+ class="pf-v6-l-flex pf-m-flex-1 pf-m-align-self-stretch pf-m-align-items-stretch"
552
+ >
553
+ <div class="pf-v6-c-card pf-m-plain">
554
+ <div class="pf-v6-c-card__body">
543
555
  <div
544
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
556
+ class="pf-v6-l-flex pf-m-column pf-v6-u-h-100 pf-m-space-items-sm"
545
557
  >
546
- <div class="pf-v6-c-label-group">
547
- <div class="pf-v6-c-label-group__main">
548
- <ul
549
- class="pf-v6-c-label-group__list"
550
- role="list"
551
- aria-label="Group of labels"
552
- >
553
- <li class="pf-v6-c-label-group__list-item">
554
- <span
555
- class="pf-v6-c-label pf-m-outline pf-m-blue"
556
- >
557
- <span class="pf-v6-c-label__content">
558
- <span class="pf-v6-c-label__icon">
559
- <i
560
- class="pf-v5-pficon pf-v5-pficon-automation"
561
- aria-hidden="true"
562
- ></i>
558
+ <div
559
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-column-on-md pf-m-row-on-lg pf-m-spacer-md-on-md pf-m-spacer-sm-on-lg"
560
+ >
561
+ <div class="pf-v6-c-label-group">
562
+ <div class="pf-v6-c-label-group__main">
563
+ <ul
564
+ class="pf-v6-c-label-group__list"
565
+ role="list"
566
+ aria-label="Group of labels"
567
+ >
568
+ <li class="pf-v6-c-label-group__list-item">
569
+ <span
570
+ class="pf-v6-c-label pf-m-outline pf-m-blue"
571
+ >
572
+ <span class="pf-v6-c-label__content">
573
+ <span class="pf-v6-c-label__icon">
574
+ <i
575
+ class="pf-v5-pficon pf-v5-pficon-automation"
576
+ aria-hidden="true"
577
+ ></i>
578
+ </span>
579
+ <span
580
+ class="pf-v6-c-label__text"
581
+ >Availability</span>
563
582
  </span>
564
- <span
565
- class="pf-v6-c-label__text"
566
- >Availability</span>
567
583
  </span>
568
- </span>
569
- </li>
570
- </ul>
584
+ </li>
585
+ </ul>
586
+ </div>
571
587
  </div>
588
+ <a href="#">166 systems</a>
572
589
  </div>
573
- <a href="#">166 systems</a>
574
- </div>
575
- <div class="pf-v6-l-flex__item pf-m-spacer-md">
576
- <p>Fine tune your Oracle DB configuration to improve database performance and avoid process failure</p>
577
- </div>
578
- <div
579
- class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
580
- style="row-gap: var(--pf-v5-global--spacer--md);"
581
- >
582
- <div
583
- class="pf-v6-l-flex__item"
584
- style="margin-block-end: -.25em"
585
- >
586
- <span class="pf-v6-c-label pf-m-red">
587
- <span class="pf-v6-c-label__content">
588
- <span class="pf-v6-c-label__text">Incident</span>
589
- </span>
590
- </span>
590
+ <div class="pf-v6-l-flex__item pf-m-spacer-md">
591
+ <p>Fine tune your Oracle DB configuration to improve database performance and avoid process failure</p>
591
592
  </div>
592
593
  <div
593
- class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
594
+ class="pf-v6-l-flex pf-m-grow pf-m-column pf-m-row-on-lg pf-m-justify-content-flex-end pf-m-justify-content-flex-start-on-lg pf-m-align-content-flex-end-on-lg"
594
595
  style="row-gap: var(--pf-v5-global--spacer--md);"
595
596
  >
596
- <i
597
- class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-color-400"
598
- style="line-height: 1"
599
- aria-hidden="true"
600
- ></i>
601
- <p class="pf-v6-u-color-200">
602
- System reboot
603
- <b class="pf-v6-u-color-100">is not</b> required
604
- </p>
597
+ <div
598
+ class="pf-v6-l-flex__item"
599
+ style="margin-block-end: -.25em"
600
+ >
601
+ <span class="pf-v6-c-label pf-m-red">
602
+ <span class="pf-v6-c-label__content">
603
+ <span class="pf-v6-c-label__text">Incident</span>
604
+ </span>
605
+ </span>
606
+ </div>
607
+ <div
608
+ class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center pf-m-nowrap"
609
+ style="row-gap: var(--pf-v5-global--spacer--md);"
610
+ >
611
+ <i
612
+ class="pf-v5-pficon pf-v5-pficon-on pf-v6-u-color-400"
613
+ style="line-height: 1"
614
+ aria-hidden="true"
615
+ ></i>
616
+ <p class="pf-v6-u-color-200">
617
+ System reboot
618
+ <b class="pf-v6-u-color-100">is not</b> required
619
+ </p>
620
+ </div>
605
621
  </div>
606
622
  </div>
607
623
  </div>
608
- </div>
609
- <div class="pf-v6-c-card__footer">
610
- <a class="pf-v6-c-button pf-m-link pf-m-inline" href="#">
611
- View pathway
612
- <span class="pf-v6-c-button__icon pf-m-end">
613
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
614
- </span>
615
- </a>
624
+ <div class="pf-v6-c-card__footer">
625
+ <a
626
+ class="pf-v6-c-button pf-m-link pf-m-inline"
627
+ href="#"
628
+ >
629
+ View pathway
630
+ <span
631
+ class="pf-v6-c-button__icon pf-m-end"
632
+ >
633
+ <i class="fas fa-arrow-right" aria-hidden="true"></i>
634
+ </span>
635
+ </a>
636
+ </div>
616
637
  </div>
617
638
  </div>
618
639
  </div>
619
640
  </div>
620
641
  </div>
621
- </div>
622
- <div
623
- class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-6-col-on-2xl"
624
- style="--pf-v5-l-grid--item--Order-on-lg:3"
625
- >
626
- <div class="pf-v6-l-flex pf-m-column">
627
- <div
628
- class="pf-v6-c-card pf-m-expanded"
629
- id="dashboard-demo-status-card-1"
630
- >
631
- <div class="pf-v6-c-card__header">
632
- <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
633
- </div>
634
- <div class="pf-v6-c-card__body">
635
- <div
636
- class="pf-v6-l-gallery pf-m-gutter"
637
- style="--pf-v5-l-gallery--GridTemplateColumns--min: 100%; --pf-v5-l-gallery--GridTemplateColumns--min-on-sm: 180px; --pf-v5-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v5-l-gallery--GridTemplateColumns--max-on-sm: 1fr;"
638
- >
639
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
640
- <div class="pf-v6-l-flex__item">
641
- <i
642
- class="fas fa-check-circle pf-v6-u-success-color-100"
643
- aria-hidden="true"
644
- ></i>
645
- </div>
646
- <div class="pf-v6-l-flex__item">
647
- <span>Cluster</span>
648
- </div>
649
- </div>
650
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
651
- <div class="pf-v6-l-flex__item">
652
- <i
653
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
654
- aria-hidden="true"
655
- ></i>
656
- </div>
657
- <div class="pf-v6-l-flex__item pf-v5-u-text-nowrap">
658
- <span class="popover-parent">
659
- <a href="#">Control Panel</a>
660
- </span>
661
- </div>
662
- </div>
663
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
664
- <div class="pf-v6-l-flex__item pf-v5-u-text-nowrap">
665
- <i
666
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
667
- aria-hidden="true"
668
- ></i>
669
- </div>
670
- <div
671
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
672
- >
642
+ <div
643
+ class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-6-col-on-2xl"
644
+ style="--pf-v5-l-grid--item--Order-on-lg:3"
645
+ >
646
+ <div class="pf-v6-l-flex pf-m-column">
647
+ <div
648
+ class="pf-v6-c-card pf-m-expanded"
649
+ id="dashboard-demo-status-card-1"
650
+ >
651
+ <div class="pf-v6-c-card__header">
652
+ <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
653
+ </div>
654
+ <div class="pf-v6-c-card__body">
655
+ <div
656
+ class="pf-v6-l-gallery pf-m-gutter"
657
+ style="--pf-v5-l-gallery--GridTemplateColumns--min: 100%; --pf-v5-l-gallery--GridTemplateColumns--min-on-sm: 180px; --pf-v5-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v5-l-gallery--GridTemplateColumns--max-on-sm: 1fr;"
658
+ >
659
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
673
660
  <div class="pf-v6-l-flex__item">
674
- <a href="#">Operators</a>
661
+ <i
662
+ class="fas fa-check-circle pf-v6-u-success-color-100"
663
+ aria-hidden="true"
664
+ ></i>
675
665
  </div>
676
666
  <div class="pf-v6-l-flex__item">
677
- <span class="pf-v5-u-color-200">1 degraged</span>
667
+ <span>Cluster</span>
678
668
  </div>
679
669
  </div>
680
- </div>
681
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
682
- <div class="pf-v6-l-flex__item">
683
- <i
684
- class="fas fa-check-circle pf-v6-u-success-color-100"
685
- aria-hidden="true"
686
- ></i>
687
- </div>
688
- <div
689
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
690
- >
670
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
691
671
  <div class="pf-v6-l-flex__item">
692
- <a href="#">Image Vulnerabilities</a>
672
+ <i
673
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
674
+ aria-hidden="true"
675
+ ></i>
693
676
  </div>
694
- <div class="pf-v6-l-flex__item">
695
- <span class="pf-v6-u-color-200">0 vulnerabilities</span>
677
+ <div class="pf-v6-l-flex__item pf-v5-u-text-nowrap">
678
+ <span class="popover-parent">
679
+ <a href="#">Control Panel</a>
680
+ </span>
696
681
  </div>
697
682
  </div>
698
- </div>
699
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
700
- <div class="pf-v6-l-flex__item">
701
- <i
702
- class="fas fa-check-circle pf-v6-u-success-color-100"
703
- aria-hidden="true"
704
- ></i>
683
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
684
+ <div class="pf-v6-l-flex__item pf-v5-u-text-nowrap">
685
+ <i
686
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
687
+ aria-hidden="true"
688
+ ></i>
689
+ </div>
690
+ <div
691
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
692
+ >
693
+ <div class="pf-v6-l-flex__item">
694
+ <a href="#">Operators</a>
695
+ </div>
696
+ <div class="pf-v6-l-flex__item">
697
+ <span class="pf-v5-u-color-200">1 degraged</span>
698
+ </div>
699
+ </div>
705
700
  </div>
706
- <div
707
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
708
- >
701
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
709
702
  <div class="pf-v6-l-flex__item">
710
- <a href="#">Storage</a>
703
+ <i
704
+ class="fas fa-check-circle pf-v6-u-success-color-100"
705
+ aria-hidden="true"
706
+ ></i>
711
707
  </div>
712
- <div class="pf-v6-l-flex__item">
713
- <span class="pf-v6-u-color-200">Degraded</span>
708
+ <div
709
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
710
+ >
711
+ <div class="pf-v6-l-flex__item">
712
+ <a href="#">Image Vulnerabilities</a>
713
+ </div>
714
+ <div class="pf-v6-l-flex__item">
715
+ <span class="pf-v6-u-color-200">0 vulnerabilities</span>
716
+ </div>
714
717
  </div>
715
718
  </div>
716
- </div>
717
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
718
- <div class="pf-v6-l-flex__item">
719
- <i
720
- class="fas fa-check-circle pf-v6-u-success-color-100"
721
- aria-hidden="true"
722
- ></i>
723
- </div>
724
- <div
725
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
726
- >
719
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
727
720
  <div class="pf-v6-l-flex__item">
728
- <a href="#">Hardware</a>
721
+ <i
722
+ class="fas fa-check-circle pf-v6-u-success-color-100"
723
+ aria-hidden="true"
724
+ ></i>
725
+ </div>
726
+ <div
727
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
728
+ >
729
+ <div class="pf-v6-l-flex__item">
730
+ <a href="#">Storage</a>
731
+ </div>
732
+ <div class="pf-v6-l-flex__item">
733
+ <span class="pf-v6-u-color-200">Degraded</span>
734
+ </div>
729
735
  </div>
730
736
  </div>
731
- </div>
732
- <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
733
- <div class="pf-v6-l-flex__item">
734
- <i
735
- class="fas fa-check-circle pf-v6-u-success-color-100"
736
- aria-hidden="true"
737
- ></i>
737
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
738
+ <div class="pf-v6-l-flex__item">
739
+ <i
740
+ class="fas fa-check-circle pf-v6-u-success-color-100"
741
+ aria-hidden="true"
742
+ ></i>
743
+ </div>
744
+ <div
745
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
746
+ >
747
+ <div class="pf-v6-l-flex__item">
748
+ <a href="#">Hardware</a>
749
+ </div>
750
+ </div>
738
751
  </div>
739
- <div
740
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
741
- >
752
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
742
753
  <div class="pf-v6-l-flex__item">
743
- <a href="#">Insights</a>
754
+ <i
755
+ class="fas fa-check-circle pf-v6-u-success-color-100"
756
+ aria-hidden="true"
757
+ ></i>
758
+ </div>
759
+ <div
760
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
761
+ >
762
+ <div class="pf-v6-l-flex__item">
763
+ <a href="#">Insights</a>
764
+ </div>
744
765
  </div>
745
766
  </div>
746
767
  </div>
747
768
  </div>
748
- </div>
749
- <hr class="pf-v6-c-divider" />
750
- <div class="pf-v6-c-notification-drawer">
751
- <div class="pf-v6-c-notification-drawer__body">
752
- <section class="pf-v6-c-notification-drawer__group">
753
- <button
754
- class="pf-v6-c-notification-drawer__group-toggle"
755
- aria-expanded="false"
756
- >
757
- <div
758
- class="pf-v6-c-notification-drawer__group-toggle-title"
769
+ <hr class="pf-v6-c-divider" />
770
+ <div class="pf-v6-c-notification-drawer">
771
+ <div class="pf-v6-c-notification-drawer__body">
772
+ <section class="pf-v6-c-notification-drawer__group">
773
+ <button
774
+ class="pf-v6-c-notification-drawer__group-toggle"
775
+ aria-expanded="false"
759
776
  >
760
- <div class="pf-v6-l-flex">
761
- <div
762
- class="pf-v6-l-flex__item pf-m-spacer-md"
763
- >Notifications</div>
764
- <div class="pf-v6-c-label-group">
765
- <div class="pf-v6-c-label-group__main">
766
- <ul
767
- class="pf-v6-c-label-group__list"
768
- role="list"
769
- aria-label="Group of labels"
770
- >
771
- <li class="pf-v6-c-label-group__list-item">
772
- <span class="pf-v6-c-label pf-m-red">
773
- <span class="pf-v6-c-label__content">
774
- <span class="pf-v6-c-label__icon">
775
- <i
776
- class="fas fa-fw fa-exclamation-circle"
777
- aria-hidden="true"
778
- ></i>
777
+ <div
778
+ class="pf-v6-c-notification-drawer__group-toggle-title"
779
+ >
780
+ <div class="pf-v6-l-flex">
781
+ <div
782
+ class="pf-v6-l-flex__item pf-m-spacer-md"
783
+ >Notifications</div>
784
+ <div class="pf-v6-c-label-group">
785
+ <div class="pf-v6-c-label-group__main">
786
+ <ul
787
+ class="pf-v6-c-label-group__list"
788
+ role="list"
789
+ aria-label="Group of labels"
790
+ >
791
+ <li class="pf-v6-c-label-group__list-item">
792
+ <span class="pf-v6-c-label pf-m-red">
793
+ <span class="pf-v6-c-label__content">
794
+ <span class="pf-v6-c-label__icon">
795
+ <i
796
+ class="fas fa-fw fa-exclamation-circle"
797
+ aria-hidden="true"
798
+ ></i>
799
+ </span>
800
+ <span class="pf-v6-c-label__text">1</span>
779
801
  </span>
780
- <span class="pf-v6-c-label__text">1</span>
781
802
  </span>
782
- </span>
783
- </li>
784
- <li class="pf-v6-c-label-group__list-item">
785
- <span class="pf-v6-c-label pf-m-orange">
786
- <span class="pf-v6-c-label__content">
787
- <span class="pf-v6-c-label__icon">
788
- <i
789
- class="fas fa-fw fa-exclamation-circle"
790
- aria-hidden="true"
791
- ></i>
803
+ </li>
804
+ <li class="pf-v6-c-label-group__list-item">
805
+ <span class="pf-v6-c-label pf-m-orange">
806
+ <span class="pf-v6-c-label__content">
807
+ <span class="pf-v6-c-label__icon">
808
+ <i
809
+ class="fas fa-fw fa-exclamation-circle"
810
+ aria-hidden="true"
811
+ ></i>
812
+ </span>
813
+ <span class="pf-v6-c-label__text">1</span>
792
814
  </span>
793
- <span class="pf-v6-c-label__text">1</span>
794
815
  </span>
795
- </span>
796
- </li>
797
- <li class="pf-v6-c-label-group__list-item">
798
- <span class="pf-v6-c-label pf-m-green">
799
- <span class="pf-v6-c-label__content">
800
- <span class="pf-v6-c-label__icon">
801
- <i
802
- class="fas fa-fw fa-check-circle"
803
- aria-hidden="true"
804
- ></i>
816
+ </li>
817
+ <li class="pf-v6-c-label-group__list-item">
818
+ <span class="pf-v6-c-label pf-m-green">
819
+ <span class="pf-v6-c-label__content">
820
+ <span class="pf-v6-c-label__icon">
821
+ <i
822
+ class="fas fa-fw fa-check-circle"
823
+ aria-hidden="true"
824
+ ></i>
825
+ </span>
826
+ <span class="pf-v6-c-label__text">3</span>
805
827
  </span>
806
- <span class="pf-v6-c-label__text">3</span>
807
828
  </span>
808
- </span>
809
- </li>
810
- <li class="pf-v6-c-label-group__list-item">
811
- <span class="pf-v6-c-label pf-m-blue">
812
- <span class="pf-v6-c-label__content">
813
- <span class="pf-v6-c-label__icon">
814
- <i
815
- class="fas fa-fw fa-info-circle"
816
- aria-hidden="true"
817
- ></i>
829
+ </li>
830
+ <li class="pf-v6-c-label-group__list-item">
831
+ <span class="pf-v6-c-label pf-m-blue">
832
+ <span class="pf-v6-c-label__content">
833
+ <span class="pf-v6-c-label__icon">
834
+ <i
835
+ class="fas fa-fw fa-info-circle"
836
+ aria-hidden="true"
837
+ ></i>
838
+ </span>
839
+ <span class="pf-v6-c-label__text">3</span>
818
840
  </span>
819
- <span class="pf-v6-c-label__text">3</span>
820
841
  </span>
821
- </span>
822
- </li>
823
- <li class="pf-v6-c-label-group__list-item">
824
- <span class="pf-v6-c-label pf-m-cyan">
825
- <span class="pf-v6-c-label__content">
826
- <span class="pf-v6-c-label__icon">
827
- <i
828
- class="fas fa-fw fa-bell"
829
- aria-hidden="true"
830
- ></i>
842
+ </li>
843
+ <li class="pf-v6-c-label-group__list-item">
844
+ <span class="pf-v6-c-label pf-m-cyan">
845
+ <span class="pf-v6-c-label__content">
846
+ <span class="pf-v6-c-label__icon">
847
+ <i
848
+ class="fas fa-fw fa-bell"
849
+ aria-hidden="true"
850
+ ></i>
851
+ </span>
852
+ <span class="pf-v6-c-label__text">3</span>
831
853
  </span>
832
- <span class="pf-v6-c-label__text">3</span>
833
854
  </span>
834
- </span>
835
- </li>
836
- </ul>
855
+ </li>
856
+ </ul>
857
+ </div>
837
858
  </div>
838
859
  </div>
839
860
  </div>
840
- </div>
841
- <span
842
- class="pf-v6-c-notification-drawer__group-toggle-icon"
843
- >
844
- <i class="fas fa-angle-right" aria-hidden="true"></i>
845
- </span>
846
- </button>
847
- <ul
848
- class="pf-v6-c-notification-drawer__list"
849
- role="list"
850
- hidden
851
- >
852
- <li
853
- class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
854
- tabindex="0"
861
+ <span
862
+ class="pf-v6-c-notification-drawer__group-toggle-icon"
863
+ >
864
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
865
+ </span>
866
+ </button>
867
+ <ul
868
+ class="pf-v6-c-notification-drawer__list"
869
+ role="list"
870
+ hidden
855
871
  >
856
- <div
857
- class="pf-v6-c-notification-drawer__list-item-header"
872
+ <li
873
+ class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger"
874
+ tabindex="0"
858
875
  >
859
- <span
860
- class="pf-v6-c-notification-drawer__list-item-header-icon"
861
- >
862
- <i
863
- class="fas fa-exclamation-circle"
864
- aria-hidden="true"
865
- ></i>
866
- </span>
867
- <h2
868
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-danger-color-200"
876
+ <div
877
+ class="pf-v6-c-notification-drawer__list-item-header"
869
878
  >
870
879
  <span
871
- class="pf-v6-screen-reader"
872
- >Danger notification:</span>
873
- Critical alert regarding control plane
874
- </h2>
875
- </div>
876
- <div
877
- class="pf-v6-c-notification-drawer__list-item-description"
878
- >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div>
879
- </li>
880
- <li
881
- class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning"
882
- tabindex="0"
883
- >
884
- <div
885
- class="pf-v6-c-notification-drawer__list-item-header"
880
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
881
+ >
882
+ <i
883
+ class="fas fa-exclamation-circle"
884
+ aria-hidden="true"
885
+ ></i>
886
+ </span>
887
+ <h2
888
+ class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-danger-color-200"
889
+ >
890
+ <span
891
+ class="pf-v6-screen-reader"
892
+ >Danger notification:</span>
893
+ Critical alert regarding control plane
894
+ </h2>
895
+ </div>
896
+ <div
897
+ class="pf-v6-c-notification-drawer__list-item-description"
898
+ >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div>
899
+ </li>
900
+ <li
901
+ class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning"
902
+ tabindex="0"
886
903
  >
887
- <span
888
- class="pf-v6-c-notification-drawer__list-item-header-icon"
889
- >
890
- <i
891
- class="fas fa-exclamation-triangle"
892
- aria-hidden="true"
893
- ></i>
894
- </span>
895
- <h2
896
- class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-warning-color-200"
904
+ <div
905
+ class="pf-v6-c-notification-drawer__list-item-header"
897
906
  >
898
907
  <span
899
- class="pf-v6-screen-reader"
900
- >Warning notification:</span>
901
- Warning alert
902
- </h2>
903
- </div>
904
- <div
905
- class="pf-v6-c-notification-drawer__list-item-description"
906
- >This is a warning notification description.</div>
907
- </li>
908
- </ul>
909
- </section>
908
+ class="pf-v6-c-notification-drawer__list-item-header-icon"
909
+ >
910
+ <i
911
+ class="fas fa-exclamation-triangle"
912
+ aria-hidden="true"
913
+ ></i>
914
+ </span>
915
+ <h2
916
+ class="pf-v6-c-notification-drawer__list-item-header-title pf-v5-u-warning-color-200"
917
+ >
918
+ <span
919
+ class="pf-v6-screen-reader"
920
+ >Warning notification:</span>
921
+ Warning alert
922
+ </h2>
923
+ </div>
924
+ <div
925
+ class="pf-v6-c-notification-drawer__list-item-description"
926
+ >This is a warning notification description.</div>
927
+ </li>
928
+ </ul>
929
+ </section>
930
+ </div>
910
931
  </div>
911
932
  </div>
912
- </div>
913
- <!-- inventory -->
914
- <div class="pf-v6-c-card" id="dashboard-demo-line-chart-card-1">
915
- <div class="pf-v6-c-card__header">
916
- <div class="pf-v6-c-card__actions pf-m-no-offset">
917
- <div class="pf-v6-c-select">
918
- <span
919
- id="dashboard-demo-line-chart-card-1-select-dropdown-label"
920
- hidden
921
- >Choose one</span>
933
+ <!-- inventory -->
934
+ <div class="pf-v6-c-card" id="dashboard-demo-line-chart-card-1">
935
+ <div class="pf-v6-c-card__header">
936
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
937
+ <div class="pf-v6-c-select">
938
+ <span
939
+ id="dashboard-demo-line-chart-card-1-select-dropdown-label"
940
+ hidden
941
+ >Choose one</span>
922
942
 
923
- <button
924
- class="pf-v6-c-select__toggle pf-m-plain"
925
- type="button"
926
- id="dashboard-demo-line-chart-card-1-select-dropdown-toggle"
927
- aria-haspopup="true"
928
- aria-expanded="false"
929
- aria-labelledby="dashboard-demo-line-chart-card-1-select-dropdown-label dashboard-demo-line-chart-card-1-select-dropdown-toggle"
930
- >
931
- <div class="pf-v6-c-select__toggle-wrapper">
932
- <span class="pf-v6-c-select__toggle-text">24 hours</span>
933
- </div>
934
- <span class="pf-v6-c-select__toggle-arrow">
935
- <i class="fas fa-caret-down" aria-hidden="true"></i>
936
- </span>
937
- </button>
943
+ <button
944
+ class="pf-v6-c-select__toggle pf-m-plain"
945
+ type="button"
946
+ id="dashboard-demo-line-chart-card-1-select-dropdown-toggle"
947
+ aria-haspopup="true"
948
+ aria-expanded="false"
949
+ aria-labelledby="dashboard-demo-line-chart-card-1-select-dropdown-label dashboard-demo-line-chart-card-1-select-dropdown-toggle"
950
+ >
951
+ <div class="pf-v6-c-select__toggle-wrapper">
952
+ <span class="pf-v6-c-select__toggle-text">24 hours</span>
953
+ </div>
954
+ <span class="pf-v6-c-select__toggle-arrow">
955
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
956
+ </span>
957
+ </button>
938
958
 
939
- <ul
940
- class="pf-v6-c-select__menu pf-m-align-right"
941
- role="listbox"
942
- aria-labelledby="dashboard-demo-line-chart-card-1-select-dropdown-label"
943
- hidden
944
- >
945
- <li role="presentation">
946
- <button
947
- class="pf-v6-c-select__menu-item"
948
- role="option"
949
- >Running</button>
950
- </li>
951
- <li role="presentation">
952
- <button
953
- class="pf-v6-c-select__menu-item pf-m-selected"
954
- role="option"
955
- aria-selected="true"
956
- >
957
- Stopped
958
- <span class="pf-v6-c-select__menu-item-icon">
959
- <i class="fas fa-check" aria-hidden="true"></i>
960
- </span>
961
- </button>
962
- </li>
963
- <li role="presentation">
964
- <button
965
- class="pf-v6-c-select__menu-item"
966
- role="option"
967
- >Down</button>
968
- </li>
969
- <li role="presentation">
970
- <button
971
- class="pf-v6-c-select__menu-item"
972
- role="option"
973
- >Degraded</button>
974
- </li>
975
- <li role="presentation">
976
- <button
977
- class="pf-v6-c-select__menu-item"
978
- role="option"
979
- >Needs maintenance</button>
980
- </li>
981
- </ul>
959
+ <ul
960
+ class="pf-v6-c-select__menu pf-m-align-right"
961
+ role="listbox"
962
+ aria-labelledby="dashboard-demo-line-chart-card-1-select-dropdown-label"
963
+ hidden
964
+ >
965
+ <li role="presentation">
966
+ <button
967
+ class="pf-v6-c-select__menu-item"
968
+ role="option"
969
+ >Running</button>
970
+ </li>
971
+ <li role="presentation">
972
+ <button
973
+ class="pf-v6-c-select__menu-item pf-m-selected"
974
+ role="option"
975
+ aria-selected="true"
976
+ >
977
+ Stopped
978
+ <span class="pf-v6-c-select__menu-item-icon">
979
+ <i class="fas fa-check" aria-hidden="true"></i>
980
+ </span>
981
+ </button>
982
+ </li>
983
+ <li role="presentation">
984
+ <button
985
+ class="pf-v6-c-select__menu-item"
986
+ role="option"
987
+ >Down</button>
988
+ </li>
989
+ <li role="presentation">
990
+ <button
991
+ class="pf-v6-c-select__menu-item"
992
+ role="option"
993
+ >Degraded</button>
994
+ </li>
995
+ <li role="presentation">
996
+ <button
997
+ class="pf-v6-c-select__menu-item"
998
+ role="option"
999
+ >Needs maintenance</button>
1000
+ </li>
1001
+ </ul>
1002
+ </div>
1003
+ </div>
1004
+ <div
1005
+ class="pf-v6-c-card__title"
1006
+ id="dashboard-demo-line-chart-card-1-title"
1007
+ >
1008
+ <h2 class="pf-v6-c-title pf-m-xl">Cluster utilizations</h2>
982
1009
  </div>
983
1010
  </div>
984
1011
  <div
985
- class="pf-v6-c-card__title"
986
- id="dashboard-demo-line-chart-card-1-title"
1012
+ class="pf-v6-c-card pf-m-plain pf-m-expanded"
1013
+ id="dashboard-demo-line-chart-card-1-group-1"
987
1014
  >
988
- <h2 class="pf-v6-c-title pf-m-xl">Cluster utilizations</h2>
989
- </div>
990
- </div>
991
- <div
992
- class="pf-v6-c-card pf-m-plain pf-m-expanded"
993
- id="dashboard-demo-line-chart-card-1-group-1"
994
- >
995
- <div class="pf-v6-c-card__header pf-m-toggle-right">
996
- <div class="pf-v6-c-card__header-toggle">
997
- <button
998
- class="pf-v6-c-button pf-m-plain"
999
- type="button"
1000
- aria-label="Details"
1001
- id="dashboard-demo-line-chart-card-1-group-1-toggle"
1002
- aria-labelledby="dashboard-demo-line-chart-card-1-group-1-title dashboard-demo-line-chart-card-1-group-1-toggle"
1003
- >
1004
- <span class="pf-v6-c-card__header-toggle-icon">
1005
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1006
- </span>
1007
- </button>
1008
- </div>
1009
- <div class="pf-v6-c-card__title">
1010
- <h2
1011
- class="pf-v6-c-card__title-text"
1012
- id="dashboard-demo-line-chart-card-1-group-1-title"
1013
- >CPU 1</h2>
1015
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1016
+ <div class="pf-v6-c-card__header-toggle">
1017
+ <button
1018
+ class="pf-v6-c-button pf-m-plain"
1019
+ type="button"
1020
+ aria-label="Details"
1021
+ id="dashboard-demo-line-chart-card-1-group-1-toggle"
1022
+ aria-labelledby="dashboard-demo-line-chart-card-1-group-1-title dashboard-demo-line-chart-card-1-group-1-toggle"
1023
+ >
1024
+ <span class="pf-v6-c-card__header-toggle-icon">
1025
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1026
+ </span>
1027
+ </button>
1028
+ </div>
1029
+ <div class="pf-v6-c-card__title">
1030
+ <h2
1031
+ class="pf-v6-c-card__title-text"
1032
+ id="dashboard-demo-line-chart-card-1-group-1-title"
1033
+ >CPU 1</h2>
1034
+ </div>
1014
1035
  </div>
1015
- </div>
1016
- <div class="pf-v6-c-card__expandable-content">
1017
- <div class="pf-v6-c-card__body">
1018
- <div class="pf-v6-l-grid pf-m-gutter">
1036
+ <div class="pf-v6-c-card__expandable-content">
1037
+ <div class="pf-v6-c-card__body">
1019
1038
  <div class="pf-v6-l-grid pf-m-gutter">
1020
- <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
1021
- <div
1022
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
1023
- >
1024
- <div class="pf-v6-l-flex__item">
1025
- <b>Temperature</b>
1026
- </div>
1027
- <hr
1028
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
1029
- />
1030
- <div class="pf-v6-l-flex__item">
1031
- <span>64C</span>
1039
+ <div class="pf-v6-l-grid pf-m-gutter">
1040
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
1041
+ <div
1042
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
1043
+ >
1044
+ <div class="pf-v6-l-flex__item">
1045
+ <b>Temperature</b>
1046
+ </div>
1047
+ <hr
1048
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
1049
+ />
1050
+ <div class="pf-v6-l-flex__item">
1051
+ <span>64C</span>
1052
+ </div>
1032
1053
  </div>
1033
1054
  </div>
1034
- </div>
1035
- <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
1036
- <div class="pf-v6-l-grid pf-m-gutter">
1037
- <div class="pf-v6-l-grid__item pf-m-2-col">
1038
- <div
1039
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
1040
- >
1041
- <div class="pf-v6-l-flex__item">100C</div>
1042
- <div class="pf-v6-l-flex__item">50C</div>
1043
- <div class="pf-v6-l-flex__item">0C</div>
1055
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
1056
+ <div class="pf-v6-l-grid pf-m-gutter">
1057
+ <div class="pf-v6-l-grid__item pf-m-2-col">
1058
+ <div
1059
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
1060
+ >
1061
+ <div class="pf-v6-l-flex__item">100C</div>
1062
+ <div class="pf-v6-l-flex__item">50C</div>
1063
+ <div class="pf-v6-l-flex__item">0C</div>
1064
+ </div>
1044
1065
  </div>
1045
- </div>
1046
- <div class="pf-v6-l-grid__item pf-m-10-col">
1047
- <div class="ws-chart">
1048
- <img
1049
- src="/assets/images/img_line-chart-2.png"
1050
- alt="Line chart"
1051
- />
1066
+ <div class="pf-v6-l-grid__item pf-m-10-col">
1067
+ <div class="ws-chart">
1068
+ <img
1069
+ src="/assets/images/img_line-chart-2.png"
1070
+ alt="Line chart"
1071
+ />
1072
+ </div>
1052
1073
  </div>
1053
1074
  </div>
1054
1075
  </div>
1055
1076
  </div>
1056
- </div>
1057
- <hr class="pf-v6-c-divider pf-v5-u-hidden-on-md" />
1058
- <div class="pf-v6-l-grid pf-m-gutter">
1059
- <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
1060
- <div
1061
- class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
1062
- >
1063
- <div class="pf-v6-l-flex__item">
1064
- <b>Speed</b>
1065
- </div>
1066
- <hr
1067
- class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
1068
- />
1069
- <div class="pf-v6-l-flex__item">
1070
- <span>2.3Ghz</span>
1077
+ <hr class="pf-v6-c-divider pf-v5-u-hidden-on-md" />
1078
+ <div class="pf-v6-l-grid pf-m-gutter">
1079
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
1080
+ <div
1081
+ class="pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v5-u-h-100-on-md"
1082
+ >
1083
+ <div class="pf-v6-l-flex__item">
1084
+ <b>Speed</b>
1085
+ </div>
1086
+ <hr
1087
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v5-u-hidden-on-md"
1088
+ />
1089
+ <div class="pf-v6-l-flex__item">
1090
+ <span>2.3Ghz</span>
1091
+ </div>
1071
1092
  </div>
1072
1093
  </div>
1073
- </div>
1074
- <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
1075
- <div class="pf-v6-l-grid pf-m-gutter">
1076
- <div class="pf-v6-l-grid__item pf-m-2-col">
1077
- <div
1078
- class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
1079
- >
1080
- <div class="pf-v6-l-flex__item">36hz</div>
1081
- <div class="pf-v6-l-flex__item">1.5Ghz</div>
1082
- <div class="pf-v6-l-flex__item">0Ghz</div>
1094
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
1095
+ <div class="pf-v6-l-grid pf-m-gutter">
1096
+ <div class="pf-v6-l-grid__item pf-m-2-col">
1097
+ <div
1098
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
1099
+ >
1100
+ <div class="pf-v6-l-flex__item">36hz</div>
1101
+ <div class="pf-v6-l-flex__item">1.5Ghz</div>
1102
+ <div class="pf-v6-l-flex__item">0Ghz</div>
1103
+ </div>
1083
1104
  </div>
1084
- </div>
1085
- <div class="pf-v6-l-grid__item pf-m-10-col">
1086
- <div class="ws-chart">
1087
- <img
1088
- src="/assets/images/img_line-chart-2.png"
1089
- alt="Line chart"
1090
- />
1105
+ <div class="pf-v6-l-grid__item pf-m-10-col">
1106
+ <div class="ws-chart">
1107
+ <img
1108
+ src="/assets/images/img_line-chart-2.png"
1109
+ alt="Line chart"
1110
+ />
1111
+ </div>
1091
1112
  </div>
1092
1113
  </div>
1093
1114
  </div>
@@ -1096,649 +1117,658 @@ cssPrefix: pf-d-dashboard
1096
1117
  </div>
1097
1118
  </div>
1098
1119
  </div>
1099
- </div>
1100
- <div
1101
- class="pf-v6-c-card pf-m-plain"
1102
- id="dashboard-demo-line-chart-card-1-group-2"
1103
- >
1104
- <div class="pf-v6-c-card__header pf-m-toggle-right">
1105
- <div class="pf-v6-c-card__header-toggle">
1106
- <button
1107
- class="pf-v6-c-button pf-m-plain"
1108
- type="button"
1109
- aria-label="Details"
1110
- id="dashboard-demo-line-chart-card-1-group-2-toggle"
1111
- aria-labelledby="dashboard-demo-line-chart-card-1-group-2-title dashboard-demo-line-chart-card-1-group-2-toggle"
1112
- >
1113
- <span class="pf-v6-c-card__header-toggle-icon">
1114
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1115
- </span>
1116
- </button>
1120
+ <div
1121
+ class="pf-v6-c-card pf-m-plain"
1122
+ id="dashboard-demo-line-chart-card-1-group-2"
1123
+ >
1124
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1125
+ <div class="pf-v6-c-card__header-toggle">
1126
+ <button
1127
+ class="pf-v6-c-button pf-m-plain"
1128
+ type="button"
1129
+ aria-label="Details"
1130
+ id="dashboard-demo-line-chart-card-1-group-2-toggle"
1131
+ aria-labelledby="dashboard-demo-line-chart-card-1-group-2-title dashboard-demo-line-chart-card-1-group-2-toggle"
1132
+ >
1133
+ <span class="pf-v6-c-card__header-toggle-icon">
1134
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1135
+ </span>
1136
+ </button>
1137
+ </div>
1138
+ <div class="pf-v6-c-card__title">
1139
+ <h2
1140
+ class="pf-v6-c-card__title-text"
1141
+ id="dashboard-demo-line-chart-card-1-group-2-title"
1142
+ >Pod count</h2>
1143
+ </div>
1117
1144
  </div>
1118
- <div class="pf-v6-c-card__title">
1119
- <h2
1120
- class="pf-v6-c-card__title-text"
1121
- id="dashboard-demo-line-chart-card-1-group-2-title"
1122
- >Pod count</h2>
1145
+ </div>
1146
+ <div
1147
+ class="pf-v6-c-card pf-m-plain"
1148
+ id="dashboard-demo-line-chart-card-1-group-3"
1149
+ >
1150
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1151
+ <div class="pf-v6-c-card__header-toggle">
1152
+ <button
1153
+ class="pf-v6-c-button pf-m-plain"
1154
+ type="button"
1155
+ aria-label="Details"
1156
+ id="dashboard-demo-line-chart-card-1-group-3-toggle"
1157
+ aria-labelledby="dashboard-demo-line-chart-card-1-group-3-title dashboard-demo-line-chart-card-1-group-3-toggle"
1158
+ >
1159
+ <span class="pf-v6-c-card__header-toggle-icon">
1160
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1161
+ </span>
1162
+ </button>
1163
+ </div>
1164
+ <div class="pf-v6-c-card__title">
1165
+ <h2
1166
+ class="pf-v6-c-card__title-text"
1167
+ id="dashboard-demo-line-chart-card-1-group-3-title"
1168
+ >Memory</h2>
1169
+ </div>
1123
1170
  </div>
1124
1171
  </div>
1125
1172
  </div>
1126
- <div
1127
- class="pf-v6-c-card pf-m-plain"
1128
- id="dashboard-demo-line-chart-card-1-group-3"
1129
- >
1130
- <div class="pf-v6-c-card__header pf-m-toggle-right">
1131
- <div class="pf-v6-c-card__header-toggle">
1132
- <button
1133
- class="pf-v6-c-button pf-m-plain"
1134
- type="button"
1135
- aria-label="Details"
1136
- id="dashboard-demo-line-chart-card-1-group-3-toggle"
1137
- aria-labelledby="dashboard-demo-line-chart-card-1-group-3-title dashboard-demo-line-chart-card-1-group-3-toggle"
1138
- >
1139
- <span class="pf-v6-c-card__header-toggle-icon">
1140
- <i class="fas fa-angle-right" aria-hidden="true"></i>
1141
- </span>
1142
- </button>
1143
- </div>
1144
- <div class="pf-v6-c-card__title">
1145
- <h2
1146
- class="pf-v6-c-card__title-text"
1147
- id="dashboard-demo-line-chart-card-1-group-3-title"
1148
- >Memory</h2>
1173
+ <div class="pf-v6-c-card">
1174
+ <div class="pf-v6-c-card__title">
1175
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by severity</h2>
1176
+ </div>
1177
+ <div class="pf-v6-c-card__body">
1178
+ <div class="pf-v6-l-flex pf-m-inline-flex">
1179
+ <div class="pf-v6-l-grid pf-m-gutter pf-m-all-3-col">
1180
+ <div
1181
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1182
+ >
1183
+ <span
1184
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1185
+ >2</span>
1186
+ <span class="pf-v6-u-font-color-200">Critical</span>
1187
+ </div>
1188
+ <div
1189
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1190
+ >
1191
+ <span
1192
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1193
+ >5</span>
1194
+ <span class="pf-v6-u-font-color-200">Important</span>
1195
+ </div>
1196
+ <div
1197
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1198
+ >
1199
+ <span
1200
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1201
+ >7</span>
1202
+ <span class="pf-v6-u-font-color-200">Moderate</span>
1203
+ </div>
1204
+ <div
1205
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1206
+ >
1207
+ <span
1208
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1209
+ >12</span>
1210
+ <span class="pf-v6-u-font-color-200">Low</span>
1211
+ </div>
1212
+ </div>
1149
1213
  </div>
1150
1214
  </div>
1215
+ <div class="pf-v6-c-card__title">
1216
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by category</h2>
1217
+ </div>
1218
+ <div class="pf-v6-c-card__body">
1219
+ <img
1220
+ src="/assets/images/img_pie-chart-with-legend.png"
1221
+ alt="Pie chart"
1222
+ width="450"
1223
+ />
1224
+ </div>
1225
+ <div class="pf-v6-c-card__footer">
1226
+ <a href="#">View more</a>
1227
+ </div>
1151
1228
  </div>
1152
1229
  </div>
1153
- <div class="pf-v6-c-card">
1154
- <div class="pf-v6-c-card__title">
1155
- <h2 class="pf-v6-c-title pf-m-xl">Recomendations by severity</h2>
1230
+ </div>
1231
+ <div
1232
+ class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1233
+ style="--pf-v5-l-grid--item--Order-on-lg:2"
1234
+ >
1235
+ <div
1236
+ class="pf-v6-l-flex pf-m-column pf-m-row-on-md pf-m-column-on-lg"
1237
+ >
1238
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1239
+ <div class="pf-v6-c-card" id="dashboard-demo-details-card-1">
1240
+ <div class="pf-v6-c-card__title">
1241
+ <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
1242
+ </div>
1243
+ <div class="pf-v6-c-card__body">
1244
+ <dl class="pf-v6-c-description-list">
1245
+ <div class="pf-v6-c-description-list__group">
1246
+ <dt
1247
+ class="pf-v6-c-description-list__term"
1248
+ >Cluster API Address</dt>
1249
+ <dd class="pf-v6-c-description-list__description">
1250
+ <div class="pf-v6-c-description-list__text">
1251
+ <a href="#">https://api1.devcluster.openshift.com</a>
1252
+ </div>
1253
+ </dd>
1254
+ </div>
1255
+ <div class="pf-v6-c-description-list__group">
1256
+ <dt class="pf-v6-c-description-list__term">Cluster ID</dt>
1257
+ <dd class="pf-v6-c-description-list__description">
1258
+ <div
1259
+ class="pf-v6-c-description-list__text"
1260
+ >63b97ac1-b850-41d9-8820-239becde9e86</div>
1261
+ </dd>
1262
+ </div>
1263
+ <div class="pf-v6-c-description-list__group">
1264
+ <dt class="pf-v6-c-description-list__term">Provider</dt>
1265
+ <dd class="pf-v6-c-description-list__description">
1266
+ <div class="pf-v6-c-description-list__text">AWS</div>
1267
+ </dd>
1268
+ </div>
1269
+ <div class="pf-v6-c-description-list__group">
1270
+ <dt
1271
+ class="pf-v6-c-description-list__term"
1272
+ >OpenShift Version</dt>
1273
+ <dd class="pf-v6-c-description-list__description">
1274
+ <div
1275
+ class="pf-v6-c-description-list__text"
1276
+ >4.5.0.ci-2020-06-16-015028</div>
1277
+ </dd>
1278
+ </div>
1279
+ <div class="pf-v6-c-description-list__group">
1280
+ <dt
1281
+ class="pf-v6-c-description-list__term"
1282
+ >Update Channel</dt>
1283
+ <dd class="pf-v6-c-description-list__description">
1284
+ <div
1285
+ class="pf-v6-c-description-list__text"
1286
+ >stable-4.5</div>
1287
+ </dd>
1288
+ </div>
1289
+ </dl>
1290
+ </div>
1291
+ <hr class="pf-v6-c-divider" />
1292
+ <div class="pf-v6-c-card__footer">
1293
+ <a href="#">View Settings</a>
1294
+ </div>
1295
+ </div>
1156
1296
  </div>
1157
- <div class="pf-v6-c-card__body">
1158
- <div class="pf-v6-l-flex pf-m-inline-flex">
1159
- <div class="pf-v6-l-grid pf-m-gutter pf-m-all-3-col">
1297
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
1298
+ <div
1299
+ class="pf-v6-c-card"
1300
+ id="dashboard-demo-data-list-card-1"
1301
+ >
1302
+ <div
1303
+ class="pf-v6-c-card__header pf-v5-u-align-items-flex-start"
1304
+ >
1160
1305
  <div
1161
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1306
+ class="pf-v6-c-card__title"
1307
+ id="dashboard-demo-data-list-card-1-title1"
1162
1308
  >
1163
- <span
1164
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1165
- >2</span>
1166
- <span class="pf-v6-u-font-color-200">Critical</span>
1309
+ <h2 class="pf-v6-c-title pf-m-lg">Inventory</h2>
1167
1310
  </div>
1168
- <div
1169
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1311
+ </div>
1312
+ <ul
1313
+ class="pf-v6-c-data-list pf-m-grid-none"
1314
+ role="list"
1315
+ aria-label="Simple data list example"
1316
+ id="dashboard-demo-data-list-card-1-data-list"
1317
+ >
1318
+ <li
1319
+ class="pf-v6-c-data-list__item"
1320
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-1"
1170
1321
  >
1171
- <span
1172
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1173
- >5</span>
1174
- <span class="pf-v6-u-font-color-200">Important</span>
1175
- </div>
1176
- <div
1177
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1322
+ <div class="pf-v6-c-data-list__item-row">
1323
+ <div class="pf-v6-c-data-list__item-content">
1324
+ <div
1325
+ class="pf-v6-c-data-list__cell"
1326
+ id="dashboard-demo-data-list-card-1-data-list-item-1"
1327
+ >3 Nodes</div>
1328
+ <div
1329
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1330
+ >
1331
+ <a href="#">
1332
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1333
+ <span>3</span>
1334
+ <i
1335
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1336
+ aria-hidden="true"
1337
+ ></i>
1338
+ </div>
1339
+ </a>
1340
+ </div>
1341
+ </div>
1342
+ </div>
1343
+ </li>
1344
+ <li
1345
+ class="pf-v6-c-data-list__item"
1346
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-2"
1178
1347
  >
1179
- <span
1180
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1181
- >7</span>
1182
- <span class="pf-v6-u-font-color-200">Moderate</span>
1183
- </div>
1184
- <div
1185
- class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
1348
+ <div class="pf-v6-c-data-list__item-row">
1349
+ <div class="pf-v6-c-data-list__item-content">
1350
+ <div
1351
+ class="pf-v6-c-data-list__cell"
1352
+ id="dashboard-demo-data-list-card-1-data-list-item-2"
1353
+ >8 Disks</div>
1354
+ <div
1355
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1356
+ >
1357
+ <a href="#">
1358
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1359
+ <span>8</span>
1360
+ <i
1361
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1362
+ aria-hidden="true"
1363
+ ></i>
1364
+ </div>
1365
+ </a>
1366
+ </div>
1367
+ </div>
1368
+ </div>
1369
+ </li>
1370
+ <li
1371
+ class="pf-v6-c-data-list__item"
1372
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-3"
1186
1373
  >
1187
- <span
1188
- class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
1189
- >12</span>
1190
- <span class="pf-v6-u-font-color-200">Low</span>
1191
- </div>
1192
- </div>
1374
+ <div class="pf-v6-c-data-list__item-row">
1375
+ <div class="pf-v6-c-data-list__item-content">
1376
+ <div
1377
+ class="pf-v6-c-data-list__cell"
1378
+ id="dashboard-demo-data-list-card-1-data-list-item-3"
1379
+ >20 Pods</div>
1380
+ <div
1381
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1382
+ >
1383
+ <a href="#">
1384
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1385
+ <span>20</span>
1386
+ <i
1387
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1388
+ aria-hidden="true"
1389
+ ></i>
1390
+ </div>
1391
+ </a>
1392
+ </div>
1393
+ </div>
1394
+ </div>
1395
+ </li>
1396
+ <li
1397
+ class="pf-v6-c-data-list__item"
1398
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-4"
1399
+ >
1400
+ <div class="pf-v6-c-data-list__item-row">
1401
+ <div class="pf-v6-c-data-list__item-content">
1402
+ <div
1403
+ class="pf-v6-c-data-list__cell"
1404
+ id="dashboard-demo-data-list-card-1-data-list-item-4"
1405
+ >12 PVs</div>
1406
+ <div
1407
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1408
+ >
1409
+ <a href="#">
1410
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1411
+ <span>12</span>
1412
+ <i
1413
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1414
+ aria-hidden="true"
1415
+ ></i>
1416
+ </div>
1417
+ </a>
1418
+ </div>
1419
+ </div>
1420
+ </div>
1421
+ </li>
1422
+ <li
1423
+ class="pf-v6-c-data-list__item"
1424
+ aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-5"
1425
+ >
1426
+ <div class="pf-v6-c-data-list__item-row">
1427
+ <div class="pf-v6-c-data-list__item-content">
1428
+ <div
1429
+ class="pf-v6-c-data-list__cell"
1430
+ id="dashboard-demo-data-list-card-1-data-list-item-5"
1431
+ >18 PVCs</div>
1432
+ <div
1433
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1434
+ >
1435
+ <a href="#">
1436
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
1437
+ <span>18</span>
1438
+ <i
1439
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1440
+ aria-hidden="true"
1441
+ ></i>
1442
+ </div>
1443
+ </a>
1444
+ </div>
1445
+ </div>
1446
+ </div>
1447
+ </li>
1448
+ </ul>
1193
1449
  </div>
1194
1450
  </div>
1195
- <div class="pf-v6-c-card__title">
1196
- <h2 class="pf-v6-c-title pf-m-xl">Recomendations by category</h2>
1197
- </div>
1198
- <div class="pf-v6-c-card__body">
1199
- <img
1200
- src="/assets/images/img_pie-chart-with-legend.png"
1201
- alt="Pie chart"
1202
- width="450"
1203
- />
1204
- </div>
1205
- <div class="pf-v6-c-card__footer">
1206
- <a href="#">View more</a>
1207
- </div>
1208
1451
  </div>
1209
1452
  </div>
1210
- </div>
1211
- <div
1212
- class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1213
- style="--pf-v5-l-grid--item--Order-on-lg:2"
1214
- >
1215
1453
  <div
1216
- class="pf-v6-l-flex pf-m-column pf-m-row-on-md pf-m-column-on-lg"
1454
+ class="pf-v6-l-grid__item pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1455
+ style="--pf-v5-l-grid--item--Order-on-lg:4"
1217
1456
  >
1218
- <div class="pf-v6-l-flex__item pf-m-flex-1">
1219
- <div class="pf-v6-c-card" id="dashboard-demo-details-card-1">
1220
- <div class="pf-v6-c-card__title">
1221
- <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
1457
+ <div class="pf-v6-l-flex pf-m-column">
1458
+ <div class="pf-v6-c-card" id="dashboard-demo-events-card-1">
1459
+ <div class="pf-v6-c-card__header">
1460
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1461
+ <div class="pf-v6-c-select">
1462
+ <span
1463
+ id="dashboard-demo-events-card-1-select-dropdown-label"
1464
+ hidden
1465
+ >Choose one</span>
1466
+
1467
+ <button
1468
+ class="pf-v6-c-select__toggle pf-m-plain"
1469
+ type="button"
1470
+ id="dashboard-demo-events-card-1-select-dropdown-toggle"
1471
+ aria-haspopup="true"
1472
+ aria-expanded="false"
1473
+ aria-labelledby="dashboard-demo-events-card-1-select-dropdown-label dashboard-demo-events-card-1-select-dropdown-toggle"
1474
+ >
1475
+ <div class="pf-v6-c-select__toggle-wrapper">
1476
+ <span class="pf-v6-c-select__toggle-text">Status</span>
1477
+ </div>
1478
+ <span class="pf-v6-c-select__toggle-arrow">
1479
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
1480
+ </span>
1481
+ </button>
1482
+
1483
+ <ul
1484
+ class="pf-v6-c-select__menu pf-m-align-right"
1485
+ role="listbox"
1486
+ aria-labelledby="dashboard-demo-events-card-1-select-dropdown-label"
1487
+ hidden
1488
+ >
1489
+ <li role="presentation">
1490
+ <button
1491
+ class="pf-v6-c-select__menu-item"
1492
+ role="option"
1493
+ >Running</button>
1494
+ </li>
1495
+ <li role="presentation">
1496
+ <button
1497
+ class="pf-v6-c-select__menu-item pf-m-selected"
1498
+ role="option"
1499
+ aria-selected="true"
1500
+ >
1501
+ Stopped
1502
+ <span class="pf-v6-c-select__menu-item-icon">
1503
+ <i class="fas fa-check" aria-hidden="true"></i>
1504
+ </span>
1505
+ </button>
1506
+ </li>
1507
+ <li role="presentation">
1508
+ <button
1509
+ class="pf-v6-c-select__menu-item"
1510
+ role="option"
1511
+ >Down</button>
1512
+ </li>
1513
+ <li role="presentation">
1514
+ <button
1515
+ class="pf-v6-c-select__menu-item"
1516
+ role="option"
1517
+ >Degraded</button>
1518
+ </li>
1519
+ <li role="presentation">
1520
+ <button
1521
+ class="pf-v6-c-select__menu-item"
1522
+ role="option"
1523
+ >Needs maintenance</button>
1524
+ </li>
1525
+ </ul>
1526
+ </div>
1527
+ </div>
1528
+ <div
1529
+ class="pf-v6-c-card__title"
1530
+ id="dashboard-demo-events-card-1-title1"
1531
+ style="padding-block-start: 3px;"
1532
+ >
1533
+ <h2 class="pf-v6-c-title pf-m-xl">Events</h2>
1534
+ </div>
1222
1535
  </div>
1223
1536
  <div class="pf-v6-c-card__body">
1224
- <dl class="pf-v6-c-description-list">
1537
+ <dl class="pf-v6-c-description-list pf-m-compact">
1225
1538
  <div class="pf-v6-c-description-list__group">
1226
- <dt
1227
- class="pf-v6-c-description-list__term"
1228
- >Cluster API Address</dt>
1539
+ <dt class="pf-v6-c-description-list__term">
1540
+ <div class="pf-v6-l-flex pf-m-nowrap">
1541
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1542
+ <i
1543
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1544
+ aria-hidden="true"
1545
+ ></i>
1546
+ </div>
1547
+ <div
1548
+ class="pf-v6-l-flex__item"
1549
+ >Readiness probe failed</div>
1550
+ </div>
1551
+ </dt>
1552
+ <dd class="pf-v6-c-description-list__description">
1553
+ <div
1554
+ class="pf-v6-c-description-list__text"
1555
+ >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>
1556
+ </dd>
1229
1557
  <dd class="pf-v6-c-description-list__description">
1230
1558
  <div class="pf-v6-c-description-list__text">
1231
- <a href="#">https://api1.devcluster.openshift.com</a>
1559
+ <time
1560
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1561
+ >Jun 17, 11:02 am</time>
1232
1562
  </div>
1233
1563
  </dd>
1234
1564
  </div>
1235
1565
  <div class="pf-v6-c-description-list__group">
1236
- <dt class="pf-v6-c-description-list__term">Cluster ID</dt>
1566
+ <dt class="pf-v6-c-description-list__term">
1567
+ <div class="pf-v6-l-flex pf-m-nowrap">
1568
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1569
+ <i
1570
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1571
+ aria-hidden="true"
1572
+ ></i>
1573
+ </div>
1574
+ <div
1575
+ class="pf-v6-l-flex__item"
1576
+ >Successful assignment</div>
1577
+ </div>
1578
+ </dt>
1237
1579
  <dd class="pf-v6-c-description-list__description">
1238
1580
  <div
1239
1581
  class="pf-v6-c-description-list__text"
1240
- >63b97ac1-b850-41d9-8820-239becde9e86</div>
1582
+ >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>
1241
1583
  </dd>
1242
- </div>
1243
- <div class="pf-v6-c-description-list__group">
1244
- <dt class="pf-v6-c-description-list__term">Provider</dt>
1245
1584
  <dd class="pf-v6-c-description-list__description">
1246
- <div class="pf-v6-c-description-list__text">AWS</div>
1585
+ <div class="pf-v6-c-description-list__text">
1586
+ <time
1587
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1588
+ >Jun 17, 11:13 am</time>
1589
+ </div>
1247
1590
  </dd>
1248
1591
  </div>
1249
1592
  <div class="pf-v6-c-description-list__group">
1250
- <dt
1251
- class="pf-v6-c-description-list__term"
1252
- >OpenShift Version</dt>
1593
+ <dt class="pf-v6-c-description-list__term">
1594
+ <div class="pf-v6-l-flex pf-m-nowrap">
1595
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1596
+ <svg
1597
+ class="pf-v6-c-spinner pf-m-md"
1598
+ role="progressbar"
1599
+ viewBox="0 0 100 100"
1600
+ aria-label="Loading"
1601
+ >
1602
+ <circle
1603
+ class="pf-v6-c-spinner__path"
1604
+ cx="50"
1605
+ cy="50"
1606
+ r="45"
1607
+ fill="none"
1608
+ />
1609
+ </svg>
1610
+ </div>
1611
+ <div class="pf-v6-l-flex__item">Pulling image</div>
1612
+ </div>
1613
+ </dt>
1253
1614
  <dd class="pf-v6-c-description-list__description">
1254
1615
  <div
1255
1616
  class="pf-v6-c-description-list__text"
1256
- >4.5.0.ci-2020-06-16-015028</div>
1617
+ >Pulling image "openshift/hello-openshift"</div>
1257
1618
  </dd>
1258
- </div>
1259
- <div class="pf-v6-c-description-list__group">
1260
- <dt
1261
- class="pf-v6-c-description-list__term"
1262
- >Update Channel</dt>
1263
1619
  <dd class="pf-v6-c-description-list__description">
1264
- <div class="pf-v6-c-description-list__text">stable-4.5</div>
1265
- </dd>
1266
- </div>
1267
- </dl>
1268
- </div>
1269
- <hr class="pf-v6-c-divider" />
1270
- <div class="pf-v6-c-card__footer">
1271
- <a href="#">View Settings</a>
1272
- </div>
1273
- </div>
1274
- </div>
1275
- <div class="pf-v6-l-flex__item pf-m-flex-1">
1276
- <div class="pf-v6-c-card" id="dashboard-demo-data-list-card-1">
1277
- <div
1278
- class="pf-v6-c-card__header pf-v5-u-align-items-flex-start"
1279
- >
1280
- <div
1281
- class="pf-v6-c-card__title"
1282
- id="dashboard-demo-data-list-card-1-title1"
1283
- >
1284
- <h2 class="pf-v6-c-title pf-m-lg">Inventory</h2>
1285
- </div>
1286
- </div>
1287
- <ul
1288
- class="pf-v6-c-data-list pf-m-grid-none"
1289
- role="list"
1290
- aria-label="Simple data list example"
1291
- id="dashboard-demo-data-list-card-1-data-list"
1292
- >
1293
- <li
1294
- class="pf-v6-c-data-list__item"
1295
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-1"
1296
- >
1297
- <div class="pf-v6-c-data-list__item-row">
1298
- <div class="pf-v6-c-data-list__item-content">
1299
- <div
1300
- class="pf-v6-c-data-list__cell"
1301
- id="dashboard-demo-data-list-card-1-data-list-item-1"
1302
- >3 Nodes</div>
1303
- <div
1304
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1305
- >
1306
- <a href="#">
1307
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1308
- <span>3</span>
1309
- <i
1310
- class="fas fa-check-circle pf-v6-u-success-color-100"
1311
- aria-hidden="true"
1312
- ></i>
1313
- </div>
1314
- </a>
1620
+ <div class="pf-v6-c-description-list__text">
1621
+ <time
1622
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1623
+ >Jun 17, 10:59 am</time>
1315
1624
  </div>
1316
- </div>
1625
+ </dd>
1317
1626
  </div>
1318
- </li>
1319
- <li
1320
- class="pf-v6-c-data-list__item"
1321
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-2"
1322
- >
1323
- <div class="pf-v6-c-data-list__item-row">
1324
- <div class="pf-v6-c-data-list__item-content">
1325
- <div
1326
- class="pf-v6-c-data-list__cell"
1327
- id="dashboard-demo-data-list-card-1-data-list-item-2"
1328
- >8 Disks</div>
1329
- <div
1330
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1331
- >
1332
- <a href="#">
1333
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1334
- <span>8</span>
1335
- <i
1336
- class="fas fa-check-circle pf-v6-u-success-color-100"
1337
- aria-hidden="true"
1338
- ></i>
1339
- </div>
1340
- </a>
1627
+ <div class="pf-v6-c-description-list__group">
1628
+ <dt class="pf-v6-c-description-list__term">
1629
+ <div class="pf-v6-l-flex pf-m-nowrap">
1630
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1631
+ <i
1632
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1633
+ aria-hidden="true"
1634
+ ></i>
1635
+ </div>
1636
+ <div class="pf-v6-l-flex__item">Created container</div>
1341
1637
  </div>
1342
- </div>
1343
- </div>
1344
- </li>
1345
- <li
1346
- class="pf-v6-c-data-list__item"
1347
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-3"
1348
- >
1349
- <div class="pf-v6-c-data-list__item-row">
1350
- <div class="pf-v6-c-data-list__item-content">
1351
- <div
1352
- class="pf-v6-c-data-list__cell"
1353
- id="dashboard-demo-data-list-card-1-data-list-item-3"
1354
- >20 Pods</div>
1638
+ </dt>
1639
+ <dd class="pf-v6-c-description-list__description">
1355
1640
  <div
1356
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1357
- >
1358
- <a href="#">
1359
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1360
- <span>20</span>
1361
- <i
1362
- class="fas fa-check-circle pf-v6-u-success-color-100"
1363
- aria-hidden="true"
1364
- ></i>
1365
- </div>
1366
- </a>
1641
+ class="pf-v6-c-description-list__text"
1642
+ >Created container hello-openshift</div>
1643
+ </dd>
1644
+ <dd class="pf-v6-c-description-list__description">
1645
+ <div class="pf-v6-c-description-list__text">
1646
+ <time
1647
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1648
+ >Jun 17, 10:45 am</time>
1367
1649
  </div>
1368
- </div>
1650
+ </dd>
1369
1651
  </div>
1370
- </li>
1371
- <li
1372
- class="pf-v6-c-data-list__item"
1373
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-4"
1374
- >
1375
- <div class="pf-v6-c-data-list__item-row">
1376
- <div class="pf-v6-c-data-list__item-content">
1377
- <div
1378
- class="pf-v6-c-data-list__cell"
1379
- id="dashboard-demo-data-list-card-1-data-list-item-4"
1380
- >12 PVs</div>
1381
- <div
1382
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1383
- >
1384
- <a href="#">
1385
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1386
- <span>12</span>
1387
- <i
1388
- class="fas fa-check-circle pf-v6-u-success-color-100"
1389
- aria-hidden="true"
1390
- ></i>
1391
- </div>
1392
- </a>
1652
+
1653
+ <div class="pf-v6-c-description-list__group">
1654
+ <dt class="pf-v6-c-description-list__term">
1655
+ <div class="pf-v6-l-flex pf-m-nowrap">
1656
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1657
+ <i
1658
+ class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
1659
+ aria-hidden="true"
1660
+ ></i>
1661
+ </div>
1662
+ <div
1663
+ class="pf-v6-l-flex__item"
1664
+ >CPU utilitization over 50%</div>
1393
1665
  </div>
1394
- </div>
1395
- </div>
1396
- </li>
1397
- <li
1398
- class="pf-v6-c-data-list__item"
1399
- aria-labelledby="dashboard-demo-data-list-card-1-data-list-item-5"
1400
- >
1401
- <div class="pf-v6-c-data-list__item-row">
1402
- <div class="pf-v6-c-data-list__item-content">
1403
- <div
1404
- class="pf-v6-c-data-list__cell"
1405
- id="dashboard-demo-data-list-card-1-data-list-item-5"
1406
- >18 PVCs</div>
1666
+ </dt>
1667
+ <dd class="pf-v6-c-description-list__description">
1407
1668
  <div
1408
- class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
1409
- >
1410
- <a href="#">
1411
- <div class="pf-v6-l-flex pf-m-space-items-sm">
1412
- <span>18</span>
1413
- <i
1414
- class="fas fa-check-circle pf-v6-u-success-color-100"
1415
- aria-hidden="true"
1416
- ></i>
1417
- </div>
1418
- </a>
1669
+ class="pf-v6-c-description-list__text"
1670
+ >Migrated 2 pods to other hosts</div>
1671
+ </dd>
1672
+ <dd class="pf-v6-c-description-list__description">
1673
+ <div class="pf-v6-c-description-list__text">
1674
+ <time
1675
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1676
+ >Jun 17, 10:33 am</time>
1419
1677
  </div>
1420
- </div>
1678
+ </dd>
1421
1679
  </div>
1422
- </li>
1423
- </ul>
1424
- </div>
1425
- </div>
1426
- </div>
1427
- </div>
1428
- <div
1429
- class="pf-v6-l-grid__item pf-m-4-col-on-lg pf-m-3-col-on-2xl"
1430
- style="--pf-v5-l-grid--item--Order-on-lg:4"
1431
- >
1432
- <div class="pf-v6-l-flex pf-m-column">
1433
- <div class="pf-v6-c-card" id="dashboard-demo-events-card-1">
1434
- <div class="pf-v6-c-card__header">
1435
- <div class="pf-v6-c-card__actions pf-m-no-offset">
1436
- <div class="pf-v6-c-select">
1437
- <span
1438
- id="dashboard-demo-events-card-1-select-dropdown-label"
1439
- hidden
1440
- >Choose one</span>
1441
1680
 
1442
- <button
1443
- class="pf-v6-c-select__toggle pf-m-plain"
1444
- type="button"
1445
- id="dashboard-demo-events-card-1-select-dropdown-toggle"
1446
- aria-haspopup="true"
1447
- aria-expanded="false"
1448
- aria-labelledby="dashboard-demo-events-card-1-select-dropdown-label dashboard-demo-events-card-1-select-dropdown-toggle"
1449
- >
1450
- <div class="pf-v6-c-select__toggle-wrapper">
1451
- <span class="pf-v6-c-select__toggle-text">Status</span>
1452
- </div>
1453
- <span class="pf-v6-c-select__toggle-arrow">
1454
- <i class="fas fa-caret-down" aria-hidden="true"></i>
1455
- </span>
1456
- </button>
1457
-
1458
- <ul
1459
- class="pf-v6-c-select__menu pf-m-align-right"
1460
- role="listbox"
1461
- aria-labelledby="dashboard-demo-events-card-1-select-dropdown-label"
1462
- hidden
1463
- >
1464
- <li role="presentation">
1465
- <button
1466
- class="pf-v6-c-select__menu-item"
1467
- role="option"
1468
- >Running</button>
1469
- </li>
1470
- <li role="presentation">
1471
- <button
1472
- class="pf-v6-c-select__menu-item pf-m-selected"
1473
- role="option"
1474
- aria-selected="true"
1475
- >
1476
- Stopped
1477
- <span class="pf-v6-c-select__menu-item-icon">
1478
- <i class="fas fa-check" aria-hidden="true"></i>
1479
- </span>
1480
- </button>
1481
- </li>
1482
- <li role="presentation">
1483
- <button
1484
- class="pf-v6-c-select__menu-item"
1485
- role="option"
1486
- >Down</button>
1487
- </li>
1488
- <li role="presentation">
1489
- <button
1490
- class="pf-v6-c-select__menu-item"
1491
- role="option"
1492
- >Degraded</button>
1493
- </li>
1494
- <li role="presentation">
1495
- <button
1496
- class="pf-v6-c-select__menu-item"
1497
- role="option"
1498
- >Needs maintenance</button>
1499
- </li>
1500
- </ul>
1501
- </div>
1502
- </div>
1503
- <div
1504
- class="pf-v6-c-card__title"
1505
- id="dashboard-demo-events-card-1-title1"
1506
- style="padding-block-start: 3px;"
1507
- >
1508
- <h2 class="pf-v6-c-title pf-m-xl">Events</h2>
1509
- </div>
1510
- </div>
1511
- <div class="pf-v6-c-card__body">
1512
- <dl class="pf-v6-c-description-list pf-m-compact">
1513
- <div class="pf-v6-c-description-list__group">
1514
- <dt class="pf-v6-c-description-list__term">
1515
- <div class="pf-v6-l-flex pf-m-nowrap">
1516
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1517
- <i
1518
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1519
- aria-hidden="true"
1520
- ></i>
1521
- </div>
1522
- <div class="pf-v6-l-flex__item">Readiness probe failed</div>
1523
- </div>
1524
- </dt>
1525
- <dd class="pf-v6-c-description-list__description">
1526
- <div
1527
- class="pf-v6-c-description-list__text"
1528
- >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>
1529
- </dd>
1530
- <dd class="pf-v6-c-description-list__description">
1531
- <div class="pf-v6-c-description-list__text">
1532
- <time
1533
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1534
- >Jun 17, 11:02 am</time>
1535
- </div>
1536
- </dd>
1537
- </div>
1538
- <div class="pf-v6-c-description-list__group">
1539
- <dt class="pf-v6-c-description-list__term">
1540
- <div class="pf-v6-l-flex pf-m-nowrap">
1541
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1542
- <i
1543
- class="fas fa-check-circle pf-v6-u-success-color-100"
1544
- aria-hidden="true"
1545
- ></i>
1546
- </div>
1547
- <div class="pf-v6-l-flex__item">Successful assignment</div>
1548
- </div>
1549
- </dt>
1550
- <dd class="pf-v6-c-description-list__description">
1551
- <div
1552
- class="pf-v6-c-description-list__text"
1553
- >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>
1554
- </dd>
1555
- <dd class="pf-v6-c-description-list__description">
1556
- <div class="pf-v6-c-description-list__text">
1557
- <time
1558
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1559
- >Jun 17, 11:13 am</time>
1560
- </div>
1561
- </dd>
1562
- </div>
1563
- <div class="pf-v6-c-description-list__group">
1564
- <dt class="pf-v6-c-description-list__term">
1565
- <div class="pf-v6-l-flex pf-m-nowrap">
1566
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1567
- <svg
1568
- class="pf-v6-c-spinner pf-m-md"
1569
- role="progressbar"
1570
- viewBox="0 0 100 100"
1571
- aria-label="Loading"
1572
- >
1573
- <circle
1574
- class="pf-v6-c-spinner__path"
1575
- cx="50"
1576
- cy="50"
1577
- r="45"
1578
- fill="none"
1579
- />
1580
- </svg>
1681
+ <div class="pf-v6-c-description-list__group">
1682
+ <dt class="pf-v6-c-description-list__term">
1683
+ <div class="pf-v6-l-flex pf-m-nowrap">
1684
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1685
+ <i
1686
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1687
+ aria-hidden="true"
1688
+ ></i>
1689
+ </div>
1690
+ <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
1581
1691
  </div>
1582
- <div class="pf-v6-l-flex__item">Pulling image</div>
1583
- </div>
1584
- </dt>
1585
- <dd class="pf-v6-c-description-list__description">
1586
- <div
1587
- class="pf-v6-c-description-list__text"
1588
- >Pulling image "openshift/hello-openshift"</div>
1589
- </dd>
1590
- <dd class="pf-v6-c-description-list__description">
1591
- <div class="pf-v6-c-description-list__text">
1592
- <time
1593
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1594
- >Jun 17, 10:59 am</time>
1595
- </div>
1596
- </dd>
1597
- </div>
1598
- <div class="pf-v6-c-description-list__group">
1599
- <dt class="pf-v6-c-description-list__term">
1600
- <div class="pf-v6-l-flex pf-m-nowrap">
1601
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1602
- <i
1603
- class="fas fa-check-circle pf-v6-u-success-color-100"
1604
- aria-hidden="true"
1605
- ></i>
1692
+ </dt>
1693
+ <dd class="pf-v6-c-description-list__description">
1694
+ <div
1695
+ class="pf-v6-c-description-list__text"
1696
+ >Rebuild initiated as Disk 5 failed</div>
1697
+ </dd>
1698
+ <dd class="pf-v6-c-description-list__description">
1699
+ <div class="pf-v6-c-description-list__text">
1700
+ <time
1701
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1702
+ >Jun 17, 10:33 am</time>
1606
1703
  </div>
1607
- <div class="pf-v6-l-flex__item">Created container</div>
1608
- </div>
1609
- </dt>
1610
- <dd class="pf-v6-c-description-list__description">
1611
- <div
1612
- class="pf-v6-c-description-list__text"
1613
- >Created container hello-openshift</div>
1614
- </dd>
1615
- <dd class="pf-v6-c-description-list__description">
1616
- <div class="pf-v6-c-description-list__text">
1617
- <time
1618
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1619
- >Jun 17, 10:45 am</time>
1620
- </div>
1621
- </dd>
1622
- </div>
1704
+ </dd>
1705
+ </div>
1623
1706
 
1624
- <div class="pf-v6-c-description-list__group">
1625
- <dt class="pf-v6-c-description-list__term">
1626
- <div class="pf-v6-l-flex pf-m-nowrap">
1627
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1628
- <i
1629
- class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
1630
- aria-hidden="true"
1631
- ></i>
1707
+ <div class="pf-v6-c-description-list__group">
1708
+ <dt class="pf-v6-c-description-list__term">
1709
+ <div class="pf-v6-l-flex pf-m-nowrap">
1710
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1711
+ <i
1712
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1713
+ aria-hidden="true"
1714
+ ></i>
1715
+ </div>
1716
+ <div class="pf-v6-l-flex__item">Created container</div>
1632
1717
  </div>
1718
+ </dt>
1719
+ <dd class="pf-v6-c-description-list__description">
1633
1720
  <div
1634
- class="pf-v6-l-flex__item"
1635
- >CPU utilitization over 50%</div>
1636
- </div>
1637
- </dt>
1638
- <dd class="pf-v6-c-description-list__description">
1639
- <div
1640
- class="pf-v6-c-description-list__text"
1641
- >Migrated 2 pods to other hosts</div>
1642
- </dd>
1643
- <dd class="pf-v6-c-description-list__description">
1644
- <div class="pf-v6-c-description-list__text">
1645
- <time
1646
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1647
- >Jun 17, 10:33 am</time>
1648
- </div>
1649
- </dd>
1650
- </div>
1651
-
1652
- <div class="pf-v6-c-description-list__group">
1653
- <dt class="pf-v6-c-description-list__term">
1654
- <div class="pf-v6-l-flex pf-m-nowrap">
1655
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1656
- <i
1657
- class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1658
- aria-hidden="true"
1659
- ></i>
1721
+ class="pf-v6-c-description-list__text"
1722
+ >Created container hello-openshift-123</div>
1723
+ </dd>
1724
+ <dd class="pf-v6-c-description-list__description">
1725
+ <div class="pf-v6-c-description-list__text">
1726
+ <time
1727
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1728
+ >Jun 17, 10:31 am</time>
1660
1729
  </div>
1661
- <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
1662
- </div>
1663
- </dt>
1664
- <dd class="pf-v6-c-description-list__description">
1665
- <div
1666
- class="pf-v6-c-description-list__text"
1667
- >Rebuild initiated as Disk 5 failed</div>
1668
- </dd>
1669
- <dd class="pf-v6-c-description-list__description">
1670
- <div class="pf-v6-c-description-list__text">
1671
- <time
1672
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1673
- >Jun 17, 10:33 am</time>
1674
- </div>
1675
- </dd>
1676
- </div>
1730
+ </dd>
1731
+ </div>
1677
1732
 
1678
- <div class="pf-v6-c-description-list__group">
1679
- <dt class="pf-v6-c-description-list__term">
1680
- <div class="pf-v6-l-flex pf-m-nowrap">
1681
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1682
- <i
1683
- class="fas fa-check-circle pf-v6-u-success-color-100"
1684
- aria-hidden="true"
1685
- ></i>
1733
+ <div class="pf-v6-c-description-list__group">
1734
+ <dt class="pf-v6-c-description-list__term">
1735
+ <div class="pf-v6-l-flex pf-m-nowrap">
1736
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1737
+ <i
1738
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1739
+ aria-hidden="true"
1740
+ ></i>
1741
+ </div>
1742
+ <div class="pf-v6-l-flex__item">Created container</div>
1686
1743
  </div>
1687
- <div class="pf-v6-l-flex__item">Created container</div>
1688
- </div>
1689
- </dt>
1690
- <dd class="pf-v6-c-description-list__description">
1691
- <div
1692
- class="pf-v6-c-description-list__text"
1693
- >Created container hello-openshift-123</div>
1694
- </dd>
1695
- <dd class="pf-v6-c-description-list__description">
1696
- <div class="pf-v6-c-description-list__text">
1697
- <time
1698
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1699
- >Jun 17, 10:31 am</time>
1700
- </div>
1701
- </dd>
1702
- </div>
1703
-
1704
- <div class="pf-v6-c-description-list__group">
1705
- <dt class="pf-v6-c-description-list__term">
1706
- <div class="pf-v6-l-flex pf-m-nowrap">
1707
- <div class="pf-v6-l-flex__item pf-m-spacer-sm">
1708
- <i
1709
- class="fas fa-check-circle pf-v6-u-success-color-100"
1710
- aria-hidden="true"
1711
- ></i>
1744
+ </dt>
1745
+ <dd class="pf-v6-c-description-list__description">
1746
+ <div
1747
+ class="pf-v6-c-description-list__text"
1748
+ >Created container hello-openshift-456</div>
1749
+ </dd>
1750
+ <dd class="pf-v6-c-description-list__description">
1751
+ <div class="pf-v6-c-description-list__text">
1752
+ <time
1753
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1754
+ >Jun 17, 10:30 am</time>
1712
1755
  </div>
1713
- <div class="pf-v6-l-flex__item">Created container</div>
1714
- </div>
1715
- </dt>
1716
- <dd class="pf-v6-c-description-list__description">
1717
- <div
1718
- class="pf-v6-c-description-list__text"
1719
- >Created container hello-openshift-456</div>
1720
- </dd>
1721
- <dd class="pf-v6-c-description-list__description">
1722
- <div class="pf-v6-c-description-list__text">
1723
- <time
1724
- class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
1725
- >Jun 17, 10:30 am</time>
1726
- </div>
1727
- </dd>
1728
- </div>
1729
- </dl>
1730
- </div>
1731
- <hr class="pf-v6-c-divider" />
1732
- <div class="pf-v6-c-card__footer">
1733
- <a href="#">View all events</a>
1756
+ </dd>
1757
+ </div>
1758
+ </dl>
1759
+ </div>
1760
+ <hr class="pf-v6-c-divider" />
1761
+ <div class="pf-v6-c-card__footer">
1762
+ <a href="#">View all events</a>
1763
+ </div>
1734
1764
  </div>
1735
1765
  </div>
1736
1766
  </div>
1737
1767
  </div>
1738
1768
  </div>
1739
- </div>
1740
- </section>
1741
- </main>
1769
+ </section>
1770
+ </main>
1771
+ </div>
1742
1772
  </div>
1743
1773
 
1744
1774
  ```