@patternfly/patternfly 6.4.0 → 6.5.0-prerelease.10

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 (58) hide show
  1. package/assets/images/RHAiExperienceIcon.svg +27 -0
  2. package/assets/images/RHAutomationsLogo.svg +96 -0
  3. package/assets/images/RHServerStackIcon.svg +16 -0
  4. package/assets/images/compass--hero-bg.png +0 -0
  5. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  6. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  7. package/assets/images/compass--wallpaper-dark.png +0 -0
  8. package/assets/images/compass--wallpaper-light.png +0 -0
  9. package/base/patternfly-common.css +46 -0
  10. package/base/patternfly-common.scss +56 -0
  11. package/components/ActionList/action-list.css +9 -0
  12. package/components/ActionList/action-list.scss +12 -0
  13. package/components/Button/button.css +18 -0
  14. package/components/Button/button.scss +22 -0
  15. package/components/Card/card.css +6 -0
  16. package/components/Card/card.scss +8 -0
  17. package/components/Compass/compass.css +211 -0
  18. package/components/Compass/compass.scss +276 -0
  19. package/components/DataList/data-list.css +5 -1
  20. package/components/DataList/data-list.scss +6 -1
  21. package/components/Menu/menu.css +1 -1
  22. package/components/Menu/menu.scss +1 -1
  23. package/components/MenuToggle/menu-toggle.css +4 -0
  24. package/components/MenuToggle/menu-toggle.scss +5 -0
  25. package/components/Panel/panel.css +1 -1
  26. package/components/Panel/panel.scss +1 -1
  27. package/components/Spinner/spinner.css +3 -0
  28. package/components/Spinner/spinner.scss +5 -0
  29. package/components/Table/table.css +3 -0
  30. package/components/Table/table.scss +5 -0
  31. package/components/Tabs/tabs.css +17 -1
  32. package/components/Tabs/tabs.scss +22 -1
  33. package/components/_index.css +278 -4
  34. package/components/_index.scss +1 -0
  35. package/docs/components/ActionList/examples/ActionList.md +85 -0
  36. package/docs/components/Button/examples/Button.md +116 -0
  37. package/docs/components/Card/examples/Card.md +6 -4
  38. package/docs/components/Compass/examples/Compass.md +4608 -0
  39. package/docs/components/DataList/examples/DataList.md +181 -185
  40. package/docs/components/Drawer/examples/Drawer.md +1 -1
  41. package/docs/components/MenuToggle/examples/MenuToggle.md +40 -0
  42. package/docs/components/Progress/examples/Progress.md +3 -3
  43. package/docs/components/Table/examples/Table.md +88 -0
  44. package/docs/components/Tabs/examples/Tabs.md +188 -0
  45. package/docs/components/Wizard/examples/Wizard.md +15 -15
  46. package/docs/demos/Dashboard/examples/Dashboard.md +1 -4
  47. package/docs/demos/DescriptionList/examples/DescriptionList.md +31 -33
  48. package/docs/demos/Drawer/examples/Drawer.md +31 -33
  49. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +127 -163
  50. package/docs/demos/Wizard/examples/Wizard.md +31 -34
  51. package/package.json +5 -5
  52. package/patternfly-base-no-globals.css +46 -0
  53. package/patternfly-base.css +46 -0
  54. package/patternfly-no-globals.css +324 -4
  55. package/patternfly.css +324 -4
  56. package/patternfly.min.css +1 -1
  57. package/patternfly.min.css.map +1 -1
  58. package/sass-utilities/namespaces-components.scss +3 -0
@@ -0,0 +1,4608 @@
1
+ ---
2
+ id: 'Compass'
3
+ beta: true
4
+ section: components
5
+ cssPrefix: pf-v6-c-compass
6
+ ---## Examples
7
+
8
+ ### Card view
9
+
10
+ ```html isFullscreen isBeta
11
+ <div
12
+ class="pf-v6-c-compass"
13
+ style="
14
+ --pf-v6-c-compass--BackgroundImage--light: url(./assets/images/compass--wallpaper-light.png);
15
+ --pf-v6-c-compass--BackgroundImage--dark: url(./assets/images/compass--wallpaper-dark.png);
16
+ /*
17
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,0,0;
18
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .1;
19
+ --pf-v6-c-compass__panel--BackgroundColor--light: yellow;
20
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,0,0;
21
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .1;
22
+ --pf-v6-c-compass__panel--BackgroundColor--light: yellow;
23
+ */
24
+ "
25
+ >
26
+ <div class="pf-v6-c-compass__header">
27
+ <div class="pf-v6-c-compass__logo">
28
+ <svg
29
+ width="192"
30
+ height="39"
31
+ viewBox="0 0 192 39"
32
+ fill="none"
33
+ xmlns="http://www.w3.org/2000/svg"
34
+ aria-hidden="true"
35
+ >
36
+ <path
37
+ d="M33.3807 22.9001C36.6672 22.9001 41.4287 22.2167 41.4287 18.2926C41.4287 17.9865 41.4209 17.6883 41.3472 17.3901L39.3885 8.85069C38.9336 6.97444 38.5392 6.11944 35.2501 4.47014C32.7023 3.16125 27.1468 1 25.5035 1C23.9733 1 23.5211 2.98972 21.7069 2.98972C19.8927 2.98972 18.6465 1.51194 17.0032 1.51194C15.3599 1.51194 14.395 2.59389 13.6036 4.81056C13.6036 4.81056 11.3924 11.0674 11.1085 11.9778C11.0506 12.1493 11.0506 12.3393 11.0506 12.4897C11.0506 14.9228 20.5921 22.9001 33.3833 22.9001M41.9414 19.8839C42.3963 22.0451 42.3963 22.2721 42.3963 22.5571C42.3963 26.2542 38.2579 28.3019 32.818 28.3019C20.5185 28.3019 9.74918 21.0767 9.74918 16.3003C9.74918 15.5614 9.92008 14.8779 10.1462 14.366C5.72383 14.5929 0 15.3899 0 20.4539C0 28.7585 19.6114 39 35.1396 39C47.0421 39 50.0447 33.5956 50.0447 29.3285C50.0447 25.9718 47.1552 22.1612 41.9388 19.8839"
38
+ fill="#EE0000"
39
+ />
40
+ <path
41
+ d="M41.9386 19.8864C42.3935 22.0477 42.3935 22.2746 42.3935 22.5596C42.3935 26.2567 38.255 28.3045 32.8152 28.3045C20.5157 28.3045 9.74634 21.0792 9.74634 16.3028C9.74634 15.5639 9.91724 14.8804 10.1434 14.3685L11.1083 11.9777C11.0504 12.1492 11.0504 12.3392 11.0504 12.4896C11.0504 14.9227 20.5919 22.9 33.3831 22.9C36.6696 22.9 41.4312 22.2165 41.4312 18.2925C41.4312 17.9864 41.4233 17.6882 41.3496 17.39L41.9412 19.8864H41.9386Z"
42
+ fill="black"
43
+ />
44
+ <path
45
+ d="M75.764 16V1.29995H82.295C83.261 1.29995 84.115 1.48895 84.857 1.86695C85.599 2.24495 86.173 2.76995 86.579 3.44195C86.999 4.09995 87.209 4.86995 87.209 5.75195C87.209 6.70395 86.943 7.53695 86.411 8.25095C85.893 8.95095 85.186 9.46195 84.29 9.78395L87.398 16H84.605L81.77 10.12H78.284V16H75.764ZM78.284 8.10395H82.064C82.848 8.10395 83.478 7.89395 83.954 7.47395C84.43 7.03995 84.668 6.47295 84.668 5.77295C84.668 5.05895 84.43 4.49195 83.954 4.07195C83.478 3.63795 82.848 3.42095 82.064 3.42095H78.284V8.10395Z"
46
+ fill="var(--pf-t--global--text--color--regular)"
47
+ />
48
+ <path
49
+ d="M93.9392 16.21C92.9312 16.21 92.0212 15.972 91.2092 15.496C90.3972 15.006 89.7532 14.3549 89.2772 13.5429C88.8012 12.7169 88.5632 11.7859 88.5632 10.75C88.5632 9.71395 88.7872 8.78995 89.2352 7.97795C89.6832 7.16595 90.2922 6.52195 91.0622 6.04595C91.8462 5.55595 92.7142 5.31095 93.6662 5.31095C94.6462 5.31095 95.5072 5.54895 96.2492 6.02495C97.0052 6.50095 97.5932 7.14495 98.0132 7.95695C98.4472 8.76895 98.6642 9.69995 98.6642 10.75V11.3169H90.8942C90.9782 11.8909 91.1602 12.4019 91.4402 12.8499C91.7342 13.2839 92.1052 13.627 92.5532 13.879C93.0152 14.1309 93.5122 14.257 94.0442 14.257C94.5342 14.257 94.9962 14.173 95.4302 14.005C95.8782 13.823 96.2492 13.578 96.5432 13.2699L98.0972 14.677C97.4532 15.209 96.7952 15.601 96.1232 15.853C95.4652 16.091 94.7372 16.21 93.9392 16.21ZM90.9152 9.84695H96.4172C96.3332 9.34295 96.1582 8.89495 95.8922 8.50295C95.6402 8.11095 95.3182 7.80295 94.9262 7.57895C94.5482 7.35495 94.1282 7.24295 93.6662 7.24295C93.2042 7.24295 92.7772 7.35495 92.3852 7.57895C92.0072 7.78895 91.6922 8.08995 91.4402 8.48195C91.1882 8.87395 91.0132 9.32895 90.9152 9.84695Z"
50
+ fill="var(--pf-t--global--text--color--regular)"
51
+ />
52
+ <path
53
+ d="M105.388 16.1049C104.506 16.1049 103.708 15.867 102.994 15.391C102.28 14.901 101.706 14.257 101.272 13.459C100.852 12.6469 100.642 11.7439 100.642 10.75C100.642 9.74195 100.859 8.83895 101.293 8.04095C101.727 7.22895 102.315 6.58495 103.057 6.10895C103.813 5.63295 104.646 5.39495 105.556 5.39495C106.158 5.39495 106.718 5.51395 107.236 5.75195C107.768 5.97595 108.23 6.31195 108.622 6.75995V0.94295L110.995 0.522949V16H108.643V14.6139C108.265 15.0899 107.796 15.461 107.236 15.727C106.676 15.979 106.06 16.1049 105.388 16.1049ZM106.123 14.11C106.627 14.11 107.096 14.012 107.53 13.816C107.964 13.606 108.328 13.319 108.622 12.955V8.52395C108.314 8.15995 107.943 7.87995 107.509 7.68395C107.075 7.48795 106.613 7.38995 106.123 7.38995C105.521 7.38995 104.982 7.53695 104.506 7.83095C104.044 8.11095 103.673 8.50295 103.393 9.00695C103.113 9.51095 102.973 10.092 102.973 10.75C102.973 11.38 103.113 11.9539 103.393 12.4719C103.673 12.976 104.044 13.375 104.506 13.669C104.982 13.9629 105.521 14.11 106.123 14.11Z"
54
+ fill="var(--pf-t--global--text--color--regular)"
55
+ />
56
+ <path
57
+ d="M118.848 16V1.29995H121.368V7.47395H128.676V1.29995H131.196V16H128.676V9.72095H121.368V16H118.848Z"
58
+ fill="var(--pf-t--global--text--color--regular)"
59
+ />
60
+ <path
61
+ d="M137.314 16.189C136.586 16.189 135.935 16.056 135.361 15.79C134.801 15.51 134.36 15.132 134.038 14.656C133.73 14.166 133.576 13.606 133.576 12.976C133.576 12.346 133.737 11.7999 134.059 11.3379C134.395 10.8759 134.864 10.519 135.466 10.267C136.068 10.015 136.782 9.88895 137.608 9.88895C138.098 9.88895 138.581 9.94495 139.057 10.0569C139.533 10.1549 139.995 10.323 140.443 10.561V9.38495C140.443 8.68495 140.24 8.15995 139.834 7.80995C139.442 7.45995 138.84 7.28495 138.028 7.28495C137.594 7.28495 137.125 7.35495 136.621 7.49495C136.131 7.62095 135.578 7.82395 134.962 8.10395L134.122 6.38195C135.662 5.66795 137.118 5.31095 138.49 5.31095C139.862 5.31095 140.919 5.64695 141.661 6.31895C142.417 6.97695 142.795 7.91495 142.795 9.13295V16H140.443V14.908C139.995 15.342 139.512 15.6639 138.994 15.874C138.476 16.084 137.916 16.189 137.314 16.189ZM135.802 12.934C135.802 13.424 135.998 13.809 136.39 14.089C136.782 14.3689 137.307 14.509 137.965 14.509C138.441 14.509 138.882 14.439 139.288 14.299C139.708 14.1449 140.093 13.9209 140.443 13.627V11.926C140.079 11.7579 139.701 11.6319 139.309 11.5479C138.917 11.464 138.49 11.422 138.028 11.422C137.342 11.422 136.796 11.5549 136.39 11.8209C135.998 12.0869 135.802 12.458 135.802 12.934Z"
62
+ fill="var(--pf-t--global--text--color--regular)"
63
+ />
64
+ <path
65
+ d="M149.897 16.21C148.833 16.21 148.028 15.9649 147.482 15.4749C146.936 14.971 146.663 14.236 146.663 13.2699V7.36895H144.563V5.47895H146.663V2.58095L149.036 2.07695V5.47895H151.955V7.36895H149.036V12.745C149.036 13.2629 149.148 13.634 149.372 13.858C149.596 14.068 149.974 14.1729 150.506 14.1729C150.744 14.1729 150.961 14.1589 151.157 14.1309C151.367 14.089 151.626 14.0189 151.934 13.9209V15.9159C151.64 16.0139 151.304 16.084 150.926 16.1259C150.562 16.1819 150.219 16.21 149.897 16.21Z"
66
+ fill="var(--pf-t--global--text--color--regular)"
67
+ />
68
+ <path
69
+ d="M73.916 38L79.964 23.2999H83.471L89.456 38H86.159L84.668 34.1359H78.599L77.087 38H73.916ZM79.544 31.6999H83.744L81.644 26.2819L79.544 31.6999Z"
70
+ fill="var(--pf-t--global--text--color--regular)"
71
+ />
72
+ <path
73
+ d="M94.4493 38.2099C93.6093 38.2099 92.8603 38.028 92.2023 37.664C91.5583 37.286 91.0473 36.768 90.6693 36.11C90.3053 35.452 90.1233 34.6959 90.1233 33.8419V27.059H93.0003V33.422C93.0003 34.122 93.2033 34.682 93.6093 35.102C94.0293 35.522 94.5823 35.7319 95.2683 35.7319C96.2483 35.7319 97.0043 35.368 97.5363 34.6399V27.059H100.413V38H97.5363V37.118C96.6963 37.846 95.6673 38.2099 94.4493 38.2099Z"
74
+ fill="var(--pf-t--global--text--color--regular)"
75
+ />
76
+ <path
77
+ d="M107.842 38.1679C106.625 38.1679 105.7 37.895 105.07 37.3489C104.454 36.7889 104.146 35.9769 104.146 34.9129V29.4529H101.899V27.059H104.146V24.2659L107.024 23.6149V27.059H110.153V29.4529H107.024V34.325C107.024 34.829 107.136 35.193 107.36 35.417C107.583 35.6269 107.975 35.7319 108.535 35.7319C108.815 35.7319 109.068 35.7179 109.292 35.6899C109.529 35.6479 109.789 35.5779 110.069 35.4799V37.853C109.775 37.951 109.404 38.028 108.956 38.084C108.522 38.1399 108.15 38.1679 107.842 38.1679Z"
78
+ fill="var(--pf-t--global--text--color--regular)"
79
+ />
80
+ <path
81
+ d="M116.767 38.2099C115.675 38.2099 114.688 37.958 113.806 37.4539C112.924 36.9499 112.224 36.271 111.706 35.417C111.188 34.563 110.929 33.604 110.929 32.54C110.929 31.476 111.188 30.517 111.706 29.663C112.224 28.795 112.924 28.1089 113.806 27.6049C114.688 27.101 115.675 26.8489 116.767 26.8489C117.859 26.8489 118.846 27.101 119.728 27.6049C120.61 28.1089 121.31 28.795 121.828 29.663C122.346 30.517 122.605 31.476 122.605 32.54C122.605 33.604 122.346 34.563 121.828 35.417C121.31 36.271 120.61 36.9499 119.728 37.4539C118.846 37.958 117.859 38.2099 116.767 38.2099ZM116.767 35.7109C117.341 35.7109 117.852 35.5709 118.3 35.291C118.762 35.011 119.126 34.6329 119.392 34.1569C119.672 33.6669 119.812 33.128 119.812 32.54C119.812 31.938 119.672 31.399 119.392 30.923C119.126 30.447 118.762 30.069 118.3 29.7889C117.852 29.4949 117.341 29.3479 116.767 29.3479C116.207 29.3479 115.696 29.4949 115.234 29.7889C114.772 30.069 114.408 30.447 114.142 30.923C113.876 31.399 113.743 31.938 113.743 32.54C113.743 33.128 113.876 33.6669 114.142 34.1569C114.408 34.6329 114.772 35.011 115.234 35.291C115.696 35.5709 116.207 35.7109 116.767 35.7109Z"
82
+ fill="var(--pf-t--global--text--color--regular)"
83
+ />
84
+ <path
85
+ d="M124.373 38V27.059H127.25V27.8989C128.034 27.1989 128.986 26.8489 130.106 26.8489C130.82 26.8489 131.457 26.996 132.017 27.2899C132.577 27.57 133.039 27.969 133.403 28.4869C134.313 27.3949 135.517 26.8489 137.015 26.8489C137.841 26.8489 138.562 27.038 139.178 27.416C139.808 27.78 140.298 28.291 140.648 28.9489C141.012 29.5929 141.194 30.3489 141.194 31.2169V38H138.338V31.6369C138.338 30.9229 138.149 30.3629 137.771 29.9569C137.393 29.5369 136.889 29.327 136.259 29.327C135.377 29.327 134.677 29.6909 134.159 30.4189C134.173 30.5449 134.187 30.6709 134.201 30.7969C134.215 30.9229 134.222 31.063 134.222 31.2169V38H131.345V31.6369C131.345 30.9229 131.156 30.3629 130.778 29.9569C130.414 29.5369 129.917 29.327 129.287 29.327C128.405 29.327 127.726 29.6629 127.25 30.3349V38H124.373Z"
86
+ fill="var(--pf-t--global--text--color--regular)"
87
+ />
88
+ <path
89
+ d="M146.87 38.1889C146.086 38.1889 145.393 38.049 144.791 37.769C144.189 37.475 143.72 37.076 143.384 36.5719C143.048 36.0679 142.88 35.4869 142.88 34.8289C142.88 33.7789 143.272 32.9669 144.056 32.393C144.854 31.805 145.946 31.511 147.332 31.511C148.284 31.511 149.18 31.6579 150.02 31.952V31.1539C150.02 29.8799 149.25 29.243 147.71 29.243C147.248 29.243 146.751 29.32 146.219 29.4739C145.687 29.6139 145.071 29.8379 144.371 30.146L143.321 28.025C144.189 27.6329 145.015 27.3389 145.799 27.143C146.597 26.947 147.395 26.8489 148.193 26.8489C149.663 26.8489 150.804 27.2059 151.616 27.92C152.442 28.62 152.855 29.6139 152.855 30.9019V38H150.02V37.2229C149.572 37.5589 149.089 37.804 148.571 37.958C148.053 38.1119 147.486 38.1889 146.87 38.1889ZM145.61 34.7659C145.61 35.186 145.792 35.5219 146.156 35.7739C146.52 36.0119 147.003 36.131 147.605 36.131C148.571 36.131 149.376 35.893 150.02 35.417V33.8209C149.32 33.541 148.55 33.401 147.71 33.401C147.052 33.401 146.534 33.527 146.156 33.7789C145.792 34.0169 145.61 34.346 145.61 34.7659Z"
90
+ fill="var(--pf-t--global--text--color--regular)"
91
+ />
92
+ <path
93
+ d="M159.912 38.1679C158.694 38.1679 157.77 37.895 157.14 37.3489C156.524 36.7889 156.216 35.9769 156.216 34.9129V29.4529H153.969V27.059H156.216V24.2659L159.093 23.6149V27.059H162.222V29.4529H159.093V34.325C159.093 34.829 159.205 35.193 159.429 35.417C159.653 35.6269 160.045 35.7319 160.605 35.7319C160.885 35.7319 161.137 35.7179 161.361 35.6899C161.599 35.6479 161.858 35.5779 162.138 35.4799V37.853C161.844 37.951 161.473 38.028 161.025 38.084C160.591 38.1399 160.22 38.1679 159.912 38.1679Z"
94
+ fill="var(--pf-t--global--text--color--regular)"
95
+ />
96
+ <path
97
+ d="M163.625 38V27.059H166.502V38H163.625ZM165.053 25.757C164.605 25.757 164.22 25.596 163.898 25.274C163.576 24.952 163.415 24.5669 163.415 24.1189C163.415 23.6569 163.576 23.2719 163.898 22.9639C164.22 22.6419 164.605 22.4809 165.053 22.4809C165.515 22.4809 165.9 22.6419 166.208 22.9639C166.53 23.2719 166.691 23.6569 166.691 24.1189C166.691 24.5669 166.53 24.952 166.208 25.274C165.9 25.596 165.515 25.757 165.053 25.757Z"
98
+ fill="var(--pf-t--global--text--color--regular)"
99
+ />
100
+ <path
101
+ d="M174.086 38.2099C172.994 38.2099 172.007 37.958 171.125 37.4539C170.243 36.9499 169.543 36.271 169.025 35.417C168.507 34.563 168.248 33.604 168.248 32.54C168.248 31.476 168.507 30.517 169.025 29.663C169.543 28.795 170.243 28.1089 171.125 27.6049C172.007 27.101 172.994 26.8489 174.086 26.8489C175.178 26.8489 176.165 27.101 177.047 27.6049C177.929 28.1089 178.629 28.795 179.147 29.663C179.665 30.517 179.924 31.476 179.924 32.54C179.924 33.604 179.665 34.563 179.147 35.417C178.629 36.271 177.929 36.9499 177.047 37.4539C176.165 37.958 175.178 38.2099 174.086 38.2099ZM174.086 35.7109C174.66 35.7109 175.171 35.5709 175.619 35.291C176.081 35.011 176.445 34.6329 176.711 34.1569C176.991 33.6669 177.131 33.128 177.131 32.54C177.131 31.938 176.991 31.399 176.711 30.923C176.445 30.447 176.081 30.069 175.619 29.7889C175.171 29.4949 174.66 29.3479 174.086 29.3479C173.526 29.3479 173.015 29.4949 172.553 29.7889C172.091 30.069 171.727 30.447 171.461 30.923C171.195 31.399 171.062 31.938 171.062 32.54C171.062 33.128 171.195 33.6669 171.461 34.1569C171.727 34.6329 172.091 35.011 172.553 35.291C173.015 35.5709 173.526 35.7109 174.086 35.7109Z"
102
+ fill="var(--pf-t--global--text--color--regular)"
103
+ />
104
+ <path
105
+ d="M181.693 38V27.059H184.57V27.962C185.396 27.2199 186.418 26.8489 187.636 26.8489C188.49 26.8489 189.239 27.038 189.883 27.416C190.541 27.78 191.052 28.291 191.416 28.9489C191.78 29.5929 191.962 30.3489 191.962 31.2169V38H189.085V31.6369C189.085 30.9229 188.882 30.3629 188.476 29.9569C188.07 29.5369 187.517 29.327 186.817 29.327C186.327 29.327 185.893 29.425 185.515 29.621C185.137 29.803 184.822 30.0689 184.57 30.4189V38H181.693Z"
106
+ fill="var(--pf-t--global--text--color--regular)"
107
+ />
108
+ <line
109
+ x1="66.5"
110
+ y1="1.5"
111
+ x2="66.5"
112
+ y2="38.5"
113
+ stroke="var(--pf-t--global--text--color--regular)"
114
+ stroke-linecap="round"
115
+ />
116
+ </svg>
117
+ </div>
118
+ <div class="pf-v6-c-compass__nav">
119
+ <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
120
+ <nav
121
+ class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
122
+ aria-label="Primary nav"
123
+ role="region"
124
+ id="primary-nav"
125
+ >
126
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
127
+ <button
128
+ class="pf-v6-c-button pf-m-small pf-m-plain"
129
+ type="button"
130
+ aria-label="Scroll left"
131
+ disabled
132
+ >
133
+ <span class="pf-v6-c-button__icon">
134
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
135
+ </span>
136
+ </button>
137
+ </div>
138
+ <ul class="pf-v6-c-tabs__list" role="tablist">
139
+ <li class="pf-v6-c-tabs__item" role="presentation">
140
+ <a
141
+ class="pf-v6-c-tabs__link"
142
+ href="#"
143
+ role="tab"
144
+ id="primary-nav-users-link"
145
+ >
146
+ <span class="pf-v6-c-tabs__item-text">Users</span>
147
+ </a>
148
+ </li>
149
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
150
+ <a
151
+ class="pf-v6-c-tabs__link"
152
+ href="#"
153
+ role="tab"
154
+ id="primary-nav-containers-link"
155
+ >
156
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
157
+ </a>
158
+ </li>
159
+ <li class="pf-v6-c-tabs__item" role="presentation">
160
+ <a
161
+ class="pf-v6-c-tabs__link"
162
+ href="#"
163
+ role="tab"
164
+ id="primary-nav-database-link"
165
+ >
166
+ <span class="pf-v6-c-tabs__item-text">Database</span>
167
+ </a>
168
+ </li>
169
+
170
+ <li class="pf-v6-c-tabs__item" role="presentation">
171
+ <a
172
+ class="pf-v6-c-tabs__link"
173
+ href="#"
174
+ role="tab"
175
+ id="primary-nav-server-link"
176
+ >
177
+ <span class="pf-v6-c-tabs__item-text">Server</span>
178
+ </a>
179
+ </li>
180
+ <li class="pf-v6-c-tabs__item" role="presentation">
181
+ <a
182
+ class="pf-v6-c-tabs__link"
183
+ href="#"
184
+ role="tab"
185
+ id="primary-nav-system-link"
186
+ >
187
+ <span class="pf-v6-c-tabs__item-text">System</span>
188
+ </a>
189
+ </li>
190
+ <li class="pf-v6-c-tabs__item" role="presentation">
191
+ <a
192
+ class="pf-v6-c-tabs__link"
193
+ href="#"
194
+ role="tab"
195
+ id="primary-nav-network-wired-link"
196
+ >
197
+ <span class="pf-v6-c-tabs__item-text">Network</span>
198
+ </a>
199
+ </li>
200
+ </ul>
201
+
202
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
203
+ <button
204
+ class="pf-v6-c-button pf-m-small pf-m-plain"
205
+ type="button"
206
+ aria-label="Scroll right"
207
+ disabled
208
+ >
209
+ <span class="pf-v6-c-button__icon">
210
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
211
+ </span>
212
+ </button>
213
+ </div>
214
+ </nav>
215
+ </div>
216
+ <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
217
+ <nav
218
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
219
+ aria-label="Secondary nav"
220
+ role="region"
221
+ id="secondary-nav"
222
+ >
223
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
224
+ <button
225
+ class="pf-v6-c-button pf-m-small pf-m-plain"
226
+ type="button"
227
+ aria-label="Scroll left"
228
+ disabled
229
+ >
230
+ <span class="pf-v6-c-button__icon">
231
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
232
+ </span>
233
+ </button>
234
+ </div>
235
+ <ul class="pf-v6-c-tabs__list" role="tablist">
236
+ <li class="pf-v6-c-tabs__item" role="presentation">
237
+ <a
238
+ class="pf-v6-c-tabs__link"
239
+ href="#"
240
+ role="tab"
241
+ id="secondary-nav-sub-1-link"
242
+ >
243
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
244
+ </a>
245
+ </li>
246
+ <li class="pf-v6-c-tabs__item" role="presentation">
247
+ <a
248
+ class="pf-v6-c-tabs__link"
249
+ href="#"
250
+ role="tab"
251
+ id="secondary-nav-sub-2-link"
252
+ >
253
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
254
+ </a>
255
+ </li>
256
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
257
+ <a
258
+ class="pf-v6-c-tabs__link"
259
+ href="#"
260
+ role="tab"
261
+ id="secondary-nav-sub-3-link"
262
+ >
263
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
264
+ </a>
265
+ </li>
266
+
267
+ <li class="pf-v6-c-tabs__item" role="presentation">
268
+ <a
269
+ class="pf-v6-c-tabs__link pf-m-disabled"
270
+ aria-disabled="true"
271
+ tabindex="-1"
272
+ href="#"
273
+ role="tab"
274
+ id="secondary-nav-sub-disabled-link"
275
+ >
276
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
277
+ </a>
278
+ </li>
279
+ <li class="pf-v6-c-tabs__item" role="presentation">
280
+ <a
281
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
282
+ aria-disabled="true"
283
+ href="#"
284
+ role="tab"
285
+ id="secondary-nav-sub-aria-disabled-link"
286
+ >
287
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
288
+ </a>
289
+ </li>
290
+ <li class="pf-v6-c-tabs__item" role="presentation">
291
+ <a
292
+ class="pf-v6-c-tabs__link"
293
+ href="#"
294
+ role="tab"
295
+ id="secondary-nav-sub-6-link"
296
+ >
297
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
298
+ </a>
299
+ </li>
300
+ </ul>
301
+
302
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
303
+ <button
304
+ class="pf-v6-c-button pf-m-small pf-m-plain"
305
+ type="button"
306
+ aria-label="Scroll right"
307
+ disabled
308
+ >
309
+ <span class="pf-v6-c-button__icon">
310
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
311
+ </span>
312
+ </button>
313
+ </div>
314
+ </nav>
315
+ </div>
316
+ </div>
317
+ <div class="pf-v6-c-compass__profile">
318
+ <button
319
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
320
+ type="button"
321
+ aria-expanded="false"
322
+ aria-label="Menu toggle"
323
+ >
324
+ <span class="pf-v6-c-menu-toggle__icon">
325
+ <img
326
+ class="pf-v6-c-avatar pf-m-md"
327
+ alt="Avatar image"
328
+ src="/assets/images/img_avatar-light.svg"
329
+ />
330
+ </span>
331
+ <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
332
+ <span class="pf-v6-c-menu-toggle__controls">
333
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
334
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
335
+ </span>
336
+ </span>
337
+ </button>
338
+ </div>
339
+ </div>
340
+ <div class="pf-v6-c-compass__sidebar pf-m-start">
341
+ <div class="pf-v6-c-compass__panel pf-m-pill">
342
+ <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
343
+ <div class="pf-v6-c-action-list__item">
344
+ <button
345
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
346
+ type="button"
347
+ aria-label="Add"
348
+ >
349
+ <span class="pf-v6-c-button__icon">
350
+ <svg
351
+ class="pf-v6-svg"
352
+ viewBox="0 0 448 512"
353
+ fill="currentColor"
354
+ role="img"
355
+ width="1em"
356
+ height="1em"
357
+ aria-hidden="true"
358
+ >
359
+ <path
360
+ d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
361
+ />
362
+ </svg>
363
+ </span>
364
+ </button>
365
+ </div>
366
+ <div class="pf-v6-c-action-list__item">
367
+ <button
368
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
369
+ type="button"
370
+ aria-label="Help"
371
+ >
372
+ <span class="pf-v6-c-button__icon">
373
+ <svg
374
+ class="pf-v6-svg"
375
+ viewBox="0 0 512 512"
376
+ fill="currentColor"
377
+ role="img"
378
+ width="1em"
379
+ height="1em"
380
+ aria-hidden="true"
381
+ >
382
+ <path
383
+ d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
384
+ />
385
+ </svg>
386
+ </span>
387
+ </button>
388
+ </div>
389
+ <div class="pf-v6-c-action-list__item">
390
+ <button
391
+ class="pf-v6-c-button pf-v6-m-ai-indicator pf-m-circle pf-m-plain"
392
+ type="button"
393
+ aria-label="AI assistant"
394
+ >
395
+ <span class="pf-v6-c-button__icon">
396
+ <svg
397
+ fill="currentColor"
398
+ width="1em"
399
+ height="1em"
400
+ viewBox="0 0 32 32"
401
+ style="translate: .05em .1em; scale: 1.1"
402
+ aria-hidden="true"
403
+ >
404
+ <g id="uuid-75f76c23-c1b6-4d16-98c6-ad548b061af4">
405
+ <rect width="32" height="32" fill="none" />
406
+ </g>
407
+ <g id="uuid-08df3350-7f5a-4f9c-8ddc-ec9ca74ef47e">
408
+ <path
409
+ fill="var(--pf-t--global--icon--color--regular)"
410
+ d="M26.03711,16.96191c-5.9043-.46826-10.53027-5.09424-10.99902-10.99121-.03711-.52344-.51367-.96973-1.03809-.96973-.52148,0-.99707.44189-1.03809.96191-.46875,5.90479-5.09473,10.53076-10.99121,10.99854-.52344.0376-.96973.51416-.96973,1.03857,0,.52148.44238.99707.96191,1.03809,5.9043.46875,10.53027,5.09473,10.99902,10.99121.03711.52344.51367.96973,1.03809.96973.52148,0,.99707-.44238,1.03809-.96191.46875-5.9043,5.09473-10.53027,10.99902-10.99902.51953-.04199.96191-.51562.96191-1.03809,0-.52148-.44238-.99707-.96191-1.03809Z"
411
+ />
412
+ <path
413
+ fill="var(--pf-t--global--icon--color--regular)"
414
+ d="M30.06836,6.14746c-1.59668-.35693-2.85938-1.61914-3.21582-3.21387-.08887-.40332-.43945-.68555-.85254-.68555s-.76367.28223-.85156.68311c-.35742,1.59717-1.62012,2.85938-3.21973,3.2168-.40039.09131-.68066.44141-.68066.85205s.28027.76074.68359.85254c1.59668.35693,2.85938,1.61914,3.21582,3.21387.08887.40332.43945.68555.85254.68555s.76367-.28223.85156-.68311c.35742-1.59717,1.62012-2.85938,3.2168-3.21631.00098,0,.00195-.00049.00293-.00049.40039-.09131.68066-.44141.68066-.85205s-.28027-.76074-.68359-.85254Z"
415
+ />
416
+ </g>
417
+ </svg>
418
+ </span>
419
+ </button>
420
+ </div>
421
+ <div class="pf-v6-c-action-list__item">
422
+ <button
423
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
424
+ type="button"
425
+ aria-label="User profile"
426
+ >
427
+ <span class="pf-v6-c-button__icon">
428
+ <svg
429
+ class="pf-v6-svg"
430
+ viewBox="0 0 448 512"
431
+ fill="currentColor"
432
+ role="img"
433
+ width="1em"
434
+ height="1em"
435
+ aria-hidden="true"
436
+ >
437
+ <path
438
+ d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
439
+ />
440
+ </svg>
441
+ </span>
442
+ </button>
443
+ </div>
444
+ <div class="pf-v6-c-action-list__item">
445
+ <button
446
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
447
+ type="button"
448
+ aria-label="Send"
449
+ >
450
+ <span class="pf-v6-c-button__icon">
451
+ <svg
452
+ class="pf-v6-svg"
453
+ viewBox="0 0 512 512"
454
+ fill="currentColor"
455
+ role="img"
456
+ width="1em"
457
+ height="1em"
458
+ aria-hidden="true"
459
+ >
460
+ <path
461
+ d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
462
+ />
463
+ </svg>
464
+ </span>
465
+ </button>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ <div class="pf-v6-c-compass__main">
471
+ <div
472
+ class="pf-v6-c-compass__panel pf-v6-c-compass__hero"
473
+ style="
474
+ --pf-v6-c-compass__hero--gradient--stop-1--dark: #000;
475
+ --pf-v6-c-compass__hero--gradient--stop-2--dark: #1b0d33;
476
+ --pf-v6-c-compass__hero--gradient--stop-3--dark: #3d2785;
477
+ --pf-v6-c-compass__hero--BackgroundImage--light: url(./assets/images/compass--hero-bg.png);
478
+ --pf-v6-c-compass__hero--BackgroundImage--dark: url(./assets/images/compass--hero-bg.png);
479
+ "
480
+ >
481
+ <div class="pf-v6-c-compass__hero-body">
482
+ <div class="pf-v6-c-content">
483
+ <h1>Automation that does more</h1>
484
+ <p>Red&nbsp;Hat Ansible Automation Platform offers more capabilities, accessibility, and flexibility, so you can bring the power of automation to the teams, tasks, and environments that need it.</p>
485
+ <div class="pf-v6-c-action-list">
486
+ <div class="pf-v6-c-action-list__group">
487
+ <div class="pf-v6-c-action-list__item">
488
+ <button class="pf-v6-c-button pf-m-primary" type="button">
489
+ <span class="pf-v6-c-button__text">Upgrade today</span>
490
+ </button>
491
+ </div>
492
+ <div class="pf-v6-c-action-list__item">
493
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
494
+ <span class="pf-v6-c-button__text">Talk to a Red Hatter</span>
495
+ </button>
496
+ </div>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ <div class="pf-v6-c-compass__main-header">
503
+ <div class="pf-v6-c-compass__panel">
504
+ <div class="pf-v6-l-flex pf-m-align-items-center">
505
+ <div class="pf-v6-l-flex__item pf-m-grow">
506
+ <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
507
+ </div>
508
+ <div class="pf-v6-l-flex__item">
509
+ <div class="pf-v6-c-action-list">
510
+ <div class="pf-v6-c-action-list__group">
511
+ <div class="pf-v6-c-action-list__item">
512
+ <button class="pf-v6-c-button pf-m-primary" type="button">
513
+ <span class="pf-v6-c-button__text">Add integration</span>
514
+ </button>
515
+ </div>
516
+ <div class="pf-v6-c-action-list__item">
517
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
518
+ <span class="pf-v6-c-button__text">Test integration</span>
519
+ </button>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </div>
526
+ </div>
527
+ <div class="pf-v6-c-compass__content">
528
+ <div class="pf-v6-c-compass__panel pf-m-scrollable">
529
+ <div class="pf-v6-l-flex pf-m-column pf-m-gap-md">
530
+ <div class="pf-v6-c-toolbar" id="-toolbar">
531
+ <div class="pf-v6-c-toolbar__content">
532
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
533
+ <div
534
+ class="pf-v6-c-toolbar__group pf-m-show-on-xl pf-m-toggle-group"
535
+ >
536
+ <div class="pf-v6-c-toolbar__toggle">
537
+ <button
538
+ class="pf-v6-c-menu-toggle pf-m-plain"
539
+ type="button"
540
+ aria-expanded="false"
541
+ aria-label="Show filters"
542
+ aria-controls="-toolbar-expandable-content"
543
+ >
544
+ <span class="pf-v6-c-menu-toggle__icon">
545
+ <i class="fas fa-filter" aria-hidden="true"></i>
546
+ </span>
547
+ </button>
548
+ </div>
549
+ <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
550
+ <div
551
+ class="pf-v6-c-menu-toggle pf-m-split-button"
552
+ id="-toolbar-check"
553
+ >
554
+ <label
555
+ class="pf-v6-c-check pf-m-standalone"
556
+ for="-toolbar-check-check-input"
557
+ >
558
+ <input
559
+ class="pf-v6-c-check__input"
560
+ type="checkbox"
561
+ id="-toolbar-check-check-input"
562
+ name="-toolbar-check-check-input"
563
+ aria-label="Standalone check"
564
+ />
565
+ </label>
566
+ <button
567
+ class="pf-v6-c-menu-toggle__button"
568
+ type="button"
569
+ aria-expanded="false"
570
+ id="-toolbar-menu-toggle-toggle-button"
571
+ aria-label="Menu toggle"
572
+ >
573
+ <span class="pf-v6-c-menu-toggle__controls">
574
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
575
+ <i
576
+ class="fas fa-caret-down fa-fw"
577
+ aria-hidden="true"
578
+ ></i>
579
+ </span>
580
+ </span>
581
+ </button>
582
+ </div>
583
+ </div>
584
+
585
+ <div class="pf-v6-c-toolbar__item">
586
+ <button
587
+ class="pf-v6-c-menu-toggle"
588
+ type="button"
589
+ aria-expanded="false"
590
+ id="-toolbar-select-checkbox-status"
591
+ >
592
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
593
+ <span class="pf-v6-c-menu-toggle__controls">
594
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
595
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
596
+ </span>
597
+ </span>
598
+ </button>
599
+ </div>
600
+ </div>
601
+
602
+ <div class="pf-v6-c-overflow-menu" id="-toolbar-overflow-menu">
603
+ <div
604
+ class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
605
+ >
606
+ <div class="pf-v6-c-overflow-menu__group pf-m-button-group">
607
+ <div class="pf-v6-c-overflow-menu__item">
608
+ <button
609
+ class="pf-v6-c-button pf-m-primary"
610
+ type="button"
611
+ >
612
+ <span class="pf-v6-c-button__text">Create instance</span>
613
+ </button>
614
+ </div>
615
+ </div>
616
+ </div>
617
+ <div class="pf-v6-c-overflow-menu__control">
618
+ <button
619
+ class="pf-v6-c-menu-toggle pf-m-plain"
620
+ type="button"
621
+ aria-expanded="false"
622
+ aria-label="Menu toggle"
623
+ id="-toolbar-overflow-menu-toggle"
624
+ >
625
+ <span class="pf-v6-c-menu-toggle__icon">
626
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
627
+ </span>
628
+ </button>
629
+ </div>
630
+ </div>
631
+
632
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
633
+ <div class="pf-v6-c-pagination pf-m-compact">
634
+ <div class="pf-v6-c-pagination__page-menu">
635
+ <button
636
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
637
+ type="button"
638
+ aria-expanded="false"
639
+ aria-label="Menu toggle"
640
+ id="-toolbar-top-pagination"
641
+ >
642
+ <span class="pf-v6-c-menu-toggle__text">
643
+ <b>1 - 10</b>&nbsp;of&nbsp;
644
+ <b>36</b>
645
+ </span>
646
+ <span class="pf-v6-c-menu-toggle__controls">
647
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
648
+ <i
649
+ class="fas fa-caret-down fa-fw"
650
+ aria-hidden="true"
651
+ ></i>
652
+ </span>
653
+ </span>
654
+ </button>
655
+ </div>
656
+ <nav
657
+ class="pf-v6-c-pagination__nav"
658
+ aria-label="Toolbar top pagination"
659
+ >
660
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
661
+ <button
662
+ class="pf-v6-c-button pf-m-plain"
663
+ type="button"
664
+ disabled
665
+ aria-label="Go to previous page"
666
+ >
667
+ <span class="pf-v6-c-button__icon">
668
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
669
+ </span>
670
+ </button>
671
+ </div>
672
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
673
+ <button
674
+ class="pf-v6-c-button pf-m-plain"
675
+ type="button"
676
+ aria-label="Go to next page"
677
+ >
678
+ <span class="pf-v6-c-button__icon">
679
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
680
+ </span>
681
+ </button>
682
+ </div>
683
+ </nav>
684
+ </div>
685
+ </div>
686
+ </div>
687
+
688
+ <div
689
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
690
+ id="-toolbar-expandable-content"
691
+ hidden
692
+ ></div>
693
+ </div>
694
+ </div>
695
+ <div class="pf-v6-l-gallery pf-m-gutter">
696
+ <div
697
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
698
+ id="card-view-basic-example-gallery-card-empty-state"
699
+ >
700
+ <div class="pf-v6-l-bullseye">
701
+ <div class="pf-v6-c-empty-state pf-m-xs">
702
+ <div class="pf-v6-c-empty-state__content">
703
+ <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
704
+ <div class="pf-v6-c-card__title">
705
+ <h2
706
+ class="pf-v6-c-card__title-text pf-m-md"
707
+ >Add a new card to your page</h2>
708
+ </div>
709
+ <button class="pf-v6-c-button pf-m-link" type="button">
710
+ <span class="pf-v6-c-button__text">Add card</span>
711
+ </button>
712
+ </div>
713
+ </div>
714
+ </div>
715
+ </div>
716
+ <div
717
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
718
+ id="card-view-basic-example-gallery-card-1"
719
+ >
720
+ <div class="pf-v6-c-card__header">
721
+ <img src="/assets/images/PF-IconLogo.svg" alt="PatternFly logo" />
722
+ <div class="pf-v6-c-card__actions">
723
+ <button
724
+ class="pf-v6-c-menu-toggle pf-m-plain"
725
+ type="button"
726
+ aria-expanded="false"
727
+ aria-label="Menu toggle"
728
+ id="card-view-basic-example-gallery-card-1-toggle"
729
+ >
730
+ <span class="pf-v6-c-menu-toggle__icon">
731
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
732
+ </span>
733
+ </button>
734
+ <div class="pf-v6-c-check pf-m-standalone">
735
+ <input
736
+ class="pf-v6-c-check__input"
737
+ type="checkbox"
738
+ id="card-view-basic-example-gallery-card-1-check"
739
+ name="card-view-basic-example-gallery-card-1-check"
740
+ aria-labelledby="card-view-basic-example-gallery-card-1-check-label"
741
+ />
742
+ </div>
743
+ </div>
744
+ </div>
745
+ <div class="pf-v6-c-card__title">
746
+ <h2
747
+ class="pf-v6-c-card__title-text"
748
+ id="card-view-basic-example-gallery-card-1-check-label"
749
+ >Patternfly</h2>
750
+ <div class="pf-v6-c-content">
751
+ <small>Provided by Red Hat</small>
752
+ </div>
753
+ </div>
754
+ <div
755
+ class="pf-v6-c-card__body"
756
+ >PatternFly is a community project that promotes design commonality and improves user experience.</div>
757
+ </div>
758
+ <div
759
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
760
+ id="card-view-basic-example-gallery-card-2"
761
+ >
762
+ <div class="pf-v6-c-card__header">
763
+ <img
764
+ src="/assets/images/activemq-core_200x150.png"
765
+ width="60px"
766
+ alt="Logo"
767
+ />
768
+ <div class="pf-v6-c-card__actions">
769
+ <button
770
+ class="pf-v6-c-menu-toggle pf-m-plain"
771
+ type="button"
772
+ aria-expanded="false"
773
+ aria-label="Menu toggle"
774
+ id="card-view-basic-example-gallery-card-2-toggle"
775
+ >
776
+ <span class="pf-v6-c-menu-toggle__icon">
777
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
778
+ </span>
779
+ </button>
780
+ <div class="pf-v6-c-check pf-m-standalone">
781
+ <input
782
+ class="pf-v6-c-check__input"
783
+ type="checkbox"
784
+ id="card-view-basic-example-gallery-card-2-check"
785
+ name="card-view-basic-example-gallery-card-2-check"
786
+ aria-labelledby="card-view-basic-example-gallery-card-2-check-label"
787
+ />
788
+ </div>
789
+ </div>
790
+ </div>
791
+ <div class="pf-v6-c-card__title">
792
+ <h2
793
+ class="pf-v6-c-card__title-text"
794
+ id="card-view-basic-example-gallery-card-2-check-label"
795
+ >ActiveMq</h2>
796
+ <div class="pf-v6-c-content">
797
+ <small>Provided by Red Hat</small>
798
+ </div>
799
+ </div>
800
+ <div
801
+ class="pf-v6-c-card__body"
802
+ >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
803
+ </div>
804
+ <div
805
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
806
+ id="card-view-basic-example-gallery-card-3"
807
+ >
808
+ <div class="pf-v6-c-card__header">
809
+ <img
810
+ src="/assets/images/camel-spark_200x150.png"
811
+ width="60px"
812
+ alt="Logo"
813
+ />
814
+ <div class="pf-v6-c-card__actions">
815
+ <button
816
+ class="pf-v6-c-menu-toggle pf-m-plain"
817
+ type="button"
818
+ aria-expanded="false"
819
+ aria-label="Menu toggle"
820
+ id="card-view-basic-example-gallery-card-3-toggle"
821
+ >
822
+ <span class="pf-v6-c-menu-toggle__icon">
823
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
824
+ </span>
825
+ </button>
826
+ <div class="pf-v6-c-check pf-m-standalone">
827
+ <input
828
+ class="pf-v6-c-check__input"
829
+ type="checkbox"
830
+ id="card-view-basic-example-gallery-card-3-check"
831
+ name="card-view-basic-example-gallery-card-3-check"
832
+ aria-labelledby="card-view-basic-example-gallery-card-3-check-label"
833
+ />
834
+ </div>
835
+ </div>
836
+ </div>
837
+ <div class="pf-v6-c-card__title">
838
+ <h2
839
+ class="pf-v6-c-card__title-text"
840
+ id="card-view-basic-example-gallery-card-3-check-label"
841
+ >Apache Spark</h2>
842
+ <div class="pf-v6-c-content">
843
+ <small>Provided by Red Hat</small>
844
+ </div>
845
+ </div>
846
+ <div
847
+ class="pf-v6-c-card__body"
848
+ >This documentation page covers the Apache Spark component for the Apache Camel.</div>
849
+ </div>
850
+ <div
851
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
852
+ id="card-view-basic-example-gallery-card-4"
853
+ >
854
+ <div class="pf-v6-c-card__header">
855
+ <img
856
+ src="/assets/images/camel-avro_200x150.png"
857
+ width="60px"
858
+ alt="Logo"
859
+ />
860
+ <div class="pf-v6-c-card__actions">
861
+ <button
862
+ class="pf-v6-c-menu-toggle pf-m-plain"
863
+ type="button"
864
+ aria-expanded="false"
865
+ aria-label="Menu toggle"
866
+ id="card-view-basic-example-gallery-card-4-toggle"
867
+ >
868
+ <span class="pf-v6-c-menu-toggle__icon">
869
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
870
+ </span>
871
+ </button>
872
+ <div class="pf-v6-c-check pf-m-standalone">
873
+ <input
874
+ class="pf-v6-c-check__input"
875
+ type="checkbox"
876
+ id="card-view-basic-example-gallery-card-4-check"
877
+ name="card-view-basic-example-gallery-card-4-check"
878
+ aria-labelledby="card-view-basic-example-gallery-card-4-check-label"
879
+ />
880
+ </div>
881
+ </div>
882
+ </div>
883
+ <div class="pf-v6-c-card__title">
884
+ <h2
885
+ class="pf-v6-c-card__title-text"
886
+ id="card-view-basic-example-gallery-card-4-check-label"
887
+ >Avro</h2>
888
+ <div class="pf-v6-c-content">
889
+ <small>Provided by Red Hat</small>
890
+ </div>
891
+ </div>
892
+ <div
893
+ class="pf-v6-c-card__body"
894
+ >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
895
+ </div>
896
+ <div
897
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
898
+ id="card-view-basic-example-gallery-card-5"
899
+ >
900
+ <div class="pf-v6-c-card__header">
901
+ <img
902
+ src="/assets/images/FuseConnector_Icons_AzureServices.png"
903
+ width="60px"
904
+ alt="Logo"
905
+ />
906
+ <div class="pf-v6-c-card__actions">
907
+ <button
908
+ class="pf-v6-c-menu-toggle pf-m-plain"
909
+ type="button"
910
+ aria-expanded="false"
911
+ aria-label="Menu toggle"
912
+ id="card-view-basic-example-gallery-card-5-toggle"
913
+ >
914
+ <span class="pf-v6-c-menu-toggle__icon">
915
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
916
+ </span>
917
+ </button>
918
+ <div class="pf-v6-c-check pf-m-standalone">
919
+ <input
920
+ class="pf-v6-c-check__input"
921
+ type="checkbox"
922
+ id="card-view-basic-example-gallery-card-5-check"
923
+ name="card-view-basic-example-gallery-card-5-check"
924
+ aria-labelledby="card-view-basic-example-gallery-card-5-check-label"
925
+ />
926
+ </div>
927
+ </div>
928
+ </div>
929
+ <div class="pf-v6-c-card__title">
930
+ <h2
931
+ class="pf-v6-c-card__title-text"
932
+ id="card-view-basic-example-gallery-card-5-check-label"
933
+ >Azure Services</h2>
934
+ <div class="pf-v6-c-content">
935
+ <small>Provided by Red Hat</small>
936
+ </div>
937
+ </div>
938
+ <div
939
+ class="pf-v6-c-card__body"
940
+ >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
941
+ </div>
942
+ <div
943
+ class="pf-v6-c-card pf-m-non-selectable-raised pf-m-compact"
944
+ id="card-view-basic-example-gallery-card-6"
945
+ >
946
+ <div class="pf-v6-c-card__header">
947
+ <img
948
+ src="/assets/images/camel-saxon_200x150.png"
949
+ width="60px"
950
+ alt="Logo"
951
+ />
952
+ <div class="pf-v6-c-card__actions">
953
+ <button
954
+ class="pf-v6-c-menu-toggle pf-m-plain"
955
+ type="button"
956
+ aria-expanded="false"
957
+ aria-label="Menu toggle"
958
+ id="card-view-basic-example-gallery-card-6-toggle"
959
+ >
960
+ <span class="pf-v6-c-menu-toggle__icon">
961
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
962
+ </span>
963
+ </button>
964
+ <div class="pf-v6-c-check pf-m-standalone">
965
+ <input
966
+ class="pf-v6-c-check__input"
967
+ type="checkbox"
968
+ id="card-view-basic-example-gallery-card-6-check"
969
+ name="card-view-basic-example-gallery-card-6-check"
970
+ disabled
971
+ aria-labelledby="card-view-basic-example-gallery-card-6-check-label"
972
+ />
973
+ </div>
974
+ </div>
975
+ </div>
976
+ <div class="pf-v6-c-card__title">
977
+ <h2
978
+ class="pf-v6-c-card__title-text"
979
+ id="card-view-basic-example-gallery-card-6-check-label"
980
+ >Crypto</h2>
981
+ <div class="pf-v6-c-content">
982
+ <small>Provided by Red Hat</small>
983
+ </div>
984
+ </div>
985
+ <div
986
+ class="pf-v6-c-card__body"
987
+ >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
988
+ </div>
989
+ <div
990
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
991
+ id="card-view-basic-example-gallery-card-7"
992
+ >
993
+ <div class="pf-v6-c-card__header">
994
+ <img
995
+ src="/assets/images/camel-dropbox_200x150.png"
996
+ width="60px"
997
+ alt="Logo"
998
+ />
999
+ <div class="pf-v6-c-card__actions">
1000
+ <button
1001
+ class="pf-v6-c-menu-toggle pf-m-plain"
1002
+ type="button"
1003
+ aria-expanded="false"
1004
+ aria-label="Menu toggle"
1005
+ id="card-view-basic-example-gallery-card-7-toggle"
1006
+ >
1007
+ <span class="pf-v6-c-menu-toggle__icon">
1008
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1009
+ </span>
1010
+ </button>
1011
+ <div class="pf-v6-c-check pf-m-standalone">
1012
+ <input
1013
+ class="pf-v6-c-check__input"
1014
+ type="checkbox"
1015
+ id="card-view-basic-example-gallery-card-7-check"
1016
+ name="card-view-basic-example-gallery-card-7-check"
1017
+ aria-labelledby="card-view-basic-example-gallery-card-7-check-label"
1018
+ />
1019
+ </div>
1020
+ </div>
1021
+ </div>
1022
+ <div class="pf-v6-c-card__title">
1023
+ <h2
1024
+ class="pf-v6-c-card__title-text"
1025
+ id="card-view-basic-example-gallery-card-7-check-label"
1026
+ >DropBox</h2>
1027
+ <div class="pf-v6-c-content">
1028
+ <small>Provided by Red Hat</small>
1029
+ </div>
1030
+ </div>
1031
+ <div
1032
+ class="pf-v6-c-card__body"
1033
+ >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
1034
+ </div>
1035
+ <div
1036
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
1037
+ id="card-view-basic-example-gallery-card-8"
1038
+ >
1039
+ <div class="pf-v6-c-card__header">
1040
+ <img
1041
+ src="/assets/images/camel-infinispan_200x150.png"
1042
+ width="60px"
1043
+ alt="Logo"
1044
+ />
1045
+ <div class="pf-v6-c-card__actions">
1046
+ <button
1047
+ class="pf-v6-c-menu-toggle pf-m-plain"
1048
+ type="button"
1049
+ aria-expanded="false"
1050
+ aria-label="Menu toggle"
1051
+ id="card-view-basic-example-gallery-card-8-toggle"
1052
+ >
1053
+ <span class="pf-v6-c-menu-toggle__icon">
1054
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1055
+ </span>
1056
+ </button>
1057
+ <div class="pf-v6-c-check pf-m-standalone">
1058
+ <input
1059
+ class="pf-v6-c-check__input"
1060
+ type="checkbox"
1061
+ id="card-view-basic-example-gallery-card-8-check"
1062
+ name="card-view-basic-example-gallery-card-8-check"
1063
+ aria-labelledby="card-view-basic-example-gallery-card-8-check-label"
1064
+ />
1065
+ </div>
1066
+ </div>
1067
+ </div>
1068
+ <div class="pf-v6-c-card__title">
1069
+ <h2
1070
+ class="pf-v6-c-card__title-text"
1071
+ id="card-view-basic-example-gallery-card-8-check-label"
1072
+ >JBoss Data Grid</h2>
1073
+ <div class="pf-v6-c-content">
1074
+ <small>Provided by Red Hat</small>
1075
+ </div>
1076
+ </div>
1077
+ <div
1078
+ class="pf-v6-c-card__body"
1079
+ >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
1080
+ </div>
1081
+ <div
1082
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
1083
+ id="card-view-basic-example-gallery-card-9"
1084
+ >
1085
+ <div class="pf-v6-c-card__header">
1086
+ <img
1087
+ src="/assets/images/FuseConnector_Icons_REST.png"
1088
+ width="60px"
1089
+ alt="Logo"
1090
+ />
1091
+ <div class="pf-v6-c-card__actions">
1092
+ <button
1093
+ class="pf-v6-c-menu-toggle pf-m-plain"
1094
+ type="button"
1095
+ aria-expanded="false"
1096
+ aria-label="Menu toggle"
1097
+ id="card-view-basic-example-gallery-card-9-toggle"
1098
+ >
1099
+ <span class="pf-v6-c-menu-toggle__icon">
1100
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1101
+ </span>
1102
+ </button>
1103
+ <div class="pf-v6-c-check pf-m-standalone">
1104
+ <input
1105
+ class="pf-v6-c-check__input"
1106
+ type="checkbox"
1107
+ id="card-view-basic-example-gallery-card-9-check"
1108
+ name="card-view-basic-example-gallery-card-9-check"
1109
+ aria-labelledby="card-view-basic-example-gallery-card-9-check-label"
1110
+ />
1111
+ </div>
1112
+ </div>
1113
+ </div>
1114
+ <div class="pf-v6-c-card__title">
1115
+ <h2
1116
+ class="pf-v6-c-card__title-text"
1117
+ id="card-view-basic-example-gallery-card-9-check-label"
1118
+ >Rest</h2>
1119
+ <div class="pf-v6-c-content">
1120
+ <small>Provided by Red Hat</small>
1121
+ </div>
1122
+ </div>
1123
+ <div class="pf-v6-c-card__body">
1124
+ The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport.
1125
+ From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
1126
+ </div>
1127
+ </div>
1128
+ <div
1129
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
1130
+ id="card-view-basic-example-gallery-card-10"
1131
+ >
1132
+ <div class="pf-v6-c-card__header">
1133
+ <img
1134
+ src="/assets/images/camel-swagger-java_200x150.png"
1135
+ width="60px"
1136
+ alt="Logo"
1137
+ />
1138
+ <div class="pf-v6-c-card__actions">
1139
+ <button
1140
+ class="pf-v6-c-menu-toggle pf-m-plain"
1141
+ type="button"
1142
+ aria-expanded="false"
1143
+ aria-label="Menu toggle"
1144
+ id="card-view-basic-example-gallery-card-10-toggle"
1145
+ >
1146
+ <span class="pf-v6-c-menu-toggle__icon">
1147
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
1148
+ </span>
1149
+ </button>
1150
+ <div class="pf-v6-c-check pf-m-standalone">
1151
+ <input
1152
+ class="pf-v6-c-check__input"
1153
+ type="checkbox"
1154
+ id="card-view-basic-example-gallery-card-10-check"
1155
+ name="card-view-basic-example-gallery-card-10-check"
1156
+ aria-labelledby="card-view-basic-example-gallery-card-10-check-label"
1157
+ />
1158
+ </div>
1159
+ </div>
1160
+ </div>
1161
+ <div class="pf-v6-c-card__title">
1162
+ <h2
1163
+ class="pf-v6-c-card__title-text"
1164
+ id="card-view-basic-example-gallery-card-10-check-label"
1165
+ >SWAGGER</h2>
1166
+ <div class="pf-v6-c-content">
1167
+ <small>Provided by Red Hat</small>
1168
+ </div>
1169
+ </div>
1170
+ <div
1171
+ class="pf-v6-c-card__body"
1172
+ >Expose REST services and their APIs using Swagger specification.</div>
1173
+ </div>
1174
+ </div>
1175
+ </div>
1176
+ </div>
1177
+ </div>
1178
+ </div>
1179
+ <div class="pf-v6-c-compass__sidebar pf-m-end">
1180
+ <div class="pf-v6-c-compass__panel pf-m-pill">
1181
+ <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
1182
+ <div class="pf-v6-c-action-list__item">
1183
+ <button
1184
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1185
+ type="button"
1186
+ aria-label="Help"
1187
+ >
1188
+ <span class="pf-v6-c-button__icon">
1189
+ <svg
1190
+ class="pf-v6-svg"
1191
+ viewBox="0 0 512 512"
1192
+ fill="currentColor"
1193
+ role="img"
1194
+ width="1em"
1195
+ height="1em"
1196
+ aria-hidden="true"
1197
+ >
1198
+ <path
1199
+ d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
1200
+ />
1201
+ </svg>
1202
+ </span>
1203
+ </button>
1204
+ </div>
1205
+ <div class="pf-v6-c-action-list__item">
1206
+ <button
1207
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1208
+ type="button"
1209
+ aria-label="User profile"
1210
+ >
1211
+ <span class="pf-v6-c-button__icon">
1212
+ <svg
1213
+ class="pf-v6-svg"
1214
+ viewBox="0 0 448 512"
1215
+ fill="currentColor"
1216
+ role="img"
1217
+ width="1em"
1218
+ height="1em"
1219
+ aria-hidden="true"
1220
+ >
1221
+ <path
1222
+ d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
1223
+ />
1224
+ </svg>
1225
+ </span>
1226
+ </button>
1227
+ </div>
1228
+ <div class="pf-v6-c-action-list__item">
1229
+ <button
1230
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1231
+ type="button"
1232
+ aria-label="Send"
1233
+ >
1234
+ <span class="pf-v6-c-button__icon">
1235
+ <svg
1236
+ class="pf-v6-svg"
1237
+ viewBox="0 0 512 512"
1238
+ fill="currentColor"
1239
+ role="img"
1240
+ width="1em"
1241
+ height="1em"
1242
+ aria-hidden="true"
1243
+ >
1244
+ <path
1245
+ d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
1246
+ />
1247
+ </svg>
1248
+ </span>
1249
+ </button>
1250
+ </div>
1251
+ </div>
1252
+ </div>
1253
+ </div>
1254
+ <div class="pf-v6-c-compass__footer">
1255
+ <div
1256
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
1257
+ >chatbot message bar</div>
1258
+ </div>
1259
+ </div>
1260
+
1261
+ ```
1262
+
1263
+ ### Dashboard
1264
+
1265
+ ```html isFullscreen isBeta
1266
+ <div
1267
+ class="pf-v6-c-compass"
1268
+ style="
1269
+ --pf-v6-c-compass--BackgroundImage--light: url(./assets/images/compass--wallpaper-light.png);
1270
+ --pf-v6-c-compass--BackgroundImage--dark: url(./assets/images/compass--wallpaper-dark.png);
1271
+ /*
1272
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,0,0;
1273
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .1;
1274
+ --pf-v6-c-compass__panel--BackgroundColor--light: yellow;
1275
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,0,0;
1276
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .1;
1277
+ --pf-v6-c-compass__panel--BackgroundColor--light: yellow;
1278
+ */
1279
+ "
1280
+ >
1281
+ <div class="pf-v6-c-compass__header">
1282
+ <div class="pf-v6-c-compass__logo">
1283
+ <svg
1284
+ width="192"
1285
+ height="39"
1286
+ viewBox="0 0 192 39"
1287
+ fill="none"
1288
+ xmlns="http://www.w3.org/2000/svg"
1289
+ aria-hidden="true"
1290
+ >
1291
+ <path
1292
+ d="M33.3807 22.9001C36.6672 22.9001 41.4287 22.2167 41.4287 18.2926C41.4287 17.9865 41.4209 17.6883 41.3472 17.3901L39.3885 8.85069C38.9336 6.97444 38.5392 6.11944 35.2501 4.47014C32.7023 3.16125 27.1468 1 25.5035 1C23.9733 1 23.5211 2.98972 21.7069 2.98972C19.8927 2.98972 18.6465 1.51194 17.0032 1.51194C15.3599 1.51194 14.395 2.59389 13.6036 4.81056C13.6036 4.81056 11.3924 11.0674 11.1085 11.9778C11.0506 12.1493 11.0506 12.3393 11.0506 12.4897C11.0506 14.9228 20.5921 22.9001 33.3833 22.9001M41.9414 19.8839C42.3963 22.0451 42.3963 22.2721 42.3963 22.5571C42.3963 26.2542 38.2579 28.3019 32.818 28.3019C20.5185 28.3019 9.74918 21.0767 9.74918 16.3003C9.74918 15.5614 9.92008 14.8779 10.1462 14.366C5.72383 14.5929 0 15.3899 0 20.4539C0 28.7585 19.6114 39 35.1396 39C47.0421 39 50.0447 33.5956 50.0447 29.3285C50.0447 25.9718 47.1552 22.1612 41.9388 19.8839"
1293
+ fill="#EE0000"
1294
+ />
1295
+ <path
1296
+ d="M41.9386 19.8864C42.3935 22.0477 42.3935 22.2746 42.3935 22.5596C42.3935 26.2567 38.255 28.3045 32.8152 28.3045C20.5157 28.3045 9.74634 21.0792 9.74634 16.3028C9.74634 15.5639 9.91724 14.8804 10.1434 14.3685L11.1083 11.9777C11.0504 12.1492 11.0504 12.3392 11.0504 12.4896C11.0504 14.9227 20.5919 22.9 33.3831 22.9C36.6696 22.9 41.4312 22.2165 41.4312 18.2925C41.4312 17.9864 41.4233 17.6882 41.3496 17.39L41.9412 19.8864H41.9386Z"
1297
+ fill="black"
1298
+ />
1299
+ <path
1300
+ d="M75.764 16V1.29995H82.295C83.261 1.29995 84.115 1.48895 84.857 1.86695C85.599 2.24495 86.173 2.76995 86.579 3.44195C86.999 4.09995 87.209 4.86995 87.209 5.75195C87.209 6.70395 86.943 7.53695 86.411 8.25095C85.893 8.95095 85.186 9.46195 84.29 9.78395L87.398 16H84.605L81.77 10.12H78.284V16H75.764ZM78.284 8.10395H82.064C82.848 8.10395 83.478 7.89395 83.954 7.47395C84.43 7.03995 84.668 6.47295 84.668 5.77295C84.668 5.05895 84.43 4.49195 83.954 4.07195C83.478 3.63795 82.848 3.42095 82.064 3.42095H78.284V8.10395Z"
1301
+ fill="var(--pf-t--global--text--color--regular)"
1302
+ />
1303
+ <path
1304
+ d="M93.9392 16.21C92.9312 16.21 92.0212 15.972 91.2092 15.496C90.3972 15.006 89.7532 14.3549 89.2772 13.5429C88.8012 12.7169 88.5632 11.7859 88.5632 10.75C88.5632 9.71395 88.7872 8.78995 89.2352 7.97795C89.6832 7.16595 90.2922 6.52195 91.0622 6.04595C91.8462 5.55595 92.7142 5.31095 93.6662 5.31095C94.6462 5.31095 95.5072 5.54895 96.2492 6.02495C97.0052 6.50095 97.5932 7.14495 98.0132 7.95695C98.4472 8.76895 98.6642 9.69995 98.6642 10.75V11.3169H90.8942C90.9782 11.8909 91.1602 12.4019 91.4402 12.8499C91.7342 13.2839 92.1052 13.627 92.5532 13.879C93.0152 14.1309 93.5122 14.257 94.0442 14.257C94.5342 14.257 94.9962 14.173 95.4302 14.005C95.8782 13.823 96.2492 13.578 96.5432 13.2699L98.0972 14.677C97.4532 15.209 96.7952 15.601 96.1232 15.853C95.4652 16.091 94.7372 16.21 93.9392 16.21ZM90.9152 9.84695H96.4172C96.3332 9.34295 96.1582 8.89495 95.8922 8.50295C95.6402 8.11095 95.3182 7.80295 94.9262 7.57895C94.5482 7.35495 94.1282 7.24295 93.6662 7.24295C93.2042 7.24295 92.7772 7.35495 92.3852 7.57895C92.0072 7.78895 91.6922 8.08995 91.4402 8.48195C91.1882 8.87395 91.0132 9.32895 90.9152 9.84695Z"
1305
+ fill="var(--pf-t--global--text--color--regular)"
1306
+ />
1307
+ <path
1308
+ d="M105.388 16.1049C104.506 16.1049 103.708 15.867 102.994 15.391C102.28 14.901 101.706 14.257 101.272 13.459C100.852 12.6469 100.642 11.7439 100.642 10.75C100.642 9.74195 100.859 8.83895 101.293 8.04095C101.727 7.22895 102.315 6.58495 103.057 6.10895C103.813 5.63295 104.646 5.39495 105.556 5.39495C106.158 5.39495 106.718 5.51395 107.236 5.75195C107.768 5.97595 108.23 6.31195 108.622 6.75995V0.94295L110.995 0.522949V16H108.643V14.6139C108.265 15.0899 107.796 15.461 107.236 15.727C106.676 15.979 106.06 16.1049 105.388 16.1049ZM106.123 14.11C106.627 14.11 107.096 14.012 107.53 13.816C107.964 13.606 108.328 13.319 108.622 12.955V8.52395C108.314 8.15995 107.943 7.87995 107.509 7.68395C107.075 7.48795 106.613 7.38995 106.123 7.38995C105.521 7.38995 104.982 7.53695 104.506 7.83095C104.044 8.11095 103.673 8.50295 103.393 9.00695C103.113 9.51095 102.973 10.092 102.973 10.75C102.973 11.38 103.113 11.9539 103.393 12.4719C103.673 12.976 104.044 13.375 104.506 13.669C104.982 13.9629 105.521 14.11 106.123 14.11Z"
1309
+ fill="var(--pf-t--global--text--color--regular)"
1310
+ />
1311
+ <path
1312
+ d="M118.848 16V1.29995H121.368V7.47395H128.676V1.29995H131.196V16H128.676V9.72095H121.368V16H118.848Z"
1313
+ fill="var(--pf-t--global--text--color--regular)"
1314
+ />
1315
+ <path
1316
+ d="M137.314 16.189C136.586 16.189 135.935 16.056 135.361 15.79C134.801 15.51 134.36 15.132 134.038 14.656C133.73 14.166 133.576 13.606 133.576 12.976C133.576 12.346 133.737 11.7999 134.059 11.3379C134.395 10.8759 134.864 10.519 135.466 10.267C136.068 10.015 136.782 9.88895 137.608 9.88895C138.098 9.88895 138.581 9.94495 139.057 10.0569C139.533 10.1549 139.995 10.323 140.443 10.561V9.38495C140.443 8.68495 140.24 8.15995 139.834 7.80995C139.442 7.45995 138.84 7.28495 138.028 7.28495C137.594 7.28495 137.125 7.35495 136.621 7.49495C136.131 7.62095 135.578 7.82395 134.962 8.10395L134.122 6.38195C135.662 5.66795 137.118 5.31095 138.49 5.31095C139.862 5.31095 140.919 5.64695 141.661 6.31895C142.417 6.97695 142.795 7.91495 142.795 9.13295V16H140.443V14.908C139.995 15.342 139.512 15.6639 138.994 15.874C138.476 16.084 137.916 16.189 137.314 16.189ZM135.802 12.934C135.802 13.424 135.998 13.809 136.39 14.089C136.782 14.3689 137.307 14.509 137.965 14.509C138.441 14.509 138.882 14.439 139.288 14.299C139.708 14.1449 140.093 13.9209 140.443 13.627V11.926C140.079 11.7579 139.701 11.6319 139.309 11.5479C138.917 11.464 138.49 11.422 138.028 11.422C137.342 11.422 136.796 11.5549 136.39 11.8209C135.998 12.0869 135.802 12.458 135.802 12.934Z"
1317
+ fill="var(--pf-t--global--text--color--regular)"
1318
+ />
1319
+ <path
1320
+ d="M149.897 16.21C148.833 16.21 148.028 15.9649 147.482 15.4749C146.936 14.971 146.663 14.236 146.663 13.2699V7.36895H144.563V5.47895H146.663V2.58095L149.036 2.07695V5.47895H151.955V7.36895H149.036V12.745C149.036 13.2629 149.148 13.634 149.372 13.858C149.596 14.068 149.974 14.1729 150.506 14.1729C150.744 14.1729 150.961 14.1589 151.157 14.1309C151.367 14.089 151.626 14.0189 151.934 13.9209V15.9159C151.64 16.0139 151.304 16.084 150.926 16.1259C150.562 16.1819 150.219 16.21 149.897 16.21Z"
1321
+ fill="var(--pf-t--global--text--color--regular)"
1322
+ />
1323
+ <path
1324
+ d="M73.916 38L79.964 23.2999H83.471L89.456 38H86.159L84.668 34.1359H78.599L77.087 38H73.916ZM79.544 31.6999H83.744L81.644 26.2819L79.544 31.6999Z"
1325
+ fill="var(--pf-t--global--text--color--regular)"
1326
+ />
1327
+ <path
1328
+ d="M94.4493 38.2099C93.6093 38.2099 92.8603 38.028 92.2023 37.664C91.5583 37.286 91.0473 36.768 90.6693 36.11C90.3053 35.452 90.1233 34.6959 90.1233 33.8419V27.059H93.0003V33.422C93.0003 34.122 93.2033 34.682 93.6093 35.102C94.0293 35.522 94.5823 35.7319 95.2683 35.7319C96.2483 35.7319 97.0043 35.368 97.5363 34.6399V27.059H100.413V38H97.5363V37.118C96.6963 37.846 95.6673 38.2099 94.4493 38.2099Z"
1329
+ fill="var(--pf-t--global--text--color--regular)"
1330
+ />
1331
+ <path
1332
+ d="M107.842 38.1679C106.625 38.1679 105.7 37.895 105.07 37.3489C104.454 36.7889 104.146 35.9769 104.146 34.9129V29.4529H101.899V27.059H104.146V24.2659L107.024 23.6149V27.059H110.153V29.4529H107.024V34.325C107.024 34.829 107.136 35.193 107.36 35.417C107.583 35.6269 107.975 35.7319 108.535 35.7319C108.815 35.7319 109.068 35.7179 109.292 35.6899C109.529 35.6479 109.789 35.5779 110.069 35.4799V37.853C109.775 37.951 109.404 38.028 108.956 38.084C108.522 38.1399 108.15 38.1679 107.842 38.1679Z"
1333
+ fill="var(--pf-t--global--text--color--regular)"
1334
+ />
1335
+ <path
1336
+ d="M116.767 38.2099C115.675 38.2099 114.688 37.958 113.806 37.4539C112.924 36.9499 112.224 36.271 111.706 35.417C111.188 34.563 110.929 33.604 110.929 32.54C110.929 31.476 111.188 30.517 111.706 29.663C112.224 28.795 112.924 28.1089 113.806 27.6049C114.688 27.101 115.675 26.8489 116.767 26.8489C117.859 26.8489 118.846 27.101 119.728 27.6049C120.61 28.1089 121.31 28.795 121.828 29.663C122.346 30.517 122.605 31.476 122.605 32.54C122.605 33.604 122.346 34.563 121.828 35.417C121.31 36.271 120.61 36.9499 119.728 37.4539C118.846 37.958 117.859 38.2099 116.767 38.2099ZM116.767 35.7109C117.341 35.7109 117.852 35.5709 118.3 35.291C118.762 35.011 119.126 34.6329 119.392 34.1569C119.672 33.6669 119.812 33.128 119.812 32.54C119.812 31.938 119.672 31.399 119.392 30.923C119.126 30.447 118.762 30.069 118.3 29.7889C117.852 29.4949 117.341 29.3479 116.767 29.3479C116.207 29.3479 115.696 29.4949 115.234 29.7889C114.772 30.069 114.408 30.447 114.142 30.923C113.876 31.399 113.743 31.938 113.743 32.54C113.743 33.128 113.876 33.6669 114.142 34.1569C114.408 34.6329 114.772 35.011 115.234 35.291C115.696 35.5709 116.207 35.7109 116.767 35.7109Z"
1337
+ fill="var(--pf-t--global--text--color--regular)"
1338
+ />
1339
+ <path
1340
+ d="M124.373 38V27.059H127.25V27.8989C128.034 27.1989 128.986 26.8489 130.106 26.8489C130.82 26.8489 131.457 26.996 132.017 27.2899C132.577 27.57 133.039 27.969 133.403 28.4869C134.313 27.3949 135.517 26.8489 137.015 26.8489C137.841 26.8489 138.562 27.038 139.178 27.416C139.808 27.78 140.298 28.291 140.648 28.9489C141.012 29.5929 141.194 30.3489 141.194 31.2169V38H138.338V31.6369C138.338 30.9229 138.149 30.3629 137.771 29.9569C137.393 29.5369 136.889 29.327 136.259 29.327C135.377 29.327 134.677 29.6909 134.159 30.4189C134.173 30.5449 134.187 30.6709 134.201 30.7969C134.215 30.9229 134.222 31.063 134.222 31.2169V38H131.345V31.6369C131.345 30.9229 131.156 30.3629 130.778 29.9569C130.414 29.5369 129.917 29.327 129.287 29.327C128.405 29.327 127.726 29.6629 127.25 30.3349V38H124.373Z"
1341
+ fill="var(--pf-t--global--text--color--regular)"
1342
+ />
1343
+ <path
1344
+ d="M146.87 38.1889C146.086 38.1889 145.393 38.049 144.791 37.769C144.189 37.475 143.72 37.076 143.384 36.5719C143.048 36.0679 142.88 35.4869 142.88 34.8289C142.88 33.7789 143.272 32.9669 144.056 32.393C144.854 31.805 145.946 31.511 147.332 31.511C148.284 31.511 149.18 31.6579 150.02 31.952V31.1539C150.02 29.8799 149.25 29.243 147.71 29.243C147.248 29.243 146.751 29.32 146.219 29.4739C145.687 29.6139 145.071 29.8379 144.371 30.146L143.321 28.025C144.189 27.6329 145.015 27.3389 145.799 27.143C146.597 26.947 147.395 26.8489 148.193 26.8489C149.663 26.8489 150.804 27.2059 151.616 27.92C152.442 28.62 152.855 29.6139 152.855 30.9019V38H150.02V37.2229C149.572 37.5589 149.089 37.804 148.571 37.958C148.053 38.1119 147.486 38.1889 146.87 38.1889ZM145.61 34.7659C145.61 35.186 145.792 35.5219 146.156 35.7739C146.52 36.0119 147.003 36.131 147.605 36.131C148.571 36.131 149.376 35.893 150.02 35.417V33.8209C149.32 33.541 148.55 33.401 147.71 33.401C147.052 33.401 146.534 33.527 146.156 33.7789C145.792 34.0169 145.61 34.346 145.61 34.7659Z"
1345
+ fill="var(--pf-t--global--text--color--regular)"
1346
+ />
1347
+ <path
1348
+ d="M159.912 38.1679C158.694 38.1679 157.77 37.895 157.14 37.3489C156.524 36.7889 156.216 35.9769 156.216 34.9129V29.4529H153.969V27.059H156.216V24.2659L159.093 23.6149V27.059H162.222V29.4529H159.093V34.325C159.093 34.829 159.205 35.193 159.429 35.417C159.653 35.6269 160.045 35.7319 160.605 35.7319C160.885 35.7319 161.137 35.7179 161.361 35.6899C161.599 35.6479 161.858 35.5779 162.138 35.4799V37.853C161.844 37.951 161.473 38.028 161.025 38.084C160.591 38.1399 160.22 38.1679 159.912 38.1679Z"
1349
+ fill="var(--pf-t--global--text--color--regular)"
1350
+ />
1351
+ <path
1352
+ d="M163.625 38V27.059H166.502V38H163.625ZM165.053 25.757C164.605 25.757 164.22 25.596 163.898 25.274C163.576 24.952 163.415 24.5669 163.415 24.1189C163.415 23.6569 163.576 23.2719 163.898 22.9639C164.22 22.6419 164.605 22.4809 165.053 22.4809C165.515 22.4809 165.9 22.6419 166.208 22.9639C166.53 23.2719 166.691 23.6569 166.691 24.1189C166.691 24.5669 166.53 24.952 166.208 25.274C165.9 25.596 165.515 25.757 165.053 25.757Z"
1353
+ fill="var(--pf-t--global--text--color--regular)"
1354
+ />
1355
+ <path
1356
+ d="M174.086 38.2099C172.994 38.2099 172.007 37.958 171.125 37.4539C170.243 36.9499 169.543 36.271 169.025 35.417C168.507 34.563 168.248 33.604 168.248 32.54C168.248 31.476 168.507 30.517 169.025 29.663C169.543 28.795 170.243 28.1089 171.125 27.6049C172.007 27.101 172.994 26.8489 174.086 26.8489C175.178 26.8489 176.165 27.101 177.047 27.6049C177.929 28.1089 178.629 28.795 179.147 29.663C179.665 30.517 179.924 31.476 179.924 32.54C179.924 33.604 179.665 34.563 179.147 35.417C178.629 36.271 177.929 36.9499 177.047 37.4539C176.165 37.958 175.178 38.2099 174.086 38.2099ZM174.086 35.7109C174.66 35.7109 175.171 35.5709 175.619 35.291C176.081 35.011 176.445 34.6329 176.711 34.1569C176.991 33.6669 177.131 33.128 177.131 32.54C177.131 31.938 176.991 31.399 176.711 30.923C176.445 30.447 176.081 30.069 175.619 29.7889C175.171 29.4949 174.66 29.3479 174.086 29.3479C173.526 29.3479 173.015 29.4949 172.553 29.7889C172.091 30.069 171.727 30.447 171.461 30.923C171.195 31.399 171.062 31.938 171.062 32.54C171.062 33.128 171.195 33.6669 171.461 34.1569C171.727 34.6329 172.091 35.011 172.553 35.291C173.015 35.5709 173.526 35.7109 174.086 35.7109Z"
1357
+ fill="var(--pf-t--global--text--color--regular)"
1358
+ />
1359
+ <path
1360
+ d="M181.693 38V27.059H184.57V27.962C185.396 27.2199 186.418 26.8489 187.636 26.8489C188.49 26.8489 189.239 27.038 189.883 27.416C190.541 27.78 191.052 28.291 191.416 28.9489C191.78 29.5929 191.962 30.3489 191.962 31.2169V38H189.085V31.6369C189.085 30.9229 188.882 30.3629 188.476 29.9569C188.07 29.5369 187.517 29.327 186.817 29.327C186.327 29.327 185.893 29.425 185.515 29.621C185.137 29.803 184.822 30.0689 184.57 30.4189V38H181.693Z"
1361
+ fill="var(--pf-t--global--text--color--regular)"
1362
+ />
1363
+ <line
1364
+ x1="66.5"
1365
+ y1="1.5"
1366
+ x2="66.5"
1367
+ y2="38.5"
1368
+ stroke="var(--pf-t--global--text--color--regular)"
1369
+ stroke-linecap="round"
1370
+ />
1371
+ </svg>
1372
+ </div>
1373
+ <div class="pf-v6-c-compass__nav">
1374
+ <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
1375
+ <nav
1376
+ class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
1377
+ aria-label="Primary nav"
1378
+ role="region"
1379
+ id="primary-nav"
1380
+ >
1381
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1382
+ <button
1383
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1384
+ type="button"
1385
+ aria-label="Scroll left"
1386
+ disabled
1387
+ >
1388
+ <span class="pf-v6-c-button__icon">
1389
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1390
+ </span>
1391
+ </button>
1392
+ </div>
1393
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1394
+ <li class="pf-v6-c-tabs__item" role="presentation">
1395
+ <a
1396
+ class="pf-v6-c-tabs__link"
1397
+ href="#"
1398
+ role="tab"
1399
+ id="primary-nav-users-link"
1400
+ >
1401
+ <span class="pf-v6-c-tabs__item-text">Users</span>
1402
+ </a>
1403
+ </li>
1404
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1405
+ <a
1406
+ class="pf-v6-c-tabs__link"
1407
+ href="#"
1408
+ role="tab"
1409
+ id="primary-nav-containers-link"
1410
+ >
1411
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
1412
+ </a>
1413
+ </li>
1414
+ <li class="pf-v6-c-tabs__item" role="presentation">
1415
+ <a
1416
+ class="pf-v6-c-tabs__link"
1417
+ href="#"
1418
+ role="tab"
1419
+ id="primary-nav-database-link"
1420
+ >
1421
+ <span class="pf-v6-c-tabs__item-text">Database</span>
1422
+ </a>
1423
+ </li>
1424
+
1425
+ <li class="pf-v6-c-tabs__item" role="presentation">
1426
+ <a
1427
+ class="pf-v6-c-tabs__link"
1428
+ href="#"
1429
+ role="tab"
1430
+ id="primary-nav-server-link"
1431
+ >
1432
+ <span class="pf-v6-c-tabs__item-text">Server</span>
1433
+ </a>
1434
+ </li>
1435
+ <li class="pf-v6-c-tabs__item" role="presentation">
1436
+ <a
1437
+ class="pf-v6-c-tabs__link"
1438
+ href="#"
1439
+ role="tab"
1440
+ id="primary-nav-system-link"
1441
+ >
1442
+ <span class="pf-v6-c-tabs__item-text">System</span>
1443
+ </a>
1444
+ </li>
1445
+ <li class="pf-v6-c-tabs__item" role="presentation">
1446
+ <a
1447
+ class="pf-v6-c-tabs__link"
1448
+ href="#"
1449
+ role="tab"
1450
+ id="primary-nav-network-wired-link"
1451
+ >
1452
+ <span class="pf-v6-c-tabs__item-text">Network</span>
1453
+ </a>
1454
+ </li>
1455
+ </ul>
1456
+
1457
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1458
+ <button
1459
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1460
+ type="button"
1461
+ aria-label="Scroll right"
1462
+ disabled
1463
+ >
1464
+ <span class="pf-v6-c-button__icon">
1465
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1466
+ </span>
1467
+ </button>
1468
+ </div>
1469
+ </nav>
1470
+ </div>
1471
+ <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
1472
+ <nav
1473
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
1474
+ aria-label="Secondary nav"
1475
+ role="region"
1476
+ id="secondary-nav"
1477
+ >
1478
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1479
+ <button
1480
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1481
+ type="button"
1482
+ aria-label="Scroll left"
1483
+ disabled
1484
+ >
1485
+ <span class="pf-v6-c-button__icon">
1486
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
1487
+ </span>
1488
+ </button>
1489
+ </div>
1490
+ <ul class="pf-v6-c-tabs__list" role="tablist">
1491
+ <li class="pf-v6-c-tabs__item" role="presentation">
1492
+ <a
1493
+ class="pf-v6-c-tabs__link"
1494
+ href="#"
1495
+ role="tab"
1496
+ id="secondary-nav-sub-1-link"
1497
+ >
1498
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
1499
+ </a>
1500
+ </li>
1501
+ <li class="pf-v6-c-tabs__item" role="presentation">
1502
+ <a
1503
+ class="pf-v6-c-tabs__link"
1504
+ href="#"
1505
+ role="tab"
1506
+ id="secondary-nav-sub-2-link"
1507
+ >
1508
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
1509
+ </a>
1510
+ </li>
1511
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
1512
+ <a
1513
+ class="pf-v6-c-tabs__link"
1514
+ href="#"
1515
+ role="tab"
1516
+ id="secondary-nav-sub-3-link"
1517
+ >
1518
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
1519
+ </a>
1520
+ </li>
1521
+
1522
+ <li class="pf-v6-c-tabs__item" role="presentation">
1523
+ <a
1524
+ class="pf-v6-c-tabs__link pf-m-disabled"
1525
+ aria-disabled="true"
1526
+ tabindex="-1"
1527
+ href="#"
1528
+ role="tab"
1529
+ id="secondary-nav-sub-disabled-link"
1530
+ >
1531
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
1532
+ </a>
1533
+ </li>
1534
+ <li class="pf-v6-c-tabs__item" role="presentation">
1535
+ <a
1536
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
1537
+ aria-disabled="true"
1538
+ href="#"
1539
+ role="tab"
1540
+ id="secondary-nav-sub-aria-disabled-link"
1541
+ >
1542
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
1543
+ </a>
1544
+ </li>
1545
+ <li class="pf-v6-c-tabs__item" role="presentation">
1546
+ <a
1547
+ class="pf-v6-c-tabs__link"
1548
+ href="#"
1549
+ role="tab"
1550
+ id="secondary-nav-sub-6-link"
1551
+ >
1552
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
1553
+ </a>
1554
+ </li>
1555
+ </ul>
1556
+
1557
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
1558
+ <button
1559
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1560
+ type="button"
1561
+ aria-label="Scroll right"
1562
+ disabled
1563
+ >
1564
+ <span class="pf-v6-c-button__icon">
1565
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1566
+ </span>
1567
+ </button>
1568
+ </div>
1569
+ </nav>
1570
+ </div>
1571
+ </div>
1572
+ <div class="pf-v6-c-compass__profile">
1573
+ <button
1574
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1575
+ type="button"
1576
+ aria-expanded="false"
1577
+ aria-label="Menu toggle"
1578
+ >
1579
+ <span class="pf-v6-c-menu-toggle__icon">
1580
+ <img
1581
+ class="pf-v6-c-avatar pf-m-md"
1582
+ alt="Avatar image"
1583
+ src="/assets/images/img_avatar-light.svg"
1584
+ />
1585
+ </span>
1586
+ <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
1587
+ <span class="pf-v6-c-menu-toggle__controls">
1588
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1589
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1590
+ </span>
1591
+ </span>
1592
+ </button>
1593
+ </div>
1594
+ </div>
1595
+ <div class="pf-v6-c-compass__sidebar pf-m-start">
1596
+ <div class="pf-v6-c-compass__panel pf-m-pill">
1597
+ <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
1598
+ <div class="pf-v6-c-action-list__item">
1599
+ <button
1600
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1601
+ type="button"
1602
+ aria-label="Add"
1603
+ >
1604
+ <span class="pf-v6-c-button__icon">
1605
+ <svg
1606
+ class="pf-v6-svg"
1607
+ viewBox="0 0 448 512"
1608
+ fill="currentColor"
1609
+ role="img"
1610
+ width="1em"
1611
+ height="1em"
1612
+ aria-hidden="true"
1613
+ >
1614
+ <path
1615
+ d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
1616
+ />
1617
+ </svg>
1618
+ </span>
1619
+ </button>
1620
+ </div>
1621
+ <div class="pf-v6-c-action-list__item">
1622
+ <button
1623
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1624
+ type="button"
1625
+ aria-label="Help"
1626
+ >
1627
+ <span class="pf-v6-c-button__icon">
1628
+ <svg
1629
+ class="pf-v6-svg"
1630
+ viewBox="0 0 512 512"
1631
+ fill="currentColor"
1632
+ role="img"
1633
+ width="1em"
1634
+ height="1em"
1635
+ aria-hidden="true"
1636
+ >
1637
+ <path
1638
+ d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
1639
+ />
1640
+ </svg>
1641
+ </span>
1642
+ </button>
1643
+ </div>
1644
+ <div class="pf-v6-c-action-list__item">
1645
+ <button
1646
+ class="pf-v6-c-button pf-v6-m-ai-indicator pf-m-circle pf-m-plain"
1647
+ type="button"
1648
+ aria-label="AI assistant"
1649
+ >
1650
+ <span class="pf-v6-c-button__icon">
1651
+ <svg
1652
+ fill="currentColor"
1653
+ width="1em"
1654
+ height="1em"
1655
+ viewBox="0 0 32 32"
1656
+ style="translate: .05em .1em; scale: 1.1"
1657
+ aria-hidden="true"
1658
+ >
1659
+ <g id="uuid-75f76c23-c1b6-4d16-98c6-ad548b061af4">
1660
+ <rect width="32" height="32" fill="none" />
1661
+ </g>
1662
+ <g id="uuid-08df3350-7f5a-4f9c-8ddc-ec9ca74ef47e">
1663
+ <path
1664
+ fill="var(--pf-t--global--icon--color--regular)"
1665
+ d="M26.03711,16.96191c-5.9043-.46826-10.53027-5.09424-10.99902-10.99121-.03711-.52344-.51367-.96973-1.03809-.96973-.52148,0-.99707.44189-1.03809.96191-.46875,5.90479-5.09473,10.53076-10.99121,10.99854-.52344.0376-.96973.51416-.96973,1.03857,0,.52148.44238.99707.96191,1.03809,5.9043.46875,10.53027,5.09473,10.99902,10.99121.03711.52344.51367.96973,1.03809.96973.52148,0,.99707-.44238,1.03809-.96191.46875-5.9043,5.09473-10.53027,10.99902-10.99902.51953-.04199.96191-.51562.96191-1.03809,0-.52148-.44238-.99707-.96191-1.03809Z"
1666
+ />
1667
+ <path
1668
+ fill="var(--pf-t--global--icon--color--regular)"
1669
+ d="M30.06836,6.14746c-1.59668-.35693-2.85938-1.61914-3.21582-3.21387-.08887-.40332-.43945-.68555-.85254-.68555s-.76367.28223-.85156.68311c-.35742,1.59717-1.62012,2.85938-3.21973,3.2168-.40039.09131-.68066.44141-.68066.85205s.28027.76074.68359.85254c1.59668.35693,2.85938,1.61914,3.21582,3.21387.08887.40332.43945.68555.85254.68555s.76367-.28223.85156-.68311c.35742-1.59717,1.62012-2.85938,3.2168-3.21631.00098,0,.00195-.00049.00293-.00049.40039-.09131.68066-.44141.68066-.85205s-.28027-.76074-.68359-.85254Z"
1670
+ />
1671
+ </g>
1672
+ </svg>
1673
+ </span>
1674
+ </button>
1675
+ </div>
1676
+ <div class="pf-v6-c-action-list__item">
1677
+ <button
1678
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1679
+ type="button"
1680
+ aria-label="User profile"
1681
+ >
1682
+ <span class="pf-v6-c-button__icon">
1683
+ <svg
1684
+ class="pf-v6-svg"
1685
+ viewBox="0 0 448 512"
1686
+ fill="currentColor"
1687
+ role="img"
1688
+ width="1em"
1689
+ height="1em"
1690
+ aria-hidden="true"
1691
+ >
1692
+ <path
1693
+ d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
1694
+ />
1695
+ </svg>
1696
+ </span>
1697
+ </button>
1698
+ </div>
1699
+ <div class="pf-v6-c-action-list__item">
1700
+ <button
1701
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1702
+ type="button"
1703
+ aria-label="Send"
1704
+ >
1705
+ <span class="pf-v6-c-button__icon">
1706
+ <svg
1707
+ class="pf-v6-svg"
1708
+ viewBox="0 0 512 512"
1709
+ fill="currentColor"
1710
+ role="img"
1711
+ width="1em"
1712
+ height="1em"
1713
+ aria-hidden="true"
1714
+ >
1715
+ <path
1716
+ d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
1717
+ />
1718
+ </svg>
1719
+ </span>
1720
+ </button>
1721
+ </div>
1722
+ </div>
1723
+ </div>
1724
+ </div>
1725
+ <div class="pf-v6-c-compass__main">
1726
+ <div
1727
+ class="pf-v6-c-compass__panel pf-v6-c-compass__hero"
1728
+ style="
1729
+ --pf-v6-c-compass__hero--gradient--stop-1--dark: #000;
1730
+ --pf-v6-c-compass__hero--gradient--stop-2--dark: #1b0d33;
1731
+ --pf-v6-c-compass__hero--gradient--stop-3--dark: #3d2785;
1732
+ --pf-v6-c-compass__hero--BackgroundImage--light: url(./assets/images/compass--hero-bg.png);
1733
+ --pf-v6-c-compass__hero--BackgroundImage--dark: url(./assets/images/compass--hero-bg.png);
1734
+ "
1735
+ >
1736
+ <div class="pf-v6-c-compass__hero-body">
1737
+ <div class="pf-v6-c-content">
1738
+ <h1>Automation that does more</h1>
1739
+ <p>Red&nbsp;Hat Ansible Automation Platform offers more capabilities, accessibility, and flexibility, so you can bring the power of automation to the teams, tasks, and environments that need it.</p>
1740
+ <div class="pf-v6-c-action-list">
1741
+ <div class="pf-v6-c-action-list__group">
1742
+ <div class="pf-v6-c-action-list__item">
1743
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1744
+ <span class="pf-v6-c-button__text">Upgrade today</span>
1745
+ </button>
1746
+ </div>
1747
+ <div class="pf-v6-c-action-list__item">
1748
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
1749
+ <span class="pf-v6-c-button__text">Talk to a Red Hatter</span>
1750
+ </button>
1751
+ </div>
1752
+ </div>
1753
+ </div>
1754
+ </div>
1755
+ </div>
1756
+ </div>
1757
+ <div class="pf-v6-c-compass__content">
1758
+ <div class="pf-v6-l-grid pf-m-gutter">
1759
+ <div
1760
+ class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-6-col-on-2xl"
1761
+ style="--pf-v6-l-grid--item--Order-on-lg:3"
1762
+ >
1763
+ <div class="pf-v6-l-flex pf-m-column">
1764
+ <div class="pf-v6-c-compass__panel pf-m-no-padding">
1765
+ <div
1766
+ class="pf-v6-c-card pf-m-plain"
1767
+ id="compass-dashboard-grid-status-card-1"
1768
+ >
1769
+ <div class="pf-v6-c-card__header">
1770
+ <h2 class="pf-v6-c-title pf-m-xl">Status</h2>
1771
+ </div>
1772
+ <div class="pf-v6-c-card__body">
1773
+ <div
1774
+ class="pf-v6-l-gallery pf-m-gutter"
1775
+ style="--pf-v6-l-gallery--GridTemplateColumns--min: 100%; --pf-v6-l-gallery--GridTemplateColumns--min-on-sm: 180px; --pf-v6-l-gallery--GridTemplateColumns--min-on-lg: 150px; --pf-v6-l-gallery--GridTemplateColumns--max-on-sm: 1fr;"
1776
+ >
1777
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1778
+ <div class="pf-v6-l-flex__item">
1779
+ <i
1780
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1781
+ aria-hidden="true"
1782
+ ></i>
1783
+ </div>
1784
+ <div class="pf-v6-l-flex__item">
1785
+ <span>Cluster</span>
1786
+ </div>
1787
+ </div>
1788
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1789
+ <div class="pf-v6-l-flex__item">
1790
+ <i
1791
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1792
+ aria-hidden="true"
1793
+ ></i>
1794
+ </div>
1795
+ <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
1796
+ <span class="popover-parent">
1797
+ <a href="#">Control Panel</a>
1798
+ </span>
1799
+ </div>
1800
+ </div>
1801
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1802
+ <div class="pf-v6-l-flex__item pf-v6-u-text-nowrap">
1803
+ <i
1804
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
1805
+ aria-hidden="true"
1806
+ ></i>
1807
+ </div>
1808
+ <div
1809
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
1810
+ >
1811
+ <div class="pf-v6-l-flex__item">
1812
+ <a href="#">Operators</a>
1813
+ </div>
1814
+ <div class="pf-v6-l-flex__item">
1815
+ <span class="pf-v6-u-text-color-subtle">1 degraded</span>
1816
+ </div>
1817
+ </div>
1818
+ </div>
1819
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1820
+ <div class="pf-v6-l-flex__item">
1821
+ <i
1822
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1823
+ aria-hidden="true"
1824
+ ></i>
1825
+ </div>
1826
+ <div
1827
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
1828
+ >
1829
+ <div class="pf-v6-l-flex__item">
1830
+ <a href="#">Image Vulnerabilities</a>
1831
+ </div>
1832
+ <div class="pf-v6-l-flex__item">
1833
+ <span class="pf-v6-u-color-200">0 vulnerabilities</span>
1834
+ </div>
1835
+ </div>
1836
+ </div>
1837
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1838
+ <div class="pf-v6-l-flex__item">
1839
+ <i
1840
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1841
+ aria-hidden="true"
1842
+ ></i>
1843
+ </div>
1844
+ <div
1845
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
1846
+ >
1847
+ <div class="pf-v6-l-flex__item">
1848
+ <a href="#">Storage</a>
1849
+ </div>
1850
+ <div class="pf-v6-l-flex__item">
1851
+ <span class="pf-v6-u-color-200">Degraded</span>
1852
+ </div>
1853
+ </div>
1854
+ </div>
1855
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1856
+ <div class="pf-v6-l-flex__item">
1857
+ <i
1858
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1859
+ aria-hidden="true"
1860
+ ></i>
1861
+ </div>
1862
+ <div
1863
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
1864
+ >
1865
+ <div class="pf-v6-l-flex__item">
1866
+ <a href="#">Hardware</a>
1867
+ </div>
1868
+ </div>
1869
+ </div>
1870
+ <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-nowrap">
1871
+ <div class="pf-v6-l-flex__item">
1872
+ <i
1873
+ class="fas fa-check-circle pf-v6-u-success-color-100"
1874
+ aria-hidden="true"
1875
+ ></i>
1876
+ </div>
1877
+ <div
1878
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none"
1879
+ >
1880
+ <div class="pf-v6-l-flex__item">
1881
+ <a href="#">Insights</a>
1882
+ </div>
1883
+ </div>
1884
+ </div>
1885
+ </div>
1886
+ </div>
1887
+ </div>
1888
+ <!-- inventory -->
1889
+ </div>
1890
+ <div class="pf-v6-c-compass__panel pf-m-no-padding">
1891
+ <div
1892
+ class="pf-v6-c-card pf-m-plain"
1893
+ id="compass-dashboard-grid-line-chart-card-1"
1894
+ >
1895
+ <div class="pf-v6-c-card__header">
1896
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
1897
+ <button
1898
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
1899
+ type="button"
1900
+ aria-expanded="false"
1901
+ id="compass-dashboard-grid-line-chart-card-1-select-dropdown"
1902
+ >
1903
+ <span class="pf-v6-c-menu-toggle__text">24 hours</span>
1904
+ <span class="pf-v6-c-menu-toggle__controls">
1905
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
1906
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
1907
+ </span>
1908
+ </span>
1909
+ </button>
1910
+ </div>
1911
+ <div
1912
+ class="pf-v6-c-card__title"
1913
+ id="compass-dashboard-grid-line-chart-card-1-title"
1914
+ >
1915
+ <h2 class="pf-v6-c-title pf-m-xl">Cluster utilizations</h2>
1916
+ </div>
1917
+ </div>
1918
+ <div
1919
+ class="pf-v6-c-card pf-m-plain pf-m-expanded pf-m-plain"
1920
+ id="compass-dashboard-grid-line-chart-card-1-group-1"
1921
+ >
1922
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
1923
+ <div class="pf-v6-c-card__header-toggle">
1924
+ <button
1925
+ class="pf-v6-c-button pf-m-plain"
1926
+ id="compass-dashboard-grid-line-chart-card-1-group-1-toggle"
1927
+ type="button"
1928
+ aria-labelledby="compass-dashboard-grid-line-chart-card-1-group-1-title compass-dashboard-grid-line-chart-card-1-group-1-toggle"
1929
+ aria-label="Details"
1930
+ >
1931
+ <span class="pf-v6-c-button__icon pf-m-start">
1932
+ <span class="pf-v6-c-card__header-toggle-icon">
1933
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
1934
+ </span>
1935
+ </span>
1936
+ </button>
1937
+ </div>
1938
+ <div class="pf-v6-c-card__title">
1939
+ <h2
1940
+ class="pf-v6-c-card__title-text"
1941
+ id="compass-dashboard-grid-line-chart-card-1-group-1-title"
1942
+ >CPU 1</h2>
1943
+ </div>
1944
+ </div>
1945
+ <div class="pf-v6-c-card__expandable-content">
1946
+ <div class="pf-v6-c-card__body">
1947
+ <div class="pf-v6-l-grid pf-m-gutter">
1948
+ <div class="pf-v6-l-grid pf-m-gutter">
1949
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
1950
+ <div
1951
+ 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-v6-u-h-100-on-md"
1952
+ >
1953
+ <div class="pf-v6-l-flex__item">
1954
+ <b>Temperature</b>
1955
+ </div>
1956
+ <hr
1957
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
1958
+ />
1959
+ <div class="pf-v6-l-flex__item">
1960
+ <span>64C</span>
1961
+ </div>
1962
+ </div>
1963
+ </div>
1964
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
1965
+ <div class="pf-v6-l-grid pf-m-gutter">
1966
+ <div class="pf-v6-l-grid__item pf-m-2-col">
1967
+ <div
1968
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
1969
+ >
1970
+ <div class="pf-v6-l-flex__item">100C</div>
1971
+ <div class="pf-v6-l-flex__item">50C</div>
1972
+ <div class="pf-v6-l-flex__item">0C</div>
1973
+ </div>
1974
+ </div>
1975
+ <div class="pf-v6-l-grid__item pf-m-10-col">
1976
+ <div class="ws-chart">
1977
+ <img
1978
+ src="/assets/images/img_line-chart-2.png"
1979
+ alt="Line chart"
1980
+ />
1981
+ </div>
1982
+ </div>
1983
+ </div>
1984
+ </div>
1985
+ </div>
1986
+ <hr class="pf-v6-c-divider pf-v6-u-hidden-on-md" />
1987
+ <div class="pf-v6-l-grid pf-m-gutter">
1988
+ <div class="pf-v6-l-grid__item pf-m-4-col-on-md">
1989
+ <div
1990
+ 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-v6-u-h-100-on-md"
1991
+ >
1992
+ <div class="pf-v6-l-flex__item">
1993
+ <b>Speed</b>
1994
+ </div>
1995
+ <hr
1996
+ class="pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md"
1997
+ />
1998
+ <div class="pf-v6-l-flex__item">
1999
+ <span>2.3Ghz</span>
2000
+ </div>
2001
+ </div>
2002
+ </div>
2003
+ <div class="pf-v6-l-grid__item pf-m-8-col-on-md">
2004
+ <div class="pf-v6-l-grid pf-m-gutter">
2005
+ <div class="pf-v6-l-grid__item pf-m-2-col">
2006
+ <div
2007
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md"
2008
+ >
2009
+ <div class="pf-v6-l-flex__item">36hz</div>
2010
+ <div class="pf-v6-l-flex__item">1.5Ghz</div>
2011
+ <div class="pf-v6-l-flex__item">0Ghz</div>
2012
+ </div>
2013
+ </div>
2014
+ <div class="pf-v6-l-grid__item pf-m-10-col">
2015
+ <div class="ws-chart">
2016
+ <img
2017
+ src="/assets/images/img_line-chart-2.png"
2018
+ alt="Line chart"
2019
+ />
2020
+ </div>
2021
+ </div>
2022
+ </div>
2023
+ </div>
2024
+ </div>
2025
+ </div>
2026
+ </div>
2027
+ </div>
2028
+ </div>
2029
+ <div
2030
+ class="pf-v6-c-card pf-m-plain pf-m-plain"
2031
+ id="compass-dashboard-grid-line-chart-card-1-group-2"
2032
+ >
2033
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
2034
+ <div class="pf-v6-c-card__header-toggle">
2035
+ <button
2036
+ class="pf-v6-c-button pf-m-plain"
2037
+ id="compass-dashboard-grid-line-chart-card-1-group-2-toggle"
2038
+ type="button"
2039
+ aria-labelledby="compass-dashboard-grid-line-chart-card-1-group-2-title compass-dashboard-grid-line-chart-card-1-group-2-toggle"
2040
+ aria-label="Details"
2041
+ >
2042
+ <span class="pf-v6-c-button__icon pf-m-start">
2043
+ <span class="pf-v6-c-card__header-toggle-icon">
2044
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2045
+ </span>
2046
+ </span>
2047
+ </button>
2048
+ </div>
2049
+ <div class="pf-v6-c-card__title">
2050
+ <h2
2051
+ class="pf-v6-c-card__title-text"
2052
+ id="compass-dashboard-grid-line-chart-card-1-group-2-title"
2053
+ >Pod count</h2>
2054
+ </div>
2055
+ </div>
2056
+ </div>
2057
+ <div
2058
+ class="pf-v6-c-card pf-m-plain pf-m-plain"
2059
+ id="compass-dashboard-grid-line-chart-card-1-group-3"
2060
+ >
2061
+ <div class="pf-v6-c-card__header pf-m-toggle-right">
2062
+ <div class="pf-v6-c-card__header-toggle">
2063
+ <button
2064
+ class="pf-v6-c-button pf-m-plain"
2065
+ id="compass-dashboard-grid-line-chart-card-1-group-3-toggle"
2066
+ type="button"
2067
+ aria-labelledby="compass-dashboard-grid-line-chart-card-1-group-3-title compass-dashboard-grid-line-chart-card-1-group-3-toggle"
2068
+ aria-label="Details"
2069
+ >
2070
+ <span class="pf-v6-c-button__icon pf-m-start">
2071
+ <span class="pf-v6-c-card__header-toggle-icon">
2072
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2073
+ </span>
2074
+ </span>
2075
+ </button>
2076
+ </div>
2077
+ <div class="pf-v6-c-card__title">
2078
+ <h2
2079
+ class="pf-v6-c-card__title-text"
2080
+ id="compass-dashboard-grid-line-chart-card-1-group-3-title"
2081
+ >Memory</h2>
2082
+ </div>
2083
+ </div>
2084
+ </div>
2085
+ </div>
2086
+ </div>
2087
+ <div class="pf-v6-c-compass__panel pf-m-no-padding">
2088
+ <div class="pf-v6-c-card pf-m-plain">
2089
+ <div class="pf-v6-c-card__title">
2090
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by severity</h2>
2091
+ </div>
2092
+ <div class="pf-v6-c-card__body">
2093
+ <div class="pf-v6-l-flex pf-m-inline-flex">
2094
+ <div class="pf-v6-l-grid pf-m-gutter pf-m-all-3-col">
2095
+ <div
2096
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2097
+ >
2098
+ <span
2099
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2100
+ >2</span>
2101
+ <span class="pf-v6-u-font-color-200">Critical</span>
2102
+ </div>
2103
+ <div
2104
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2105
+ >
2106
+ <span
2107
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2108
+ >5</span>
2109
+ <span class="pf-v6-u-font-color-200">Important</span>
2110
+ </div>
2111
+ <div
2112
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2113
+ >
2114
+ <span
2115
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2116
+ >7</span>
2117
+ <span class="pf-v6-u-font-color-200">Moderate</span>
2118
+ </div>
2119
+ <div
2120
+ class="pf-v6-l-flex pf-m-column pf-m-space-items-xs pf-m-align-items-center"
2121
+ >
2122
+ <span
2123
+ class="pf-v6-u-font-size-2xl pf-v6-u-primary-color-100"
2124
+ >12</span>
2125
+ <span class="pf-v6-u-font-color-200">Low</span>
2126
+ </div>
2127
+ </div>
2128
+ </div>
2129
+ </div>
2130
+ <div class="pf-v6-c-card__title">
2131
+ <h2 class="pf-v6-c-title pf-m-xl">Recomendations by category</h2>
2132
+ </div>
2133
+ <div class="pf-v6-c-card__body">
2134
+ <img
2135
+ src="/assets/images/img_pie-chart-with-legend.png"
2136
+ alt="Pie chart"
2137
+ width="450"
2138
+ />
2139
+ </div>
2140
+ <div class="pf-v6-c-card__footer">
2141
+ <a href="#">View more</a>
2142
+ </div>
2143
+ </div>
2144
+ </div>
2145
+ </div>
2146
+ </div>
2147
+ <div
2148
+ class="pf-v6-l-grid__item pf-m-gutter pf-m-4-col-on-lg pf-m-3-col-on-2xl"
2149
+ style="--pf-v6-l-grid--item--Order-on-lg:2"
2150
+ >
2151
+ <div
2152
+ class="pf-v6-l-flex pf-m-column pf-m-row-on-md pf-m-column-on-lg"
2153
+ >
2154
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
2155
+ <div class="pf-v6-c-compass__panel pf-m-no-padding">
2156
+ <div
2157
+ class="pf-v6-c-card pf-m-plain"
2158
+ id="compass-dashboard-grid-details-card-1"
2159
+ >
2160
+ <div class="pf-v6-c-card__title">
2161
+ <h2 class="pf-v6-c-title pf-m-xl">Details</h2>
2162
+ </div>
2163
+ <div class="pf-v6-c-card__body">
2164
+ <dl class="pf-v6-c-description-list" aria-label="Details">
2165
+ <div class="pf-v6-c-description-list__group">
2166
+ <dt
2167
+ class="pf-v6-c-description-list__term"
2168
+ >Cluster API Address</dt>
2169
+ <dd class="pf-v6-c-description-list__description">
2170
+ <div class="pf-v6-c-description-list__text">
2171
+ <a href="#">https://api1.devcluster.openshift.com</a>
2172
+ </div>
2173
+ </dd>
2174
+ </div>
2175
+ <div class="pf-v6-c-description-list__group">
2176
+ <dt class="pf-v6-c-description-list__term">Cluster ID</dt>
2177
+ <dd class="pf-v6-c-description-list__description">
2178
+ <div
2179
+ class="pf-v6-c-description-list__text"
2180
+ >63b97ac1-b850-41d9-8820-239becde9e86</div>
2181
+ </dd>
2182
+ </div>
2183
+ <div class="pf-v6-c-description-list__group">
2184
+ <dt class="pf-v6-c-description-list__term">Provider</dt>
2185
+ <dd class="pf-v6-c-description-list__description">
2186
+ <div class="pf-v6-c-description-list__text">AWS</div>
2187
+ </dd>
2188
+ </div>
2189
+ <div class="pf-v6-c-description-list__group">
2190
+ <dt
2191
+ class="pf-v6-c-description-list__term"
2192
+ >OpenShift Version</dt>
2193
+ <dd class="pf-v6-c-description-list__description">
2194
+ <div
2195
+ class="pf-v6-c-description-list__text"
2196
+ >4.5.0.ci-2020-06-16-015028</div>
2197
+ </dd>
2198
+ </div>
2199
+ <div class="pf-v6-c-description-list__group">
2200
+ <dt
2201
+ class="pf-v6-c-description-list__term"
2202
+ >Update Channel</dt>
2203
+ <dd class="pf-v6-c-description-list__description">
2204
+ <div class="pf-v6-c-description-list__text">stable-4.5</div>
2205
+ </dd>
2206
+ </div>
2207
+ </dl>
2208
+ </div>
2209
+ <hr class="pf-v6-c-divider" />
2210
+ <div class="pf-v6-c-card__footer">
2211
+ <a href="#">View Settings</a>
2212
+ </div>
2213
+ </div>
2214
+ </div>
2215
+ </div>
2216
+ <div class="pf-v6-l-flex__item pf-m-flex-1">
2217
+ <div class="pf-v6-c-compass__panel pf-m-no-padding">
2218
+ <div
2219
+ class="pf-v6-c-card pf-m-plain"
2220
+ id="compass-dashboard-grid-data-list-card-1"
2221
+ >
2222
+ <div
2223
+ class="pf-v6-c-card__header pf-v6-u-align-items-flex-start"
2224
+ >
2225
+ <div
2226
+ class="pf-v6-c-card__title"
2227
+ id="compass-dashboard-grid-data-list-card-1-title1"
2228
+ >
2229
+ <h2 class="pf-v6-c-title pf-m-lg">Inventory</h2>
2230
+ </div>
2231
+ </div>
2232
+ <ul
2233
+ class="pf-v6-c-data-list pf-m-plain pf-m-grid-none"
2234
+ role="list"
2235
+ aria-label="Simple data list example"
2236
+ id="compass-dashboard-grid-data-list-card-1-data-list"
2237
+ >
2238
+ <li class="pf-v6-c-data-list__item">
2239
+ <div class="pf-v6-c-data-list__item-row">
2240
+ <div class="pf-v6-c-data-list__item-content">
2241
+ <div
2242
+ class="pf-v6-c-data-list__cell"
2243
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-1"
2244
+ >3 Nodes</div>
2245
+ <div
2246
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2247
+ >
2248
+ <a href="#">
2249
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2250
+ <span>3</span>
2251
+ <i
2252
+ class="fas fa-check-circle pf-v6-u-success-color-100"
2253
+ aria-hidden="true"
2254
+ ></i>
2255
+ </div>
2256
+ </a>
2257
+ </div>
2258
+ </div>
2259
+ </div>
2260
+ </li>
2261
+ <li class="pf-v6-c-data-list__item">
2262
+ <div class="pf-v6-c-data-list__item-row">
2263
+ <div class="pf-v6-c-data-list__item-content">
2264
+ <div
2265
+ class="pf-v6-c-data-list__cell"
2266
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-2"
2267
+ >8 Disks</div>
2268
+ <div
2269
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2270
+ >
2271
+ <a href="#">
2272
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2273
+ <span>8</span>
2274
+ <i
2275
+ class="fas fa-check-circle pf-v6-u-success-color-100"
2276
+ aria-hidden="true"
2277
+ ></i>
2278
+ </div>
2279
+ </a>
2280
+ </div>
2281
+ </div>
2282
+ </div>
2283
+ </li>
2284
+ <li class="pf-v6-c-data-list__item">
2285
+ <div class="pf-v6-c-data-list__item-row">
2286
+ <div class="pf-v6-c-data-list__item-content">
2287
+ <div
2288
+ class="pf-v6-c-data-list__cell"
2289
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-3"
2290
+ >20 Pods</div>
2291
+ <div
2292
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2293
+ >
2294
+ <a href="#">
2295
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2296
+ <span>20</span>
2297
+ <i
2298
+ class="fas fa-check-circle pf-v6-u-success-color-100"
2299
+ aria-hidden="true"
2300
+ ></i>
2301
+ </div>
2302
+ </a>
2303
+ </div>
2304
+ </div>
2305
+ </div>
2306
+ </li>
2307
+ <li class="pf-v6-c-data-list__item">
2308
+ <div class="pf-v6-c-data-list__item-row">
2309
+ <div class="pf-v6-c-data-list__item-content">
2310
+ <div
2311
+ class="pf-v6-c-data-list__cell"
2312
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-4"
2313
+ >12 PVs</div>
2314
+ <div
2315
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2316
+ >
2317
+ <a href="#">
2318
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2319
+ <span>12</span>
2320
+ <i
2321
+ class="fas fa-check-circle pf-v6-u-success-color-100"
2322
+ aria-hidden="true"
2323
+ ></i>
2324
+ </div>
2325
+ </a>
2326
+ </div>
2327
+ </div>
2328
+ </div>
2329
+ </li>
2330
+ <li class="pf-v6-c-data-list__item">
2331
+ <div class="pf-v6-c-data-list__item-row">
2332
+ <div class="pf-v6-c-data-list__item-content">
2333
+ <div
2334
+ class="pf-v6-c-data-list__cell"
2335
+ id="compass-dashboard-grid-data-list-card-1-data-list-item-5"
2336
+ >18 PVCs</div>
2337
+ <div
2338
+ class="pf-v6-c-data-list__cell pf-m-no-fill pf-m-align-right"
2339
+ >
2340
+ <a href="#">
2341
+ <div class="pf-v6-l-flex pf-m-space-items-sm">
2342
+ <span>18</span>
2343
+ <i
2344
+ class="fas fa-check-circle pf-v6-u-success-color-100"
2345
+ aria-hidden="true"
2346
+ ></i>
2347
+ </div>
2348
+ </a>
2349
+ </div>
2350
+ </div>
2351
+ </div>
2352
+ </li>
2353
+ </ul>
2354
+ </div>
2355
+ </div>
2356
+ </div>
2357
+ </div>
2358
+ </div>
2359
+ <div
2360
+ class="pf-v6-l-grid__item pf-m-4-col-on-lg pf-m-3-col-on-2xl"
2361
+ style="--pf-v6-l-grid--item--Order-on-lg:4"
2362
+ >
2363
+ <div class="pf-v6-l-flex pf-m-column">
2364
+ <div class="pf-v6-c-compass__panel pf-m-no-padding">
2365
+ <div
2366
+ class="pf-v6-c-card pf-m-plain"
2367
+ id="compass-dashboard-grid-events-card-1"
2368
+ >
2369
+ <div class="pf-v6-c-card__header">
2370
+ <div class="pf-v6-c-card__actions pf-m-no-offset">
2371
+ <button
2372
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
2373
+ type="button"
2374
+ aria-expanded="false"
2375
+ id="compass-dashboard-grid-events-card-1-select-dropdown"
2376
+ >
2377
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
2378
+ <span class="pf-v6-c-menu-toggle__controls">
2379
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
2380
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
2381
+ </span>
2382
+ </span>
2383
+ </button>
2384
+ </div>
2385
+ <div
2386
+ class="pf-v6-c-card__title"
2387
+ id="compass-dashboard-grid-events-card-1-title1"
2388
+ style="padding-block-start: 3px;"
2389
+ >
2390
+ <h2 class="pf-v6-c-title pf-m-xl">Events</h2>
2391
+ </div>
2392
+ </div>
2393
+ <div class="pf-v6-c-card__body">
2394
+ <dl
2395
+ class="pf-v6-c-description-list pf-m-compact"
2396
+ aria-label="Events"
2397
+ >
2398
+ <div class="pf-v6-c-description-list__group">
2399
+ <dt class="pf-v6-c-description-list__term">
2400
+ <div class="pf-v6-l-flex pf-m-nowrap">
2401
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2402
+ <i
2403
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2404
+ aria-hidden="true"
2405
+ ></i>
2406
+ </div>
2407
+ <div class="pf-v6-l-flex__item">Readiness probe failed</div>
2408
+ </div>
2409
+ </dt>
2410
+ <dd class="pf-v6-c-description-list__description">
2411
+ <div
2412
+ class="pf-v6-c-description-list__text"
2413
+ >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>
2414
+ </dd>
2415
+ <dd class="pf-v6-c-description-list__description">
2416
+ <div class="pf-v6-c-description-list__text">
2417
+ <time
2418
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2419
+ >Jun 17, 11:02 am</time>
2420
+ </div>
2421
+ </dd>
2422
+ </div>
2423
+ <div class="pf-v6-c-description-list__group">
2424
+ <dt class="pf-v6-c-description-list__term">
2425
+ <div class="pf-v6-l-flex pf-m-nowrap">
2426
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2427
+ <i
2428
+ class="fas fa-check-circle pf-v6-u-success-color-100"
2429
+ aria-hidden="true"
2430
+ ></i>
2431
+ </div>
2432
+ <div class="pf-v6-l-flex__item">Successful assignment</div>
2433
+ </div>
2434
+ </dt>
2435
+ <dd class="pf-v6-c-description-list__description">
2436
+ <div
2437
+ class="pf-v6-c-description-list__text"
2438
+ >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>
2439
+ </dd>
2440
+ <dd class="pf-v6-c-description-list__description">
2441
+ <div class="pf-v6-c-description-list__text">
2442
+ <time
2443
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2444
+ >Jun 17, 11:13 am</time>
2445
+ </div>
2446
+ </dd>
2447
+ </div>
2448
+ <div class="pf-v6-c-description-list__group">
2449
+ <dt class="pf-v6-c-description-list__term">
2450
+ <div class="pf-v6-l-flex pf-m-nowrap">
2451
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2452
+ <svg
2453
+ class="pf-v6-c-spinner pf-m-md"
2454
+ role="progressbar"
2455
+ viewBox="0 0 100 100"
2456
+ aria-label="Loading"
2457
+ >
2458
+ <circle
2459
+ class="pf-v6-c-spinner__path"
2460
+ cx="50"
2461
+ cy="50"
2462
+ r="45"
2463
+ fill="none"
2464
+ />
2465
+ </svg>
2466
+ </div>
2467
+ <div class="pf-v6-l-flex__item">Pulling image</div>
2468
+ </div>
2469
+ </dt>
2470
+ <dd class="pf-v6-c-description-list__description">
2471
+ <div
2472
+ class="pf-v6-c-description-list__text"
2473
+ >Pulling image "openshift/hello-openshift"</div>
2474
+ </dd>
2475
+ <dd class="pf-v6-c-description-list__description">
2476
+ <div class="pf-v6-c-description-list__text">
2477
+ <time
2478
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2479
+ >Jun 17, 10:59 am</time>
2480
+ </div>
2481
+ </dd>
2482
+ </div>
2483
+ <div class="pf-v6-c-description-list__group">
2484
+ <dt class="pf-v6-c-description-list__term">
2485
+ <div class="pf-v6-l-flex pf-m-nowrap">
2486
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2487
+ <i
2488
+ class="fas fa-check-circle pf-v6-u-success-color-100"
2489
+ aria-hidden="true"
2490
+ ></i>
2491
+ </div>
2492
+ <div class="pf-v6-l-flex__item">Created container</div>
2493
+ </div>
2494
+ </dt>
2495
+ <dd class="pf-v6-c-description-list__description">
2496
+ <div
2497
+ class="pf-v6-c-description-list__text"
2498
+ >Created container hello-openshift</div>
2499
+ </dd>
2500
+ <dd class="pf-v6-c-description-list__description">
2501
+ <div class="pf-v6-c-description-list__text">
2502
+ <time
2503
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2504
+ >Jun 17, 10:45 am</time>
2505
+ </div>
2506
+ </dd>
2507
+ </div>
2508
+
2509
+ <div class="pf-v6-c-description-list__group">
2510
+ <dt class="pf-v6-c-description-list__term">
2511
+ <div class="pf-v6-l-flex pf-m-nowrap">
2512
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2513
+ <i
2514
+ class="fas fa-exclamation-triangle pf-v6-u-warning-color-100"
2515
+ aria-hidden="true"
2516
+ ></i>
2517
+ </div>
2518
+ <div
2519
+ class="pf-v6-l-flex__item"
2520
+ >CPU utilitization over 50%</div>
2521
+ </div>
2522
+ </dt>
2523
+ <dd class="pf-v6-c-description-list__description">
2524
+ <div
2525
+ class="pf-v6-c-description-list__text"
2526
+ >Migrated 2 pods to other hosts</div>
2527
+ </dd>
2528
+ <dd class="pf-v6-c-description-list__description">
2529
+ <div class="pf-v6-c-description-list__text">
2530
+ <time
2531
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2532
+ >Jun 17, 10:33 am</time>
2533
+ </div>
2534
+ </dd>
2535
+ </div>
2536
+
2537
+ <div class="pf-v6-c-description-list__group">
2538
+ <dt class="pf-v6-c-description-list__term">
2539
+ <div class="pf-v6-l-flex pf-m-nowrap">
2540
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2541
+ <i
2542
+ class="fas fa-exclamation-circle pf-v6-u-danger-color-100"
2543
+ aria-hidden="true"
2544
+ ></i>
2545
+ </div>
2546
+ <div class="pf-v6-l-flex__item">Rook-osd-10-328949</div>
2547
+ </div>
2548
+ </dt>
2549
+ <dd class="pf-v6-c-description-list__description">
2550
+ <div
2551
+ class="pf-v6-c-description-list__text"
2552
+ >Rebuild initiated as Disk 5 failed</div>
2553
+ </dd>
2554
+ <dd class="pf-v6-c-description-list__description">
2555
+ <div class="pf-v6-c-description-list__text">
2556
+ <time
2557
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2558
+ >Jun 17, 10:33 am</time>
2559
+ </div>
2560
+ </dd>
2561
+ </div>
2562
+
2563
+ <div class="pf-v6-c-description-list__group">
2564
+ <dt class="pf-v6-c-description-list__term">
2565
+ <div class="pf-v6-l-flex pf-m-nowrap">
2566
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2567
+ <i
2568
+ class="fas fa-check-circle pf-v6-u-success-color-100"
2569
+ aria-hidden="true"
2570
+ ></i>
2571
+ </div>
2572
+ <div class="pf-v6-l-flex__item">Created container</div>
2573
+ </div>
2574
+ </dt>
2575
+ <dd class="pf-v6-c-description-list__description">
2576
+ <div
2577
+ class="pf-v6-c-description-list__text"
2578
+ >Created container hello-openshift-123</div>
2579
+ </dd>
2580
+ <dd class="pf-v6-c-description-list__description">
2581
+ <div class="pf-v6-c-description-list__text">
2582
+ <time
2583
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2584
+ >Jun 17, 10:31 am</time>
2585
+ </div>
2586
+ </dd>
2587
+ </div>
2588
+
2589
+ <div class="pf-v6-c-description-list__group">
2590
+ <dt class="pf-v6-c-description-list__term">
2591
+ <div class="pf-v6-l-flex pf-m-nowrap">
2592
+ <div class="pf-v6-l-flex__item pf-m-spacer-sm">
2593
+ <i
2594
+ class="fas fa-check-circle pf-v6-u-success-color-100"
2595
+ aria-hidden="true"
2596
+ ></i>
2597
+ </div>
2598
+ <div class="pf-v6-l-flex__item">Created container</div>
2599
+ </div>
2600
+ </dt>
2601
+ <dd class="pf-v6-c-description-list__description">
2602
+ <div
2603
+ class="pf-v6-c-description-list__text"
2604
+ >Created container hello-openshift-456</div>
2605
+ </dd>
2606
+ <dd class="pf-v6-c-description-list__description">
2607
+ <div class="pf-v6-c-description-list__text">
2608
+ <time
2609
+ class="pf-v6-u-color-200 pf-v6-u-font-size-sm"
2610
+ >Jun 17, 10:30 am</time>
2611
+ </div>
2612
+ </dd>
2613
+ </div>
2614
+ </dl>
2615
+ </div>
2616
+ <hr class="pf-v6-c-divider" />
2617
+ <div class="pf-v6-c-card__footer">
2618
+ <a href="#">View all events</a>
2619
+ </div>
2620
+ </div>
2621
+ </div>
2622
+ </div>
2623
+ </div>
2624
+ </div>
2625
+ </div>
2626
+ </div>
2627
+ <div class="pf-v6-c-compass__sidebar pf-m-end">
2628
+ <div class="pf-v6-c-compass__panel pf-m-pill">
2629
+ <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
2630
+ <div class="pf-v6-c-action-list__item">
2631
+ <button
2632
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2633
+ type="button"
2634
+ aria-label="Help"
2635
+ >
2636
+ <span class="pf-v6-c-button__icon">
2637
+ <svg
2638
+ class="pf-v6-svg"
2639
+ viewBox="0 0 512 512"
2640
+ fill="currentColor"
2641
+ role="img"
2642
+ width="1em"
2643
+ height="1em"
2644
+ aria-hidden="true"
2645
+ >
2646
+ <path
2647
+ d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
2648
+ />
2649
+ </svg>
2650
+ </span>
2651
+ </button>
2652
+ </div>
2653
+ <div class="pf-v6-c-action-list__item">
2654
+ <button
2655
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2656
+ type="button"
2657
+ aria-label="User profile"
2658
+ >
2659
+ <span class="pf-v6-c-button__icon">
2660
+ <svg
2661
+ class="pf-v6-svg"
2662
+ viewBox="0 0 448 512"
2663
+ fill="currentColor"
2664
+ role="img"
2665
+ width="1em"
2666
+ height="1em"
2667
+ aria-hidden="true"
2668
+ >
2669
+ <path
2670
+ d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
2671
+ />
2672
+ </svg>
2673
+ </span>
2674
+ </button>
2675
+ </div>
2676
+ <div class="pf-v6-c-action-list__item">
2677
+ <button
2678
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
2679
+ type="button"
2680
+ aria-label="Send"
2681
+ >
2682
+ <span class="pf-v6-c-button__icon">
2683
+ <svg
2684
+ class="pf-v6-svg"
2685
+ viewBox="0 0 512 512"
2686
+ fill="currentColor"
2687
+ role="img"
2688
+ width="1em"
2689
+ height="1em"
2690
+ aria-hidden="true"
2691
+ >
2692
+ <path
2693
+ d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
2694
+ />
2695
+ </svg>
2696
+ </span>
2697
+ </button>
2698
+ </div>
2699
+ </div>
2700
+ </div>
2701
+ </div>
2702
+ <div class="pf-v6-c-compass__footer">
2703
+ <div
2704
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
2705
+ >chatbot message bar</div>
2706
+ </div>
2707
+ </div>
2708
+
2709
+ ```
2710
+
2711
+ ### Multiple sections
2712
+
2713
+ ```html isFullscreen isBeta
2714
+ <div
2715
+ class="pf-v6-c-compass"
2716
+ style="
2717
+ --pf-v6-c-compass--BackgroundImage--light: url(./assets/images/compass--wallpaper-light.png);
2718
+ --pf-v6-c-compass--BackgroundImage--dark: url(./assets/images/compass--wallpaper-dark.png);
2719
+ /*
2720
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,0,0;
2721
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .1;
2722
+ --pf-v6-c-compass__panel--BackgroundColor--light: yellow;
2723
+ --pf-v6-c-compass__panel--BackgroundColor--rgb--light: 255,0,0;
2724
+ --pf-v6-c-compass__panel--BackgroundColor--opacity--light: .1;
2725
+ --pf-v6-c-compass__panel--BackgroundColor--light: yellow;
2726
+ */
2727
+ "
2728
+ >
2729
+ <div class="pf-v6-c-compass__header">
2730
+ <div class="pf-v6-c-compass__logo">
2731
+ <svg
2732
+ width="192"
2733
+ height="39"
2734
+ viewBox="0 0 192 39"
2735
+ fill="none"
2736
+ xmlns="http://www.w3.org/2000/svg"
2737
+ aria-hidden="true"
2738
+ >
2739
+ <path
2740
+ d="M33.3807 22.9001C36.6672 22.9001 41.4287 22.2167 41.4287 18.2926C41.4287 17.9865 41.4209 17.6883 41.3472 17.3901L39.3885 8.85069C38.9336 6.97444 38.5392 6.11944 35.2501 4.47014C32.7023 3.16125 27.1468 1 25.5035 1C23.9733 1 23.5211 2.98972 21.7069 2.98972C19.8927 2.98972 18.6465 1.51194 17.0032 1.51194C15.3599 1.51194 14.395 2.59389 13.6036 4.81056C13.6036 4.81056 11.3924 11.0674 11.1085 11.9778C11.0506 12.1493 11.0506 12.3393 11.0506 12.4897C11.0506 14.9228 20.5921 22.9001 33.3833 22.9001M41.9414 19.8839C42.3963 22.0451 42.3963 22.2721 42.3963 22.5571C42.3963 26.2542 38.2579 28.3019 32.818 28.3019C20.5185 28.3019 9.74918 21.0767 9.74918 16.3003C9.74918 15.5614 9.92008 14.8779 10.1462 14.366C5.72383 14.5929 0 15.3899 0 20.4539C0 28.7585 19.6114 39 35.1396 39C47.0421 39 50.0447 33.5956 50.0447 29.3285C50.0447 25.9718 47.1552 22.1612 41.9388 19.8839"
2741
+ fill="#EE0000"
2742
+ />
2743
+ <path
2744
+ d="M41.9386 19.8864C42.3935 22.0477 42.3935 22.2746 42.3935 22.5596C42.3935 26.2567 38.255 28.3045 32.8152 28.3045C20.5157 28.3045 9.74634 21.0792 9.74634 16.3028C9.74634 15.5639 9.91724 14.8804 10.1434 14.3685L11.1083 11.9777C11.0504 12.1492 11.0504 12.3392 11.0504 12.4896C11.0504 14.9227 20.5919 22.9 33.3831 22.9C36.6696 22.9 41.4312 22.2165 41.4312 18.2925C41.4312 17.9864 41.4233 17.6882 41.3496 17.39L41.9412 19.8864H41.9386Z"
2745
+ fill="black"
2746
+ />
2747
+ <path
2748
+ d="M75.764 16V1.29995H82.295C83.261 1.29995 84.115 1.48895 84.857 1.86695C85.599 2.24495 86.173 2.76995 86.579 3.44195C86.999 4.09995 87.209 4.86995 87.209 5.75195C87.209 6.70395 86.943 7.53695 86.411 8.25095C85.893 8.95095 85.186 9.46195 84.29 9.78395L87.398 16H84.605L81.77 10.12H78.284V16H75.764ZM78.284 8.10395H82.064C82.848 8.10395 83.478 7.89395 83.954 7.47395C84.43 7.03995 84.668 6.47295 84.668 5.77295C84.668 5.05895 84.43 4.49195 83.954 4.07195C83.478 3.63795 82.848 3.42095 82.064 3.42095H78.284V8.10395Z"
2749
+ fill="var(--pf-t--global--text--color--regular)"
2750
+ />
2751
+ <path
2752
+ d="M93.9392 16.21C92.9312 16.21 92.0212 15.972 91.2092 15.496C90.3972 15.006 89.7532 14.3549 89.2772 13.5429C88.8012 12.7169 88.5632 11.7859 88.5632 10.75C88.5632 9.71395 88.7872 8.78995 89.2352 7.97795C89.6832 7.16595 90.2922 6.52195 91.0622 6.04595C91.8462 5.55595 92.7142 5.31095 93.6662 5.31095C94.6462 5.31095 95.5072 5.54895 96.2492 6.02495C97.0052 6.50095 97.5932 7.14495 98.0132 7.95695C98.4472 8.76895 98.6642 9.69995 98.6642 10.75V11.3169H90.8942C90.9782 11.8909 91.1602 12.4019 91.4402 12.8499C91.7342 13.2839 92.1052 13.627 92.5532 13.879C93.0152 14.1309 93.5122 14.257 94.0442 14.257C94.5342 14.257 94.9962 14.173 95.4302 14.005C95.8782 13.823 96.2492 13.578 96.5432 13.2699L98.0972 14.677C97.4532 15.209 96.7952 15.601 96.1232 15.853C95.4652 16.091 94.7372 16.21 93.9392 16.21ZM90.9152 9.84695H96.4172C96.3332 9.34295 96.1582 8.89495 95.8922 8.50295C95.6402 8.11095 95.3182 7.80295 94.9262 7.57895C94.5482 7.35495 94.1282 7.24295 93.6662 7.24295C93.2042 7.24295 92.7772 7.35495 92.3852 7.57895C92.0072 7.78895 91.6922 8.08995 91.4402 8.48195C91.1882 8.87395 91.0132 9.32895 90.9152 9.84695Z"
2753
+ fill="var(--pf-t--global--text--color--regular)"
2754
+ />
2755
+ <path
2756
+ d="M105.388 16.1049C104.506 16.1049 103.708 15.867 102.994 15.391C102.28 14.901 101.706 14.257 101.272 13.459C100.852 12.6469 100.642 11.7439 100.642 10.75C100.642 9.74195 100.859 8.83895 101.293 8.04095C101.727 7.22895 102.315 6.58495 103.057 6.10895C103.813 5.63295 104.646 5.39495 105.556 5.39495C106.158 5.39495 106.718 5.51395 107.236 5.75195C107.768 5.97595 108.23 6.31195 108.622 6.75995V0.94295L110.995 0.522949V16H108.643V14.6139C108.265 15.0899 107.796 15.461 107.236 15.727C106.676 15.979 106.06 16.1049 105.388 16.1049ZM106.123 14.11C106.627 14.11 107.096 14.012 107.53 13.816C107.964 13.606 108.328 13.319 108.622 12.955V8.52395C108.314 8.15995 107.943 7.87995 107.509 7.68395C107.075 7.48795 106.613 7.38995 106.123 7.38995C105.521 7.38995 104.982 7.53695 104.506 7.83095C104.044 8.11095 103.673 8.50295 103.393 9.00695C103.113 9.51095 102.973 10.092 102.973 10.75C102.973 11.38 103.113 11.9539 103.393 12.4719C103.673 12.976 104.044 13.375 104.506 13.669C104.982 13.9629 105.521 14.11 106.123 14.11Z"
2757
+ fill="var(--pf-t--global--text--color--regular)"
2758
+ />
2759
+ <path
2760
+ d="M118.848 16V1.29995H121.368V7.47395H128.676V1.29995H131.196V16H128.676V9.72095H121.368V16H118.848Z"
2761
+ fill="var(--pf-t--global--text--color--regular)"
2762
+ />
2763
+ <path
2764
+ d="M137.314 16.189C136.586 16.189 135.935 16.056 135.361 15.79C134.801 15.51 134.36 15.132 134.038 14.656C133.73 14.166 133.576 13.606 133.576 12.976C133.576 12.346 133.737 11.7999 134.059 11.3379C134.395 10.8759 134.864 10.519 135.466 10.267C136.068 10.015 136.782 9.88895 137.608 9.88895C138.098 9.88895 138.581 9.94495 139.057 10.0569C139.533 10.1549 139.995 10.323 140.443 10.561V9.38495C140.443 8.68495 140.24 8.15995 139.834 7.80995C139.442 7.45995 138.84 7.28495 138.028 7.28495C137.594 7.28495 137.125 7.35495 136.621 7.49495C136.131 7.62095 135.578 7.82395 134.962 8.10395L134.122 6.38195C135.662 5.66795 137.118 5.31095 138.49 5.31095C139.862 5.31095 140.919 5.64695 141.661 6.31895C142.417 6.97695 142.795 7.91495 142.795 9.13295V16H140.443V14.908C139.995 15.342 139.512 15.6639 138.994 15.874C138.476 16.084 137.916 16.189 137.314 16.189ZM135.802 12.934C135.802 13.424 135.998 13.809 136.39 14.089C136.782 14.3689 137.307 14.509 137.965 14.509C138.441 14.509 138.882 14.439 139.288 14.299C139.708 14.1449 140.093 13.9209 140.443 13.627V11.926C140.079 11.7579 139.701 11.6319 139.309 11.5479C138.917 11.464 138.49 11.422 138.028 11.422C137.342 11.422 136.796 11.5549 136.39 11.8209C135.998 12.0869 135.802 12.458 135.802 12.934Z"
2765
+ fill="var(--pf-t--global--text--color--regular)"
2766
+ />
2767
+ <path
2768
+ d="M149.897 16.21C148.833 16.21 148.028 15.9649 147.482 15.4749C146.936 14.971 146.663 14.236 146.663 13.2699V7.36895H144.563V5.47895H146.663V2.58095L149.036 2.07695V5.47895H151.955V7.36895H149.036V12.745C149.036 13.2629 149.148 13.634 149.372 13.858C149.596 14.068 149.974 14.1729 150.506 14.1729C150.744 14.1729 150.961 14.1589 151.157 14.1309C151.367 14.089 151.626 14.0189 151.934 13.9209V15.9159C151.64 16.0139 151.304 16.084 150.926 16.1259C150.562 16.1819 150.219 16.21 149.897 16.21Z"
2769
+ fill="var(--pf-t--global--text--color--regular)"
2770
+ />
2771
+ <path
2772
+ d="M73.916 38L79.964 23.2999H83.471L89.456 38H86.159L84.668 34.1359H78.599L77.087 38H73.916ZM79.544 31.6999H83.744L81.644 26.2819L79.544 31.6999Z"
2773
+ fill="var(--pf-t--global--text--color--regular)"
2774
+ />
2775
+ <path
2776
+ d="M94.4493 38.2099C93.6093 38.2099 92.8603 38.028 92.2023 37.664C91.5583 37.286 91.0473 36.768 90.6693 36.11C90.3053 35.452 90.1233 34.6959 90.1233 33.8419V27.059H93.0003V33.422C93.0003 34.122 93.2033 34.682 93.6093 35.102C94.0293 35.522 94.5823 35.7319 95.2683 35.7319C96.2483 35.7319 97.0043 35.368 97.5363 34.6399V27.059H100.413V38H97.5363V37.118C96.6963 37.846 95.6673 38.2099 94.4493 38.2099Z"
2777
+ fill="var(--pf-t--global--text--color--regular)"
2778
+ />
2779
+ <path
2780
+ d="M107.842 38.1679C106.625 38.1679 105.7 37.895 105.07 37.3489C104.454 36.7889 104.146 35.9769 104.146 34.9129V29.4529H101.899V27.059H104.146V24.2659L107.024 23.6149V27.059H110.153V29.4529H107.024V34.325C107.024 34.829 107.136 35.193 107.36 35.417C107.583 35.6269 107.975 35.7319 108.535 35.7319C108.815 35.7319 109.068 35.7179 109.292 35.6899C109.529 35.6479 109.789 35.5779 110.069 35.4799V37.853C109.775 37.951 109.404 38.028 108.956 38.084C108.522 38.1399 108.15 38.1679 107.842 38.1679Z"
2781
+ fill="var(--pf-t--global--text--color--regular)"
2782
+ />
2783
+ <path
2784
+ d="M116.767 38.2099C115.675 38.2099 114.688 37.958 113.806 37.4539C112.924 36.9499 112.224 36.271 111.706 35.417C111.188 34.563 110.929 33.604 110.929 32.54C110.929 31.476 111.188 30.517 111.706 29.663C112.224 28.795 112.924 28.1089 113.806 27.6049C114.688 27.101 115.675 26.8489 116.767 26.8489C117.859 26.8489 118.846 27.101 119.728 27.6049C120.61 28.1089 121.31 28.795 121.828 29.663C122.346 30.517 122.605 31.476 122.605 32.54C122.605 33.604 122.346 34.563 121.828 35.417C121.31 36.271 120.61 36.9499 119.728 37.4539C118.846 37.958 117.859 38.2099 116.767 38.2099ZM116.767 35.7109C117.341 35.7109 117.852 35.5709 118.3 35.291C118.762 35.011 119.126 34.6329 119.392 34.1569C119.672 33.6669 119.812 33.128 119.812 32.54C119.812 31.938 119.672 31.399 119.392 30.923C119.126 30.447 118.762 30.069 118.3 29.7889C117.852 29.4949 117.341 29.3479 116.767 29.3479C116.207 29.3479 115.696 29.4949 115.234 29.7889C114.772 30.069 114.408 30.447 114.142 30.923C113.876 31.399 113.743 31.938 113.743 32.54C113.743 33.128 113.876 33.6669 114.142 34.1569C114.408 34.6329 114.772 35.011 115.234 35.291C115.696 35.5709 116.207 35.7109 116.767 35.7109Z"
2785
+ fill="var(--pf-t--global--text--color--regular)"
2786
+ />
2787
+ <path
2788
+ d="M124.373 38V27.059H127.25V27.8989C128.034 27.1989 128.986 26.8489 130.106 26.8489C130.82 26.8489 131.457 26.996 132.017 27.2899C132.577 27.57 133.039 27.969 133.403 28.4869C134.313 27.3949 135.517 26.8489 137.015 26.8489C137.841 26.8489 138.562 27.038 139.178 27.416C139.808 27.78 140.298 28.291 140.648 28.9489C141.012 29.5929 141.194 30.3489 141.194 31.2169V38H138.338V31.6369C138.338 30.9229 138.149 30.3629 137.771 29.9569C137.393 29.5369 136.889 29.327 136.259 29.327C135.377 29.327 134.677 29.6909 134.159 30.4189C134.173 30.5449 134.187 30.6709 134.201 30.7969C134.215 30.9229 134.222 31.063 134.222 31.2169V38H131.345V31.6369C131.345 30.9229 131.156 30.3629 130.778 29.9569C130.414 29.5369 129.917 29.327 129.287 29.327C128.405 29.327 127.726 29.6629 127.25 30.3349V38H124.373Z"
2789
+ fill="var(--pf-t--global--text--color--regular)"
2790
+ />
2791
+ <path
2792
+ d="M146.87 38.1889C146.086 38.1889 145.393 38.049 144.791 37.769C144.189 37.475 143.72 37.076 143.384 36.5719C143.048 36.0679 142.88 35.4869 142.88 34.8289C142.88 33.7789 143.272 32.9669 144.056 32.393C144.854 31.805 145.946 31.511 147.332 31.511C148.284 31.511 149.18 31.6579 150.02 31.952V31.1539C150.02 29.8799 149.25 29.243 147.71 29.243C147.248 29.243 146.751 29.32 146.219 29.4739C145.687 29.6139 145.071 29.8379 144.371 30.146L143.321 28.025C144.189 27.6329 145.015 27.3389 145.799 27.143C146.597 26.947 147.395 26.8489 148.193 26.8489C149.663 26.8489 150.804 27.2059 151.616 27.92C152.442 28.62 152.855 29.6139 152.855 30.9019V38H150.02V37.2229C149.572 37.5589 149.089 37.804 148.571 37.958C148.053 38.1119 147.486 38.1889 146.87 38.1889ZM145.61 34.7659C145.61 35.186 145.792 35.5219 146.156 35.7739C146.52 36.0119 147.003 36.131 147.605 36.131C148.571 36.131 149.376 35.893 150.02 35.417V33.8209C149.32 33.541 148.55 33.401 147.71 33.401C147.052 33.401 146.534 33.527 146.156 33.7789C145.792 34.0169 145.61 34.346 145.61 34.7659Z"
2793
+ fill="var(--pf-t--global--text--color--regular)"
2794
+ />
2795
+ <path
2796
+ d="M159.912 38.1679C158.694 38.1679 157.77 37.895 157.14 37.3489C156.524 36.7889 156.216 35.9769 156.216 34.9129V29.4529H153.969V27.059H156.216V24.2659L159.093 23.6149V27.059H162.222V29.4529H159.093V34.325C159.093 34.829 159.205 35.193 159.429 35.417C159.653 35.6269 160.045 35.7319 160.605 35.7319C160.885 35.7319 161.137 35.7179 161.361 35.6899C161.599 35.6479 161.858 35.5779 162.138 35.4799V37.853C161.844 37.951 161.473 38.028 161.025 38.084C160.591 38.1399 160.22 38.1679 159.912 38.1679Z"
2797
+ fill="var(--pf-t--global--text--color--regular)"
2798
+ />
2799
+ <path
2800
+ d="M163.625 38V27.059H166.502V38H163.625ZM165.053 25.757C164.605 25.757 164.22 25.596 163.898 25.274C163.576 24.952 163.415 24.5669 163.415 24.1189C163.415 23.6569 163.576 23.2719 163.898 22.9639C164.22 22.6419 164.605 22.4809 165.053 22.4809C165.515 22.4809 165.9 22.6419 166.208 22.9639C166.53 23.2719 166.691 23.6569 166.691 24.1189C166.691 24.5669 166.53 24.952 166.208 25.274C165.9 25.596 165.515 25.757 165.053 25.757Z"
2801
+ fill="var(--pf-t--global--text--color--regular)"
2802
+ />
2803
+ <path
2804
+ d="M174.086 38.2099C172.994 38.2099 172.007 37.958 171.125 37.4539C170.243 36.9499 169.543 36.271 169.025 35.417C168.507 34.563 168.248 33.604 168.248 32.54C168.248 31.476 168.507 30.517 169.025 29.663C169.543 28.795 170.243 28.1089 171.125 27.6049C172.007 27.101 172.994 26.8489 174.086 26.8489C175.178 26.8489 176.165 27.101 177.047 27.6049C177.929 28.1089 178.629 28.795 179.147 29.663C179.665 30.517 179.924 31.476 179.924 32.54C179.924 33.604 179.665 34.563 179.147 35.417C178.629 36.271 177.929 36.9499 177.047 37.4539C176.165 37.958 175.178 38.2099 174.086 38.2099ZM174.086 35.7109C174.66 35.7109 175.171 35.5709 175.619 35.291C176.081 35.011 176.445 34.6329 176.711 34.1569C176.991 33.6669 177.131 33.128 177.131 32.54C177.131 31.938 176.991 31.399 176.711 30.923C176.445 30.447 176.081 30.069 175.619 29.7889C175.171 29.4949 174.66 29.3479 174.086 29.3479C173.526 29.3479 173.015 29.4949 172.553 29.7889C172.091 30.069 171.727 30.447 171.461 30.923C171.195 31.399 171.062 31.938 171.062 32.54C171.062 33.128 171.195 33.6669 171.461 34.1569C171.727 34.6329 172.091 35.011 172.553 35.291C173.015 35.5709 173.526 35.7109 174.086 35.7109Z"
2805
+ fill="var(--pf-t--global--text--color--regular)"
2806
+ />
2807
+ <path
2808
+ d="M181.693 38V27.059H184.57V27.962C185.396 27.2199 186.418 26.8489 187.636 26.8489C188.49 26.8489 189.239 27.038 189.883 27.416C190.541 27.78 191.052 28.291 191.416 28.9489C191.78 29.5929 191.962 30.3489 191.962 31.2169V38H189.085V31.6369C189.085 30.9229 188.882 30.3629 188.476 29.9569C188.07 29.5369 187.517 29.327 186.817 29.327C186.327 29.327 185.893 29.425 185.515 29.621C185.137 29.803 184.822 30.0689 184.57 30.4189V38H181.693Z"
2809
+ fill="var(--pf-t--global--text--color--regular)"
2810
+ />
2811
+ <line
2812
+ x1="66.5"
2813
+ y1="1.5"
2814
+ x2="66.5"
2815
+ y2="38.5"
2816
+ stroke="var(--pf-t--global--text--color--regular)"
2817
+ stroke-linecap="round"
2818
+ />
2819
+ </svg>
2820
+ </div>
2821
+ <div class="pf-v6-c-compass__nav">
2822
+ <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
2823
+ <nav
2824
+ class="pf-v6-c-tabs pf-m-nav pf-m-inset-xl"
2825
+ aria-label="Primary nav"
2826
+ role="region"
2827
+ id="primary-nav"
2828
+ >
2829
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2830
+ <button
2831
+ class="pf-v6-c-button pf-m-small pf-m-plain"
2832
+ type="button"
2833
+ aria-label="Scroll left"
2834
+ disabled
2835
+ >
2836
+ <span class="pf-v6-c-button__icon">
2837
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2838
+ </span>
2839
+ </button>
2840
+ </div>
2841
+ <ul class="pf-v6-c-tabs__list" role="tablist">
2842
+ <li class="pf-v6-c-tabs__item" role="presentation">
2843
+ <a
2844
+ class="pf-v6-c-tabs__link"
2845
+ href="#"
2846
+ role="tab"
2847
+ id="primary-nav-users-link"
2848
+ >
2849
+ <span class="pf-v6-c-tabs__item-text">Users</span>
2850
+ </a>
2851
+ </li>
2852
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2853
+ <a
2854
+ class="pf-v6-c-tabs__link"
2855
+ href="#"
2856
+ role="tab"
2857
+ id="primary-nav-containers-link"
2858
+ >
2859
+ <span class="pf-v6-c-tabs__item-text">Containers</span>
2860
+ </a>
2861
+ </li>
2862
+ <li class="pf-v6-c-tabs__item" role="presentation">
2863
+ <a
2864
+ class="pf-v6-c-tabs__link"
2865
+ href="#"
2866
+ role="tab"
2867
+ id="primary-nav-database-link"
2868
+ >
2869
+ <span class="pf-v6-c-tabs__item-text">Database</span>
2870
+ </a>
2871
+ </li>
2872
+
2873
+ <li class="pf-v6-c-tabs__item" role="presentation">
2874
+ <a
2875
+ class="pf-v6-c-tabs__link"
2876
+ href="#"
2877
+ role="tab"
2878
+ id="primary-nav-server-link"
2879
+ >
2880
+ <span class="pf-v6-c-tabs__item-text">Server</span>
2881
+ </a>
2882
+ </li>
2883
+ <li class="pf-v6-c-tabs__item" role="presentation">
2884
+ <a
2885
+ class="pf-v6-c-tabs__link"
2886
+ href="#"
2887
+ role="tab"
2888
+ id="primary-nav-system-link"
2889
+ >
2890
+ <span class="pf-v6-c-tabs__item-text">System</span>
2891
+ </a>
2892
+ </li>
2893
+ <li class="pf-v6-c-tabs__item" role="presentation">
2894
+ <a
2895
+ class="pf-v6-c-tabs__link"
2896
+ href="#"
2897
+ role="tab"
2898
+ id="primary-nav-network-wired-link"
2899
+ >
2900
+ <span class="pf-v6-c-tabs__item-text">Network</span>
2901
+ </a>
2902
+ </li>
2903
+ </ul>
2904
+
2905
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2906
+ <button
2907
+ class="pf-v6-c-button pf-m-small pf-m-plain"
2908
+ type="button"
2909
+ aria-label="Scroll right"
2910
+ disabled
2911
+ >
2912
+ <span class="pf-v6-c-button__icon">
2913
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
2914
+ </span>
2915
+ </button>
2916
+ </div>
2917
+ </nav>
2918
+ </div>
2919
+ <div class="pf-v6-c-compass__panel pf-m-pill pf-m-no-padding">
2920
+ <nav
2921
+ class="pf-v6-c-tabs pf-m-nav pf-m-subtab pf-m-inset-xl"
2922
+ aria-label="Secondary nav"
2923
+ role="region"
2924
+ id="secondary-nav"
2925
+ >
2926
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
2927
+ <button
2928
+ class="pf-v6-c-button pf-m-small pf-m-plain"
2929
+ type="button"
2930
+ aria-label="Scroll left"
2931
+ disabled
2932
+ >
2933
+ <span class="pf-v6-c-button__icon">
2934
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
2935
+ </span>
2936
+ </button>
2937
+ </div>
2938
+ <ul class="pf-v6-c-tabs__list" role="tablist">
2939
+ <li class="pf-v6-c-tabs__item" role="presentation">
2940
+ <a
2941
+ class="pf-v6-c-tabs__link"
2942
+ href="#"
2943
+ role="tab"
2944
+ id="secondary-nav-sub-1-link"
2945
+ >
2946
+ <span class="pf-v6-c-tabs__item-text">Item 1</span>
2947
+ </a>
2948
+ </li>
2949
+ <li class="pf-v6-c-tabs__item" role="presentation">
2950
+ <a
2951
+ class="pf-v6-c-tabs__link"
2952
+ href="#"
2953
+ role="tab"
2954
+ id="secondary-nav-sub-2-link"
2955
+ >
2956
+ <span class="pf-v6-c-tabs__item-text">Item 2</span>
2957
+ </a>
2958
+ </li>
2959
+ <li class="pf-v6-c-tabs__item pf-m-current" role="presentation">
2960
+ <a
2961
+ class="pf-v6-c-tabs__link"
2962
+ href="#"
2963
+ role="tab"
2964
+ id="secondary-nav-sub-3-link"
2965
+ >
2966
+ <span class="pf-v6-c-tabs__item-text">Item 3</span>
2967
+ </a>
2968
+ </li>
2969
+
2970
+ <li class="pf-v6-c-tabs__item" role="presentation">
2971
+ <a
2972
+ class="pf-v6-c-tabs__link pf-m-disabled"
2973
+ aria-disabled="true"
2974
+ tabindex="-1"
2975
+ href="#"
2976
+ role="tab"
2977
+ id="secondary-nav-sub-disabled-link"
2978
+ >
2979
+ <span class="pf-v6-c-tabs__item-text">Disabled</span>
2980
+ </a>
2981
+ </li>
2982
+ <li class="pf-v6-c-tabs__item" role="presentation">
2983
+ <a
2984
+ class="pf-v6-c-tabs__link pf-m-aria-disabled"
2985
+ aria-disabled="true"
2986
+ href="#"
2987
+ role="tab"
2988
+ id="secondary-nav-sub-aria-disabled-link"
2989
+ >
2990
+ <span class="pf-v6-c-tabs__item-text">ARIA disabled</span>
2991
+ </a>
2992
+ </li>
2993
+ <li class="pf-v6-c-tabs__item" role="presentation">
2994
+ <a
2995
+ class="pf-v6-c-tabs__link"
2996
+ href="#"
2997
+ role="tab"
2998
+ id="secondary-nav-sub-6-link"
2999
+ >
3000
+ <span class="pf-v6-c-tabs__item-text">Item 6</span>
3001
+ </a>
3002
+ </li>
3003
+ </ul>
3004
+
3005
+ <div class="pf-v6-c-tabs__scroll-button" aria-hidden="true">
3006
+ <button
3007
+ class="pf-v6-c-button pf-m-small pf-m-plain"
3008
+ type="button"
3009
+ aria-label="Scroll right"
3010
+ disabled
3011
+ >
3012
+ <span class="pf-v6-c-button__icon">
3013
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3014
+ </span>
3015
+ </button>
3016
+ </div>
3017
+ </nav>
3018
+ </div>
3019
+ </div>
3020
+ <div class="pf-v6-c-compass__profile">
3021
+ <button
3022
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3023
+ type="button"
3024
+ aria-expanded="false"
3025
+ aria-label="Menu toggle"
3026
+ >
3027
+ <span class="pf-v6-c-menu-toggle__icon">
3028
+ <img
3029
+ class="pf-v6-c-avatar pf-m-md"
3030
+ alt="Avatar image"
3031
+ src="/assets/images/img_avatar-light.svg"
3032
+ />
3033
+ </span>
3034
+ <span class="pf-v6-c-menu-toggle__text">Ned Username</span>
3035
+ <span class="pf-v6-c-menu-toggle__controls">
3036
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3037
+ <i class="fas fa-caret-down fa-fw" aria-hidden="true"></i>
3038
+ </span>
3039
+ </span>
3040
+ </button>
3041
+ </div>
3042
+ </div>
3043
+ <div class="pf-v6-c-compass__sidebar pf-m-start">
3044
+ <div class="pf-v6-c-compass__panel pf-m-pill">
3045
+ <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
3046
+ <div class="pf-v6-c-action-list__item">
3047
+ <button
3048
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
3049
+ type="button"
3050
+ aria-label="Add"
3051
+ >
3052
+ <span class="pf-v6-c-button__icon">
3053
+ <svg
3054
+ class="pf-v6-svg"
3055
+ viewBox="0 0 448 512"
3056
+ fill="currentColor"
3057
+ role="img"
3058
+ width="1em"
3059
+ height="1em"
3060
+ aria-hidden="true"
3061
+ >
3062
+ <path
3063
+ d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"
3064
+ />
3065
+ </svg>
3066
+ </span>
3067
+ </button>
3068
+ </div>
3069
+ <div class="pf-v6-c-action-list__item">
3070
+ <button
3071
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
3072
+ type="button"
3073
+ aria-label="Help"
3074
+ >
3075
+ <span class="pf-v6-c-button__icon">
3076
+ <svg
3077
+ class="pf-v6-svg"
3078
+ viewBox="0 0 512 512"
3079
+ fill="currentColor"
3080
+ role="img"
3081
+ width="1em"
3082
+ height="1em"
3083
+ aria-hidden="true"
3084
+ >
3085
+ <path
3086
+ d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
3087
+ />
3088
+ </svg>
3089
+ </span>
3090
+ </button>
3091
+ </div>
3092
+ <div class="pf-v6-c-action-list__item">
3093
+ <button
3094
+ class="pf-v6-c-button pf-v6-m-ai-indicator pf-m-circle pf-m-plain"
3095
+ type="button"
3096
+ aria-label="AI assistant"
3097
+ >
3098
+ <span class="pf-v6-c-button__icon">
3099
+ <svg
3100
+ fill="currentColor"
3101
+ width="1em"
3102
+ height="1em"
3103
+ viewBox="0 0 32 32"
3104
+ style="translate: .05em .1em; scale: 1.1"
3105
+ aria-hidden="true"
3106
+ >
3107
+ <g id="uuid-75f76c23-c1b6-4d16-98c6-ad548b061af4">
3108
+ <rect width="32" height="32" fill="none" />
3109
+ </g>
3110
+ <g id="uuid-08df3350-7f5a-4f9c-8ddc-ec9ca74ef47e">
3111
+ <path
3112
+ fill="var(--pf-t--global--icon--color--regular)"
3113
+ d="M26.03711,16.96191c-5.9043-.46826-10.53027-5.09424-10.99902-10.99121-.03711-.52344-.51367-.96973-1.03809-.96973-.52148,0-.99707.44189-1.03809.96191-.46875,5.90479-5.09473,10.53076-10.99121,10.99854-.52344.0376-.96973.51416-.96973,1.03857,0,.52148.44238.99707.96191,1.03809,5.9043.46875,10.53027,5.09473,10.99902,10.99121.03711.52344.51367.96973,1.03809.96973.52148,0,.99707-.44238,1.03809-.96191.46875-5.9043,5.09473-10.53027,10.99902-10.99902.51953-.04199.96191-.51562.96191-1.03809,0-.52148-.44238-.99707-.96191-1.03809Z"
3114
+ />
3115
+ <path
3116
+ fill="var(--pf-t--global--icon--color--regular)"
3117
+ d="M30.06836,6.14746c-1.59668-.35693-2.85938-1.61914-3.21582-3.21387-.08887-.40332-.43945-.68555-.85254-.68555s-.76367.28223-.85156.68311c-.35742,1.59717-1.62012,2.85938-3.21973,3.2168-.40039.09131-.68066.44141-.68066.85205s.28027.76074.68359.85254c1.59668.35693,2.85938,1.61914,3.21582,3.21387.08887.40332.43945.68555.85254.68555s.76367-.28223.85156-.68311c.35742-1.59717,1.62012-2.85938,3.2168-3.21631.00098,0,.00195-.00049.00293-.00049.40039-.09131.68066-.44141.68066-.85205s-.28027-.76074-.68359-.85254Z"
3118
+ />
3119
+ </g>
3120
+ </svg>
3121
+ </span>
3122
+ </button>
3123
+ </div>
3124
+ <div class="pf-v6-c-action-list__item">
3125
+ <button
3126
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
3127
+ type="button"
3128
+ aria-label="User profile"
3129
+ >
3130
+ <span class="pf-v6-c-button__icon">
3131
+ <svg
3132
+ class="pf-v6-svg"
3133
+ viewBox="0 0 448 512"
3134
+ fill="currentColor"
3135
+ role="img"
3136
+ width="1em"
3137
+ height="1em"
3138
+ aria-hidden="true"
3139
+ >
3140
+ <path
3141
+ d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
3142
+ />
3143
+ </svg>
3144
+ </span>
3145
+ </button>
3146
+ </div>
3147
+ <div class="pf-v6-c-action-list__item">
3148
+ <button
3149
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
3150
+ type="button"
3151
+ aria-label="Send"
3152
+ >
3153
+ <span class="pf-v6-c-button__icon">
3154
+ <svg
3155
+ class="pf-v6-svg"
3156
+ viewBox="0 0 512 512"
3157
+ fill="currentColor"
3158
+ role="img"
3159
+ width="1em"
3160
+ height="1em"
3161
+ aria-hidden="true"
3162
+ >
3163
+ <path
3164
+ d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
3165
+ />
3166
+ </svg>
3167
+ </span>
3168
+ </button>
3169
+ </div>
3170
+ </div>
3171
+ </div>
3172
+ </div>
3173
+ <div class="pf-v6-c-compass__main">
3174
+ <div class="pf-v6-c-compass__main-header">
3175
+ <div class="pf-v6-c-compass__panel">
3176
+ <div class="pf-v6-l-flex pf-m-align-items-center">
3177
+ <div class="pf-v6-l-flex__item pf-m-grow">
3178
+ <h2 class="pf-v6-c-title pf-m-h1">Page title</h2>
3179
+ </div>
3180
+ <div class="pf-v6-l-flex__item">
3181
+ <div class="pf-v6-c-action-list">
3182
+ <div class="pf-v6-c-action-list__group">
3183
+ <div class="pf-v6-c-action-list__item">
3184
+ <button class="pf-v6-c-button pf-m-primary" type="button">
3185
+ <span class="pf-v6-c-button__text">Add integration</span>
3186
+ </button>
3187
+ </div>
3188
+ <div class="pf-v6-c-action-list__item">
3189
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
3190
+ <span class="pf-v6-c-button__text">Test integration</span>
3191
+ </button>
3192
+ </div>
3193
+ </div>
3194
+ </div>
3195
+ </div>
3196
+ </div>
3197
+ </div>
3198
+ </div>
3199
+ <div class="pf-v6-c-compass__content">
3200
+ <div class="pf-v6-l-grid pf-m-all-6-col pf-m-gutter">
3201
+ <div class="pf-v6-c-compass__panel pf-m-scrollable">
3202
+ <div class="pf-v6-l-flex pf-m-column pf-m-gap-md">
3203
+ <div class="pf-v6-c-toolbar" id="-toolbar">
3204
+ <div class="pf-v6-c-toolbar__content">
3205
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
3206
+ <div
3207
+ class="pf-v6-c-toolbar__group pf-m-show-on-xl pf-m-toggle-group"
3208
+ >
3209
+ <div class="pf-v6-c-toolbar__toggle">
3210
+ <button
3211
+ class="pf-v6-c-menu-toggle pf-m-plain"
3212
+ type="button"
3213
+ aria-expanded="false"
3214
+ aria-label="Show filters"
3215
+ aria-controls="-toolbar-expandable-content"
3216
+ >
3217
+ <span class="pf-v6-c-menu-toggle__icon">
3218
+ <i class="fas fa-filter" aria-hidden="true"></i>
3219
+ </span>
3220
+ </button>
3221
+ </div>
3222
+ <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
3223
+ <div
3224
+ class="pf-v6-c-menu-toggle pf-m-split-button"
3225
+ id="-toolbar-check"
3226
+ >
3227
+ <label
3228
+ class="pf-v6-c-check pf-m-standalone"
3229
+ for="-toolbar-check-check-input"
3230
+ >
3231
+ <input
3232
+ class="pf-v6-c-check__input"
3233
+ type="checkbox"
3234
+ id="-toolbar-check-check-input"
3235
+ name="-toolbar-check-check-input"
3236
+ aria-label="Standalone check"
3237
+ />
3238
+ </label>
3239
+ <button
3240
+ class="pf-v6-c-menu-toggle__button"
3241
+ type="button"
3242
+ aria-expanded="false"
3243
+ id="-toolbar-menu-toggle-toggle-button"
3244
+ aria-label="Menu toggle"
3245
+ >
3246
+ <span class="pf-v6-c-menu-toggle__controls">
3247
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3248
+ <i
3249
+ class="fas fa-caret-down fa-fw"
3250
+ aria-hidden="true"
3251
+ ></i>
3252
+ </span>
3253
+ </span>
3254
+ </button>
3255
+ </div>
3256
+ </div>
3257
+
3258
+ <div class="pf-v6-c-toolbar__item">
3259
+ <button
3260
+ class="pf-v6-c-menu-toggle"
3261
+ type="button"
3262
+ aria-expanded="false"
3263
+ id="-toolbar-select-checkbox-status"
3264
+ >
3265
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
3266
+ <span class="pf-v6-c-menu-toggle__controls">
3267
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3268
+ <i
3269
+ class="fas fa-caret-down fa-fw"
3270
+ aria-hidden="true"
3271
+ ></i>
3272
+ </span>
3273
+ </span>
3274
+ </button>
3275
+ </div>
3276
+ </div>
3277
+
3278
+ <div
3279
+ class="pf-v6-c-overflow-menu"
3280
+ id="-toolbar-overflow-menu"
3281
+ >
3282
+ <div
3283
+ class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
3284
+ >
3285
+ <div
3286
+ class="pf-v6-c-overflow-menu__group pf-m-button-group"
3287
+ >
3288
+ <div class="pf-v6-c-overflow-menu__item">
3289
+ <button
3290
+ class="pf-v6-c-button pf-m-primary"
3291
+ type="button"
3292
+ >
3293
+ <span class="pf-v6-c-button__text">Create instance</span>
3294
+ </button>
3295
+ </div>
3296
+ </div>
3297
+ </div>
3298
+ <div class="pf-v6-c-overflow-menu__control">
3299
+ <button
3300
+ class="pf-v6-c-menu-toggle pf-m-plain"
3301
+ type="button"
3302
+ aria-expanded="false"
3303
+ aria-label="Menu toggle"
3304
+ id="-toolbar-overflow-menu-toggle"
3305
+ >
3306
+ <span class="pf-v6-c-menu-toggle__icon">
3307
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3308
+ </span>
3309
+ </button>
3310
+ </div>
3311
+ </div>
3312
+
3313
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
3314
+ <div class="pf-v6-c-pagination pf-m-compact">
3315
+ <div class="pf-v6-c-pagination__page-menu">
3316
+ <button
3317
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3318
+ type="button"
3319
+ aria-expanded="false"
3320
+ aria-label="Menu toggle"
3321
+ id="-toolbar-top-pagination"
3322
+ >
3323
+ <span class="pf-v6-c-menu-toggle__text">
3324
+ <b>1 - 10</b>&nbsp;of&nbsp;
3325
+ <b>36</b>
3326
+ </span>
3327
+ <span class="pf-v6-c-menu-toggle__controls">
3328
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3329
+ <i
3330
+ class="fas fa-caret-down fa-fw"
3331
+ aria-hidden="true"
3332
+ ></i>
3333
+ </span>
3334
+ </span>
3335
+ </button>
3336
+ </div>
3337
+ <nav
3338
+ class="pf-v6-c-pagination__nav"
3339
+ aria-label="Toolbar top pagination"
3340
+ >
3341
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
3342
+ <button
3343
+ class="pf-v6-c-button pf-m-plain"
3344
+ type="button"
3345
+ disabled
3346
+ aria-label="Go to previous page"
3347
+ >
3348
+ <span class="pf-v6-c-button__icon">
3349
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
3350
+ </span>
3351
+ </button>
3352
+ </div>
3353
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
3354
+ <button
3355
+ class="pf-v6-c-button pf-m-plain"
3356
+ type="button"
3357
+ aria-label="Go to next page"
3358
+ >
3359
+ <span class="pf-v6-c-button__icon">
3360
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
3361
+ </span>
3362
+ </button>
3363
+ </div>
3364
+ </nav>
3365
+ </div>
3366
+ </div>
3367
+ </div>
3368
+
3369
+ <div
3370
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
3371
+ id="-toolbar-expandable-content"
3372
+ hidden
3373
+ ></div>
3374
+ </div>
3375
+ </div>
3376
+ <div class="pf-v6-l-gallery pf-m-gutter">
3377
+ <div
3378
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3379
+ id="card-view-basic-example-gallery-card-empty-state"
3380
+ >
3381
+ <div class="pf-v6-l-bullseye">
3382
+ <div class="pf-v6-c-empty-state pf-m-xs">
3383
+ <div class="pf-v6-c-empty-state__content">
3384
+ <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
3385
+ <div class="pf-v6-c-card__title">
3386
+ <h2
3387
+ class="pf-v6-c-card__title-text pf-m-md"
3388
+ >Add a new card to your page</h2>
3389
+ </div>
3390
+ <button class="pf-v6-c-button pf-m-link" type="button">
3391
+ <span class="pf-v6-c-button__text">Add card</span>
3392
+ </button>
3393
+ </div>
3394
+ </div>
3395
+ </div>
3396
+ </div>
3397
+ <div
3398
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3399
+ id="card-view-basic-example-gallery-card-1"
3400
+ >
3401
+ <div class="pf-v6-c-card__header">
3402
+ <img
3403
+ src="/assets/images/PF-IconLogo.svg"
3404
+ alt="PatternFly logo"
3405
+ />
3406
+ <div class="pf-v6-c-card__actions">
3407
+ <button
3408
+ class="pf-v6-c-menu-toggle pf-m-plain"
3409
+ type="button"
3410
+ aria-expanded="false"
3411
+ aria-label="Menu toggle"
3412
+ id="card-view-basic-example-gallery-card-1-toggle"
3413
+ >
3414
+ <span class="pf-v6-c-menu-toggle__icon">
3415
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3416
+ </span>
3417
+ </button>
3418
+ <div class="pf-v6-c-check pf-m-standalone">
3419
+ <input
3420
+ class="pf-v6-c-check__input"
3421
+ type="checkbox"
3422
+ id="card-view-basic-example-gallery-card-1-check"
3423
+ name="card-view-basic-example-gallery-card-1-check"
3424
+ aria-labelledby="card-view-basic-example-gallery-card-1-check-label"
3425
+ />
3426
+ </div>
3427
+ </div>
3428
+ </div>
3429
+ <div class="pf-v6-c-card__title">
3430
+ <h2
3431
+ class="pf-v6-c-card__title-text"
3432
+ id="card-view-basic-example-gallery-card-1-check-label"
3433
+ >Patternfly</h2>
3434
+ <div class="pf-v6-c-content">
3435
+ <small>Provided by Red Hat</small>
3436
+ </div>
3437
+ </div>
3438
+ <div
3439
+ class="pf-v6-c-card__body"
3440
+ >PatternFly is a community project that promotes design commonality and improves user experience.</div>
3441
+ </div>
3442
+ <div
3443
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3444
+ id="card-view-basic-example-gallery-card-2"
3445
+ >
3446
+ <div class="pf-v6-c-card__header">
3447
+ <img
3448
+ src="/assets/images/activemq-core_200x150.png"
3449
+ width="60px"
3450
+ alt="Logo"
3451
+ />
3452
+ <div class="pf-v6-c-card__actions">
3453
+ <button
3454
+ class="pf-v6-c-menu-toggle pf-m-plain"
3455
+ type="button"
3456
+ aria-expanded="false"
3457
+ aria-label="Menu toggle"
3458
+ id="card-view-basic-example-gallery-card-2-toggle"
3459
+ >
3460
+ <span class="pf-v6-c-menu-toggle__icon">
3461
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3462
+ </span>
3463
+ </button>
3464
+ <div class="pf-v6-c-check pf-m-standalone">
3465
+ <input
3466
+ class="pf-v6-c-check__input"
3467
+ type="checkbox"
3468
+ id="card-view-basic-example-gallery-card-2-check"
3469
+ name="card-view-basic-example-gallery-card-2-check"
3470
+ aria-labelledby="card-view-basic-example-gallery-card-2-check-label"
3471
+ />
3472
+ </div>
3473
+ </div>
3474
+ </div>
3475
+ <div class="pf-v6-c-card__title">
3476
+ <h2
3477
+ class="pf-v6-c-card__title-text"
3478
+ id="card-view-basic-example-gallery-card-2-check-label"
3479
+ >ActiveMq</h2>
3480
+ <div class="pf-v6-c-content">
3481
+ <small>Provided by Red Hat</small>
3482
+ </div>
3483
+ </div>
3484
+ <div
3485
+ class="pf-v6-c-card__body"
3486
+ >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
3487
+ </div>
3488
+ <div
3489
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3490
+ id="card-view-basic-example-gallery-card-3"
3491
+ >
3492
+ <div class="pf-v6-c-card__header">
3493
+ <img
3494
+ src="/assets/images/camel-spark_200x150.png"
3495
+ width="60px"
3496
+ alt="Logo"
3497
+ />
3498
+ <div class="pf-v6-c-card__actions">
3499
+ <button
3500
+ class="pf-v6-c-menu-toggle pf-m-plain"
3501
+ type="button"
3502
+ aria-expanded="false"
3503
+ aria-label="Menu toggle"
3504
+ id="card-view-basic-example-gallery-card-3-toggle"
3505
+ >
3506
+ <span class="pf-v6-c-menu-toggle__icon">
3507
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3508
+ </span>
3509
+ </button>
3510
+ <div class="pf-v6-c-check pf-m-standalone">
3511
+ <input
3512
+ class="pf-v6-c-check__input"
3513
+ type="checkbox"
3514
+ id="card-view-basic-example-gallery-card-3-check"
3515
+ name="card-view-basic-example-gallery-card-3-check"
3516
+ aria-labelledby="card-view-basic-example-gallery-card-3-check-label"
3517
+ />
3518
+ </div>
3519
+ </div>
3520
+ </div>
3521
+ <div class="pf-v6-c-card__title">
3522
+ <h2
3523
+ class="pf-v6-c-card__title-text"
3524
+ id="card-view-basic-example-gallery-card-3-check-label"
3525
+ >Apache Spark</h2>
3526
+ <div class="pf-v6-c-content">
3527
+ <small>Provided by Red Hat</small>
3528
+ </div>
3529
+ </div>
3530
+ <div
3531
+ class="pf-v6-c-card__body"
3532
+ >This documentation page covers the Apache Spark component for the Apache Camel.</div>
3533
+ </div>
3534
+ <div
3535
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3536
+ id="card-view-basic-example-gallery-card-4"
3537
+ >
3538
+ <div class="pf-v6-c-card__header">
3539
+ <img
3540
+ src="/assets/images/camel-avro_200x150.png"
3541
+ width="60px"
3542
+ alt="Logo"
3543
+ />
3544
+ <div class="pf-v6-c-card__actions">
3545
+ <button
3546
+ class="pf-v6-c-menu-toggle pf-m-plain"
3547
+ type="button"
3548
+ aria-expanded="false"
3549
+ aria-label="Menu toggle"
3550
+ id="card-view-basic-example-gallery-card-4-toggle"
3551
+ >
3552
+ <span class="pf-v6-c-menu-toggle__icon">
3553
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3554
+ </span>
3555
+ </button>
3556
+ <div class="pf-v6-c-check pf-m-standalone">
3557
+ <input
3558
+ class="pf-v6-c-check__input"
3559
+ type="checkbox"
3560
+ id="card-view-basic-example-gallery-card-4-check"
3561
+ name="card-view-basic-example-gallery-card-4-check"
3562
+ aria-labelledby="card-view-basic-example-gallery-card-4-check-label"
3563
+ />
3564
+ </div>
3565
+ </div>
3566
+ </div>
3567
+ <div class="pf-v6-c-card__title">
3568
+ <h2
3569
+ class="pf-v6-c-card__title-text"
3570
+ id="card-view-basic-example-gallery-card-4-check-label"
3571
+ >Avro</h2>
3572
+ <div class="pf-v6-c-content">
3573
+ <small>Provided by Red Hat</small>
3574
+ </div>
3575
+ </div>
3576
+ <div
3577
+ class="pf-v6-c-card__body"
3578
+ >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
3579
+ </div>
3580
+ <div
3581
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
3582
+ id="card-view-basic-example-gallery-card-5"
3583
+ >
3584
+ <div class="pf-v6-c-card__header">
3585
+ <img
3586
+ src="/assets/images/FuseConnector_Icons_AzureServices.png"
3587
+ width="60px"
3588
+ alt="Logo"
3589
+ />
3590
+ <div class="pf-v6-c-card__actions">
3591
+ <button
3592
+ class="pf-v6-c-menu-toggle pf-m-plain"
3593
+ type="button"
3594
+ aria-expanded="false"
3595
+ aria-label="Menu toggle"
3596
+ id="card-view-basic-example-gallery-card-5-toggle"
3597
+ >
3598
+ <span class="pf-v6-c-menu-toggle__icon">
3599
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3600
+ </span>
3601
+ </button>
3602
+ <div class="pf-v6-c-check pf-m-standalone">
3603
+ <input
3604
+ class="pf-v6-c-check__input"
3605
+ type="checkbox"
3606
+ id="card-view-basic-example-gallery-card-5-check"
3607
+ name="card-view-basic-example-gallery-card-5-check"
3608
+ aria-labelledby="card-view-basic-example-gallery-card-5-check-label"
3609
+ />
3610
+ </div>
3611
+ </div>
3612
+ </div>
3613
+ <div class="pf-v6-c-card__title">
3614
+ <h2
3615
+ class="pf-v6-c-card__title-text"
3616
+ id="card-view-basic-example-gallery-card-5-check-label"
3617
+ >Azure Services</h2>
3618
+ <div class="pf-v6-c-content">
3619
+ <small>Provided by Red Hat</small>
3620
+ </div>
3621
+ </div>
3622
+ <div
3623
+ class="pf-v6-c-card__body"
3624
+ >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
3625
+ </div>
3626
+ <div
3627
+ class="pf-v6-c-card pf-m-non-selectable-raised pf-m-compact"
3628
+ id="card-view-basic-example-gallery-card-6"
3629
+ >
3630
+ <div class="pf-v6-c-card__header">
3631
+ <img
3632
+ src="/assets/images/camel-saxon_200x150.png"
3633
+ width="60px"
3634
+ alt="Logo"
3635
+ />
3636
+ <div class="pf-v6-c-card__actions">
3637
+ <button
3638
+ class="pf-v6-c-menu-toggle pf-m-plain"
3639
+ type="button"
3640
+ aria-expanded="false"
3641
+ aria-label="Menu toggle"
3642
+ id="card-view-basic-example-gallery-card-6-toggle"
3643
+ >
3644
+ <span class="pf-v6-c-menu-toggle__icon">
3645
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3646
+ </span>
3647
+ </button>
3648
+ <div class="pf-v6-c-check pf-m-standalone">
3649
+ <input
3650
+ class="pf-v6-c-check__input"
3651
+ type="checkbox"
3652
+ id="card-view-basic-example-gallery-card-6-check"
3653
+ name="card-view-basic-example-gallery-card-6-check"
3654
+ disabled
3655
+ aria-labelledby="card-view-basic-example-gallery-card-6-check-label"
3656
+ />
3657
+ </div>
3658
+ </div>
3659
+ </div>
3660
+ <div class="pf-v6-c-card__title">
3661
+ <h2
3662
+ class="pf-v6-c-card__title-text"
3663
+ id="card-view-basic-example-gallery-card-6-check-label"
3664
+ >Crypto</h2>
3665
+ <div class="pf-v6-c-content">
3666
+ <small>Provided by Red Hat</small>
3667
+ </div>
3668
+ </div>
3669
+ <div
3670
+ class="pf-v6-c-card__body"
3671
+ >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
3672
+ </div>
3673
+ <div
3674
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3675
+ id="card-view-basic-example-gallery-card-7"
3676
+ >
3677
+ <div class="pf-v6-c-card__header">
3678
+ <img
3679
+ src="/assets/images/camel-dropbox_200x150.png"
3680
+ width="60px"
3681
+ alt="Logo"
3682
+ />
3683
+ <div class="pf-v6-c-card__actions">
3684
+ <button
3685
+ class="pf-v6-c-menu-toggle pf-m-plain"
3686
+ type="button"
3687
+ aria-expanded="false"
3688
+ aria-label="Menu toggle"
3689
+ id="card-view-basic-example-gallery-card-7-toggle"
3690
+ >
3691
+ <span class="pf-v6-c-menu-toggle__icon">
3692
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3693
+ </span>
3694
+ </button>
3695
+ <div class="pf-v6-c-check pf-m-standalone">
3696
+ <input
3697
+ class="pf-v6-c-check__input"
3698
+ type="checkbox"
3699
+ id="card-view-basic-example-gallery-card-7-check"
3700
+ name="card-view-basic-example-gallery-card-7-check"
3701
+ aria-labelledby="card-view-basic-example-gallery-card-7-check-label"
3702
+ />
3703
+ </div>
3704
+ </div>
3705
+ </div>
3706
+ <div class="pf-v6-c-card__title">
3707
+ <h2
3708
+ class="pf-v6-c-card__title-text"
3709
+ id="card-view-basic-example-gallery-card-7-check-label"
3710
+ >DropBox</h2>
3711
+ <div class="pf-v6-c-content">
3712
+ <small>Provided by Red Hat</small>
3713
+ </div>
3714
+ </div>
3715
+ <div
3716
+ class="pf-v6-c-card__body"
3717
+ >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
3718
+ </div>
3719
+ <div
3720
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3721
+ id="card-view-basic-example-gallery-card-8"
3722
+ >
3723
+ <div class="pf-v6-c-card__header">
3724
+ <img
3725
+ src="/assets/images/camel-infinispan_200x150.png"
3726
+ width="60px"
3727
+ alt="Logo"
3728
+ />
3729
+ <div class="pf-v6-c-card__actions">
3730
+ <button
3731
+ class="pf-v6-c-menu-toggle pf-m-plain"
3732
+ type="button"
3733
+ aria-expanded="false"
3734
+ aria-label="Menu toggle"
3735
+ id="card-view-basic-example-gallery-card-8-toggle"
3736
+ >
3737
+ <span class="pf-v6-c-menu-toggle__icon">
3738
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3739
+ </span>
3740
+ </button>
3741
+ <div class="pf-v6-c-check pf-m-standalone">
3742
+ <input
3743
+ class="pf-v6-c-check__input"
3744
+ type="checkbox"
3745
+ id="card-view-basic-example-gallery-card-8-check"
3746
+ name="card-view-basic-example-gallery-card-8-check"
3747
+ aria-labelledby="card-view-basic-example-gallery-card-8-check-label"
3748
+ />
3749
+ </div>
3750
+ </div>
3751
+ </div>
3752
+ <div class="pf-v6-c-card__title">
3753
+ <h2
3754
+ class="pf-v6-c-card__title-text"
3755
+ id="card-view-basic-example-gallery-card-8-check-label"
3756
+ >JBoss Data Grid</h2>
3757
+ <div class="pf-v6-c-content">
3758
+ <small>Provided by Red Hat</small>
3759
+ </div>
3760
+ </div>
3761
+ <div
3762
+ class="pf-v6-c-card__body"
3763
+ >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
3764
+ </div>
3765
+ <div
3766
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3767
+ id="card-view-basic-example-gallery-card-9"
3768
+ >
3769
+ <div class="pf-v6-c-card__header">
3770
+ <img
3771
+ src="/assets/images/FuseConnector_Icons_REST.png"
3772
+ width="60px"
3773
+ alt="Logo"
3774
+ />
3775
+ <div class="pf-v6-c-card__actions">
3776
+ <button
3777
+ class="pf-v6-c-menu-toggle pf-m-plain"
3778
+ type="button"
3779
+ aria-expanded="false"
3780
+ aria-label="Menu toggle"
3781
+ id="card-view-basic-example-gallery-card-9-toggle"
3782
+ >
3783
+ <span class="pf-v6-c-menu-toggle__icon">
3784
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3785
+ </span>
3786
+ </button>
3787
+ <div class="pf-v6-c-check pf-m-standalone">
3788
+ <input
3789
+ class="pf-v6-c-check__input"
3790
+ type="checkbox"
3791
+ id="card-view-basic-example-gallery-card-9-check"
3792
+ name="card-view-basic-example-gallery-card-9-check"
3793
+ aria-labelledby="card-view-basic-example-gallery-card-9-check-label"
3794
+ />
3795
+ </div>
3796
+ </div>
3797
+ </div>
3798
+ <div class="pf-v6-c-card__title">
3799
+ <h2
3800
+ class="pf-v6-c-card__title-text"
3801
+ id="card-view-basic-example-gallery-card-9-check-label"
3802
+ >Rest</h2>
3803
+ <div class="pf-v6-c-content">
3804
+ <small>Provided by Red Hat</small>
3805
+ </div>
3806
+ </div>
3807
+ <div class="pf-v6-c-card__body">
3808
+ The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport.
3809
+ From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
3810
+ </div>
3811
+ </div>
3812
+ <div
3813
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
3814
+ id="card-view-basic-example-gallery-card-10"
3815
+ >
3816
+ <div class="pf-v6-c-card__header">
3817
+ <img
3818
+ src="/assets/images/camel-swagger-java_200x150.png"
3819
+ width="60px"
3820
+ alt="Logo"
3821
+ />
3822
+ <div class="pf-v6-c-card__actions">
3823
+ <button
3824
+ class="pf-v6-c-menu-toggle pf-m-plain"
3825
+ type="button"
3826
+ aria-expanded="false"
3827
+ aria-label="Menu toggle"
3828
+ id="card-view-basic-example-gallery-card-10-toggle"
3829
+ >
3830
+ <span class="pf-v6-c-menu-toggle__icon">
3831
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3832
+ </span>
3833
+ </button>
3834
+ <div class="pf-v6-c-check pf-m-standalone">
3835
+ <input
3836
+ class="pf-v6-c-check__input"
3837
+ type="checkbox"
3838
+ id="card-view-basic-example-gallery-card-10-check"
3839
+ name="card-view-basic-example-gallery-card-10-check"
3840
+ aria-labelledby="card-view-basic-example-gallery-card-10-check-label"
3841
+ />
3842
+ </div>
3843
+ </div>
3844
+ </div>
3845
+ <div class="pf-v6-c-card__title">
3846
+ <h2
3847
+ class="pf-v6-c-card__title-text"
3848
+ id="card-view-basic-example-gallery-card-10-check-label"
3849
+ >SWAGGER</h2>
3850
+ <div class="pf-v6-c-content">
3851
+ <small>Provided by Red Hat</small>
3852
+ </div>
3853
+ </div>
3854
+ <div
3855
+ class="pf-v6-c-card__body"
3856
+ >Expose REST services and their APIs using Swagger specification.</div>
3857
+ </div>
3858
+ </div>
3859
+ </div>
3860
+ </div>
3861
+ <div class="pf-v6-c-compass__panel pf-m-scrollable">
3862
+ <div class="pf-v6-l-flex pf-m-column pf-m-gap-md">
3863
+ <div class="pf-v6-c-toolbar" id="-toolbar">
3864
+ <div class="pf-v6-c-toolbar__content">
3865
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
3866
+ <div
3867
+ class="pf-v6-c-toolbar__group pf-m-show-on-xl pf-m-toggle-group"
3868
+ >
3869
+ <div class="pf-v6-c-toolbar__toggle">
3870
+ <button
3871
+ class="pf-v6-c-menu-toggle pf-m-plain"
3872
+ type="button"
3873
+ aria-expanded="false"
3874
+ aria-label="Show filters"
3875
+ aria-controls="-toolbar-expandable-content"
3876
+ >
3877
+ <span class="pf-v6-c-menu-toggle__icon">
3878
+ <i class="fas fa-filter" aria-hidden="true"></i>
3879
+ </span>
3880
+ </button>
3881
+ </div>
3882
+ <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
3883
+ <div
3884
+ class="pf-v6-c-menu-toggle pf-m-split-button"
3885
+ id="-toolbar-check"
3886
+ >
3887
+ <label
3888
+ class="pf-v6-c-check pf-m-standalone"
3889
+ for="-toolbar-check-check-input"
3890
+ >
3891
+ <input
3892
+ class="pf-v6-c-check__input"
3893
+ type="checkbox"
3894
+ id="-toolbar-check-check-input"
3895
+ name="-toolbar-check-check-input"
3896
+ aria-label="Standalone check"
3897
+ />
3898
+ </label>
3899
+ <button
3900
+ class="pf-v6-c-menu-toggle__button"
3901
+ type="button"
3902
+ aria-expanded="false"
3903
+ id="-toolbar-menu-toggle-toggle-button"
3904
+ aria-label="Menu toggle"
3905
+ >
3906
+ <span class="pf-v6-c-menu-toggle__controls">
3907
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3908
+ <i
3909
+ class="fas fa-caret-down fa-fw"
3910
+ aria-hidden="true"
3911
+ ></i>
3912
+ </span>
3913
+ </span>
3914
+ </button>
3915
+ </div>
3916
+ </div>
3917
+
3918
+ <div class="pf-v6-c-toolbar__item">
3919
+ <button
3920
+ class="pf-v6-c-menu-toggle"
3921
+ type="button"
3922
+ aria-expanded="false"
3923
+ id="-toolbar-select-checkbox-status"
3924
+ >
3925
+ <span class="pf-v6-c-menu-toggle__text">Status</span>
3926
+ <span class="pf-v6-c-menu-toggle__controls">
3927
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3928
+ <i
3929
+ class="fas fa-caret-down fa-fw"
3930
+ aria-hidden="true"
3931
+ ></i>
3932
+ </span>
3933
+ </span>
3934
+ </button>
3935
+ </div>
3936
+ </div>
3937
+
3938
+ <div
3939
+ class="pf-v6-c-overflow-menu"
3940
+ id="-toolbar-overflow-menu"
3941
+ >
3942
+ <div
3943
+ class="pf-v6-c-overflow-menu__content pf-v6-u-display-none pf-v6-u-display-flex-on-lg"
3944
+ >
3945
+ <div
3946
+ class="pf-v6-c-overflow-menu__group pf-m-button-group"
3947
+ >
3948
+ <div class="pf-v6-c-overflow-menu__item">
3949
+ <button
3950
+ class="pf-v6-c-button pf-m-primary"
3951
+ type="button"
3952
+ >
3953
+ <span class="pf-v6-c-button__text">Create instance</span>
3954
+ </button>
3955
+ </div>
3956
+ </div>
3957
+ </div>
3958
+ <div class="pf-v6-c-overflow-menu__control">
3959
+ <button
3960
+ class="pf-v6-c-menu-toggle pf-m-plain"
3961
+ type="button"
3962
+ aria-expanded="false"
3963
+ aria-label="Menu toggle"
3964
+ id="-toolbar-overflow-menu-toggle"
3965
+ >
3966
+ <span class="pf-v6-c-menu-toggle__icon">
3967
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
3968
+ </span>
3969
+ </button>
3970
+ </div>
3971
+ </div>
3972
+
3973
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
3974
+ <div class="pf-v6-c-pagination pf-m-compact">
3975
+ <div class="pf-v6-c-pagination__page-menu">
3976
+ <button
3977
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
3978
+ type="button"
3979
+ aria-expanded="false"
3980
+ aria-label="Menu toggle"
3981
+ id="-toolbar-top-pagination"
3982
+ >
3983
+ <span class="pf-v6-c-menu-toggle__text">
3984
+ <b>1 - 10</b>&nbsp;of&nbsp;
3985
+ <b>36</b>
3986
+ </span>
3987
+ <span class="pf-v6-c-menu-toggle__controls">
3988
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
3989
+ <i
3990
+ class="fas fa-caret-down fa-fw"
3991
+ aria-hidden="true"
3992
+ ></i>
3993
+ </span>
3994
+ </span>
3995
+ </button>
3996
+ </div>
3997
+ <nav
3998
+ class="pf-v6-c-pagination__nav"
3999
+ aria-label="Toolbar top pagination"
4000
+ >
4001
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
4002
+ <button
4003
+ class="pf-v6-c-button pf-m-plain"
4004
+ type="button"
4005
+ disabled
4006
+ aria-label="Go to previous page"
4007
+ >
4008
+ <span class="pf-v6-c-button__icon">
4009
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4010
+ </span>
4011
+ </button>
4012
+ </div>
4013
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
4014
+ <button
4015
+ class="pf-v6-c-button pf-m-plain"
4016
+ type="button"
4017
+ aria-label="Go to next page"
4018
+ >
4019
+ <span class="pf-v6-c-button__icon">
4020
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4021
+ </span>
4022
+ </button>
4023
+ </div>
4024
+ </nav>
4025
+ </div>
4026
+ </div>
4027
+ </div>
4028
+
4029
+ <div
4030
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
4031
+ id="-toolbar-expandable-content"
4032
+ hidden
4033
+ ></div>
4034
+ </div>
4035
+ </div>
4036
+ <div class="pf-v6-l-gallery pf-m-gutter">
4037
+ <div
4038
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4039
+ id="card-view-basic-example-gallery-card-empty-state"
4040
+ >
4041
+ <div class="pf-v6-l-bullseye">
4042
+ <div class="pf-v6-c-empty-state pf-m-xs">
4043
+ <div class="pf-v6-c-empty-state__content">
4044
+ <i class="fas fa-plus-circle pf-v6-c-empty-state__icon"></i>
4045
+ <div class="pf-v6-c-card__title">
4046
+ <h2
4047
+ class="pf-v6-c-card__title-text pf-m-md"
4048
+ >Add a new card to your page</h2>
4049
+ </div>
4050
+ <button class="pf-v6-c-button pf-m-link" type="button">
4051
+ <span class="pf-v6-c-button__text">Add card</span>
4052
+ </button>
4053
+ </div>
4054
+ </div>
4055
+ </div>
4056
+ </div>
4057
+ <div
4058
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4059
+ id="card-view-basic-example-gallery-card-1"
4060
+ >
4061
+ <div class="pf-v6-c-card__header">
4062
+ <img
4063
+ src="/assets/images/PF-IconLogo.svg"
4064
+ alt="PatternFly logo"
4065
+ />
4066
+ <div class="pf-v6-c-card__actions">
4067
+ <button
4068
+ class="pf-v6-c-menu-toggle pf-m-plain"
4069
+ type="button"
4070
+ aria-expanded="false"
4071
+ aria-label="Menu toggle"
4072
+ id="card-view-basic-example-gallery-card-1-toggle"
4073
+ >
4074
+ <span class="pf-v6-c-menu-toggle__icon">
4075
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4076
+ </span>
4077
+ </button>
4078
+ <div class="pf-v6-c-check pf-m-standalone">
4079
+ <input
4080
+ class="pf-v6-c-check__input"
4081
+ type="checkbox"
4082
+ id="card-view-basic-example-gallery-card-1-check"
4083
+ name="card-view-basic-example-gallery-card-1-check"
4084
+ aria-labelledby="card-view-basic-example-gallery-card-1-check-label"
4085
+ />
4086
+ </div>
4087
+ </div>
4088
+ </div>
4089
+ <div class="pf-v6-c-card__title">
4090
+ <h2
4091
+ class="pf-v6-c-card__title-text"
4092
+ id="card-view-basic-example-gallery-card-1-check-label"
4093
+ >Patternfly</h2>
4094
+ <div class="pf-v6-c-content">
4095
+ <small>Provided by Red Hat</small>
4096
+ </div>
4097
+ </div>
4098
+ <div
4099
+ class="pf-v6-c-card__body"
4100
+ >PatternFly is a community project that promotes design commonality and improves user experience.</div>
4101
+ </div>
4102
+ <div
4103
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4104
+ id="card-view-basic-example-gallery-card-2"
4105
+ >
4106
+ <div class="pf-v6-c-card__header">
4107
+ <img
4108
+ src="/assets/images/activemq-core_200x150.png"
4109
+ width="60px"
4110
+ alt="Logo"
4111
+ />
4112
+ <div class="pf-v6-c-card__actions">
4113
+ <button
4114
+ class="pf-v6-c-menu-toggle pf-m-plain"
4115
+ type="button"
4116
+ aria-expanded="false"
4117
+ aria-label="Menu toggle"
4118
+ id="card-view-basic-example-gallery-card-2-toggle"
4119
+ >
4120
+ <span class="pf-v6-c-menu-toggle__icon">
4121
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4122
+ </span>
4123
+ </button>
4124
+ <div class="pf-v6-c-check pf-m-standalone">
4125
+ <input
4126
+ class="pf-v6-c-check__input"
4127
+ type="checkbox"
4128
+ id="card-view-basic-example-gallery-card-2-check"
4129
+ name="card-view-basic-example-gallery-card-2-check"
4130
+ aria-labelledby="card-view-basic-example-gallery-card-2-check-label"
4131
+ />
4132
+ </div>
4133
+ </div>
4134
+ </div>
4135
+ <div class="pf-v6-c-card__title">
4136
+ <h2
4137
+ class="pf-v6-c-card__title-text"
4138
+ id="card-view-basic-example-gallery-card-2-check-label"
4139
+ >ActiveMq</h2>
4140
+ <div class="pf-v6-c-content">
4141
+ <small>Provided by Red Hat</small>
4142
+ </div>
4143
+ </div>
4144
+ <div
4145
+ class="pf-v6-c-card__body"
4146
+ >The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.</div>
4147
+ </div>
4148
+ <div
4149
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4150
+ id="card-view-basic-example-gallery-card-3"
4151
+ >
4152
+ <div class="pf-v6-c-card__header">
4153
+ <img
4154
+ src="/assets/images/camel-spark_200x150.png"
4155
+ width="60px"
4156
+ alt="Logo"
4157
+ />
4158
+ <div class="pf-v6-c-card__actions">
4159
+ <button
4160
+ class="pf-v6-c-menu-toggle pf-m-plain"
4161
+ type="button"
4162
+ aria-expanded="false"
4163
+ aria-label="Menu toggle"
4164
+ id="card-view-basic-example-gallery-card-3-toggle"
4165
+ >
4166
+ <span class="pf-v6-c-menu-toggle__icon">
4167
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4168
+ </span>
4169
+ </button>
4170
+ <div class="pf-v6-c-check pf-m-standalone">
4171
+ <input
4172
+ class="pf-v6-c-check__input"
4173
+ type="checkbox"
4174
+ id="card-view-basic-example-gallery-card-3-check"
4175
+ name="card-view-basic-example-gallery-card-3-check"
4176
+ aria-labelledby="card-view-basic-example-gallery-card-3-check-label"
4177
+ />
4178
+ </div>
4179
+ </div>
4180
+ </div>
4181
+ <div class="pf-v6-c-card__title">
4182
+ <h2
4183
+ class="pf-v6-c-card__title-text"
4184
+ id="card-view-basic-example-gallery-card-3-check-label"
4185
+ >Apache Spark</h2>
4186
+ <div class="pf-v6-c-content">
4187
+ <small>Provided by Red Hat</small>
4188
+ </div>
4189
+ </div>
4190
+ <div
4191
+ class="pf-v6-c-card__body"
4192
+ >This documentation page covers the Apache Spark component for the Apache Camel.</div>
4193
+ </div>
4194
+ <div
4195
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4196
+ id="card-view-basic-example-gallery-card-4"
4197
+ >
4198
+ <div class="pf-v6-c-card__header">
4199
+ <img
4200
+ src="/assets/images/camel-avro_200x150.png"
4201
+ width="60px"
4202
+ alt="Logo"
4203
+ />
4204
+ <div class="pf-v6-c-card__actions">
4205
+ <button
4206
+ class="pf-v6-c-menu-toggle pf-m-plain"
4207
+ type="button"
4208
+ aria-expanded="false"
4209
+ aria-label="Menu toggle"
4210
+ id="card-view-basic-example-gallery-card-4-toggle"
4211
+ >
4212
+ <span class="pf-v6-c-menu-toggle__icon">
4213
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4214
+ </span>
4215
+ </button>
4216
+ <div class="pf-v6-c-check pf-m-standalone">
4217
+ <input
4218
+ class="pf-v6-c-check__input"
4219
+ type="checkbox"
4220
+ id="card-view-basic-example-gallery-card-4-check"
4221
+ name="card-view-basic-example-gallery-card-4-check"
4222
+ aria-labelledby="card-view-basic-example-gallery-card-4-check-label"
4223
+ />
4224
+ </div>
4225
+ </div>
4226
+ </div>
4227
+ <div class="pf-v6-c-card__title">
4228
+ <h2
4229
+ class="pf-v6-c-card__title-text"
4230
+ id="card-view-basic-example-gallery-card-4-check-label"
4231
+ >Avro</h2>
4232
+ <div class="pf-v6-c-content">
4233
+ <small>Provided by Red Hat</small>
4234
+ </div>
4235
+ </div>
4236
+ <div
4237
+ class="pf-v6-c-card__body"
4238
+ >This component provides a dataformat for avro, which allows serialization and deserialization of messages using Apache Avro’s binary dataformat. Moreover, it provides support for Apache Avro’s rpc, by providing producers and consumers endpoint for using avro over netty or http.</div>
4239
+ </div>
4240
+ <div
4241
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-selected-raised pf-m-compact"
4242
+ id="card-view-basic-example-gallery-card-5"
4243
+ >
4244
+ <div class="pf-v6-c-card__header">
4245
+ <img
4246
+ src="/assets/images/FuseConnector_Icons_AzureServices.png"
4247
+ width="60px"
4248
+ alt="Logo"
4249
+ />
4250
+ <div class="pf-v6-c-card__actions">
4251
+ <button
4252
+ class="pf-v6-c-menu-toggle pf-m-plain"
4253
+ type="button"
4254
+ aria-expanded="false"
4255
+ aria-label="Menu toggle"
4256
+ id="card-view-basic-example-gallery-card-5-toggle"
4257
+ >
4258
+ <span class="pf-v6-c-menu-toggle__icon">
4259
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4260
+ </span>
4261
+ </button>
4262
+ <div class="pf-v6-c-check pf-m-standalone">
4263
+ <input
4264
+ class="pf-v6-c-check__input"
4265
+ type="checkbox"
4266
+ id="card-view-basic-example-gallery-card-5-check"
4267
+ name="card-view-basic-example-gallery-card-5-check"
4268
+ aria-labelledby="card-view-basic-example-gallery-card-5-check-label"
4269
+ />
4270
+ </div>
4271
+ </div>
4272
+ </div>
4273
+ <div class="pf-v6-c-card__title">
4274
+ <h2
4275
+ class="pf-v6-c-card__title-text"
4276
+ id="card-view-basic-example-gallery-card-5-check-label"
4277
+ >Azure Services</h2>
4278
+ <div class="pf-v6-c-content">
4279
+ <small>Provided by Red Hat</small>
4280
+ </div>
4281
+ </div>
4282
+ <div
4283
+ class="pf-v6-c-card__body"
4284
+ >The Camel Components for Windows Azure Services provide connectivity to Azure services from Camel.</div>
4285
+ </div>
4286
+ <div
4287
+ class="pf-v6-c-card pf-m-non-selectable-raised pf-m-compact"
4288
+ id="card-view-basic-example-gallery-card-6"
4289
+ >
4290
+ <div class="pf-v6-c-card__header">
4291
+ <img
4292
+ src="/assets/images/camel-saxon_200x150.png"
4293
+ width="60px"
4294
+ alt="Logo"
4295
+ />
4296
+ <div class="pf-v6-c-card__actions">
4297
+ <button
4298
+ class="pf-v6-c-menu-toggle pf-m-plain"
4299
+ type="button"
4300
+ aria-expanded="false"
4301
+ aria-label="Menu toggle"
4302
+ id="card-view-basic-example-gallery-card-6-toggle"
4303
+ >
4304
+ <span class="pf-v6-c-menu-toggle__icon">
4305
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4306
+ </span>
4307
+ </button>
4308
+ <div class="pf-v6-c-check pf-m-standalone">
4309
+ <input
4310
+ class="pf-v6-c-check__input"
4311
+ type="checkbox"
4312
+ id="card-view-basic-example-gallery-card-6-check"
4313
+ name="card-view-basic-example-gallery-card-6-check"
4314
+ disabled
4315
+ aria-labelledby="card-view-basic-example-gallery-card-6-check-label"
4316
+ />
4317
+ </div>
4318
+ </div>
4319
+ </div>
4320
+ <div class="pf-v6-c-card__title">
4321
+ <h2
4322
+ class="pf-v6-c-card__title-text"
4323
+ id="card-view-basic-example-gallery-card-6-check-label"
4324
+ >Crypto</h2>
4325
+ <div class="pf-v6-c-content">
4326
+ <small>Provided by Red Hat</small>
4327
+ </div>
4328
+ </div>
4329
+ <div
4330
+ class="pf-v6-c-card__body"
4331
+ >For providing flexible endpoints to sign and verify exchanges using the Signature Service of the Java Cryptographic Extension.</div>
4332
+ </div>
4333
+ <div
4334
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4335
+ id="card-view-basic-example-gallery-card-7"
4336
+ >
4337
+ <div class="pf-v6-c-card__header">
4338
+ <img
4339
+ src="/assets/images/camel-dropbox_200x150.png"
4340
+ width="60px"
4341
+ alt="Logo"
4342
+ />
4343
+ <div class="pf-v6-c-card__actions">
4344
+ <button
4345
+ class="pf-v6-c-menu-toggle pf-m-plain"
4346
+ type="button"
4347
+ aria-expanded="false"
4348
+ aria-label="Menu toggle"
4349
+ id="card-view-basic-example-gallery-card-7-toggle"
4350
+ >
4351
+ <span class="pf-v6-c-menu-toggle__icon">
4352
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4353
+ </span>
4354
+ </button>
4355
+ <div class="pf-v6-c-check pf-m-standalone">
4356
+ <input
4357
+ class="pf-v6-c-check__input"
4358
+ type="checkbox"
4359
+ id="card-view-basic-example-gallery-card-7-check"
4360
+ name="card-view-basic-example-gallery-card-7-check"
4361
+ aria-labelledby="card-view-basic-example-gallery-card-7-check-label"
4362
+ />
4363
+ </div>
4364
+ </div>
4365
+ </div>
4366
+ <div class="pf-v6-c-card__title">
4367
+ <h2
4368
+ class="pf-v6-c-card__title-text"
4369
+ id="card-view-basic-example-gallery-card-7-check-label"
4370
+ >DropBox</h2>
4371
+ <div class="pf-v6-c-content">
4372
+ <small>Provided by Red Hat</small>
4373
+ </div>
4374
+ </div>
4375
+ <div
4376
+ class="pf-v6-c-card__body"
4377
+ >The dropbox: component allows you to treat Dropbox remote folders as a producer or consumer of messages.</div>
4378
+ </div>
4379
+ <div
4380
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4381
+ id="card-view-basic-example-gallery-card-8"
4382
+ >
4383
+ <div class="pf-v6-c-card__header">
4384
+ <img
4385
+ src="/assets/images/camel-infinispan_200x150.png"
4386
+ width="60px"
4387
+ alt="Logo"
4388
+ />
4389
+ <div class="pf-v6-c-card__actions">
4390
+ <button
4391
+ class="pf-v6-c-menu-toggle pf-m-plain"
4392
+ type="button"
4393
+ aria-expanded="false"
4394
+ aria-label="Menu toggle"
4395
+ id="card-view-basic-example-gallery-card-8-toggle"
4396
+ >
4397
+ <span class="pf-v6-c-menu-toggle__icon">
4398
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4399
+ </span>
4400
+ </button>
4401
+ <div class="pf-v6-c-check pf-m-standalone">
4402
+ <input
4403
+ class="pf-v6-c-check__input"
4404
+ type="checkbox"
4405
+ id="card-view-basic-example-gallery-card-8-check"
4406
+ name="card-view-basic-example-gallery-card-8-check"
4407
+ aria-labelledby="card-view-basic-example-gallery-card-8-check-label"
4408
+ />
4409
+ </div>
4410
+ </div>
4411
+ </div>
4412
+ <div class="pf-v6-c-card__title">
4413
+ <h2
4414
+ class="pf-v6-c-card__title-text"
4415
+ id="card-view-basic-example-gallery-card-8-check-label"
4416
+ >JBoss Data Grid</h2>
4417
+ <div class="pf-v6-c-content">
4418
+ <small>Provided by Red Hat</small>
4419
+ </div>
4420
+ </div>
4421
+ <div
4422
+ class="pf-v6-c-card__body"
4423
+ >Read or write to a fully-supported distributed cache and data grid for faster integration services.</div>
4424
+ </div>
4425
+ <div
4426
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4427
+ id="card-view-basic-example-gallery-card-9"
4428
+ >
4429
+ <div class="pf-v6-c-card__header">
4430
+ <img
4431
+ src="/assets/images/FuseConnector_Icons_REST.png"
4432
+ width="60px"
4433
+ alt="Logo"
4434
+ />
4435
+ <div class="pf-v6-c-card__actions">
4436
+ <button
4437
+ class="pf-v6-c-menu-toggle pf-m-plain"
4438
+ type="button"
4439
+ aria-expanded="false"
4440
+ aria-label="Menu toggle"
4441
+ id="card-view-basic-example-gallery-card-9-toggle"
4442
+ >
4443
+ <span class="pf-v6-c-menu-toggle__icon">
4444
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4445
+ </span>
4446
+ </button>
4447
+ <div class="pf-v6-c-check pf-m-standalone">
4448
+ <input
4449
+ class="pf-v6-c-check__input"
4450
+ type="checkbox"
4451
+ id="card-view-basic-example-gallery-card-9-check"
4452
+ name="card-view-basic-example-gallery-card-9-check"
4453
+ aria-labelledby="card-view-basic-example-gallery-card-9-check-label"
4454
+ />
4455
+ </div>
4456
+ </div>
4457
+ </div>
4458
+ <div class="pf-v6-c-card__title">
4459
+ <h2
4460
+ class="pf-v6-c-card__title-text"
4461
+ id="card-view-basic-example-gallery-card-9-check-label"
4462
+ >Rest</h2>
4463
+ <div class="pf-v6-c-content">
4464
+ <small>Provided by Red Hat</small>
4465
+ </div>
4466
+ </div>
4467
+ <div class="pf-v6-c-card__body">
4468
+ The rest component allows to define REST endpoints (consumer) using the Rest DSL and plugin to other Camel components as the REST transport.
4469
+ From Camel 2.18 onwards the rest component can also be used as a client (producer) to call REST services.
4470
+ </div>
4471
+ </div>
4472
+ <div
4473
+ class="pf-v6-c-card pf-m-selectable-raised pf-m-compact"
4474
+ id="card-view-basic-example-gallery-card-10"
4475
+ >
4476
+ <div class="pf-v6-c-card__header">
4477
+ <img
4478
+ src="/assets/images/camel-swagger-java_200x150.png"
4479
+ width="60px"
4480
+ alt="Logo"
4481
+ />
4482
+ <div class="pf-v6-c-card__actions">
4483
+ <button
4484
+ class="pf-v6-c-menu-toggle pf-m-plain"
4485
+ type="button"
4486
+ aria-expanded="false"
4487
+ aria-label="Menu toggle"
4488
+ id="card-view-basic-example-gallery-card-10-toggle"
4489
+ >
4490
+ <span class="pf-v6-c-menu-toggle__icon">
4491
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4492
+ </span>
4493
+ </button>
4494
+ <div class="pf-v6-c-check pf-m-standalone">
4495
+ <input
4496
+ class="pf-v6-c-check__input"
4497
+ type="checkbox"
4498
+ id="card-view-basic-example-gallery-card-10-check"
4499
+ name="card-view-basic-example-gallery-card-10-check"
4500
+ aria-labelledby="card-view-basic-example-gallery-card-10-check-label"
4501
+ />
4502
+ </div>
4503
+ </div>
4504
+ </div>
4505
+ <div class="pf-v6-c-card__title">
4506
+ <h2
4507
+ class="pf-v6-c-card__title-text"
4508
+ id="card-view-basic-example-gallery-card-10-check-label"
4509
+ >SWAGGER</h2>
4510
+ <div class="pf-v6-c-content">
4511
+ <small>Provided by Red Hat</small>
4512
+ </div>
4513
+ </div>
4514
+ <div
4515
+ class="pf-v6-c-card__body"
4516
+ >Expose REST services and their APIs using Swagger specification.</div>
4517
+ </div>
4518
+ </div>
4519
+ </div>
4520
+ </div>
4521
+ </div>
4522
+ </div>
4523
+ </div>
4524
+ <div class="pf-v6-c-compass__sidebar pf-m-end">
4525
+ <div class="pf-v6-c-compass__panel pf-m-pill">
4526
+ <div class="pf-v6-c-action-list pf-m-icons pf-m-vertical">
4527
+ <div class="pf-v6-c-action-list__item">
4528
+ <button
4529
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4530
+ type="button"
4531
+ aria-label="Help"
4532
+ >
4533
+ <span class="pf-v6-c-button__icon">
4534
+ <svg
4535
+ class="pf-v6-svg"
4536
+ viewBox="0 0 512 512"
4537
+ fill="currentColor"
4538
+ role="img"
4539
+ width="1em"
4540
+ height="1em"
4541
+ aria-hidden="true"
4542
+ >
4543
+ <path
4544
+ d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm107.244-255.2c0 67.052-72.421 68.084-72.421 92.863V300c0 6.627-5.373 12-12 12h-45.647c-6.627 0-12-5.373-12-12v-8.659c0-35.745 27.1-50.034 47.579-61.516 17.561-9.845 28.324-16.541 28.324-29.579 0-17.246-21.999-28.693-39.784-28.693-23.189 0-33.894 10.977-48.942 29.969-4.057 5.12-11.46 6.071-16.666 2.124l-27.824-21.098c-5.107-3.872-6.251-11.066-2.644-16.363C184.846 131.491 214.94 112 261.794 112c49.071 0 101.45 38.304 101.45 88.8zM298 368c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42z"
4545
+ />
4546
+ </svg>
4547
+ </span>
4548
+ </button>
4549
+ </div>
4550
+ <div class="pf-v6-c-action-list__item">
4551
+ <button
4552
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4553
+ type="button"
4554
+ aria-label="User profile"
4555
+ >
4556
+ <span class="pf-v6-c-button__icon">
4557
+ <svg
4558
+ class="pf-v6-svg"
4559
+ viewBox="0 0 448 512"
4560
+ fill="currentColor"
4561
+ role="img"
4562
+ width="1em"
4563
+ height="1em"
4564
+ aria-hidden="true"
4565
+ >
4566
+ <path
4567
+ d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z"
4568
+ />
4569
+ </svg>
4570
+ </span>
4571
+ </button>
4572
+ </div>
4573
+ <div class="pf-v6-c-action-list__item">
4574
+ <button
4575
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4576
+ type="button"
4577
+ aria-label="Send"
4578
+ >
4579
+ <span class="pf-v6-c-button__icon">
4580
+ <svg
4581
+ class="pf-v6-svg"
4582
+ viewBox="0 0 512 512"
4583
+ fill="currentColor"
4584
+ role="img"
4585
+ width="1em"
4586
+ height="1em"
4587
+ aria-hidden="true"
4588
+ >
4589
+ <path
4590
+ d="M440 6.5L24 246.4c-34.4 19.9-31.1 70.8 5.7 85.9L144 379.6V464c0 46.4 59.2 65.5 86.6 28.6l43.8-59.1 111.9 46.2c5.9 2.4 12.1 3.6 18.3 3.6 8.2 0 16.3-2.1 23.6-6.2 12.8-7.2 21.6-20 23.9-34.5l59.4-387.2c6.1-40.1-36.9-68.8-71.5-48.9zM192 464v-64.6l36.6 15.1L192 464zm212.6-28.7l-153.8-63.5L391 169.5c10.7-15.5-9.5-33.5-23.7-21.2L155.8 332.6 48 288 464 48l-59.4 387.3z"
4591
+ />
4592
+ </svg>
4593
+ </span>
4594
+ </button>
4595
+ </div>
4596
+ </div>
4597
+ </div>
4598
+ </div>
4599
+ <div class="pf-v6-c-compass__footer">
4600
+ <div
4601
+ class="pf-v6-c-compass__panel pf-m-no-border pf-m-pill pf-m-no-padding"
4602
+ >chatbot message bar</div>
4603
+ </div>
4604
+ </div>
4605
+
4606
+ ```
4607
+
4608
+ ## Documentation